@arcgis/map-components 4.29.0-beta.3 → 4.29.0-beta.30

package/dist/cjs/arcgis-expand_4.cjs.entry.js

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6b51d5a0.js');
-const index$1 = require('./index-bfda1cdc.js');
-const componentUtils = require('./component-utils-cbd20e88.js');
-const disconnected = require('./disconnected-306cb220.js');
-const mappingUtils = require('./mapping-utils-c2c7b994.js');
+const index = require('./index-b9b7643c.js');
+const index$1 = require('./index-c24d722b.js');
+const componentUtils = require('./component-utils-54ae1d40.js');
+const disconnected = require('./disconnected-86c5cc08.js');
 
-const arcgisExpandCss = "arcgis-expand>.esri-expand__content--expanded{background-color:var(--calcite-ui-background)}";
+const expandCss = "arcgis-expand>.esri-expand__content--expanded{background-color:var(--calcite-ui-background)}";
 
 const ArcgisExpand = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.widgetReady = index.createEvent(this, "widgetReady", 7);
+    this._watchHandles = [];
     this.referenceElement = undefined;
     this.position = "top-right";
     this.view = undefined;
@@ -74,6 +74,7 @@ const ArcgisExpand = class {
     }
     else if (viewRef) {
       const handler = () => {
+        viewRef.removeEventListener("viewReady", handler, false);
         this.view = viewRef.view;
         this.view.ui.add(this.childElem, this.position);
         this.widgetReady.emit({ widget: this.widget });
@@ -88,311 +89,52 @@ const ArcgisExpand = class {
     "view": ["viewWatcher"]
   }; }
 };
-ArcgisExpand.style = arcgisExpandCss;
+ArcgisExpand.style = expandCss;
 
