@arcgis/map-components 4.29.0-test.0 → 4.29.0

package/dist/cjs/arcgis-basemap-gallery_2.cjs.entry.js

@@ -0,0 +1,723 @@
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.29/esri/copyright.txt for details.
+ * v4.29.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11a44e53.js');
+const index$1 = require('./index-8bce9d37.js');
+const componentUtils = require('./component-utils-f77c943e.js');
+const disconnected = require('./disconnected-ec1c1b85.js');
+
+const basemapGalleryCss = "";
+
+const ArcgisBasemapGallery = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.arcgisBasemapGalleryReady = index.createEvent(this, "arcgisBasemapGalleryReady", 7);
+        this._watchHandles = [];
+        this.referenceElement = undefined;
+        this.activeBasemap = undefined;
+        this.disabled = false;
+        this.icon = undefined;
+        this.source = undefined;
+        this.position = "bottom-left";
+        this.view = undefined;
+        this.widget = undefined;
+    }
+    referenceElementWatcher(value) {
+        void componentUtils.referenceElementHelper(this, value);
+    }
+    disabledWatcher(value, old) {
+        if (this.widget && value !== old) {
+            this.widget.disabled = value;
+        }
+    }
+    iconWatcher(value) {
+        if (this.widget) {
+            this.widget.icon = value;
+            this.widget.iconClass = value;
+        }
+    }
+    sourceWatcher(value) {
+        if (this.widget) {
+            this.widget.source = value;
+        }
+    }
+    positionWatcher(value) {
+        if (value !== undefined && this.widget) {
+            this.view.ui.move(this.childElem, value);
+        }
+    }
+    viewWatcher(value) {
+        if (value !== undefined && this.widget) {
+            this.widget.view = value;
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    async componentDidLoad() {
+        const params = this._createParams();
+        const widget = await index$1.newWidgetsBasemapGallery(params);
+        this.widget = widget;
+        await this._addWatchers();
+        this._addContainer();
+        this.arcgisBasemapGalleryReady.emit();
+        componentUtils.checkForView(this);
+    }
+    disconnectedCallback() {
+        disconnected.onDisconnectedHelper(this);
+    }
+    render() {
+        return index.h("div", { ref: (el) => (this.childElem = el) });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Interal Methods
+    //
+    //--------------------------------------------------------------------------
+    _addContainer() {
+        this.widget.container = this.childElem;
+    }
+    async _addWatchers() {
+        const { watch } = await index$1.importCoreReactiveUtils();
+        componentUtils.addHandles(this, [
+            watch(() => this.widget.source, () => (this.source = this.widget.source), {
+                initial: true
+            }),
+            watch(() => this.widget.activeBasemap, (basemap) => (this.activeBasemap = basemap), {
+                initial: true
+            }),
+            watch(() => this.widget.disabled, (value) => (this.disabled = value))
+        ]);
+    }
+    _createParams() {
+        const params = {};
+        if (this.icon) {
+            params.icon = this.icon;
+            params.iconClass = this.icon;
+        }
+        if (this.source) {
+            params.source = this.source;
+        }
+        if (this.view) {
+            params.view = this.view;
+        }
+        return params;
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "referenceElement": ["referenceElementWatcher"],
+        "disabled": ["disabledWatcher"],
+        "icon": ["iconWatcher"],
+        "source": ["sourceWatcher"],
+        "position": ["positionWatcher"],
+        "view": ["viewWatcher"]
+    }; }
+};
+ArcgisBasemapGallery.style = basemapGalleryCss;
+
+const mapCss = ".arcgis-map{padding:0;margin:0;height:100%;width:100%}";
+
+const ArcgisMap = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.arcgisViewReadyChange = index.createEvent(this, "arcgisViewReadyChange", 7);
+        this.arcgisViewChange = index.createEvent(this, "arcgisViewChange", 7);
+        this.arcgisViewClick = index.createEvent(this, "arcgisViewClick", 7);
+        this.arcgisViewDoubleClick = index.createEvent(this, "arcgisViewDoubleClick", 7);
+        this.arcgisViewDrag = index.createEvent(this, "arcgisViewDrag", 7);
+        this.arcgisViewHold = index.createEvent(this, "arcgisViewHold", 7);
+        this.arcgisViewImmediateClick = index.createEvent(this, "arcgisViewImmediateClick", 7);
+        this.arcgisViewImmediateDoubleClick = index.createEvent(this, "arcgisViewImmediateDoubleClick", 7);
+        this.arcgisViewKeyDown = index.createEvent(this, "arcgisViewKeyDown", 7);
+        this.arcgisViewKeyUp = index.createEvent(this, "arcgisViewKeyUp", 7);
+        this.arcgisViewLayerviewCreate = index.createEvent(this, "arcgisViewLayerviewCreate", 7);
+        this.arcgisViewLayerviewCreateError = index.createEvent(this, "arcgisViewLayerviewCreateError", 7);
+        this.arcgisViewLayerviewDestroy = index.createEvent(this, "arcgisViewLayerviewDestroy", 7);
+        this.arcgisViewMouseWheel = index.createEvent(this, "arcgisViewMouseWheel", 7);
+        this.arcgisViewPointerDown = index.createEvent(this, "arcgisViewPointerDown", 7);
+        this.arcgisViewPointerEnter = index.createEvent(this, "arcgisViewPointerEnter", 7);
+        this.arcgisViewPointerLeave = index.createEvent(this, "arcgisViewPointerLeave", 7);
+        this.arcgisViewPointerMove = index.createEvent(this, "arcgisViewPointerMove", 7);
+        this.arcgisViewPointerUp = index.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.gamepad = undefined;
+        this.graphics = undefined;
+        this.highlightOptions = undefined;
+        this.interacting = false;
+        this.itemId = undefined;
+        this.layerViews = undefined;
+        this.magnifier = undefined;
+        this.map = undefined;
+        this.navigating = false;
+        this.navigation = undefined;
+        this.padding = undefined;
+        this.popup = undefined;
+        this.popupEnabled = true;
+        this.ready = false;
+        this.resizeAlign = undefined;
+        this.resolution = undefined;
+        this.rotation = 0;
+        this.scale = undefined;
+        this.spatialReference = undefined;
+        this.stationary = undefined;
+        this.suspended = true;
+        this.theme = undefined;
+        this.timeExtent = undefined;
+        this.timeZone = "system";
+        this.toMap = undefined;
+        this.toScreen = undefined;
+        this.updating = false;
+        this.viewpoint = undefined;
+        this.zoom = undefined;
+        this.view = undefined;
+    }
+    backgroundWatcher(value) {
+        if (this.view) {
+            this.background = value;
+        }
+    }
+    basemapWatcher(value) {
+        if (typeof value === "string" && this.view?.map && !componentUtils.isNullOrEmptyString(value)) {
+            this.view.map.basemap = value;
+        }
+        else if (this.view?.map) {
+            this.view.map.basemap = value;
+        }
+    }
+    centerWatcher(value, old) {
+        if (value !== old && this.view) {
+            if (typeof value === "string") {
+                // check if center is string
+                const center = value.split(",").map((x) => Number(x));
+                if (center[0] !== this.view.center.longitude && center[1] !== this.view.center.latitude) {
+                    this.view.center = center;
+                }
+            }
+            else if (Array.isArray(value)) {
+                // array
+                if (value[0] !== this.view.center.longitude && value[1] !== this.view.center.latitude) {
+                    this.view.center = value;
+                }
+            }
+            else if (!this.view.center.equals(value)) {
+                // finally a point
+                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) {
+                void this._updateMap();
+            }
+            else {
+                void 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;
+        }
+    }
+    popupWatcher(value) {
+        if (this.view) {
+            this.view.popup = value;
+        }
+    }
+    popupEnabledWatcher(value, old) {
+        if (value !== old && 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 && componentUtils.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
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Closes the popup.
+     */
+    async closePopup() {
+        this.view?.closePopup();
+    }
+    /**
+     * Destroys the view, and any associated resources, including its map, popup, and UI elements.
+     */
+    async destroy() {
+        if (this.destroyDisabled) {
+            this._clearWatchHandles();
+            this.view.destroy();
+        }
+    }
+    /**
+     * Sets the view to a given target.
+     */
+    async goTo(target, options) {
+        return (await this.view?.goTo(target, options));
+    }
+    /**
+     * Returns hit test results from each layer that intersects the specified screen coordinates.
+     */
+    async hitTest(screenPoint, options) {
+        return await this.view?.hitTest(screenPoint, options);
+    }
+    /**
+     * Opens the popup at the given location with content defined either explicitly with content or driven
+     * from the PopupTemplate of input features.
+     */
+    async openPopup(options) {
+        return void this.view?.openPopup(options);
+    }
+    /**
+     * Create a screenshot of the current view.
+     */
+    async takeScreenshot(options) {
+        return await this.view?.takeScreenshot(options);
+    }
+    /**
+     * Call this method to clear any fatal errors resulting from a lost WebGL context.
+     */
+    async tryFatalErrorRecovery() {
+        this.view?.tryFatalErrorRecovery();
+    }
+    /**
+     * Gets the LayerView created on the view for the given layer.
+     */
+    async whenLayerView(layer) {
+        return await this.view?.whenLayerView(layer);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    async componentWillLoad() {
+        if (!this.view) {
+            await this._loadMap();
+        }
+    }
+    componentDidRender() {
+        if (this.view && !this.view.container) {
+            this.view.container = this.el;
+        }
+    }
+    componentDidLoad() {
+        this._proxyEvents();
+    }
+    disconnectedCallback() {
+        void this.destroy();
+    }
+    render() {
+        return index.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 index$1.importCoreReactiveUtils();
+        componentUtils.addHandles(this, [
+            // 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.input.gamepad, () => {
+                this.gamepad = this.view.input.gamepad;
+            }, {
+                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
+            }),
+            // watch for ready and emit arcgisViewReadyChange event
+            watch(() => this.view.ready, () => {
+                this.ready = this.view.ready;
+                this.arcgisViewReadyChange.emit();
+            }, {
+                initial: true
+            })
+        ]);
+    }
+    async _createMap() {
+        const mapParams = {};
+        if (this.itemId) {
+            mapParams.portalItem = await this._createPortalItem();
+        }
+        if (this.basemap) {
+            mapParams.basemap = this.basemap;
+        }
+        else if (componentUtils.isNullOrEmptyString(this.itemId)) {
+            mapParams.basemap = "topo-vector";
+        }
+        const map = await index$1.newWebMap(mapParams);
+        return map;
+    }
+    async _createPortalItem() {
+        const itemProps = {};
+        if (this.itemId) {
+            itemProps.id = this.itemId;
+        }
+        return itemProps;
+    }
+    _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.graphics) {
+            params.graphics = this.graphics;
+        }
+        if (this.highlightOptions) {
+            params.highlightOptions = this.highlightOptions;
+        }
+        if (this.map) {
+            params.map = this.map;
+        }
+        if (this.navigation) {
+            params.navigation = this.navigation;
+        }
+        if (this.padding) {
+            params.padding = this.padding;
+        }
+        if (this.popup) {
+            params.popup = this.popup;
+        }
+        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 index$1.newViewsMapView({
+            ...params
+        });
+        this.view = view;
+        return void view.when(async () => {
+            // proxy view functions
+            this.toMap = view.toMap.bind(view);
+            this.toScreen = view.toScreen.bind(view);
+            await this._addWatchers();
+        });
+    }
+    _proxyEvents() {
+        componentUtils.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 index.getElement(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"],
+        "popup": ["popupWatcher"],
+        "popupEnabled": ["popupEnabledWatcher"],
+        "resizeAlign": ["resizeAlignWatcher"],
+        "rotation": ["rotationWatcher"],
+        "scale": ["scaleWatcher"],
+        "spatialReference": ["spatialReferenceWatcher"],
+        "theme": ["themeWatcher"],
+        "timeExtent": ["timeExtentWatcher"],
+        "timeZone": ["timeZoneWatcher"],
+        "viewpoint": ["viewpointWatcher"],
+        "zoom": ["zoomWatcher"]
+    }; }
+};
+ArcgisMap.style = mapCss;
+
+exports.arcgis_basemap_gallery = ArcgisBasemapGallery;
+exports.arcgis_map = ArcgisMap;