@arcgis/map-components 4.29.0-beta.7 → 4.29.0-beta.72

package/dist/components/arcgis-map.js

@@ -1,186 +1,622 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { H as importConfig, I as newWebMap, J as newViewsMapView, i as importCoreReactiveUtils } from './index2.js';
-import { d as disableNavigation } from './mapping-utils.js';
+import { I as newViewsMapView, i as importCoreReactiveUtils, J as newWebMap } from './index2.js';
+import { i as isNullOrEmptyString, d as isNotSameViewpoint, a as addHandles } from './component-utils.js';
 
-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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.viewReady = createEvent(this, "viewReady", 7);
-    this.apiKey = undefined;
-    this.basemap = undefined;
-    this.backgroundColor = undefined;
-    this.disableNavigation = false;
-    this.itemId = undefined;
-    this.portalUrl = undefined;
-    this.scale = undefined;
-    this.zoom = undefined;
-    this.center = undefined;
-    this.view = undefined;
-  }
-  apiKeyWatcher(value) {
-    this.config.apiKey = value;
-  }
-  backgroundColorWatcher(value) {
-    this.view.background = {
-      color: value
-    };
-  }
-  itemIdWatcher(value, old) {
-    if (value && value !== old) {
-      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;
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  async componentWillLoad() {
-    this.config = await importConfig();
-    if (this.apiKey) {
-      this.config.apiKey = this.apiKey;
-    }
-    this.loadMap();
-  }
-  componentDidRender() {
-    if (this.view) {
-      this.view.container = this.el;
-    }
-  }
-  render() {
-    return h("div", { class: "arcgis-map", ref: (el) => (this.el = el) });
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  async loadMap() {
-    const mapParams = {};
-    if (this.itemId) {
-      mapParams.portalItem = this._createPortalItem();
-    }
-    if (this.basemap) {
-      mapParams.basemap = this.basemap;
-    }
-    const map = await newWebMap(mapParams);
-    const params = this._createViewParams();
-    const view = await newViewsMapView({
-      map,
-      ...params
-    });
-    this.view = view;
-    this._addWatchers();
-    if (this.disableNavigation) {
-      disableNavigation(this.view);
-    }
-    this.view.when(() => {
-      this.viewReady.emit({ view: this.view });
-    });
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  async _addWatchers() {
-    const { watch, when } = await importCoreReactiveUtils();
-    watch(() => this.view.center, (center) => {
-      const value = `${center.longitude},${center.latitude}`;
-      this.center = value;
-    });
-    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 });
-    });
-  }
-  _createPortalItem() {
-    const item = {};
-    if (this.itemId) {
-      item.id = this.itemId;
-    }
-    if (this.portalUrl) {
-      item.portal = {
-        url: this.portalUrl
-      };
-    }
-    return item;
-  }
-  _createViewParams() {
-    const params = {};
-    if (this.backgroundColor) {
-      params.background = {
-        color: this.backgroundColor
-      };
-    }
-    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;
-  }
-  get hostElem() { return this; }
-  static get watchers() { return {
-    "apiKey": ["apiKeyWatcher"],
-    "backgroundColor": ["backgroundColorWatcher"],
-    "itemId": ["itemIdWatcher"],
-    "scale": ["scaleWatcher"],
-    "zoom": ["zoomWatcher"]
-  }; }
-  static get style() { return arcgisMapCss; }
+const ArcgisMap$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisMap extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.arcgisViewReadyChange = createEvent(this, "arcgisViewReadyChange", 7);
+        this.arcgisViewChange = createEvent(this, "arcgisViewChange", 7);
+        this.arcgisViewClick = createEvent(this, "arcgisViewClick", 7);
+        this.arcgisViewDoubleClick = createEvent(this, "arcgisViewDoubleClick", 7);
+        this.arcgisViewDrag = createEvent(this, "arcgisViewDrag", 7);
+        this.arcgisViewHold = createEvent(this, "arcgisViewHold", 7);
+        this.arcgisViewImmediateClick = createEvent(this, "arcgisViewImmediateClick", 7);
+        this.arcgisViewImmediateDoubleClick = createEvent(this, "arcgisViewImmediateDoubleClick", 7);
+        this.arcgisViewKeyDown = createEvent(this, "arcgisViewKeyDown", 7);
+        this.arcgisViewKeyUp = createEvent(this, "arcgisViewKeyUp", 7);
+        this.arcgisViewLayerviewCreate = createEvent(this, "arcgisViewLayerviewCreate", 7);
+        this.arcgisViewLayerviewCreateError = createEvent(this, "arcgisViewLayerviewCreateError", 7);
+        this.arcgisViewLayerviewDestroy = createEvent(this, "arcgisViewLayerviewDestroy", 7);
+        this.arcgisViewMouseWheel = createEvent(this, "arcgisViewMouseWheel", 7);
+        this.arcgisViewPointerDown = createEvent(this, "arcgisViewPointerDown", 7);
+        this.arcgisViewPointerEnter = createEvent(this, "arcgisViewPointerEnter", 7);
+        this.arcgisViewPointerLeave = createEvent(this, "arcgisViewPointerLeave", 7);
+        this.arcgisViewPointerMove = createEvent(this, "arcgisViewPointerMove", 7);
+        this.arcgisViewPointerUp = createEvent(this, "arcgisViewPointerUp", 7);
+        this._watchHandles = [];
+        this.allLayerViews = undefined;
+        this.background = undefined;
+        this.basemapView = undefined;
+        this.basemap = undefined;
+        this.center = undefined;
+        this.constraints = undefined;
+        this.destroyDisabled = false;
+        this.extent = undefined;
+        this.fatalError = undefined;
+        this.floors = undefined;
+        this.graphics = undefined;
+        this.highlightOptions = undefined;
+        this.interacting = undefined;
+        this.itemId = undefined;
+        this.layerViews = undefined;
+        this.magnifier = undefined;
+        this.map = undefined;
+        this.navigating = undefined;
+        this.navigation = undefined;
+        this.padding = undefined;
+        this.popup = undefined;
+        this.popupEnabled = undefined;
+        this.ready = undefined;
+        this.resizeAlign = undefined;
+        this.resolution = undefined;
+        this.rotation = undefined;
+        this.scale = undefined;
+        this.spatialReference = undefined;
+        this.stationary = undefined;
+        this.suspended = undefined;
+        this.theme = undefined;
+        this.timeExtent = undefined;
+        this.timeZone = undefined;
+        this.toMap = undefined;
+        this.toScreen = undefined;
+        this.updating = undefined;
+        this.viewpoint = undefined;
+        this.zoom = undefined;
+        this.view = undefined;
+    }
+    backgroundWatcher(value) {
+        if (this.view) {
+            this.background = value;
+        }
+    }
+    basemapWatcher(value) {
+        if (this.view?.map && isNullOrEmptyString(value)) {
+            this.view.map.basemap = value;
+        }
+    }
+    centerWatcher(value) {
+        if (this.view && value && !this.view.center.equals(value)) {
+            this.view.center = value;
+        }
+    }
+    constraintsWatcher(value) {
+        if (this.view) {
+            this.view.constraints = value;
+        }
+    }
+    extentWatcher(value) {
+        if (this.view && value && !this.view.extent.equals(value)) {
+            this.view.extent = value;
+        }
+    }
+    floorsWatcher(value) {
+        if (this.view) {
+            this.view.floors = value;
+        }
+    }
+    graphicsWatcher(value) {
+        if (this.view) {
+            this.view.graphics = value;
+        }
+    }
+    highlightOptionsWatcher(value) {
+        if (this.view) {
+            this.view.highlightOptions = value;
+        }
+    }
+    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();
+            }
+        }
+    }
+    mapWatcher(value) {
+        if (this.view) {
+            this.view.map = value;
+        }
+    }
+    navigationWatcher(value) {
+        if (this.view) {
+            this.view.navigation = value;
+        }
+    }
+    paddingWatcher(value) {
+        if (this.view) {
+            this.view.padding = value;
+        }
+    }
+    popupEnabledWatcher(value) {
+        if (value !== undefined && this.view) {
+            this.view.popupEnabled = value;
+        }
+    }
+    resizeAlignWatcher(value) {
+        if (this.view) {
+            this.view.resizeAlign = value;
+        }
+    }
+    rotationWatcher(value) {
+        if (this.view && this.view.rotation !== value) {
+            this.view.rotation = value;
+        }
+    }
+    scaleWatcher(value, old) {
+        if (!this.view?.interacting && value != null && value !== old) {
+            this.view.scale = value;
+        }
+    }
+    spatialReferenceWatcher(value) {
+        if (this.view && value && !this.view.spatialReference.equals(value)) {
+            this.view.spatialReference = value;
+        }
+    }
+    themeWatcher(value) {
+        if (this.view) {
+            this.view.theme = value;
+        }
+    }
+    timeExtentWatcher(value) {
+        if (this.view) {
+            this.view.timeExtent = value;
+        }
+    }
+    timeZoneWatcher(value) {
+        if (this.view) {
+            this.view.timeZone = value;
+        }
+    }
+    viewpointWatcher(value) {
+        if (this.view && isNotSameViewpoint(this.view.viewpoint, value)) {
+            this.view.viewpoint = value;
+        }
+    }
+    zoomWatcher(value, old) {
+        if (!this.view?.interacting && value != null && value !== old) {
+            this.view.zoom = value;
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    //--------------------------------------------------------------------------
+    async closePopup() {
+        this.view?.closePopup();
+    }
+    async destroy() {
+        if (this.destroyDisabled) {
+            this._clearWatchHandles();
+            this.view.destroy();
+        }
+    }
+    async goTo(target, options) {
+        return await this.view?.goTo(target, options);
+    }
+    async hitTest(screenPoint, options) {
+        return await this.view?.hitTest(screenPoint, options);
+    }
+    async openPopup(options) {
+        return await this.view?.openPopup(options);
+    }
+    async takeScreenshot(options) {
+        return await this.view?.takeScreenshot(options);
+    }
+    async tryFatalErrorRecovery() {
+        this.view?.tryFatalErrorRecovery();
+    }
+    async whenLayerView(layer) {
+        return await this.view?.whenLayerView(layer);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    async connectedCallback() {
+        this.view = await newViewsMapView({});
+    }
+    async componentWillLoad() {
+        await this._loadMap();
+    }
+    componentDidRender() {
+        if (this.view && !this.view.container) {
+            this.view.container = this.el;
+        }
+    }
+    componentDidLoad() {
+        this._proxyEvents();
+    }
+    disconnectedCallback() {
+        this.destroy();
+    }
+    render() {
+        return h("div", { class: "arcgis-map", ref: (el) => (this.el = el) });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    _clearWatchHandles() {
+        this._watchHandles.forEach((handle) => handle.remove());
+        this._watchHandles = [];
+    }
+    async _addWatchers() {
+        const { watch, when } = await importCoreReactiveUtils();
+        addHandles(this, [
+            // watch for ready and emit arcgisViewReadyChange event
+            watch(() => this.view.ready, () => {
+                this.ready = this.view.ready;
+                this.arcgisViewReadyChange.emit();
+            }, {
+                initial: true
+            }),
+            // watch for stationary and emit arcgisViewChange event
+            watch(() => this.view.stationary, () => {
+                this.stationary = this.view.stationary;
+                this.interacting = this.view.interacting;
+                this.navigating = this.view.navigating;
+                this.arcgisViewChange.emit();
+            }, {
+                initial: true
+            }),
+            // when view stationary is true, update these props:
+            // zoom, scale, center, rotation, extent, camera, viewpoint
+            when(() => this.view.stationary, () => {
+                this.center = this.view.center;
+                this.extent = this.view.extent;
+                this.scale = this.view.scale;
+                this.viewpoint = this.view.viewpoint;
+                this.zoom = this.view.zoom;
+                this.spatialReference = this.view.spatialReference;
+            }),
+            // watchers for other props to update component
+            watch(() => this.view.allLayerViews, () => {
+                this.allLayerViews = this.view.allLayerViews;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.map?.basemap, () => {
+                this.basemap = this.view.map?.basemap;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.fatalError, () => {
+                this.fatalError = this.view.fatalError;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.graphics, () => {
+                this.graphics = this.view.graphics;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.layerViews, () => {
+                this.layerViews = this.view.layerViews;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.navigation, () => {
+                this.navigation = this.view.navigation;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.map, () => {
+                this.map = this.view.map;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.popup, () => {
+                this.popup = this.view.popup;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.resolution, () => {
+                this.resolution = this.view.resolution;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.rotation, () => {
+                this.rotation = this.view.rotation;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.suspended, () => {
+                this.suspended = this.view.suspended;
+            }, {
+                initial: true
+            }),
+            watch(() => this.view.updating, () => {
+                this.updating = this.view.updating;
+            }, {
+                initial: true
+            })
+        ]);
+    }
+    async _createMap() {
+        const mapParams = {};
+        if (this.itemId) {
+            mapParams.portalItem = this._createPortalItem();
+        }
+        if (this.basemap) {
+            mapParams.basemap = this.basemap;
+        }
+        else if (isNullOrEmptyString(this.itemId)) {
+            mapParams.basemap = "topo-vector";
+        }
+        const map = await newWebMap(mapParams);
+        return map;
+    }
+    _createPortalItem() {
+        const item = {};
+        if (this.itemId) {
+            item.id = this.itemId;
+        }
+        return item;
+    }
+    _createViewParams() {
+        const params = {};
+        if (this.background) {
+            params.background = this.background;
+        }
+        if (this.center) {
+            if (typeof this.center === "string") {
+                params.center = this.center.split(",").map((x) => Number(x));
+            }
+            else {
+                params.center = this.center;
+            }
+        }
+        if (this.constraints) {
+            params.constraints = this.constraints;
+        }
+        if (this.extent) {
+            params.extent = this.extent;
+        }
+        if (this.floors) {
+            params.floors = this.floors;
+        }
+        if (this.highlightOptions) {
+            params.highlightOptions = this.highlightOptions;
+        }
+        if (this.map) {
+            params.map = this.map;
+        }
+        if (this.navigation) {
+            params.navigation = this.navigation;
+        }
+        if (this.popupEnabled !== undefined) {
+            params.popupEnabled = this.popupEnabled;
+        }
+        if (this.rotation !== undefined) {
+            params.rotation = this.rotation;
+        }
+        if (this.scale !== undefined) {
+            params.scale = this.scale;
+        }
+        if (this.spatialReference) {
+            params.spatialReference = this.spatialReference;
+        }
+        if (this.theme) {
+            params.theme = this.theme;
+        }
+        if (this.timeExtent) {
+            params.timeExtent = this.timeExtent;
+        }
+        if (this.timeZone) {
+            params.timeZone = this.timeZone;
+        }
+        if (this.viewpoint) {
+            params.viewpoint = this.viewpoint;
+        }
+        if (this.zoom !== undefined) {
+            params.zoom = this.zoom;
+        }
+        return params;
+    }
+    async _loadMap() {
+        this.map || (this.map = await this._createMap());
+        const params = this._createViewParams();
+        const view = await newViewsMapView({
+            ...params
+        });
+        this.view = view;
+        view.when(async () => {
+            // proxy view functions
+            this.toMap = view.toMap.bind(view);
+            this.toScreen = view.toScreen.bind(view);
+            await this._addWatchers();
+        });
+    }
+    _proxyEvents() {
+        addHandles(this, [
+            this.view.on("click", (event) => {
+                this.arcgisViewClick.emit(event);
+            }),
+            this.view.on("double-click", (event) => {
+                this.arcgisViewDoubleClick.emit(event);
+            }),
+            this.view.on("drag", (event) => {
+                this.arcgisViewDrag.emit(event);
+            }),
+            this.view.on("hold", (event) => {
+                this.arcgisViewHold.emit(event);
+            }),
+            this.view.on("immediate-click", (event) => {
+                this.arcgisViewImmediateClick.emit(event);
+            }),
+            this.view.on("immediate-double-click", (event) => {
+                this.arcgisViewImmediateDoubleClick.emit(event);
+            }),
+            this.view.on("key-down", (event) => {
+                this.arcgisViewKeyDown.emit(event);
+            }),
+            this.view.on("key-up", (event) => {
+                this.arcgisViewKeyUp.emit(event);
+            }),
+            this.view.on("layerview-create", (event) => {
+                this.arcgisViewLayerviewCreate.emit(event);
+            }),
+            this.view.on("layerview-create-error", (event) => {
+                this.arcgisViewLayerviewCreateError.emit(event);
+            }),
+            this.view.on("layerview-destroy", (event) => {
+                this.arcgisViewLayerviewDestroy.emit(event);
+            }),
+            this.view.on("mouse-wheel", (event) => {
+                this.arcgisViewMouseWheel.emit(event);
+            }),
+            this.view.on("pointer-down", (event) => {
+                this.arcgisViewPointerDown.emit(event);
+            }),
+            this.view.on("pointer-enter", (event) => {
+                this.arcgisViewPointerEnter.emit(event);
+            }),
+            this.view.on("pointer-leave", (event) => {
+                this.arcgisViewPointerLeave.emit(event);
+            }),
+            this.view.on("pointer-move", (event) => {
+                this.arcgisViewPointerMove.emit(event);
+            }),
+            this.view.on("pointer-up", (event) => {
+                this.arcgisViewPointerUp.emit(event);
+            })
+        ]);
+    }
+    async _updateMap() {
+        if (this.view?.map) {
+            this.view.map.destroy();
+            const map = await this._createMap();
+            this.view.map = map;
+        }
+    }
+    get _hostElement() { return this; }
+    static get watchers() { return {
+        "background": ["backgroundWatcher"],
+        "basemap": ["basemapWatcher"],
+        "center": ["centerWatcher"],
+        "constraints": ["constraintsWatcher"],
+        "extent": ["extentWatcher"],
+        "floors": ["floorsWatcher"],
+        "graphics": ["graphicsWatcher"],
+        "highlightOptions": ["highlightOptionsWatcher"],
+        "itemId": ["itemIdWatcher"],
+        "map": ["mapWatcher"],
+        "navigation": ["navigationWatcher"],
+        "padding": ["paddingWatcher"],
+        "popupEnabled": ["popupEnabledWatcher"],
+        "resizeAlign": ["resizeAlignWatcher"],
+        "rotation": ["rotationWatcher"],
+        "scale": ["scaleWatcher"],
+        "spatialReference": ["spatialReferenceWatcher"],
+        "theme": ["themeWatcher"],
+        "timeExtent": ["timeExtentWatcher"],
+        "timeZone": ["timeZoneWatcher"],
+        "viewpoint": ["viewpointWatcher"],
+        "zoom": ["zoomWatcher"]
+    }; }
+    static get style() { return mapCss; }
 }, [0, "arcgis-map", {
-    "apiKey": [1, "api-key"],
-    "basemap": [1025],
-    "backgroundColor": [1025, "background-color"],
-    "disableNavigation": [4, "disable-navigation"],
-    "itemId": [1, "item-id"],
-    "portalUrl": [1, "portal-url"],
-    "scale": [1538],
-    "zoom": [1538],
-    "center": [1537],
-    "view": [1040]
-  }]);
+        "allLayerViews": [1040],
+        "background": [1040],
+        "basemapView": [1040],
+        "basemap": [1040],
+        "center": [1025],
+        "constraints": [16],
+        "destroyDisabled": [4, "destroy-disabled"],
+        "extent": [1040],
+        "fatalError": [1040],
+        "floors": [16],
+        "graphics": [1040],
+        "highlightOptions": [16],
+        "interacting": [1028],
+        "itemId": [1537, "item-id"],
+        "layerViews": [1040],
+        "magnifier": [1040],
+        "map": [1040],
+        "navigating": [1028],
+        "navigation": [1040],
+        "padding": [16],
+        "popup": [1040],
+        "popupEnabled": [4, "popup-enabled"],
+        "ready": [1028],
+        "resizeAlign": [1, "resize-align"],
+        "resolution": [1026],
+        "rotation": [1026],
+        "scale": [1026],
+        "spatialReference": [1040],
+        "stationary": [1028],
+        "suspended": [1540],
+        "theme": [16],
+        "timeExtent": [16],
+        "timeZone": [1, "time-zone"],
+        "toMap": [1040],
+        "toScreen": [1040],
+        "updating": [1540],
+        "viewpoint": [1040],
+        "zoom": [1538],
+        "view": [1040],
+        "closePopup": [64],
+        "destroy": [64],
+        "goTo": [64],
+        "hitTest": [64],
+        "openPopup": [64],
+        "takeScreenshot": [64],
+        "tryFatalErrorRecovery": [64],
+        "whenLayerView": [64]
+    }, undefined, {
+        "background": ["backgroundWatcher"],
+        "basemap": ["basemapWatcher"],
+        "center": ["centerWatcher"],
+        "constraints": ["constraintsWatcher"],
+        "extent": ["extentWatcher"],
+        "floors": ["floorsWatcher"],
+        "graphics": ["graphicsWatcher"],
+        "highlightOptions": ["highlightOptionsWatcher"],
+        "itemId": ["itemIdWatcher"],
+        "map": ["mapWatcher"],
+        "navigation": ["navigationWatcher"],
+        "padding": ["paddingWatcher"],
+        "popupEnabled": ["popupEnabledWatcher"],
+        "resizeAlign": ["resizeAlignWatcher"],
+        "rotation": ["rotationWatcher"],
+        "scale": ["scaleWatcher"],
+        "spatialReference": ["spatialReferenceWatcher"],
+        "theme": ["themeWatcher"],
+        "timeExtent": ["timeExtentWatcher"],
+        "timeZone": ["timeZoneWatcher"],
+        "viewpoint": ["viewpointWatcher"],
+        "zoom": ["zoomWatcher"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["arcgis-map"];
-  components.forEach(tagName => { switch (tagName) {
-    case "arcgis-map":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ArcgisMap$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["arcgis-map"];
+    components.forEach(tagName => { switch (tagName) {
+        case "arcgis-map":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ArcgisMap$1);
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 
@@ -188,3 +624,5 @@ const ArcgisMap = ArcgisMap$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ArcgisMap, defineCustomElement };
+
+//# sourceMappingURL=arcgis-map.js.map