-const arcgisFeatureTableCss = ".arcgis-feature-table{width:100%;height:100%}";
+function disableNavigation(view) {
+  if (view.type === '2d') {
+    view.constraints.rotationEnabled = false;
+  }
+  view.popup.dockEnabled = true;
+  // Removes the zoom action on the popup
+  view.popup.actions.removeAll();
+  view.popup.viewModel.includeDefaultActions = false;
+  // stops propagation of default behavior when an event fires
+  function stopEvtPropagation(event) {
+    event.stopPropagation();
+  }
+  // exlude the zoom widget from the default UI
+  view.ui.components = ['attribution'];
+  // disable mouse wheel scroll zooming on the view
+  view.on('mouse-wheel', stopEvtPropagation);
+  // disable zooming via double-click on the view
+  view.on('double-click', stopEvtPropagation);
+  // disable zooming out via double-click + Control on the view
+  view.on('double-click', ['Control'], stopEvtPropagation);
+  // disables pinch-zoom and panning on the view
+  view.on('drag', stopEvtPropagation);
+  // disable the view's zoom box to prevent the Shift + drag
+  // and Shift + Control + drag zoom gestures.
+  view.on('drag', ['Shift'], stopEvtPropagation);
+  view.on('drag', ['Shift', 'Control'], stopEvtPropagation);
+  // prevents zooming with the + and - keys
+  view.on('key-down', event => {
+    const prohibitedKeys = ['+', '-', 'Shift', '_', '=', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'];
+    const keyPressed = event.key;
+    if (prohibitedKeys.indexOf(keyPressed) !== -1) {
+      event.stopPropagation();
+    }
+  });
+  return view;
+}
 
-const ArcgisFeatureTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.rowSelectionChange = index.createEvent(this, "rowSelectionChange", 7);
-    this.widgetReady = index.createEvent(this, "widgetReady", 7);
-    this.referenceElement = undefined;
-    this.activeFilters = undefined;
-    this.activeSortOrders = undefined;
-    this.attachmentsEnabled = undefined;
-    this.autoRefreshEnabled = undefined;
-    this.columnReorderingEnabled = undefined;
-    this.columns = undefined;
-    this.editingEnabled = undefined;
-    this.filterGeometry = undefined;
-    this.hiddenFields = undefined;
-    this.highlightEnabled = undefined;
-    this.highlightIds = undefined;
-    this.layer = undefined;
-    this.menu = undefined;
-    this.menuConfig = undefined;
-    this.multiSortEnabled = undefined;
-    this.pageSize = undefined;
-    this.state = undefined;
-    this.tableTemplate = undefined;
-    this.itemId = undefined;
-    this.position = "bottom-left";
-    this.url = undefined;
-    this.view = undefined;
-    this.widget = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Watchers
-  //
-  //--------------------------------------------------------------------------
-  positionWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      if (typeof this.view !== "string") {
-        this.view.ui.move(this.childElem, newValue);
-      }
-    }
-  }
-  attachmentsEnabledWatcher(value) {
-    if (value && this.widget) {
-      this.widget.attachmentsEnabled = value;
-    }
-  }
-  autoRefreshEnabledWatcher(value) {
-    if (value && this.widget) {
-      this.widget.autoRefreshEnabled = value;
-    }
-  }
-  columnReorderingEnabledWatcher(value) {
-    if (value && this.widget) {
-      this.widget.columnReorderingEnabled = value;
-    }
-  }
-  editingEnabledWatcher(value) {
-    if (value && this.widget) {
-      this.widget.editingEnabled = value;
-    }
-  }
-  filterGeometryWatcher(value) {
-    if (value && this.widget) {
-      this.widget.filterGeometry = value;
-    }
-  }
-  hiddenFieldsWatcher(value) {
-    if (value && this.widget) {
-      this.widget.hiddenFields = value;
-    }
-  }
-  highlightEnabledWatcher(value) {
-    if (value && this.widget) {
-      this.widget.highlightEnabled = value;
-    }
-  }
-  highlightIdsWatcher(value) {
-    if (value && this.widget) {
-      this.widget.highlightIds = value;
-    }
-  }
-  menuConfigWatcher(value) {
-    if (value && this.widget) {
-      this.widget.menuConfig = value;
-    }
-  }
-  multiSortEnabledWatcher(value) {
-    if (value && this.widget) {
-      this.widget.multiSortEnabled = value;
-    }
-  }
-  pageSizeWatcher(value) {
-    if (value && this.widget) {
-      this.widget.pageSize = value;
-    }
-  }
-  tableTemplateWatcher(value) {
-    if (value && this.widget) {
-      this.widget.tableTemplate = value;
-    }
-  }
-  async itemIdWatcher(value, old) {
-    if (value && value !== old) {
-      const layer = await index$1.newLayersFeatureLayer({
-        portalItem: {
-          id: value
-        }
-      });
-      this.layer = layer;
-    }
-  }
-  layerWatcher(value) {
-    if (value && this.widget) {
-      this.widget.layer = value;
-    }
-  }
-  async urlWatcher(value, old) {
-    if (value && value !== old) {
-      const layer = await index$1.newLayersFeatureLayer({ url: value });
-      this.layer = layer;
-    }
-  }
-  referenceElementWatcher(newValue) {
-    componentUtils.referenceElementHelper(this, newValue);
-  }
-  viewWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.view = newValue;
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  //--------------------------------------------------------------------------
-  async clearSelectionFilter() {
-    return this.widget?.clearSelectionFilter();
-  }
-  async deleteSelection(showWarningPrompt) {
-    return this.widget?.deleteSelection(showWarningPrompt);
-  }
-  async filterBySelection() {
-    return this.widget?.filterBySelection();
-  }
-  async findColumn(fieldName) {
-    return this.widget?.findColumn(fieldName);
-  }
-  async hideColumn(fieldName) {
-    return this.widget?.hideColumn(fieldName);
-  }
-  async refresh() {
-    return this.widget?.refresh();
-  }
-  async scrollToIndex(index) {
-    return this.widget?.scrollToIndex(index);
-  }
-  async showAllColumns() {
-    return this.widget?.showAllColumns();
-  }
-  async showColumn(fieldName) {
-    return this.widget?.showColumn(fieldName);
-  }
-  async sortColumn(path, direction) {
-    return this.widget?.sortColumn(path, direction);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  async componentDidLoad() {
-    const params = await this._createParams();
-    const widget = await index$1.newWidgetsFeatureTable(params);
-    this.widget = widget;
-    await this._addWatchers();
-    this._proxyEvents();
-    this.widgetReady.emit({ widget: this.widget });
-    componentUtils.checkForView(this);
-  }
-  disconnectedCallback() {
-    disconnected.onDisconnectedHelper(this);
-  }
-  render() {
-    return index.h("div", { class: "arcgis-feature-table", ref: (el) => (this.childElem = el) });
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  async _addWatchers() {
-    const { watch } = await index$1.importCoreReactiveUtils();
-    watch(() => this.widget.activeFilters, (value) => (this.activeFilters = value), {
-      initial: true
-    });
-    watch(() => this.widget.activeSortOrders, (value) => (this.activeSortOrders = value), {
-      initial: true
-    });
-    watch(() => this.widget.columns, (value) => (this.columns = value), {
-      initial: true
-    });
-    watch(() => this.widget.menu, (value) => (this.menu = value), {
-      initial: true
-    });
-    watch(() => this.widget.state, (value) => (this.state = value), {
-      initial: true
-    });
-  }
-  async _createParams() {
-    const params = {
-      container: this.childElem
-    };
-    if (this.view) {
-      params.view = this.view;
-    }
-    if (this.attachmentsEnabled !== undefined) {
-      params.attachmentsEnabled = this.attachmentsEnabled;
-    }
-    if (this.autoRefreshEnabled !== undefined) {
-      params.autoRefreshEnabled = this.autoRefreshEnabled;
-    }
-    if (this.columnReorderingEnabled !== undefined) {
-      params.columnReorderingEnabled = this.columnReorderingEnabled;
-    }
-    if (this.editingEnabled !== undefined) {
-      params.editingEnabled = this.editingEnabled;
-    }
-    if (this.filterGeometry !== undefined) {
-      params.filterGeometry = this.filterGeometry;
-    }
-    if (this.hiddenFields !== undefined) {
-      params.hiddenFields = this.hiddenFields;
-    }
-    if (this.highlightEnabled !== undefined) {
-      params.highlightEnabled = this.highlightEnabled;
-    }
-    if (this.highlightIds !== undefined) {
-      params.highlightIds = this.highlightIds;
-    }
-    if (this.menuConfig !== undefined) {
-      params.menuConfig = this.menuConfig;
-    }
-    if (this.multiSortEnabled !== undefined) {
-      params.multiSortEnabled = this.multiSortEnabled;
-    }
-    if (this.pageSize !== undefined) {
-      params.pageSize = this.pageSize;
-    }
-    if (this.tableTemplate !== undefined) {
-      params.tableTemplate = this.tableTemplate;
-    }
-    // Handle loading a layer, url, or itemId
-    if (this.layer !== undefined) {
-      params.layer = this.layer;
-    }
-    else if (this.url) {
-      params.layer = await index$1.newLayersFeatureLayer({ url: this.url });
-    }
-    else if (this.itemId) {
-      params.layer = await index$1.newLayersFeatureLayer({
-        portalItem: {
-          id: this.itemId
-        }
-      });
-    }
-    return params;
-  }
-  async _proxyEvents() {
-    this.widget?.highlightIds.on("change", (e) => this.rowSelectionChange.emit(e));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "position": ["positionWatcher"],
-    "attachmentsEnabled": ["attachmentsEnabledWatcher"],
-    "autoRefreshEnabled": ["autoRefreshEnabledWatcher"],
-    "columnReorderingEnabled": ["columnReorderingEnabledWatcher"],
-    "editingEnabled": ["editingEnabledWatcher"],
-    "filterGeometry": ["filterGeometryWatcher"],
-    "hiddenFields": ["hiddenFieldsWatcher"],
-    "highlightEnabled": ["highlightEnabledWatcher"],
-    "highlightIds": ["highlightIdsWatcher"],
-    "menuConfig": ["menuConfigWatcher"],
-    "multiSortEnabled": ["multiSortEnabledWatcher"],
-    "pageSize": ["pageSizeWatcher"],
-    "tableTemplate": ["tableTemplateWatcher"],
-    "itemId": ["itemIdWatcher"],
-    "layer": ["layerWatcher"],
-    "url": ["urlWatcher"],
-    "referenceElement": ["referenceElementWatcher"],
-    "view": ["viewWatcher"]
-  }; }
-};
-ArcgisFeatureTable.style = arcgisFeatureTableCss;
-
-const arcgisMapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
+const mapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
 
 const ArcgisMap = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.viewReady = index.createEvent(this, "viewReady", 7);
