@esri/solutions-components 0.8.5 → 0.8.6

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

@@ -19,6 +19,7 @@
  * limitations under the License.
  */
 import { h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
 import { PopupUtils } from "../../utils/popupUtils";
 import { getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils";
 import { getLocaleComponentStrings } from "../../utils/locale";
@@ -29,6 +30,7 @@ export class FeatureList {
         this.noFeaturesFoundMsg = undefined;
         this.pageSize = 100;
         this.highlightOnMap = false;
+        this.highlightOnHover = false;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -48,6 +50,16 @@ export class FeatureList {
     }
     //--------------------------------------------------------------------------
     //
+    //  Methods (public)
+    /**
+     * Refresh the feature list which will fetch the latest features and update the features list
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh() {
+        await this.initializeFeatureItems();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -56,6 +68,7 @@ export class FeatureList {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this.initModules();
         await this._getTranslations();
         this._isLoading = true;
         this._popupUtils = new PopupUtils();
@@ -82,6 +95,17 @@ export class FeatureList {
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+   * Load esri javascript api modules
+   * @returns Promise resolving when function is done
+   * @protected
+   */
+    async initModules() {
+        const [Color] = await loadModules([
+            "esri/Color"
+        ]);
+        this.Color = Color;
+    }
     /**
      * Initialize the features list using the selected layer
      * @protected
@@ -117,10 +141,7 @@ export class FeatureList {
      */
     async featureClicked(event, selectedFeature) {
         //clear previous highlight and remove the highlightHandle
-        if (this.highlightOnMap && this._highlightHandle) {
-            this._highlightHandle.remove();
-            this._highlightHandle = null;
-        }
+        this.clearHighlights();
         //highlight on map only if it is selected item
         if (this.highlightOnMap) {
             const selectedFeatureObjectId = Number(event.target.value);
@@ -129,6 +150,31 @@ export class FeatureList {
         }
         this.featureSelect.emit(selectedFeature);
     }
+    /**
+     * On feature hover in feature list highlight the feature on the map
+     * @param selectedFeature mouseovered feature graphic
+     * @protected
+     */
+    async onFeatureHover(selectedFeature) {
+        //clear previous highlight and remove the highlightHandle
+        this.clearHighlights();
+        if (this.highlightOnHover) {
+            const oId = selectedFeature.getObjectId();
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            selectedLayerView.highlightOptions = { color: new this.Color("#FFFF00") };
+            this._highlightHandle = selectedLayerView.highlight([oId]);
+        }
+    }
+    /**
+     * Clears the highlight
+     * @protected
+     */
+    clearHighlights() {
+        //if a feature is already highlighted, then remove the highlight
+        if (this._highlightHandle) {
+            this._highlightHandle.remove();
+        }
+    }
     /**
      * Query the selected feature layer, in descending order of object id's
      * @param page 0th page number in the pagination item
@@ -179,7 +225,7 @@ export class FeatureList {
         const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      * Fetches the component's translations
@@ -292,6 +338,24 @@ export class FeatureList {
                 "attribute": "highlight-on-map",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "highlightOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight when hover on Feature in list"
+                },
+                "attribute": "highlight-on-hover",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -326,6 +390,30 @@ export class FeatureList {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refresh the feature list which will fetch the latest features and update the features list",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the operation is complete"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -40,7 +40,7 @@
   overflow: auto;
 }
 
-.esri-features__footer {
+.feature-node .esri-features__footer {
   display: none !important;
 }
 

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

@@ -140,7 +140,7 @@ export class InfoCard {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
             h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------

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

@@ -79,7 +79,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._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
+            h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -127,7 +127,7 @@ export class LayerList {
             }
         });
         await Promise.all(def).then(() => {
-            const editableLayerIds = this.getEditableIds(this._layerItemsHash);
+            const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
             this._mapLayerIds = editableLayerIds.reverse();
             this.handleNoLayersToDisplay();
         }, () => {
@@ -143,17 +143,17 @@ export class LayerList {
         this.layersListLoaded.emit(this._mapLayerIds);
     }
     /**
-     * Returns the ids of all OR configured layers that support edits with the update capability
+     * Returns the ids of all OR configured layers that needs to be shown in the list
      * @param hash each layer item details
      * @returns array of layer ids
      */
-    getEditableIds(hash) {
+    getLayersToBeShownInList(hash) {
         var _a;
         const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
-            let showLayer = hash[cur].supportsAdd;
+            let showLayer = true;
             if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
-                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
+                showLayer = configuredLayers.indexOf(cur) > -1;
             }
             if (showLayer) {
                 prev.push(cur);

package/dist/collection/components/map-draw-tools/map-draw-tools.js

@@ -170,7 +170,7 @@ export class MapDrawTools {
         }
         else {
             this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
-            state.managedLayers.push(title);
+            state.managedLayers[title] = "sketch";
             this.mapView.map.layers.add(this._sketchGraphicsLayer);
         }
         if (this.graphics && this.graphics.length > 0) {

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -297,7 +297,7 @@ export class MapLayerPicker {
     _validLayer(id) {
         var _a;
         const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
-        return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
+        return name && Object.keys(state.managedLayers).indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
             this.enabledLayerIds.indexOf(id) > -1 : true);
     }
     /**

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -427,7 +427,7 @@ export class MapSelectTools {
             }
             else {
                 this._bufferGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
-                state.managedLayers.push(title);
+                state.managedLayers[title] = "buffer";
                 const sketchIndex = this.mapView.map.layers.findIndex((l) => l.title === this._translations.sketchLayer);
                 if (sketchIndex > -1) {
                     this.mapView.map.layers.add(this._bufferGraphicsLayer, sketchIndex);

package/dist/collection/components/public-notification/public-notification.js

@@ -59,6 +59,7 @@ export class PublicNotification {
         this.sketchLineSymbol = undefined;
         this.sketchPointSymbol = undefined;
         this.sketchPolygonSymbol = undefined;
+        this._exportGraphics = false;
         this._addMap = false;
         this._addResults = true;
         this._addTitle = false;
@@ -137,6 +138,7 @@ export class PublicNotification {
         if (pageType === EPageType.EXPORT) {
             this._fetchingData = true;
             this._numDuplicates = await this._getNumDuplicates();
+            this._updateExportGraphics();
             this._fetchingData = false;
         }
         this._clearHighlight();
@@ -144,6 +146,9 @@ export class PublicNotification {
             // clear any draw shapes or buffers
             await this._clearSelection();
         }
+        if (oldPageType === EPageType.EXPORT) {
+            this._removeExportGraphics();
+        }
         if (pageType !== EPageType.SELECT) {
             return this._highlightFeatures();
         }
@@ -207,12 +212,14 @@ export class PublicNotification {
      * @protected
      */
     async _initModules() {
-        const [geometryEngine, jsonUtils] = await loadModules([
+        const [geometryEngine, jsonUtils, graphic] = await loadModules([
             "esri/geometry/geometryEngine",
-            "esri/symbols/support/jsonUtils"
+            "esri/symbols/support/jsonUtils",
+            "esri/Graphic"
         ]);
         this._geometryEngine = geometryEngine;
         this._jsonUtils = jsonUtils;
+        this.Graphic = graphic;
     }
     /**
      * Load the search configuration
@@ -540,9 +547,107 @@ export class PublicNotification {
     _getExportOptions() {
         const displayClass = this._exportType === EExportType.PDF ? "display-block" : "display-none";
         const titleOptionsClass = this._addTitle ? "display-block" : "display-none";
+        const graphicsOptionsClass = this._addMap ? "display-flex" : "display-none";
         const title = this._titleValue ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
         const formatOptionsClass = this._addResults ? "" : "display-none";
-        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
+        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
+    }
+    /**
+     * Toggle the _addMap state variable and update the graphics on the map
+     *
+     * @protected
+     */
+    _handleAddMapChange() {
+        this._addMap = !this._addMap;
+        this._updateExportGraphics();
+    }
+    /**
+     * Toggle the _exportGraphics state variable and update the graphics on the map
+     *
+     * @protected
+     */
+    _handleExportGraphicsChange() {
+        this._exportGraphics = !this._exportGraphics;
+        this._updateExportGraphics();
+    }
+    /**
+     * Get the "sketch" or "buffer" graphics layer
+     *
+     * @param type The type of managed layer to fetch "sketch" | "buffer"
+     *
+     * @protected
+     */
+    _getManagedLayer(type) {
+        let layer;
+        Object.keys(state.managedLayers).some((k) => {
+            const i = this.mapView.map.layers.findIndex((l) => l.title === k);
+            if (state.managedLayers[k] === type) {
+                layer = this.mapView.map.layers.getItemAt(i);
+                return true;
+            }
+        });
+        return layer;
+    }
+    /**
+     * Update the export graphics by adding or removeing them
+     *
+     * @param clear When true the graphics layers will be cleared prior to adding any new graphics, defaults to false
+     *
+     * @protected
+     */
+    _updateExportGraphics(clear = false) {
+        if (clear || !this._exportGraphics || !this._addMap) {
+            this._removeExportGraphics();
+        }
+        if (this._exportGraphics && this._addMap) {
+            this._addExportGraphics();
+        }
+    }
+    /**
+     * Remove all buffer and sketch graphics
+     *
+     * @protected
+     */
+    _removeExportGraphics() {
+        const sketchLayer = this._getManagedLayer("sketch");
+        const bufferLayer = this._getManagedLayer("buffer");
+        if (sketchLayer) {
+            sketchLayer.graphics.removeAll();
+        }
+        if (bufferLayer) {
+            bufferLayer.graphics.removeAll();
+        }
+    }
+    /**
+     * Add all buffer and sketch graphics that are flagged for download
+     *
+     * @protected
+     */
+    _addExportGraphics() {
+        const sketchLayer = this._getManagedLayer("sketch");
+        const bufferLayer = this._getManagedLayer("buffer");
+        this._selectionSets.forEach(ss => {
+            if (ss.download) {
+                if (sketchLayer) {
+                    sketchLayer.graphics.add(ss.sketchGraphic);
+                }
+                if (bufferLayer) {
+                    const symbol = {
+                        type: "simple-fill",
+                        color: this.bufferColor,
+                        outline: {
+                            color: this.bufferOutlineColor,
+                            width: 1
+                        }
+                    };
+                    const bufferGraphic = new this.Graphic({
+                        geometry: ss.buffer,
+                        symbol
+                    });
+                    bufferLayer.graphics.add(bufferGraphic);
+                }
+            }
+        });
     }
     /**
      * Render the refine page
@@ -636,6 +741,7 @@ export class PublicNotification {
             isActive = ss.download ? true : isActive;
             return ss;
         });
+        this._updateExportGraphics(true);
         this._downloadActive = isActive;
         this._fetchingData = true;
         this._numDuplicates = await this._getNumDuplicates();
@@ -1251,6 +1357,7 @@ export class PublicNotification {
     }
     static get states() {
         return {
+            "_exportGraphics": {},
             "_addMap": {},
             "_addResults": {},
             "_addTitle": {},

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

@@ -163,7 +163,7 @@
         demo.reportButtonText = "Report an incident";
         demo.enableNewReports = true;
         demo.theme = "light";
-        demo.reportSubmittedMessage = "Thank you";
+        demo.reportSubmittedMessage = "Thank you! Your request was successfully submitted";
         //Select reporting layers -
         //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; //Se mapping
         //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers

package/dist/collection/utils/interfaces.ts

@@ -565,3 +565,10 @@ export interface IPopupUtils {
 export interface IConsentResponse {
   granted: boolean;
 }
+
+/**
+ * Key is the layer name and the value is the type of layer
+ */
+export interface IManagedLayers {
+  [key: string]: "buffer" | "sketch";
+}

package/dist/collection/utils/publicNotificationStore.js

@@ -20,8 +20,8 @@
  */
 import { createStore } from "@stencil/store";
 const { state, onChange } = createStore({
-    // List of layers added and managed by the component
-    managedLayers: [],
+    // Key Value pair whose Key is the layer name and the Value is the type of layer ("buffer" | "sketch")
+    managedLayers: {},
     // List of tables added and managed by the component
     managedTables: [],
     // Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle

package/dist/collection/utils/publicNotificationStore.ts

@@ -15,10 +15,11 @@
  */
 
 import { createStore } from "@stencil/store";
+import { IManagedLayers } from "./interfaces";
 
 const { state, onChange } = createStore({
-	// List of layers added and managed by the component
-	managedLayers: [],
+	// Key Value pair whose Key is the layer name and the Value is the type of layer ("buffer" | "sketch")
+	managedLayers: {} as IManagedLayers,
 	// List of tables added and managed by the component
 	managedTables: [],
 	// Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle