@esri/solutions-components 0.6.11 → 0.6.12

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

@@ -20,7 +20,6 @@
  */
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { EExpandType } from "../../utils/interfaces";
 export class MapTools {
   constructor() {
     this.layout = "vertical";
@@ -29,6 +28,7 @@ export class MapTools {
     this._translations = undefined;
     this._showTools = true;
     this._showBasemapWidget = false;
+    this._showFullscreen = false;
     this._showLegendWidget = false;
     this._showSearchWidget = false;
   }
@@ -51,6 +51,18 @@ export class MapTools {
       this.mapView.ui.remove(this._basemapElement.basemapWidget);
     }
   }
+  /**
+   * When the _showBasemapWidget property is true display the basemap gallery
+   */
+  async _showFullscreenWatchHandler(v) {
+    const fs = this._fullscreenElement.fullscreenWidget;
+    if (v) {
+      fs.viewModel.enter();
+    }
+    else {
+      fs.viewModel.exit();
+    }
+  }
   /**
    * When the _showLegendWidget property is true display the search widget
    */
@@ -81,6 +93,16 @@ export class MapTools {
   }
   //--------------------------------------------------------------------------
   //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
   //  Functions (lifecycle)
   //
   //--------------------------------------------------------------------------
@@ -99,7 +121,11 @@ export class MapTools {
     const searchClass = this._showSearchWidget ? "" : "display-none";
     const basemapClass = this._showBasemapWidget ? "" : "display-none";
     const legendClass = this._showLegendWidget ? "" : "display-none";
-    return (h(Host, null, h("div", null, h("calcite-action", { alignment: "center", class: "border square-40", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, scale: "s", text: "" }), h("calcite-action-bar", { class: `width-40 border margin-top-1-2 ${toolsClass}`, "expand-disabled": true, layout: this.layout }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup("expand", false, this._translations.expand, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } })));
+    const fullscreenClass = this._showFullscreen ? "" : "display-none";
+    const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
+    const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
+    const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;
+    return (h(Host, null, h("div", null, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -119,7 +145,7 @@ export class MapTools {
    * @protected
    */
   _getActionGroup(icon, disabled, tip, func) {
-    return (h("calcite-action-group", { class: "square-40-41" }, h("calcite-action", { alignment: "center", class: "square-40", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, scale: "s", text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "trailing", "reference-element": icon }, h("span", null, tip))));
+    return (h("div", { class: "border-bottom" }, h("calcite-action", { alignment: "center", class: "square-40", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, scale: "s", text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "trailing", "reference-element": icon }, h("span", null, tip))));
   }
   // need to discuss this with the team
   _showLegend() {
@@ -143,14 +169,14 @@ export class MapTools {
     this._showTools = false;
   }
   /**
-   * Emit the expand map event
+   * Enter/Exit fullscreen mode
    *
    * @returns void
    *
    * @protected
    */
   _expand() {
-    this.expandMap.emit(EExpandType.EXPAND);
+    this._showFullscreen = !this._showFullscreen;
   }
   /**
    * Show/Hide the map tools
@@ -257,39 +283,19 @@ export class MapTools {
       "_translations": {},
       "_showTools": {},
       "_showBasemapWidget": {},
+      "_showFullscreen": {},
       "_showLegendWidget": {},
       "_showSearchWidget": {}
     };
   }
-  static get events() {
-    return [{
-        "method": "expandMap",
-        "name": "expandMap",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the expand button is clicked"
-        },
-        "complexType": {
-          "original": "EExpandType",
-          "resolved": "EExpandType.COLLAPSE | EExpandType.EXPAND",
-          "references": {
-            "EExpandType": {
-              "location": "import",
-              "path": "../../utils/interfaces",
-              "id": "src/utils/interfaces.ts::EExpandType"
-            }
-          }
-        }
-      }];
-  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
         "propName": "_showBasemapWidget",
         "methodName": "_showBasemapWidgetWatchHandler"
+      }, {
+        "propName": "_showFullscreen",
+        "methodName": "_showFullscreenWatchHandler"
       }, {
         "propName": "_showLegendWidget",
         "methodName": "_showLegendWidgetWatchHandler"

package/dist/collection/components/pdf-download/pdf-download.js

@@ -88,7 +88,7 @@ export class PdfDownload {
   render() {
     return (h(Host, null, h("calcite-select", { disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } })));
   }
-  componentDidRender() {
+  componentDidLoad() {
     // Render the options outside of Stencil's rendering so that it doesn't mangle RTL text with embedded LTR
     this._renderOptions();
   }

package/dist/collection/utils/interfaces.js

@@ -59,11 +59,6 @@ export var ESelectionType;
   ESelectionType["POLY"] = "POLY";
   ESelectionType["RECT"] = "RECT";
 })(ESelectionType || (ESelectionType = {}));
-export var EExpandType;
-(function (EExpandType) {
-  EExpandType["EXPAND"] = "EXPAND";
-  EExpandType["COLLAPSE"] = "COLLAPSE";
-})(EExpandType || (EExpandType = {}));
 export var EWorkflowType;
 (function (EWorkflowType) {
   EWorkflowType["SEARCH"] = "SEARCH";

package/dist/collection/utils/interfaces.ts

@@ -60,11 +60,6 @@ export enum ESelectionType {
   RECT="RECT"
 }
 
-export enum EExpandType {
-  EXPAND="EXPAND",
-  COLLAPSE="COLLAPSE"
-}
-
 export enum EWorkflowType {
   SEARCH="SEARCH",
   SELECT="SELECT",

package/dist/components/crowdsource-manager.js

@@ -6,42 +6,43 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { a as ELayoutMode } from './interfaces.js';
-import { d as defineCustomElement$G } from './basemap-gallery2.js';
-import { d as defineCustomElement$F } from './action.js';
-import { d as defineCustomElement$E } from './action-bar.js';
-import { d as defineCustomElement$D } from './action-group.js';
-import { d as defineCustomElement$C } from './action-menu.js';
-import { d as defineCustomElement$B } from './alert.js';
-import { d as defineCustomElement$A } from './button.js';
-import { d as defineCustomElement$z } from './chip.js';
-import { d as defineCustomElement$y } from './combobox.js';
-import { d as defineCustomElement$x } from './combobox-item.js';
-import { d as defineCustomElement$w } from './dropdown.js';
-import { d as defineCustomElement$v } from './dropdown-group.js';
-import { d as defineCustomElement$u } from './dropdown-item.js';
-import { d as defineCustomElement$t } from './filter2.js';
-import { d as defineCustomElement$s } from './handle.js';
-import { d as defineCustomElement$r } from './icon.js';
-import { d as defineCustomElement$q } from './input.js';
-import { d as defineCustomElement$p } from './link.js';
-import { d as defineCustomElement$o } from './list.js';
-import { d as defineCustomElement$n } from './list-item2.js';
-import { d as defineCustomElement$m } from './loader.js';
-import { d as defineCustomElement$l } from './notice.js';
-import { d as defineCustomElement$k } from './option.js';
-import { d as defineCustomElement$j } from './panel.js';
-import { d as defineCustomElement$i } from './popover.js';
-import { d as defineCustomElement$h } from './progress.js';
-import { d as defineCustomElement$g } from './scrim.js';
-import { d as defineCustomElement$f } from './select.js';
-import { d as defineCustomElement$e } from './shell.js';
-import { d as defineCustomElement$d } from './stack.js';
-import { d as defineCustomElement$c } from './tooltip.js';
-import { d as defineCustomElement$b } from './card-manager2.js';
-import { d as defineCustomElement$a } from './edit-card2.js';
-import { d as defineCustomElement$9 } from './info-card2.js';
-import { d as defineCustomElement$8 } from './layer-table2.js';
-import { d as defineCustomElement$7 } from './map-card2.js';
+import { d as defineCustomElement$H } from './basemap-gallery2.js';
+import { d as defineCustomElement$G } from './action.js';
+import { d as defineCustomElement$F } from './action-bar.js';
+import { d as defineCustomElement$E } from './action-group.js';
+import { d as defineCustomElement$D } from './action-menu.js';
+import { d as defineCustomElement$C } from './alert.js';
+import { d as defineCustomElement$B } from './button.js';
+import { d as defineCustomElement$A } from './chip.js';
+import { d as defineCustomElement$z } from './combobox.js';
+import { d as defineCustomElement$y } from './combobox-item.js';
+import { d as defineCustomElement$x } from './dropdown.js';
+import { d as defineCustomElement$w } from './dropdown-group.js';
+import { d as defineCustomElement$v } from './dropdown-item.js';
+import { d as defineCustomElement$u } from './filter2.js';
+import { d as defineCustomElement$t } from './handle.js';
+import { d as defineCustomElement$s } from './icon.js';
+import { d as defineCustomElement$r } from './input.js';
+import { d as defineCustomElement$q } from './link.js';
+import { d as defineCustomElement$p } from './list.js';
+import { d as defineCustomElement$o } from './list-item2.js';
+import { d as defineCustomElement$n } from './loader.js';
+import { d as defineCustomElement$m } from './notice.js';
+import { d as defineCustomElement$l } from './option.js';
+import { d as defineCustomElement$k } from './panel.js';
+import { d as defineCustomElement$j } from './popover.js';
+import { d as defineCustomElement$i } from './progress.js';
+import { d as defineCustomElement$h } from './scrim.js';
+import { d as defineCustomElement$g } from './select.js';
+import { d as defineCustomElement$f } from './shell.js';
+import { d as defineCustomElement$e } from './stack.js';
+import { d as defineCustomElement$d } from './tooltip.js';
+import { d as defineCustomElement$c } from './card-manager2.js';
+import { d as defineCustomElement$b } from './edit-card2.js';
+import { d as defineCustomElement$a } from './info-card2.js';
+import { d as defineCustomElement$9 } from './layer-table2.js';
+import { d as defineCustomElement$8 } from './map-card2.js';
+import { d as defineCustomElement$7 } from './map-fullscreen2.js';
 import { d as defineCustomElement$6 } from './map-layer-picker2.js';
 import { d as defineCustomElement$5 } from './map-legend2.js';
 import { d as defineCustomElement$4 } from './map-picker2.js';
@@ -54,6 +55,11 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   constructor() {
     super();
     this.__registerHost();
+    /**
+     * boolean: When true the map view will be set after render due to popup obstructing the view
+     * MapView.when is not fired when mapView is not currently visible
+     */
+    this._shouldSetMapView = false;
     this.classicGrid = false;
     this.showNewestFirst = true;
     this.hideMap = false;
@@ -91,13 +97,14 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
    * Listen for mapChanged event to be fired then store the new mapView so components will be updated
    */
   async mapChanged(evt) {
-    const mapChange = evt.detail;
-    // close popup by default when the map changes otherwise other components that rely on the view don't work since it
-    // doesn't seem to fully load when it's not visible
-    this._expandPopup = false;
-    this._mapInfo = this._getMapInfo(mapChange.id);
-    this._mapView = mapChange.mapView;
-    this._mapView.popupEnabled = false;
+    this._mapChange = evt.detail;
+    if (this._expandPopup) {
+      this._shouldSetMapView = true;
+      this._expandPopup = false;
+    }
+    else {
+      this._setMapView();
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -118,6 +125,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   render() {
     return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
   }
+  /**
+   * Called after each render
+   * Used to delay the setting of the mapView when the popup is expaneded and obstructs the view
+   */
+  componentDidRender() {
+    if (this._shouldSetMapView) {
+      this._shouldSetMapView = false;
+      this._setMapView();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
@@ -328,6 +345,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     });
     return mapInfo;
   }
+  /**
+   * Set the current map info when maps change
+   *
+   * @protected
+   */
+  _setMapView() {
+    this._mapInfo = this._getMapInfo(this._mapChange.id);
+    this._mapView = this._mapChange.mapView;
+    this._mapView.popupEnabled = false;
+  }
   /**
    * Fetches the component's translations
    *
@@ -357,7 +384,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["crowdsource-manager", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-link", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-stack", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "map-card", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
+  const components = ["crowdsource-manager", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-link", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-stack", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "map-card", "map-fullscreen", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
   components.forEach(tagName => { switch (tagName) {
     case "crowdsource-manager":
       if (!customElements.get(tagName)) {
@@ -366,180 +393,185 @@ function defineCustomElement$1() {
       break;
     case "basemap-gallery":
       if (!customElements.get(tagName)) {
-        defineCustomElement$G();
+        defineCustomElement$H();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$F();
+        defineCustomElement$G();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$E();
+        defineCustomElement$F();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$D();
+        defineCustomElement$E();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$C();
+        defineCustomElement$D();
       }
       break;
     case "calcite-alert":
       if (!customElements.get(tagName)) {
-        defineCustomElement$B();
+        defineCustomElement$C();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$A();
+        defineCustomElement$B();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$z();
+        defineCustomElement$A();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$y();
+        defineCustomElement$z();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$x();
+        defineCustomElement$y();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$w();
+        defineCustomElement$x();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$v();
+        defineCustomElement$w();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$v();
       }
       break;
     case "calcite-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$u();
       }
       break;
     case "calcite-handle":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "calcite-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "calcite-link":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "calcite-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "calcite-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "calcite-notice":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "calcite-option":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "calcite-panel":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "calcite-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "calcite-progress":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "calcite-scrim":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "calcite-select":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "calcite-shell":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "calcite-stack":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "calcite-tooltip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "card-manager":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "edit-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "info-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "layer-table":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "map-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "map-fullscreen":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }

package/dist/components/info-card2.js

@@ -42,6 +42,9 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
    */
   async graphicsWatchHandler() {
     var _a;
+    if (!this._features) {
+      await this._initFeaturesWidget();
+    }
     if (this.graphics.length > 0) {
       const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
       this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
@@ -58,9 +61,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
    * Watch for changes to the mapView and re-init the Feature widget
    */
   async mapViewWatchHandler() {
-    await this.mapView.when(async () => {
-      await this._initFeaturesWidget();
-    });
+    return await this._initFeaturesWidget();
   }
   //--------------------------------------------------------------------------
   //
@@ -136,27 +137,29 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
    * @protected
    */
   async _initFeaturesWidget() {
-    if (!this._features) {
-      this._features = new this.Features({
-        view: this.mapView,
-        container: "features-node",
-        visibleElements: {
-          actionBar: false,
-          closeButton: false,
-          heading: true
-        }
-      });
-      if (this.zoomAndScrollToSelected) {
-        this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
-          if (i > -1) {
-            this.selectionChanged.emit(this._features.selectedFeature);
+    return await this.mapView.when(() => {
+      if (!this._features) {
+        this._features = new this.Features({
+          view: this.mapView,
+          container: "features-node",
+          visibleElements: {
+            actionBar: false,
+            closeButton: false,
+            heading: true
           }
         });
+        if (this.zoomAndScrollToSelected) {
+          this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+            if (i > -1) {
+              this.selectionChanged.emit(this._features.selectedFeature);
+            }
+          });
+        }
       }
-    }
-    else {
-      this._features.view = this.mapView;
-    }
+      else {
+        this._features.view = this.mapView;
+      }
+    });
   }
   /**
    * Set the alertOpen member to false when the alert is closed

package/dist/components/interfaces.js

@@ -59,11 +59,6 @@ var ESelectionType;
   ESelectionType["POLY"] = "POLY";
   ESelectionType["RECT"] = "RECT";
 })(ESelectionType || (ESelectionType = {}));
-var EExpandType;
-(function (EExpandType) {
-  EExpandType["EXPAND"] = "EXPAND";
-  EExpandType["COLLAPSE"] = "COLLAPSE";
-})(EExpandType || (EExpandType = {}));
 var EWorkflowType;
 (function (EWorkflowType) {
   EWorkflowType["SEARCH"] = "SEARCH";
@@ -82,4 +77,4 @@ var EDrawMode;
   EDrawMode["REFINE"] = "REFINE";
 })(EDrawMode || (EDrawMode = {}));
 
-export { EWorkflowType as E, ELayoutMode as a, EExpandType as b, EDrawMode as c, EExportType as d, EPageType as e, ESelectionMode as f, EUpdateType as g };
+export { EWorkflowType as E, ELayoutMode as a, EDrawMode as b, EExportType as c, EPageType as d, ESelectionMode as e, EUpdateType as f };