+    this._watchHandles = [];
     this.apiKey = undefined;
     this.basemap = undefined;
     this.backgroundColor = undefined;
@@ -407,14 +149,53 @@ const ArcgisMap = class {
   apiKeyWatcher(value) {
     this.config.apiKey = value;
   }
+  basemapWatcher(value) {
+    if (this.view?.map) {
+      this.view.map.basemap = value;
+    }
+  }
   backgroundColorWatcher(value) {
     this.view.background = {
       color: value
     };
   }
   itemIdWatcher(value, old) {
-    if (value && value !== old) {
-      this.loadMap();
+    // NOTE: there is an issue when users set the value to undefined.
+    // https://github.com/ionic-team/stencil/issues/2814
+    // If user sets `itemid` to `undefined`, Stencil 2 will log the following warning:
+    // `The state/prop "${propName}" changed during rendering.`
+    // `This can potentially lead to infinite-loops and other bugs.`
+    //
+    // It appears consumer setting the value to null does not cause this warning.
+    // In Stencil 4, if a user sets property to undefined, will trigger change, but
+    // will not remove attribute from DOM.
+    if (value !== old) {
+      if (this.view?.map) {
+        this._updateMap();
+      }
+      else {
+        this._loadMap();
+      }
+    }
+  }
+  portalUrlWatcher(value, old) {
+    if (value !== old) {
+      if (this.view?.map) {
+        this._updateMap();
+      }
+      else {
+        this._loadMap();
+      }
+    }
+  }
+  scaleWatcher(value, old) {
+    if (value != null && value !== old) {
+      this.view.scale = value;
+    }
+  }
+  zoomWatcher(value, old) {
+    if (value != null && value !== old) {
+      this.view.zoom = value;
     }
   }
   //--------------------------------------------------------------------------
@@ -427,13 +208,17 @@ const ArcgisMap = class {
     if (this.apiKey) {
       this.config.apiKey = this.apiKey;
     }
-    this.loadMap();
+    this._loadMap();
   }
   componentDidRender() {
     if (this.view) {
       this.view.container = this.el;
     }
   }
+  disconnectedCallback() {
+    this._clearWatchHandles();
+    this.view.destroy();
+  }
   render() {
     return index.h("div", { class: "arcgis-map", ref: (el) => (this.el = el) });
   }
@@ -442,7 +227,28 @@ const ArcgisMap = class {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  async loadMap() {
+  _clearWatchHandles() {
+    this._watchHandles.forEach((handle) => handle.remove());
+    this._watchHandles = [];
+  }
+  async _addWatchers() {
+    const { watch, when } = await index$1.importCoreReactiveUtils();
+    this._watchHandles.push(watch(() => this.view.center, (center) => {
+      const value = `${center.longitude},${center.latitude}`;
+      this.center = value;
+    }));
+    this._watchHandles.push(when(() => this.view.updating, () => {
+      when(() => !this.view.updating, () => {
+        if (this.zoom !== this.view.zoom) {
+          this.zoom = this.view.zoom;
+        }
+        if (this.scale !== this.view.scale) {
+          this.scale = this.view.scale;
+        }
+      }, { once: true });
+    }));
+  }
+  async _createMap() {
     const mapParams = {};
     if (this.itemId) {
       mapParams.portalItem = this._createPortalItem();
@@ -450,32 +256,11 @@ const ArcgisMap = class {
     if (this.basemap) {
       mapParams.basemap = this.basemap;
     }
-    const map = await index$1.newWebMap(mapParams);
-    const params = this._createViewParams();
-    const view = await index$1.newViewsMapView({
-      map,
-      ...params
-    });
-    this.view = view;
-    this._addWatchers();
-    if (this.disableNavigation) {
-      mappingUtils.disableNavigation(this.view);
+    else if (componentUtils.isNullOrEmptyString(this.itemId)) {
+      mapParams.basemap = "topo-vector";
     }
-    this.view.when(() => this.viewReady.emit({ view: this.view }));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  async _addWatchers() {
-    const { watch } = await index$1.importCoreReactiveUtils();
-    watch(() => this.view.center, (center) => {
-      const value = `${center.longitude},${center.latitude}`;
-      this.center = value;
-    });
-    watch(() => this.view.zoom, (value) => (this.zoom = value));
-    watch(() => this.view.scale, (value) => (this.scale = value));
+    const map = await index$1.newWebMap(mapParams);
+    return map;
   }
   _createPortalItem() {
     const item = {};
@@ -512,282 +297,277 @@ const ArcgisMap = class {
     }
     return params;
   }
-  get hostElem() { return index.getElement(this); }
+  async _loadMap() {
+    const map = await this._createMap();
+    const params = this._createViewParams();
+    const view = await index$1.newViewsMapView({
+      map,
+      ...params
+    });
+    this.view = view;
+    this._addWatchers();
+    if (this.disableNavigation) {
+      disableNavigation(this.view);
+    }
+    this.view.when(() => {
+      this.viewReady.emit({ view: this.view });
+    });
+  }
+  async _updateMap() {
+    if (this.view?.map) {
+      this.view.map.destroy();
+      const map = await this._createMap();
+      this.view.map = map;
+    }
+  }
+  get _hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "apiKey": ["apiKeyWatcher"],
+    "basemap": ["basemapWatcher"],
     "backgroundColor": ["backgroundColorWatcher"],
-    "itemId": ["itemIdWatcher"]
+    "itemId": ["itemIdWatcher"],
+    "portalUrl": ["portalUrlWatcher"],
+    "scale": ["scaleWatcher"],
+    "zoom": ["zoomWatcher"]
   }; }
 };
-ArcgisMap.style = arcgisMapCss;
+ArcgisMap.style = mapCss;
 
-const arcgisSearchCss = "";
+const placementCss = "arcgis-placement{}";
 
-const ArcgisSearch = class {
+const ArcgisPlacement = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.widgetReady = index.createEvent(this, "widgetReady", 7);
-    this.searchBlur = index.createEvent(this, "searchBlur", 7);
-    this.searchClear = index.createEvent(this, "searchClear", 7);
-    this.searchComplete = index.createEvent(this, "searchComplete", 7);
-    this.searchFocus = index.createEvent(this, "searchFocus", 7);
-    this.searchStart = index.createEvent(this, "searchStart", 7);
-    this.selectResult = index.createEvent(this, "selectResult", 7);
-    this.suggestComplete = index.createEvent(this, "suggestComplete", 7);
-    this.suggestStart = index.createEvent(this, "suggestStart", 7);
+    this.placementReady = index.createEvent(this, "placementReady", 7);
     this.referenceElement = undefined;
-    this.activeMenu = undefined;
-    this.activeSource = undefined;
-    this.activeSourceIndex = undefined;
-    this.allPlaceholder = undefined;
-    this.allSources = undefined;
-    this.autoSelect = undefined;
-    this.defaultSources = undefined;
-    this.includeDefaultSources = undefined;
-    this.locationEnabled = undefined;
-    this.maxResults = undefined;
-    this.maxSuggestions = undefined;
-    this.minSuggestCharacters = undefined;
-    this.popupEnabled = undefined;
-    this.popupTemplate = undefined;
-    this.portal = undefined;
-    this.resultGraphic = undefined;
-    this.resultGraphicEnabled = undefined;
-    this.results = undefined;
-    this.searchAllEnabled = undefined;
-    this.searchTerm = undefined;
-    this.selectedResult = undefined;
-    this.sources = undefined;
-    this.suggestions = undefined;
-    this.suggestionsEnabled = undefined;
-    this.position = "top-right";
-    this.expandable = false;
     this.view = undefined;
-    this.widget = undefined;
+    this.position = "bottom-left";
+  }
+  referenceElementWatcher(newValue) {
+    componentUtils.referenceElementHelper(this, newValue);
+  }
+  positionWatcher(newValue) {
+    if (newValue !== undefined) {
+      this.view.ui.move(this.childElem, newValue);
+    }
   }
   //--------------------------------------------------------------------------
   //
-  //  Watchers
+  //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  positionWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      if (typeof this.view !== "string") {
-        this.view.ui.move(this.childElem, newValue);
-      }
-    }
-  }
-  activeMenuWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.activeMenu = newValue;
-    }
-  }
-  activeSourceIndexWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.activeSourceIndex = newValue;
-    }
-  }
-  allPlaceholderWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.allPlaceholder = newValue;
-    }
-  }
-  autoSelectWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.autoSelect = newValue;
-    }
-  }
-  includeDefaultSourcesWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.includeDefaultSources = newValue;
-    }
-  }
-  locationEnabledWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.locationEnabled = newValue;
-    }
-  }
-  maxResultsWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.maxResults = newValue;
-    }
-  }
-  maxSuggestionsWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.maxSuggestions = newValue;
-    }
-  }
-  minSuggestCharactersWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.minSuggestCharacters = newValue;
-    }
+  async componentDidLoad() {
+    this.placementReady.emit({ ready: true });
+    componentUtils.checkForView(this);
   }
-  popupEnabledWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.popupEnabled = newValue;
-    }
+  disconnectedCallback() {
+    disconnected.onDisconnectedHelper(this);
   }
-  popupTemplateWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.popupTemplate = newValue;
-    }
+  render() {
+    return (index.h("div", { ref: (el) => (this.childElem = el) }, index.h("slot", null)));
   }
-  portalWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.portal = newValue;
-    }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "referenceElement": ["referenceElementWatcher"],
+    "position": ["positionWatcher"]
+  }; }
+};
+ArcgisPlacement.style = placementCss;
+
+const sceneCss = ".arcgis-scene{padding:0;margin:0;height:100%;width:100%}";
+
+const ArcgisScene = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.viewReady = index.createEvent(this, "viewReady", 7);
+    this._watchHandles = [];
+    this.apiKey = undefined;
+    this.basemap = undefined;
+    this.itemId = undefined;
+    this.portalUrl = undefined;
+    this.scale = undefined;
+    this.zoom = undefined;
+    this.center = undefined;
+    this.view = undefined;
+    this.disableNavigation = false;
   }
-  resultGraphicEnabledWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.resultGraphicEnabled = newValue;
-    }
+  apiKeyWatcher(value) {
+    this.config.apiKey = value;
   }
-  searchAllEnabledWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.searchAllEnabled = newValue;
+  basemapWatcher(value) {
+    if (this.view?.map) {
+      this.view.map.basemap = value;
     }
   }
-  searchTermWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.searchTerm = newValue;
+  itemIdWatcher(value, old) {
+    // NOTE: there is an issue when users set the value to undefined.
+    // https://github.com/ionic-team/stencil/issues/2814
+    // If user sets `itemid` to `undefined`, Stencil 2 will log the following warning:
+    // `The state/prop "${propName}" changed during rendering.`
+    // `This can potentially lead to infinite-loops and other bugs.`
+    //
+    // It appears consumer setting the value to null does not cause this warning.
+    // In Stencil 4, if a user sets property to undefined, will trigger change, but
+    // will not remove attribute from DOM.
+    if (value !== old) {
+      if (this.view?.map) {
+        this._updateMap();
+      }
+      else {
+        this._loadMap();
+      }
     }
   }
-  sourcesWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.sources = newValue;
+  portalUrlWatcher(value, old) {
+    if (value && value !== old) {
+      if (this.view?.map) {
+        this._updateMap();
+      }
+      else {
+        this._loadMap();
+      }
     }
   }
-  suggestionsEnabledWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.suggestionsEnabled = newValue;
+  scaleWatcher(value, old) {
+    if (value != null && value !== old) {
+      this.view.scale = value;
     }
   }
-  referenceElementWatcher(newValue) {
-    componentUtils.referenceElementHelper(this, newValue);
-  }
-  viewWatcher(newValue) {
-    if (newValue !== undefined && this.widget) {
-      this.widget.view = newValue;
+  zoomWatcher(value, old) {
+    if (value != null && value !== old) {
+      this.view.zoom = value;
     }
   }
   //--------------------------------------------------------------------------
   //
-  //  Methods
+  //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  async blurSearch() {
-    return this.widget?.blur();
-  }
-  async clearSearch() {
-    return this.widget?.clear();
+  async componentWillLoad() {
+    this.config = await index$1.importConfig();
+    if (this.apiKey) {
+      this.config.apiKey = this.apiKey;
+    }
+    this._loadMap();
   }
-  async focusSearch() {
-    return this.widget?.focus();
+  componentDidRender() {
+    if (this.view) {
+      this.view.container = this.el;
+    }
   }
-  async search(term) {
-    return this.widget?.search(term);
+  disconnectedCallback() {
+    this._clearWatchHandles();
+    this.view.destroy();
   }
-  async suggest(term) {
-    return this.widget?.suggest(term);
+  render() {
+    return index.h("div", { class: "arcgis-scene", ref: (el) => (this.el = el) });
   }
   //--------------------------------------------------------------------------
   //
-  //  Lifecycle
+  //  Private Methods
   //
   //--------------------------------------------------------------------------
-  async componentDidLoad() {
-    const params = this._createParams();
-    const widget = await index$1.newWidgetsSearch(params);
-    this.widget = widget;
-    await this._addWatchers();
-    this._proxyEvents();
-    this.widgetReady.emit({ widget: this.widget });
-    componentUtils.checkForView(this);
+  _clearWatchHandles() {
+    this._watchHandles.forEach((handle) => handle.remove());
+    this._watchHandles = [];
   }
-  disconnectedCallback() {
-    disconnected.onDisconnectedHelper(this);
+  async _addWatchers() {
+    const { watch, when } = await index$1.importCoreReactiveUtils();
+    this._watchHandles.push(watch(() => this.view.center, (center) => {
+      const value = `${center.longitude},${center.latitude}`;
+      this.center = value;
+    }));
+    this._watchHandles.push(when(() => this.view.updating, () => {
+      when(() => !this.view.updating, () => {
+        if (this.zoom !== this.view.zoom) {
+          this.zoom = this.view.zoom;
+        }
+        if (this.scale !== this.view.scale) {
+          this.scale = this.view.scale;
+        }
+      }, { once: true });
+    }));
   }
-  render() {
-    if (this.expandable) {
-      return (index.h("arcgis-expand", { position: this.position, ref: (el) => (this.expandElem = el) }, index.h("div", { ref: (el) => (this.childElem = el) })));
+  async _createMap() {
+    const mapParams = {};
+    if (this.itemId) {
+      mapParams.portalItem = this._createPortalItem();
     }
-    return index.h("div", { ref: (el) => (this.childElem = el) });
+    if (this.basemap) {
+      mapParams.basemap = this.basemap;
+    }
+    else if (componentUtils.isNullOrEmptyString(this.itemId)) {
+      mapParams.basemap = "topo-vector";
+    }
+    const map = await index$1.newWebScene(mapParams);
+    return map;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Interal Methods
-  //
-  //--------------------------------------------------------------------------
-  async _addWatchers() {
-    const { watch } = await index$1.importCoreReactiveUtils();
-    watch(() => this.widget.activeSource, (value) => (this.activeSource = value), {
-      initial: true
-    });
-    watch(() => this.widget.activeSourceIndex, (value) => (this.activeSourceIndex = value), {
-      initial: true
-    });
-    watch(() => this.widget.allSources, (value) => (this.allSources = value), {
-      initial: true
-    });
-    watch(() => this.widget.defaultSources, (value) => (this.defaultSources = value), {
-      initial: true
-    });
-    watch(() => this.widget.resultGraphic, (value) => (this.resultGraphic = value), {
-      initial: true
-    });
-    watch(() => this.widget.results, (value) => (this.results = value), {
-      initial: true
-    });
-    watch(() => this.widget.selectedResult, (value) => (this.selectedResult = value), {
-      initial: true
-    });
+  _createPortalItem() {
+    const item = {};
+    if (this.itemId) {
+      item.id = this.itemId;
+    }
+    if (this.portalUrl) {
+      item.portal = {
+        url: this.portalUrl
+      };
+    }
+    return item;
   }
-  _createParams() {
-    const params = {
-      container: this.childElem
-    };
-    if (this.view) {
-      params.view = this.view;
+  _createViewParams() {
+    const params = {};
+    if (this.zoom !== undefined) {
+      params.zoom = this.zoom;
+    }
+    if (this.scale !== undefined) {
+      params.scale = this.scale;
+    }
+    if (this.center) {
+      if (typeof this.center === "string") {
+        params.center = this.center.split(",").map((x) => Number(x));
+      }
+      else {
+        params.center = this.center;
+      }
     }
     return params;
   }
-  _proxyEvents() {
-    this.widget.on("search-blur", (e) => this.searchBlur.emit(e));
-    this.widget.on("search-clear", (e) => this.searchClear.emit(e));
-    this.widget.on("search-complete", (e) => this.searchComplete.emit(e));
-    this.widget.on("search-focus", (e) => this.searchFocus.emit(e));
-    this.widget.on("search-start", (e) => this.searchStart.emit(e));
-    this.widget.on("select-result", (e) => this.selectResult.emit(e));
-    this.widget.on("suggest-complete", (e) => this.suggestComplete.emit(e));
-    this.widget.on("suggest-start", (e) => this.suggestStart.emit(e));
+  async _loadMap() {
+    const map = await this._createMap();
+    const params = this._createViewParams();
+    const view = await index$1.newViewsSceneView({
+      map,
+      ...params
+    });
+    this.view = view;
+    this._addWatchers();
+    if (this.disableNavigation) {
+      disableNavigation(this.view);
+    }
+    this.view.when(() => {
+      this.viewReady.emit({ view: this.view });
+    });
   }
-  get el() { return index.getElement(this); }
+  async _updateMap() {
+    if (this.view?.map) {
+      this.view.map.destroy();
+      const map = await this._createMap();
+      this.view.map = map;
+    }
+  }
+  get _hostElement() { return index.getElement(this); }
   static get watchers() { return {
-    "position": ["positionWatcher"],
-    "activeMenu": ["activeMenuWatcher"],
-    "activeSourceIndex": ["activeSourceIndexWatcher"],
-    "allPlaceholder": ["allPlaceholderWatcher"],
-    "autoSelect": ["autoSelectWatcher"],
-    "includeDefaultSources": ["includeDefaultSourcesWatcher"],
-    "locationEnabled": ["locationEnabledWatcher"],
-    "maxResults": ["maxResultsWatcher"],
-    "maxSuggestions": ["maxSuggestionsWatcher"],
-    "minSuggestCharacters": ["minSuggestCharactersWatcher"],
-    "popupEnabled": ["popupEnabledWatcher"],
-    "popupTemplate": ["popupTemplateWatcher"],
-    "portal": ["portalWatcher"],
-    "resultGraphicEnabled": ["resultGraphicEnabledWatcher"],
-    "searchAllEnabled": ["searchAllEnabledWatcher"],
-    "searchTerm": ["searchTermWatcher"],
-    "sources": ["sourcesWatcher"],
-    "suggestionsEnabled": ["suggestionsEnabledWatcher"],
-    "referenceElement": ["referenceElementWatcher"],
-    "view": ["viewWatcher"]
+    "apiKey": ["apiKeyWatcher"],
+    "basemap": ["basemapWatcher"],
+    "itemId": ["itemIdWatcher"],
+    "portalUrl": ["portalUrlWatcher"],
+    "scale": ["scaleWatcher"],
+    "zoom": ["zoomWatcher"]
   }; }
 };
-ArcgisSearch.style = arcgisSearchCss;
+ArcgisScene.style = sceneCss;
 
 exports.arcgis_expand = ArcgisExpand;
-exports.arcgis_feature_table = ArcgisFeatureTable;
 exports.arcgis_map = ArcgisMap;
-exports.arcgis_search = ArcgisSearch;
+exports.arcgis_placement = ArcgisPlacement;
+exports.arcgis_scene = ArcgisScene;