@theseam/ui-common 0.4.30 → 1.0.0-beta.1

package/fesm2022/theseam-ui-common-google-maps.mjs

@@ -0,0 +1,2191 @@
+import { __decorate } from 'tslib';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Injector, HostListener, Input, Optional, Inject, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, EventEmitter, forwardRef, ViewChild, Output, HostBinding, Directive, NgModule, LOCALE_ID } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable, Subject, fromEvent, BehaviorSubject, from, of, interval, defer, throwError } from 'rxjs';
+import { takeUntil, switchMap, tap, map, catchError, startWith, filter, take, mapTo } from 'rxjs/operators';
+import { faFileImport, faCrosshairs, faSearchLocation } from '@fortawesome/free-solid-svg-icons';
+import { mixinDisabled, InputBoolean, InputNumber } from '@theseam/ui-common/core';
+import * as i6 from '@theseam/ui-common/menu';
+import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
+import { notNullOrUndefined, isNullOrUndefined, readGeoFile } from '@theseam/ui-common/utils';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import booleanContains from '@turf/boolean-contains';
+import { polygon, multiPolygon } from '@turf/helpers';
+import * as i2 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import * as i1 from '@angular/cdk/a11y';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i7 from '@angular/google-maps';
+import { GoogleMapsModule } from '@angular/google-maps';
+import { ObserversModule } from '@angular/cdk/observers';
+import * as i3 from '@theseam/ui-common/form-field';
+import { InputDirective, TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import { TheSeamSharedModule } from '@theseam/ui-common/shared';
+
+const MAP_CONTROLS_SERVICE = new InjectionToken('MAP_CONTROLS_SERVICE');
+const MAP_CONTROL_DATA = new InjectionToken('MAP_CONTROL_DATA');
+
+var AppFeaturePropertyName;
+(function (AppFeaturePropertyName) {
+    AppFeaturePropertyName["IsSelected"] = "__app__isSelected";
+})(AppFeaturePropertyName || (AppFeaturePropertyName = {}));
+function isAppFeatureProperty(propertyName) {
+    return Object.values(AppFeaturePropertyName)
+        .findIndex(value => value === propertyName) !== -1;
+}
+function isFeatureSelected(feature) {
+    const isSelected = feature.getProperty(AppFeaturePropertyName.IsSelected);
+    return coerceBooleanProperty(isSelected);
+}
+function setFeatureSelected(feature, isSelected) {
+    feature.setProperty(AppFeaturePropertyName.IsSelected, isSelected);
+}
+const EXTERNAL_FEATURE_DEFINED_STYLE_OPTIONS_PROPERTY_NAME = 'styleOptions';
+const EXTERNAL_FEATURE_DEFINED_STYLE_OPTIONS_HOVERED_PROPERTY_NAME = 'styleOptionsHovered';
+const EXTERNAL_FEATURE_DEFINED_STYLE_OPTIONS_SELECTED_PROPERTY_NAME = 'styleOptionsSelected';
+function getStyleOptionsDefinedByFeature(feature) {
+    return feature.getProperty(EXTERNAL_FEATURE_DEFINED_STYLE_OPTIONS_PROPERTY_NAME) || undefined;
+}
+function getHoveredStyleOptionsDefinedByFeature(feature) {
+    return feature.getProperty(EXTERNAL_FEATURE_DEFINED_STYLE_OPTIONS_HOVERED_PROPERTY_NAME) || undefined;
+}
+function getSelectedStyleOptionsDefinedByFeature(feature) {
+    return feature.getProperty(EXTERNAL_FEATURE_DEFINED_STYLE_OPTIONS_SELECTED_PROPERTY_NAME) || undefined;
+}
+// TODO: Check performance of cloning a google.maps.Data instance, so the
+// properties can be removed with the google maps api, instead of on the
+// resulting json.
+function stripAppFeaturePropertiesFromJson(json) {
+    if (notNullOrUndefined(json) && Array.isArray(json?.features)) {
+        for (const feature of json.features) {
+            if (notNullOrUndefined(feature?.properties)) {
+                for (const k of Object.keys(feature.properties)) {
+                    if (isAppFeatureProperty(k)) {
+                        feature.properties[k] = undefined;
+                        delete feature.properties[k];
+                    }
+                }
+            }
+        }
+    }
+}
+/**
+ * Searches for a Feature in Data that contains the provided Feature and can use
+ * it as a cutout area.
+ */
+function getPossibleExteriorFeature(data, feature) {
+    let exteriorPolygonFeature;
+    data.forEach(f => {
+        if (f === feature) {
+            return;
+        }
+        const geometry = f.getGeometry();
+        if (geometry === null) {
+            throw Error(`Geometry not found.`);
+        }
+        if (geometry.getType() === 'Polygon' && featureContains(f, feature)) {
+            exteriorPolygonFeature = f;
+        }
+    });
+    return exteriorPolygonFeature;
+}
+function addInnerFeatureCutoutToExteriorFeature(exteriorFeature, innerFeature) {
+    const exteriorGeometry = exteriorFeature.getGeometry();
+    if (exteriorGeometry === null) {
+        throw Error(`Geometry not found.`);
+    }
+    const innerGeometry = innerFeature.getGeometry();
+    if (innerGeometry === null) {
+        throw Error(`Geometry not found.`);
+    }
+    // NOTE: Other geometries may support cutouts, but our map shapes editor only
+    // supports polygons currently, so we will need to handle other geometry types
+    // here if we start allowing users to draw shapes other than polygon.
+    if (exteriorGeometry.getType() !== 'Polygon' || innerGeometry.getType() !== 'Polygon') {
+        throw Error(`Inner cutout is only supported by Polygon gemoetry.`);
+    }
+    const featurePolygon = innerGeometry;
+    const exteriorPolygon = exteriorGeometry;
+    exteriorFeature.setGeometry(new google.maps.Data.Polygon([
+        ...exteriorPolygon.getArray(),
+        featurePolygon.getAt(0).getArray().reverse()
+    ]));
+}
+/**
+ * Google maps paths don't always start and stop at the exact same position, so
+ * this will fix that for turfjs.
+ */
+function fixPathDifferentStartingAndEndingPoint(coordinates) {
+    if (coordinates.length <= 1) {
+        return;
+    }
+    const start = coordinates[0];
+    const end = coordinates[coordinates.length - 1];
+    if (start[0] === end[0] && start[1] === end[1]) {
+        return;
+    }
+    coordinates.push(coordinates[0]);
+}
+function polygonHasValidPathsLengths(polygon, minPointsInValidPath = 3) {
+    const paths = polygon.getPaths().getArray();
+    for (const path of paths) {
+        if (path.getLength() < minPointsInValidPath) {
+            return false;
+        }
+    }
+    return true;
+}
+function polygonCoordinates(polygon) {
+    return polygon.getArray().map(linRing => {
+        const coords = linRing.getArray().map(x => [x.lng(), x.lat()]);
+        fixPathDifferentStartingAndEndingPoint(coords);
+        return coords;
+    });
+}
+function multiPolygonCoordinates(multiPolygon) {
+    return multiPolygon.getArray().map(x => polygonCoordinates(x));
+}
+function toTurfJsPolygon(polygon$1) {
+    return polygon(polygonCoordinates(polygon$1));
+}
+function toTurfJsMultiPolygon(multiPolygon$1) {
+    return multiPolygon(multiPolygonCoordinates(multiPolygon$1));
+}
+function toTurfJsFeature(googleFeature) {
+    const geometry = googleFeature.getGeometry();
+    if (geometry === null) {
+        throw Error(`Geometry not found.`);
+    }
+    if (geometry.getType() === 'Polygon') {
+        return toTurfJsPolygon(geometry);
+    }
+    else if (geometry.getType() === 'MultiPolygon') {
+        return toTurfJsMultiPolygon(geometry);
+    }
+    throw Error(`Unexpected geometry.`);
+}
+function featureContains(featureA, featureB) {
+    const polygonA = toTurfJsFeature(featureA);
+    const polygonB = toTurfJsFeature(featureB);
+    return booleanContains(polygonA, polygonB);
+}
+function createDataFeatureFromPolygon(polygon) {
+    const arr = polygon.getPaths().getArray().map(x => x.getArray());
+    return new google.maps.Data.Feature({
+        geometry: new google.maps.Data.Polygon(arr)
+    });
+}
+function getBoundsWithAllFeatures(data) {
+    const bounds = new google.maps.LatLngBounds();
+    data.forEach(feature => {
+        const geometry = feature.getGeometry();
+        if (geometry === null) {
+            throw Error(`Geometry not found.`);
+        }
+        geometry.forEachLatLng(latLng => {
+            bounds.extend(latLng);
+        });
+    });
+    return bounds;
+}
+function getFeatureBounds(feature) {
+    const bounds = new google.maps.LatLngBounds();
+    const geometry = feature.getGeometry();
+    if (geometry === null) {
+        throw Error(`Geometry not found.`);
+    }
+    geometry.forEachLatLng(latLng => {
+        bounds.extend(latLng);
+    });
+    return bounds;
+}
+function getFeatureCenter(feature) {
+    return getFeatureBounds(feature).getCenter();
+}
+function removeAllFeatures(data) {
+    data.forEach(f => data.remove(f));
+}
+function getFeaturesCount(data) {
+    let count = 0;
+    data.forEach(() => count++);
+    return count;
+}
+/**
+ * NOTE: Original events are not emitted, because filtering may omit events.
+ */
+function createFeatureChangeObservable(data, ngZone) {
+    return new Observable(subscriber => {
+        const listeners = [];
+        ngZone.runOutsideAngular(() => {
+            listeners.push(data.addListener('setgeometry', (event) => {
+                ngZone.run(() => { subscriber.next(undefined); });
+            }));
+            listeners.push(data.addListener('addfeature', (event) => {
+                ngZone.run(() => { subscriber.next(undefined); });
+            }));
+            listeners.push(data.addListener('removefeature', (event) => {
+                ngZone.run(() => { subscriber.next(undefined); });
+            }));
+            listeners.push(data.addListener('setproperty', (event) => {
+                if (!isAppFeatureProperty(event.name)) {
+                    ngZone.run(() => { subscriber.next(undefined); });
+                }
+            }));
+            listeners.push(data.addListener('removeproperty', (event) => {
+                if (!isAppFeatureProperty(event.name)) {
+                    ngZone.run(() => { subscriber.next(undefined); });
+                }
+            }));
+        });
+        return () => {
+            listeners.forEach(google.maps.event.removeListener);
+        };
+    });
+}
+
+// TODO: Close on map losing focus.
+class GoogleMapsContextMenu {
+    _map;
+    _menu;
+    _vcr;
+    _ngZone;
+    _data;
+    _feature;
+    _overlayView;
+    _cleanupFn;
+    constructor(_map, _menu, _position, _vcr, _ngZone, _data, _feature) {
+        this._map = _map;
+        this._menu = _menu;
+        this._vcr = _vcr;
+        this._ngZone = _ngZone;
+        this._data = _data;
+        this._feature = _feature;
+        const tplRef = this._menu.templateRef;
+        if (tplRef === undefined || tplRef === null) {
+            throw Error(`Menu template is not defined.`);
+        }
+        const ref = this._vcr.createEmbeddedView(tplRef);
+        ref.detectChanges();
+        const listeners = [];
+        const ngUnsubscribe = new Subject();
+        // TODO: Fix the initial focus. setTimeout avoids the wrong contextmenu
+        // getting triggered, but the first item flashes and looks off this way.
+        setTimeout(() => {
+            this._menu.focusFirstItem('program');
+        });
+        this._menu.closed.pipe(takeUntil(ngUnsubscribe)).subscribe(v => {
+            this.close();
+        });
+        fromEvent(document, 'keydown').pipe(takeUntil(ngUnsubscribe)).subscribe((event) => {
+            if (event.keyCode === ESCAPE) {
+                this.close();
+            }
+        });
+        const __cleanup = () => this._cleanupFn();
+        class GoogleMapsContextMenuOverlayView extends google.maps.OverlayView {
+            position;
+            containerDiv;
+            constructor(position, content) {
+                super();
+                this.position = position;
+                this.position = position;
+                this.containerDiv = document.createElement('div');
+                this.containerDiv.style.cursor = 'auto';
+                this.containerDiv.style.height = '0';
+                this.containerDiv.style.position = 'absolute';
+                this.containerDiv.appendChild(content);
+                // Optionally stop clicks, etc., from bubbling up to the map.
+                GoogleMapsContextMenuOverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
+            }
+            /** Called when the view is added to the map. */
+            onAdd() {
+                this.getPanes()?.floatPane.appendChild(this.containerDiv);
+            }
+            /** Called when the view is removed from the map. */
+            onRemove() {
+                if (this.containerDiv.parentElement) {
+                    this.containerDiv.parentElement.removeChild(this.containerDiv);
+                }
+                __cleanup();
+            }
+            /** Called each frame when the view needs to draw itself. */
+            draw() {
+                const divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
+                if (!divPosition) {
+                    return;
+                }
+                // Hide the popup when it is far out of view.
+                const display = Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000
+                    ? 'block'
+                    : 'none';
+                if (display === 'block') {
+                    this.containerDiv.style.left = `${divPosition.x}px`;
+                    this.containerDiv.style.top = `${divPosition.y}px`;
+                }
+                if (this.containerDiv.style.display !== display) {
+                    this.containerDiv.style.display = display;
+                }
+            }
+        }
+        this._overlayView = new GoogleMapsContextMenuOverlayView(_position, ref.rootNodes[0]);
+        this._overlayView.setMap(this._map);
+        this._ngZone.runOutsideAngular(() => {
+            listeners.push(this._data.addListener('removefeature', (event) => {
+                if (event.feature === this._feature) {
+                    this._ngZone.run(() => { this.close(); });
+                }
+            }));
+            listeners.push(this._data.addListener('setproperty', (event) => {
+                if (event.feature === this._feature && !isFeatureSelected(this._feature)) {
+                    this._ngZone.run(() => { this.close(); });
+                }
+            }));
+            listeners.push(this._data.addListener('removeproperty', (event) => {
+                if (event.feature === this._feature && !isFeatureSelected(this._feature)) {
+                    this._ngZone.run(() => { this.close(); });
+                }
+            }));
+            listeners.push(this._map.addListener('click', (event) => {
+                this._ngZone.run(() => { this.close(); });
+            }));
+            listeners.push(this._data.addListener('click', (event) => {
+                this._ngZone.run(() => { this.close(); });
+            }));
+        });
+        this._cleanupFn = () => {
+            ngUnsubscribe.next();
+            ngUnsubscribe.complete();
+            listeners.forEach(google.maps.event.removeListener);
+        };
+    }
+    close() {
+        this._overlayView.setMap(null);
+    }
+}
+
+var MapValueSource;
+(function (MapValueSource) {
+    MapValueSource["Input"] = "input";
+    MapValueSource["FeatureChange"] = "featurechange";
+})(MapValueSource || (MapValueSource = {}));
+class MapValueManagerService {
+    _valueChangedSubject = new Subject();
+    _value;
+    valueChanged;
+    constructor() {
+        this.valueChanged = this._valueChangedSubject.asObservable();
+    }
+    setValue(value, source) {
+        if (value === this._value) {
+            return false;
+        }
+        if (value === null || value === undefined) {
+            this._value = value;
+            const _change = {
+                source,
+                value: this._value,
+            };
+            this._valueChangedSubject.next(_change);
+            return true;
+        }
+        if (JSON.stringify(value) === JSON.stringify(this._value)) {
+            return true;
+        }
+        // TODO: Validate object is valid geojson.
+        this._value = value;
+        const change = {
+            source,
+            value: this._value,
+        };
+        this._valueChangedSubject.next(change);
+        return true;
+    }
+    get value() {
+        return this._value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MapValueManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MapValueManagerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MapValueManagerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const DEFAULT_POLYGON_OPTIONS = (editingEnabled) => ({
+    clickable: editingEnabled,
+    draggable: editingEnabled,
+    editable: editingEnabled,
+});
+const DEFAULT_DRAWING_MANAGER_OPTIONS = (editingEnabled) => ({
+    drawingControl: editingEnabled,
+    drawingControlOptions: {
+        drawingModes: [
+            google.maps.drawing.OverlayType.POLYGON,
+        ],
+    },
+    polygonOptions: DEFAULT_POLYGON_OPTIONS(editingEnabled),
+    drawingMode: null,
+});
+const FEATURE_STYLE_OPTIONS_DEFAULT = (editingEnabled) => ({
+    clickable: true,
+    // clickable: editingEnabled,
+    visible: true,
+    // zIndex?: number;
+    // cursor?: string;
+    draggable: false,
+    editable: false,
+    fillColor: 'teal',
+    fillOpacity: 0.3,
+    strokeColor: 'blue',
+    strokeOpacity: 1,
+    strokeWeight: 2,
+});
+const FEATURE_STYLE_OPTIONS_SELECTED = (editingEnabled) => ({
+    ...FEATURE_STYLE_OPTIONS_DEFAULT(editingEnabled),
+    draggable: editingEnabled,
+    editable: editingEnabled,
+    fillColor: 'green',
+    fillOpacity: 0.7,
+    strokeColor: 'limegreen',
+    strokeOpacity: 1,
+    strokeWeight: 2,
+});
+const FEATURE_STYLE_OVERRIDE_OPTIONS_HOVERED = (editingEnabled) => ({
+    strokeColor: 'black',
+    strokeOpacity: 1,
+    strokeWeight: 4,
+});
+const SUPPORTED_PROPERTY_STYLE_OPTIONS = [
+    'fillColor',
+    'fillOpacity',
+    'strokeColor',
+    'strokeOpacity',
+    'strokeWeight',
+    'label',
+    'opacity',
+    'icon',
+    'clickable',
+    'visible',
+];
+class GoogleMapsService {
+    _mapValueManager;
+    _ngZone;
+    _vcr;
+    _ngUnsubscribe = new Subject();
+    _mapReadySubject = new BehaviorSubject(false);
+    _editingEnabledSubject = new BehaviorSubject(true);
+    _drawingManager;
+    _featureContextMenu = null;
+    _activeContextMenu = null;
+    _baseLatLng;
+    _padding;
+    _allowDrawingHoleInPolygon = false;
+    // TODO: Move to a better place than the map wrapper service.
+    _fileInputHandler;
+    googleMap;
+    mapReady$;
+    get mapReady() { return this._mapReadySubject.value; }
+    editingEnabled$;
+    constructor(_mapValueManager, _ngZone, _vcr) {
+        this._mapValueManager = _mapValueManager;
+        this._ngZone = _ngZone;
+        this._vcr = _vcr;
+        this.editingEnabled$ = this._editingEnabledSubject.asObservable();
+        this.mapReady$ = this._mapReadySubject.asObservable();
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    setMap(map) {
+        this.googleMap = map;
+        this._mapReadySubject.next(true);
+        this._initDrawingManager();
+        this._initFeatureStyling();
+        this._initFeatureChangeListeners();
+    }
+    setBaseLatLng(lat, lng) {
+        this._baseLatLng = { lat, lng };
+    }
+    setPadding(padding) {
+        this._padding = padding;
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    setFeatureContextMenu(menu) {
+        this.closeContextMenu();
+        this._featureContextMenu = menu;
+    }
+    setEditingEnabled(enabled) {
+        this._editingEnabledSubject.next(enabled);
+        if (this.mapReady) {
+            this._assertInitialized();
+            this.googleMap.data.revertStyle();
+            if (!enabled) {
+                this.stopDrawing();
+                const options = DEFAULT_DRAWING_MANAGER_OPTIONS(this.isEditingEnabled());
+                this._drawingManager?.setOptions(options);
+                this._drawingManager?.setMap(null);
+                this.googleMap.data.forEach(f => {
+                    if (isFeatureSelected(f)) {
+                        setFeatureSelected(f, false);
+                    }
+                });
+            }
+            else {
+                const options = DEFAULT_DRAWING_MANAGER_OPTIONS(this.isEditingEnabled());
+                this._drawingManager?.setOptions(options);
+                this._drawingManager?.setMap(this.googleMap);
+            }
+        }
+    }
+    isEditingEnabled() {
+        return this._editingEnabledSubject.value;
+    }
+    getDiv() {
+        this._assertInitialized();
+        return this.googleMap.getDiv();
+    }
+    fitBounds(bounds, padding) {
+        this._assertInitialized();
+        this.googleMap.fitBounds(bounds, padding);
+    }
+    /**
+     * Iterates the map's features and removes any that are selected.
+     */
+    deleteSelection() {
+        this._assertInitialized();
+        const mapData = this.googleMap.data;
+        mapData.forEach(f => {
+            if (isFeatureSelected(f)) {
+                mapData.remove(f);
+            }
+        });
+    }
+    /**
+     * Stops the current drawing.
+     */
+    stopDrawing() {
+        this._ngZone.runOutsideAngular(() => {
+            if (isNullOrUndefined(this._drawingManager) || this._drawingManager.getDrawingMode() === null) {
+                return;
+            }
+            // Listening for the completion event of the overlay currently being drawn
+            // and removing it. I haven't found a way to cancel the current drawing,
+            // without this hack that assumes our listeners will not run into a race
+            // condition.
+            const listener = google.maps.event.addListener(this._drawingManager, 'overlaycomplete', (event) => {
+                event.overlay?.setMap(null);
+                listener.remove();
+            });
+            // To fake canceling the current drawing, without disabling the drawing
+            // mode, the drawing mode is being unset then immediately set back. When
+            // the mode is unset the 'overlaycomplete' event will fire, which will
+            // give a reference to the current overlay to remove, then it is set back
+            // to the mode the user was using. To the user is should just seem like
+            // the current drawing was canceled and they can start drawing again.
+            const mode = this._drawingManager.getDrawingMode();
+            this._drawingManager.setDrawingMode(null);
+            this._drawingManager.setDrawingMode(mode);
+            // 'overlaycomplete' should fire immediately, unless an overlay hadn't
+            // started drawing. This timeout will make sure the listener gets removed.
+            setTimeout(() => {
+                listener.remove();
+            });
+        });
+    }
+    _initDrawingManager() {
+        if (notNullOrUndefined(this._drawingManager)) {
+            throw Error(`DrawingManager is already initialized.`);
+        }
+        this._assertInitialized();
+        const options = DEFAULT_DRAWING_MANAGER_OPTIONS(this.isEditingEnabled());
+        const drawingManager = new google.maps.drawing.DrawingManager(options);
+        drawingManager.setMap(this.googleMap);
+        this._drawingManager = drawingManager;
+        this._drawingManager.addListener('drawingmode_changed', (event) => {
+            if (this._drawingManager?.getDrawingMode() !== null) {
+                this._assertInitialized();
+                this.googleMap.data.forEach(f => {
+                    if (isFeatureSelected(f)) {
+                        setFeatureSelected(f, false);
+                    }
+                });
+            }
+        });
+    }
+    addControl(element, position) {
+        this._assertInitialized();
+        this.googleMap.controls[position].push(element);
+    }
+    async setData(data) {
+        this._assertInitialized();
+        removeAllFeatures(this.googleMap.data);
+        this.googleMap.data.addGeoJson(data);
+        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data), this._padding);
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    reCenterOnFeatures() {
+        this._assertInitialized();
+        if (getFeaturesCount(this.googleMap.data) === 0) {
+            if (!this._baseLatLng) {
+                return;
+            }
+            this.googleMap.panTo(this._baseLatLng);
+            return;
+        }
+        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data), this._padding);
+        // TODO: Fix to pan to center. Currently fitBounds results in the expected
+        // result, but pantToBounds animates.
+        // this.googleMap.panToBounds(getBoundsWithAllFeatures(this.googleMap.data))
+    }
+    allowDrawingHoleInPolygon(allow) {
+        this._allowDrawingHoleInPolygon = allow;
+    }
+    setFileInputHandler(handler) {
+        this._fileInputHandler = handler;
+    }
+    getFileInputHandler() {
+        return this._fileInputHandler;
+    }
+    _initFeatureStyling() {
+        this._assertInitialized();
+        // Disable any selection when clicking the map.
+        //
+        // TODO: There may be a better way to do this that would be more accurate or
+        // additional events that should be listened to, such as the disabling
+        // selection when the map looses focus.
+        this.googleMap.addListener('click', (even) => {
+            this._assertInitialized();
+            this.googleMap.data.forEach(f => setFeatureSelected(f, false));
+        });
+        // Determine what the style of the features are.
+        this.googleMap.data.setStyle(feature => {
+            let opts = FEATURE_STYLE_OPTIONS_DEFAULT(this.isEditingEnabled());
+            const options = getStyleOptionsDefinedByFeature(feature);
+            this._mergeStyleOptions(opts, options ?? {});
+            if (isFeatureSelected(feature)) {
+                const hoverOptions = getHoveredStyleOptionsDefinedByFeature(feature);
+                opts = FEATURE_STYLE_OPTIONS_SELECTED(this.isEditingEnabled());
+                this._mergeStyleOptions(opts, hoverOptions ?? {});
+            }
+            return opts;
+        });
+        // Select a feature when clicked.
+        this.googleMap.data.addListener('click', (event) => {
+            this._assertInitialized();
+            setFeatureSelected(event.feature, true);
+            this.googleMap.data.forEach(f => {
+                if (f !== event.feature && isFeatureSelected(f)) {
+                    setFeatureSelected(f, false);
+                }
+            });
+        });
+        // Set a style on hovered features that can be selected.
+        this.googleMap.data.addListener('mouseover', (event) => {
+            this._assertInitialized();
+            this.googleMap.data.revertStyle();
+            if (!this.isDrawing() && !isFeatureSelected(event.feature)) {
+                this.setFeatureHoveredStyleOverride(event.feature);
+            }
+        });
+        // Remove any hover styles when mouse moves away.
+        this.googleMap.data.addListener('mouseout', (event) => {
+            this._assertInitialized();
+            this.googleMap.data.revertStyle();
+        });
+    }
+    setFeatureHoveredStyleOverride(feature) {
+        this._assertInitialized();
+        const overrideOpts = FEATURE_STYLE_OVERRIDE_OPTIONS_HOVERED(this.isEditingEnabled());
+        const hoverOptions = getHoveredStyleOptionsDefinedByFeature(feature);
+        this._mergeStyleOptions(overrideOpts, hoverOptions ?? {});
+        this.googleMap.data.overrideStyle(feature, overrideOpts);
+    }
+    _mergeStyleOptions(options, propertiesStyleOptions) {
+        if (Object.keys(propertiesStyleOptions).length === 0) {
+            return;
+        }
+        for (const opt of SUPPORTED_PROPERTY_STYLE_OPTIONS) {
+            if (Object.prototype.hasOwnProperty.call(propertiesStyleOptions, opt)) {
+                options[opt] = propertiesStyleOptions[opt];
+            }
+        }
+    }
+    _initFeatureChangeListeners() {
+        this._assertInitialized();
+        createFeatureChangeObservable(this.googleMap.data, this._ngZone).pipe(switchMap(() => from(this.getGeoJson()).pipe(tap(geoJson => this._mapValueManager.setValue(geoJson, MapValueSource.FeatureChange)))), takeUntil(this._ngUnsubscribe)).subscribe();
+        this.googleMap.data.addListener('contextmenu', (event) => {
+            if (!isFeatureSelected(event.feature)) {
+                return;
+            }
+            this._openContextMenuForFeature(event.feature, event.latLng ?? undefined);
+        });
+        if (notNullOrUndefined(this._drawingManager)) {
+            google.maps.event.addListener(this._drawingManager, 'polygoncomplete', (polygon) => {
+                // The DrawingManager doesn't seem to have a way to access the overlays,
+                // so if the map is not set then it shouldn'y be considered a successful
+                // completion. I am canceling the active drawing by disabling drawing
+                // mode and setting the map null in the 'overlaycomplete' event, which
+                // fires before the 'polygoncomplete' event.
+                if (isNullOrUndefined(polygon.getMap())) {
+                    return;
+                }
+                this._assertInitialized();
+                // TODO: See if there is a way to prevent the polygon from completing
+                // without enough points. This is very low priority, because starting
+                // over after adding a single point isn't a major inconvenience.
+                if (!polygonHasValidPathsLengths(polygon)) {
+                    // Remove the drawn polygon.
+                    polygon.setMap(null);
+                    // Stop drawing.
+                    this._drawingManager?.setDrawingMode(null);
+                    return;
+                }
+                // Create a map feature of the drawn polygon.
+                const feature = createDataFeatureFromPolygon(polygon);
+                // Remove the drawn polygon.
+                polygon.setMap(null);
+                // Stop drawing.
+                this._drawingManager?.setDrawingMode(null);
+                // Check if the feature should be used as a cutout to an existing
+                // feature or added as it's own feature.
+                const exteriorPolygonFeature = this._allowDrawingHoleInPolygon
+                    ? getPossibleExteriorFeature(this.googleMap.data, feature)
+                    : undefined;
+                if (exteriorPolygonFeature) {
+                    addInnerFeatureCutoutToExteriorFeature(exteriorPolygonFeature, feature);
+                    setFeatureSelected(exteriorPolygonFeature, true);
+                }
+                else {
+                    this.googleMap.data.add(feature);
+                    setFeatureSelected(feature, true);
+                }
+            });
+        }
+    }
+    isDrawing() {
+        if (isNullOrUndefined(this._drawingManager)) {
+            return true;
+        }
+        return this._drawingManager.getDrawingMode() !== null;
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    hasSelectedFeature() {
+        this._assertInitialized();
+        let isSelected = false;
+        this.googleMap.data.forEach(f => {
+            if (isFeatureSelected(f)) {
+                isSelected = true;
+            }
+        });
+        return isSelected;
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    getSelectedFeature() {
+        this._assertInitialized();
+        let feature = null;
+        this.googleMap.data.forEach(f => {
+            if (isFeatureSelected(f)) {
+                feature = f;
+            }
+        });
+        return feature;
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    openContextMenu() {
+        const feature = this.getSelectedFeature();
+        if (feature) {
+            this._openContextMenuForFeature(feature);
+        }
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    closeContextMenu() {
+        if (this._activeContextMenu) {
+            this._activeContextMenu.close();
+            this._activeContextMenu = null;
+        }
+    }
+    // TODO: Refactor out of the service meant to just wrap the google maps api.
+    _openContextMenuForFeature(feature, position) {
+        this.closeContextMenu();
+        this._assertInitialized();
+        let _position = position;
+        if (!_position) {
+            _position = getFeatureCenter(feature);
+        }
+        if (this._featureContextMenu) {
+            this._activeContextMenu = new GoogleMapsContextMenu(this.googleMap, this._featureContextMenu, _position, this._vcr, this._ngZone, this.googleMap.data, feature);
+        }
+    }
+    getGeoJson(removeAppProperties = true) {
+        return new Promise((resolve, reject) => {
+            this._assertInitialized();
+            this.googleMap.data.toGeoJson(f => {
+                if (removeAppProperties) {
+                    stripAppFeaturePropertiesFromJson(f);
+                }
+                resolve(f);
+            });
+        });
+    }
+    /** Asserts that the map has been initialized. */
+    _assertInitialized() {
+        if (!this.googleMap && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw Error('Cannot access Google Map information before the API has been initialized. ' +
+                'Please wait for the API to load before trying to interact with it.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GoogleMapsService, deps: [{ token: MapValueManagerService }, { token: i0.NgZone }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GoogleMapsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GoogleMapsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: MapValueManagerService }, { type: i0.NgZone }, { type: i0.ViewContainerRef }] });
+
+class MapControlRef {
+    _googleMaps;
+    _injector;
+    _controlDef;
+    _viewContainerRef;
+    _destroyedSubject = new Subject();
+    _componentRef;
+    _addedAtPosition;
+    destroyed;
+    constructor(_googleMaps, _injector, _controlDef, _viewContainerRef) {
+        this._googleMaps = _googleMaps;
+        this._injector = _injector;
+        this._controlDef = _controlDef;
+        this._viewContainerRef = _viewContainerRef;
+        this.destroyed = this._destroyedSubject.asObservable();
+        const component = this._controlDef.component;
+        // const factory = this._componentFactoryResolver.resolveComponentFactory(component)
+        const providers = [];
+        if (this._controlDef.data) {
+            providers.push({
+                provide: MAP_CONTROL_DATA,
+                useValue: this._controlDef.data
+            });
+        }
+        const injector = Injector.create({
+            providers,
+            parent: this._injector,
+        });
+        // this._componentRef = factory.create(injector)
+        this._componentRef = this._viewContainerRef.createComponent(component, {
+            index: this._viewContainerRef.length,
+            injector,
+        });
+        this._componentRef.changeDetectorRef.detectChanges();
+        const position = this._controlDef.position ?? google.maps.ControlPosition.LEFT_BOTTOM;
+        this._googleMaps.addControl(this._componentRef.location.nativeElement, position);
+        this._addedAtPosition = position;
+    }
+    destroy() {
+        const googleMaps = this._googleMaps.googleMap;
+        if (googleMaps !== undefined) {
+            let idx = -1;
+            googleMaps.controls[this._addedAtPosition].forEach((elem, index) => {
+                if (elem === this._componentRef.location.nativeElement) {
+                    idx = index;
+                }
+            });
+            if (idx === -1) {
+                throw Error(`Unable to destroy control. Control not found.`);
+            }
+            googleMaps.controls[this._addedAtPosition].removeAt(idx);
+        }
+        this._componentRef.destroy();
+        this._destroyedSubject.next();
+        this._destroyedSubject.complete();
+    }
+}
+class GoogleMapsControlsService {
+    _googleMaps;
+    _injector;
+    _viewContainerRef;
+    constructor(_googleMaps, _injector, _viewContainerRef) {
+        this._googleMaps = _googleMaps;
+        this._injector = _injector;
+        this._viewContainerRef = _viewContainerRef;
+    }
+    add(control) {
+        return new MapControlRef(this._googleMaps, this._injector, control, this._viewContainerRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GoogleMapsControlsService, deps: [{ token: GoogleMapsService }, { token: i0.Injector }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GoogleMapsControlsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GoogleMapsControlsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: GoogleMapsService }, { type: i0.Injector }, { type: i0.ViewContainerRef }] });
+
+/**
+ *
+ */
+class TheSeamGoogleMapsRecenterButtonControlComponent {
+    _googleMaps;
+    _ngUnsubscribe = new Subject();
+    _listeners = [];
+    label;
+    icon;
+    _onClick(event) {
+        this._googleMaps.reCenterOnFeatures();
+    }
+    constructor(_googleMaps, _data) {
+        this._googleMaps = _googleMaps;
+        if (_data) {
+            if (Object.prototype.hasOwnProperty.call(_data, 'label')) {
+                this.label = _data.label;
+            }
+            if (Object.prototype.hasOwnProperty.call(_data, 'icon')) {
+                this.icon = _data.icon;
+            }
+        }
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._listeners.forEach(l => l());
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsRecenterButtonControlComponent, deps: [{ token: GoogleMapsService }, { token: MAP_CONTROL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamGoogleMapsRecenterButtonControlComponent, isStandalone: false, selector: "button[seam-google-maps-recenter-button-control]", inputs: { label: "label", icon: "icon" }, host: { attributes: { "type": "button" }, listeners: { "click": "_onClick(event)" }, properties: { "attr.draggable": "false", "attr.aria-label": "label", "attr.title": "label" }, classAttribute: "gmnoprint gm-control-active" }, ngImport: i0, template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n", styles: [":host{background:none #fff;border:0px;margin:10px;padding:11px;text-transform:none;appearance:none;position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:2px;height:40px;width:40px;box-shadow:#0000004d 0 1px 4px -1px;overflow:hidden}\n"], dependencies: [{ kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsRecenterButtonControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[seam-google-maps-recenter-button-control]', host: {
+                        '[attr.draggable]': 'false',
+                        '[attr.aria-label]': 'label',
+                        '[attr.title]': 'label',
+                        'type': 'button',
+                        'class': 'gmnoprint gm-control-active'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n", styles: [":host{background:none #fff;border:0px;margin:10px;padding:11px;text-transform:none;appearance:none;position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:2px;height:40px;width:40px;box-shadow:#0000004d 0 1px 4px -1px;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: GoogleMapsService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAP_CONTROL_DATA]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], _onClick: [{
+                type: HostListener,
+                args: ['click', ['event']]
+            }] } });
+
+/**
+ *
+ */
+class TheSeamGoogleMapsUploadButtonControlComponent {
+    _elementRef;
+    _mapValueManager;
+    _renderer;
+    _googleMaps;
+    _ngUnsubscribe = new Subject();
+    _fileInputElement;
+    _listeners = [];
+    label;
+    icon;
+    _onClick(event) {
+        this._fileInputElement.click();
+    }
+    constructor(_elementRef, _mapValueManager, _renderer, _googleMaps, _data) {
+        this._elementRef = _elementRef;
+        this._mapValueManager = _mapValueManager;
+        this._renderer = _renderer;
+        this._googleMaps = _googleMaps;
+        if (_data) {
+            if (Object.prototype.hasOwnProperty.call(_data, 'label')) {
+                this.label = _data.label;
+            }
+            if (Object.prototype.hasOwnProperty.call(_data, 'icon')) {
+                this.icon = _data.icon;
+            }
+        }
+        this._fileInputElement = this._createHiddenInput();
+        this._renderer.appendChild(this._elementRef.nativeElement, this._fileInputElement);
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._listeners.forEach(l => l());
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _getFile(throwIfInvalidFiles = true) {
+        const files = this._fileInputElement.files;
+        if (files === null || files.length === 0) {
+            return null;
+        }
+        if (throwIfInvalidFiles) {
+            if (files.length > 1) {
+                throw Error(`Only one file can be imported at a time.`);
+            }
+        }
+        return files[0];
+    }
+    async _importFile(file) {
+        const json = await readGeoFile(file);
+        this._mapValueManager.setValue(json, MapValueSource.Input);
+        this._resetInput();
+    }
+    _createHiddenInput() {
+        const fileInputElement = this._renderer.createElement('input');
+        this._renderer.setAttribute(fileInputElement, 'type', 'file');
+        this._renderer.setAttribute(fileInputElement, 'hidden', '');
+        this._renderer.setAttribute(fileInputElement, 'accept', '.json,.geojson,.shp,.zip');
+        this._listeners.push(this._renderer.listen(fileInputElement, 'change', (event) => {
+            const file = this._getFile();
+            if (file === null) {
+                return;
+            }
+            const fileImportHandler = this._googleMaps.getFileInputHandler();
+            if (fileImportHandler) {
+                fileImportHandler(file);
+            }
+            else {
+                this._importFile(file);
+            }
+        }));
+        return fileInputElement;
+    }
+    _createTemporaryFormElement() {
+        return this._renderer.createElement('form');
+    }
+    /**
+     * Reset input element, so that the same file can be added again.
+     */
+    _resetInput() {
+        const formElement = this._createTemporaryFormElement();
+        this._renderer.appendChild(formElement, this._fileInputElement);
+        formElement.reset();
+        this._renderer.appendChild(this._elementRef.nativeElement, this._fileInputElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsUploadButtonControlComponent, deps: [{ token: i0.ElementRef }, { token: MapValueManagerService }, { token: i0.Renderer2 }, { token: GoogleMapsService }, { token: MAP_CONTROL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamGoogleMapsUploadButtonControlComponent, isStandalone: false, selector: "button[seam-google-maps-upload-button-control]", inputs: { label: "label", icon: "icon" }, host: { attributes: { "type": "button" }, listeners: { "click": "_onClick(event)" }, properties: { "attr.draggable": "false", "attr.aria-label": "label", "attr.title": "label" }, classAttribute: "gmnoprint gm-control-active" }, ngImport: i0, template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n", styles: [":host{background:none #fff;border:0px;margin:10px;padding:11px;text-transform:none;appearance:none;position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:2px;height:40px;width:40px;box-shadow:#0000004d 0 1px 4px -1px;overflow:hidden}\n"], dependencies: [{ kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsUploadButtonControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[seam-google-maps-upload-button-control]', host: {
+                        '[attr.draggable]': 'false',
+                        '[attr.aria-label]': 'label',
+                        '[attr.title]': 'label',
+                        'type': 'button',
+                        'class': 'gmnoprint gm-control-active'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<seam-icon [icon]=\"icon\" iconType=\"image-fill\"></seam-icon>\n", styles: [":host{background:none #fff;border:0px;margin:10px;padding:11px;text-transform:none;appearance:none;position:absolute;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:2px;height:40px;width:40px;box-shadow:#0000004d 0 1px 4px -1px;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MapValueManagerService }, { type: i0.Renderer2 }, { type: GoogleMapsService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAP_CONTROL_DATA]
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], _onClick: [{
+                type: HostListener,
+                args: ['click', ['event']]
+            }] } });
+
+class TheSeamGoogleMapsApiLoader {
+}
+
+/**
+ *
+ */
+class TheSeamMapFileDropComponent {
+    _elementRef;
+    _ngZone;
+    _googleMaps;
+    _mapValueManager;
+    _renderer;
+    _ngUnsubscribe = new Subject();
+    /**
+     * Map element drag events added to.
+     */
+    _mapDiv;
+    _listeners = [];
+    _globalDragInProgress = false;
+    constructor(_elementRef, _ngZone, _googleMaps, _mapValueManager, _renderer) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._googleMaps = _googleMaps;
+        this._mapValueManager = _mapValueManager;
+        this._renderer = _renderer;
+    }
+    /** @ignore */
+    ngOnInit() {
+        this._googleMaps.mapReady$.pipe(tap(ready => {
+            if (ready) {
+                this._enableFileDrop();
+            }
+            else {
+                this._disableFileDrop();
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._disableFileDrop();
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _enableFileDrop() {
+        const divElement = this._googleMaps.getDiv();
+        if (this._mapDiv === divElement) {
+            return;
+        }
+        if (this._mapDiv !== undefined) {
+            // Disable file drop on previous map div.
+            this._disableFileDrop();
+        }
+        this._mapDiv = divElement;
+        this._ngZone.runOutsideAngular(() => {
+            this._listeners.push(this._renderer.listen('document', 'dragstart', (event) => {
+                this._globalDragInProgress = true;
+            }));
+            this._listeners.push(this._renderer.listen('document', 'dragend', (event) => {
+                this._globalDragInProgress = false;
+            }));
+            this._listeners.push(this._renderer.listen(divElement, 'dragover', this._handleDragOverEvent));
+            this._listeners.push(this._renderer.listen(this._elementRef.nativeElement, 'dragover', this._handleDragOverEvent));
+            this._listeners.push(this._renderer.listen(this._elementRef.nativeElement, 'drop', this._handleDropEvent));
+            this._listeners.push(this._renderer.listen(divElement, 'dragenter', this._handleDragEnterEvent));
+            this._listeners.push(this._renderer.listen(this._elementRef.nativeElement, 'dragleave', this._handleDragLeaveEvent));
+        });
+    }
+    _disableFileDrop() {
+        if (this._listeners.length > 0) {
+            this._listeners.forEach(l => l());
+            this._listeners = [];
+        }
+    }
+    _handleDragOverEvent = (event) => {
+        if (!this._dropAllowed()) {
+            return;
+        }
+        if (!this._isSupportedDataTransferTypes(event.dataTransfer)) {
+            return;
+        }
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+    };
+    _handleDropEvent = (event) => {
+        if (!this._dropAllowed()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'none');
+        // TODO: Show error if multiple files?
+        if (!this._isSupportedDataTransfer(event.dataTransfer)) {
+            return;
+        }
+        const item = event.dataTransfer.items[0];
+        const file = item.getAsFile();
+        readGeoFile(file).then(json => {
+            this._mapValueManager.setValue(json, MapValueSource.Input);
+        });
+    };
+    _handleDragEnterEvent = (event) => {
+        if (!this._dropAllowed()) {
+            return;
+        }
+        if (!this._isSupportedDataTransferTypes(event.dataTransfer)) {
+            return;
+        }
+        this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'block');
+    };
+    _handleDragLeaveEvent = (event) => {
+        if (!this._dropAllowed()) {
+            return;
+        }
+        this._renderer.setStyle(this._elementRef.nativeElement, 'display', 'none');
+    };
+    _dropAllowed() {
+        return !this._globalDragInProgress;
+    }
+    _isSupportedDataTransfer(dataTransfer) {
+        return dataTransfer.files.length === 1 && dataTransfer.types[0] === 'Files';
+    }
+    _isSupportedDataTransferTypes(dataTransfer) {
+        return dataTransfer.types[0] === 'Files';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMapFileDropComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GoogleMapsService }, { token: MapValueManagerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamMapFileDropComponent, isStandalone: false, selector: "seam-map-file-drop", ngImport: i0, template: "", styles: [":host{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999!important;background-color:#1e1e1eb3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMapFileDropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-map-file-drop', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "", styles: [":host{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999!important;background-color:#1e1e1eb3}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GoogleMapsService }, { type: MapValueManagerService }, { type: i0.Renderer2 }] });
+
+class TheSeamMapsControlComponent {
+    _googleMaps;
+    _googleMapsControls;
+    _ngUnsubscribe = new Subject();
+    _controlRef;
+    set def(value) {
+        if (value !== this._def) {
+            this._remove();
+            this._def = value;
+        }
+    }
+    _def;
+    constructor(_googleMaps, _googleMapsControls) {
+        this._googleMaps = _googleMaps;
+        this._googleMapsControls = _googleMapsControls;
+    }
+    /** @ignore */
+    ngOnInit() {
+        this._googleMaps.mapReady$.pipe(tap(ready => {
+            if (ready) {
+                this._add();
+            }
+            else {
+                this._remove();
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._remove();
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _add() {
+        if (this._controlRef) {
+            return;
+        }
+        if (this._def === null || this._def === undefined) {
+            return;
+        }
+        this._controlRef = this._googleMapsControls.add(this._def);
+    }
+    _remove() {
+        this._controlRef?.destroy();
+        this._controlRef = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMapsControlComponent, deps: [{ token: GoogleMapsService }, { token: MAP_CONTROLS_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamMapsControlComponent, isStandalone: false, selector: "seam-map-control", inputs: { def: "def" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamMapsControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'seam-map-control',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: GoogleMapsService }, { type: GoogleMapsControlsService, decorators: [{
+                    type: Inject,
+                    args: [MAP_CONTROLS_SERVICE]
+                }] }], propDecorators: { def: [{
+                type: Input
+            }] } });
+
+class TheSeamGoogleMapsComponentBase {
+    _elementRef;
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+const _TheSeamGoogleMapsMixinBase = mixinDisabled(TheSeamGoogleMapsComponentBase);
+/**
+ * A wrapper for googlemap.
+ */
+class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
+    elementRef;
+    _focusMonitor;
+    _googleMaps;
+    _mapValueManager;
+    _googleMapsApiLoader;
+    static ngAcceptInputType_disabled;
+    static ngAcceptInputType_zoom;
+    static ngAcceptInputType_longitude;
+    static ngAcceptInputType_latitude;
+    static ngAcceptInputType_fileDropEnabled;
+    static ngAcceptInputType_fileUploadControlEnabled;
+    static ngAcceptInputType_fullscreenControlEnabled;
+    static ngAcceptInputType_reCenterControlEnabled;
+    static ngAcceptInputType_mapTypeControlEnabled;
+    static ngAcceptInputType_streetViewControlEnabled;
+    static ngAcceptInputType_allowDrawingHoleInPolygon;
+    static ngAcceptInputType_editingEnabled;
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _ngUnsubscribe = new Subject();
+    _gmApiLoaded;
+    _fileUploadControlDef = {
+        component: TheSeamGoogleMapsUploadButtonControlComponent,
+        data: { label: 'Import Geo File', icon: faFileImport },
+        position: 6 /* google.maps.ControlPosition.LEFT_BOTTOM */,
+    };
+    _reCenterControlDef = {
+        component: TheSeamGoogleMapsRecenterButtonControlComponent,
+        data: { label: 'Center on Field', icon: faCrosshairs },
+        position: 9 /* google.maps.ControlPosition.RIGHT_BOTTOM */,
+    };
+    _focusOrigin = null;
+    set value(value) {
+        this._mapValueManager.setValue(value, MapValueSource.Input);
+    }
+    get value() {
+        return this._mapValueManager.value;
+    }
+    set tabIndex(value) { this._tabIndex = coerceNumberProperty(value); }
+    get tabIndex() { return this._tabIndex; }
+    /**
+     * Set the tab index to `-1` to allow the root element of the
+     * component to receive `focus` event from javascript, but not get focused by
+     * keyboard navigation.
+     */
+    _tabIndex = -1;
+    fileDropEnabled = true;
+    fileUploadControlEnabled = false;
+    fullscreenControlEnabled = true;
+    reCenterControlEnabled = true;
+    mapTypeControlEnabled = true;
+    streetViewControlEnabled = false;
+    allowDrawingHoleInPolygon = false;
+    editingEnabled = true;
+    set fileImportHandler(value) {
+        this._googleMaps.setFileInputHandler(value);
+    }
+    get _attrDisabled() { return this.disabled || null; }
+    get _attrTabIndex() { return this.disabled ? -1 : (this.tabIndex || 0); }
+    onChange;
+    onTouched;
+    zoom = 14;
+    longitude = -98.570209;
+    latitude = 37.633814;
+    padding = 0;
+    mapReady = new EventEmitter();
+    featureContextMenu;
+    _options = {
+        mapTypeControl: true,
+        mapTypeId: 'hybrid',
+        streetViewControl: false,
+        fullscreenControl: this.fullscreenControlEnabled,
+    };
+    _contextMenuItems$;
+    idleListener;
+    constructor(elementRef, _focusMonitor, _googleMaps, _mapValueManager, _googleMapsApiLoader) {
+        super(elementRef);
+        this.elementRef = elementRef;
+        this._focusMonitor = _focusMonitor;
+        this._googleMaps = _googleMaps;
+        this._mapValueManager = _mapValueManager;
+        this._googleMapsApiLoader = _googleMapsApiLoader;
+        this._focusMonitor.monitor(this._elementRef, true).pipe(tap(origin => { this._focusOrigin = origin; }), takeUntil(this._ngUnsubscribe)).subscribe();
+        this._mapValueManager.valueChanged.pipe(tap(change => {
+            if (this.onChange) {
+                this.onChange(change.value);
+            }
+            if (this.onTouched) {
+                this.onTouched();
+            }
+        }), tap(changed => {
+            if (this._googleMaps.mapReady && changed.source !== MapValueSource.FeatureChange) {
+                this._googleMaps.setData(changed.value);
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        this._contextMenuItems$ = this._googleMaps.editingEnabled$.pipe(map(enabled => {
+            const items = [];
+            if (enabled) {
+                items.push({ label: 'Delete', action: () => this._onClickDeleteFeature() });
+            }
+            return items;
+        }), tap(items => {
+            if (items.length === 0) {
+                this._googleMaps.setFeatureContextMenu(null);
+            }
+            else {
+                this._googleMaps.setFeatureContextMenu(this.featureContextMenu);
+            }
+        }));
+        this._googleMaps.setBaseLatLng(this.latitude, this.longitude);
+        this._googleMaps.setPadding(this.padding);
+        this._gmApiLoaded = this._googleMapsApiLoader.load().pipe(map(() => true), catchError(() => of(false)));
+    }
+    ngOnInit() {
+        fromEvent(window, 'keydown').pipe(tap((event) => {
+            switch (event.code) {
+                case 'Delete':
+                    if (this._googleMaps.isEditingEnabled()) {
+                        this._googleMaps.deleteSelection();
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    break;
+                case 'Escape':
+                    this._googleMaps.stopDrawing();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                case 'ContextMenu':
+                    this._googleMaps.openContextMenu();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+            }
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this._elementRef);
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    ngOnChanges(changes) {
+        let updateBase = false;
+        if (Object.prototype.hasOwnProperty.call(changes, 'latitude')) {
+            this.latitude = changes.latitude.currentValue;
+            updateBase = true;
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'longitude')) {
+            this.longitude = changes.longitude.currentValue;
+            updateBase = true;
+        }
+        if (updateBase) {
+            this._googleMaps.setBaseLatLng(this.latitude, this.longitude);
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'allowDrawingHoleInPolygon')) {
+            this._googleMaps.allowDrawingHoleInPolygon(this.allowDrawingHoleInPolygon);
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'fullscreenControlEnabled')) {
+            const fullscreenControl = coerceBooleanProperty(changes.fullscreenControlEnabled.currentValue);
+            if (fullscreenControl !== this._options.fullscreenControl) {
+                this._options = {
+                    ...this._options,
+                    fullscreenControl,
+                };
+            }
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'editingEnabled')) {
+            this._googleMaps.setEditingEnabled(this.editingEnabled);
+        }
+        if (Object.prototype.hasOwnProperty.call(changes, 'padding')) {
+            this._googleMaps.setPadding(this.padding);
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this._changeDetectorRef.markForCheck();
+    }
+    fitBounds(bounds, padding) {
+        this._googleMaps.fitBounds(bounds, padding);
+    }
+    getGeoJson() {
+        return this._googleMaps.getGeoJson();
+    }
+    hasFocus() {
+        return this._focusOrigin !== null && this._focusOrigin !== undefined;
+    }
+    /** Focuses the button. */
+    focus() {
+        this._getHostElement().focus();
+    }
+    _getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    _onMapReady(theMap) {
+        this._googleMaps.setMap(theMap);
+        this._googleMaps.setData(this._mapValueManager.value);
+        // NOTE: The input zoom level was getting reset after this function ran,
+        // so putting in this idle listener to wait until the map is fully rendered
+        // to set the zoom.
+        // Calling reCenterOnFeatures() after setZoom() ensures that maps with pre-drawn shapes
+        // will display correctly
+        this.idleListener = this._googleMaps.googleMap?.addListener('idle', () => {
+            this._googleMaps.googleMap?.setZoom(this.zoom);
+            this._googleMaps.reCenterOnFeatures();
+            this.mapReady.emit(this._googleMaps.googleMap);
+            this.idleListener?.remove();
+        });
+    }
+    _onClickDeleteFeature() {
+        this._googleMaps.deleteSelection();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: GoogleMapsService }, { token: MapValueManagerService }, { token: TheSeamGoogleMapsApiLoader }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamGoogleMapsComponent, isStandalone: false, selector: "seam-google-maps", inputs: { disabled: "disabled", value: "value", tabIndex: "tabIndex", fileDropEnabled: "fileDropEnabled", fileUploadControlEnabled: "fileUploadControlEnabled", fullscreenControlEnabled: "fullscreenControlEnabled", reCenterControlEnabled: "reCenterControlEnabled", mapTypeControlEnabled: "mapTypeControlEnabled", streetViewControlEnabled: "streetViewControlEnabled", allowDrawingHoleInPolygon: "allowDrawingHoleInPolygon", editingEnabled: "editingEnabled", fileImportHandler: "fileImportHandler", zoom: "zoom", longitude: "longitude", latitude: "latitude", padding: "padding" }, outputs: { mapReady: "mapReady" }, host: { properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [
+            MapValueManagerService,
+            GoogleMapsService,
+            { provide: MAP_CONTROLS_SERVICE, useClass: GoogleMapsControlsService },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line no-use-before-define
+                useExisting: forwardRef(() => TheSeamGoogleMapsComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "featureContextMenu", first: true, predicate: ["featureContextMenu"], descendants: true, read: MenuComponent, static: true }], exportAs: ["seamGoogleMaps"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n    >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button seamMenuItem *ngFor=\"let item of _contextMenuItems$ | async\" (click)=\"item.action(item)\">{{ item.label }}</button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control *ngIf=\"fileUploadControlEnabled\" [def]=\"_fileUploadControlDef\"></seam-map-control>\n<seam-map-control *ngIf=\"reCenterControlEnabled\" [def]=\"_reCenterControlDef\"></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MenuComponent, selector: "seam-menu", inputs: ["menuClass", "baseWidth", "animationType"], outputs: ["closed"], exportAs: ["seamMenu"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[seamMenuItem]", inputs: ["disabled", "role", "icon", "iconClass", "sublevelIcon", "subLevelIconClass", "badgeText", "badgeTheme"], exportAs: ["seamMenuItem"] }, { kind: "component", type: i7.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: TheSeamMapFileDropComponent, selector: "seam-map-file-drop" }, { kind: "component", type: TheSeamMapsControlComponent, selector: "seam-map-control", inputs: ["def"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "fileDropEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "fileUploadControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "fullscreenControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "reCenterControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "mapTypeControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "streetViewControlEnabled", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "allowDrawingHoleInPolygon", void 0);
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsComponent.prototype, "editingEnabled", void 0);
+__decorate([
+    InputNumber()
+], TheSeamGoogleMapsComponent.prototype, "zoom", void 0);
+__decorate([
+    InputNumber()
+], TheSeamGoogleMapsComponent.prototype, "longitude", void 0);
+__decorate([
+    InputNumber()
+], TheSeamGoogleMapsComponent.prototype, "latitude", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-google-maps', inputs: [
+                        'disabled',
+                    ], providers: [
+                        MapValueManagerService,
+                        GoogleMapsService,
+                        { provide: MAP_CONTROLS_SERVICE, useClass: GoogleMapsControlsService },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line no-use-before-define
+                            useExisting: forwardRef(() => TheSeamGoogleMapsComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMaps', standalone: false, template: "<ng-container *ngIf=\"_gmApiLoaded | async\">\n  <google-map\n    height=\"100%\"\n    width=\"100%\"\n    [center]=\"{ lat: latitude, lng: longitude }\"\n    [zoom]=\"zoom\"\n    [options]=\"_options\"\n    (mapInitialized)=\"_onMapReady($any($event))\"\n    >\n  </google-map>\n</ng-container>\n<seam-menu #featureContextMenu>\n  <button seamMenuItem *ngFor=\"let item of _contextMenuItems$ | async\" (click)=\"item.action(item)\">{{ item.label }}</button>\n</seam-menu>\n<seam-map-file-drop *ngIf=\"fileDropEnabled\"></seam-map-file-drop>\n\n<seam-map-control *ngIf=\"fileUploadControlEnabled\" [def]=\"_fileUploadControlDef\"></seam-map-control>\n<seam-map-control *ngIf=\"reCenterControlEnabled\" [def]=\"_reCenterControlDef\"></seam-map-control>\n", styles: [":host{display:block;position:relative;height:400px;width:100%}:host.show-focus-border.cdk-focused{outline:0;box-shadow:0 0 0 .2rem #357ebd40}:host.show-focus-border[disabled]{opacity:.65}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: GoogleMapsService }, { type: MapValueManagerService }, { type: TheSeamGoogleMapsApiLoader }], propDecorators: { value: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], fileDropEnabled: [{
+                type: Input
+            }], fileUploadControlEnabled: [{
+                type: Input
+            }], fullscreenControlEnabled: [{
+                type: Input
+            }], reCenterControlEnabled: [{
+                type: Input
+            }], mapTypeControlEnabled: [{
+                type: Input
+            }], streetViewControlEnabled: [{
+                type: Input
+            }], allowDrawingHoleInPolygon: [{
+                type: Input
+            }], editingEnabled: [{
+                type: Input
+            }], fileImportHandler: [{
+                type: Input
+            }], _attrDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], _attrTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], zoom: [{
+                type: Input
+            }], longitude: [{
+                type: Input
+            }], latitude: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], mapReady: [{
+                type: Output
+            }], featureContextMenu: [{
+                type: ViewChild,
+                args: ['featureContextMenu', { static: true, read: MenuComponent }]
+            }] } });
+
+const SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS = {
+    componentRestrictions: { country: 'US' }
+};
+class TheSeamGoogleMapsPlacesAutocompleteDirective {
+    _elementRef;
+    _ngZone;
+    _autoCompleteReadySubject = new Subject();
+    _ngUnsubscribe = new Subject();
+    _placeChangedPending = [];
+    _listeners = [];
+    autoComplete;
+    set options(value) {
+        this._options = value || SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+    }
+    _options = SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+    /**
+     * This event is fired when a PlaceResult is made available for a Place the
+     * user has selected. If the user enters the name of a Place that was not
+     * suggested by the control and presses the Enter key, or if a Place Details
+     * request fails, the PlaceResult contains the user input in the name
+     * property, with no other properties defined.
+     *
+     * See: https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.place_changed
+     */
+    placeChanged;
+    _attrType = 'text';
+    constructor(_elementRef, _ngZone) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this.placeChanged = this._autoCompleteReadySubject.pipe(startWith(undefined), switchMap(() => this._createPlaceChangedObservable()));
+    }
+    ngOnInit() {
+        this._ngZone.runOutsideAngular(() => {
+            this._untilGoogleMapsApiLoaded().pipe(takeUntil(this._ngUnsubscribe)).subscribe(() => {
+                this.autoComplete = new google.maps.places.Autocomplete(this.getHostElement(), this._options);
+                this._placeChangedPending.forEach(pending => pending.observable.subscribe(pending.subscriber));
+                this._autoCompleteReadySubject.next(undefined);
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._listeners.forEach(l => l.remove());
+        this._listeners = [];
+        this._ngUnsubscribe.next(undefined);
+        this._ngUnsubscribe.complete();
+    }
+    ngOnChanges(changes) {
+        if (this.autoComplete && changes['options']) {
+            this.autoComplete.setOptions(this._options);
+        }
+    }
+    _untilGoogleMapsApiLoaded() {
+        return interval(500).pipe(filter(() => !!(window.google && window.google.maps && window.google.maps.version)), take(1), mapTo(undefined));
+    }
+    /**
+     * Returns the bounds to which predictions are biased.
+     */
+    getBounds() {
+        this._assertInitialized();
+        return this.autoComplete.getBounds();
+    }
+    /**
+     * Returns the fields to be included for the Place in the details response
+     * when the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    getFields() {
+        this._assertInitialized();
+        return this.autoComplete.getFields();
+    }
+    /**
+     * Returns the details of the Place selected by user if the details were
+     * successfully retrieved. Otherwise returns a stub Place object, with the
+     * name property set to the current value of the input field.
+     */
+    getPlace() {
+        this._assertInitialized();
+        return this.autoComplete.getPlace();
+    }
+    /**
+     * Sets the preferred area within which to return Place results. Results are
+     * biased towards, but not restricted to, this area.
+     */
+    setBounds(bounds) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setBounds(bounds);
+    }
+    /**
+     * Sets the component restrictions. Component restrictions are used to
+     * restrict predictions to only those within the parent component. For
+     * example, the country.
+     */
+    setComponentRestrictions(restrictions) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setComponentRestrictions(restrictions);
+    }
+    /**
+     * Sets the fields to be included for the Place in the details response when
+     * the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    setFields(fields) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setFields(fields);
+    }
+    /** */
+    setOptions(options) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setOptions(options);
+    }
+    /**
+     * Sets the types of predictions to be returned. For supported types, see the
+     * [developer's guide](https://developers.google.com/maps/documentation/javascript/places-autocomplete#constrain-place-types).
+     * If no types are specified, all types will be returned.
+     */
+    setTypes(types) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setTypes(types);
+    }
+    /** Focuses the input. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** Unfocuses the input. */
+    blur() {
+        this._elementRef.nativeElement.blur();
+    }
+    getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    _createPlaceChangedObservable() {
+        const observable = new Observable(subscriber => {
+            if (!this.autoComplete) {
+                this._placeChangedPending.push({ observable, subscriber });
+                return undefined;
+            }
+            const listener = this.autoComplete.addListener('place_changed', (event) => {
+                this._ngZone.run(() => subscriber.next(event));
+            });
+            this._listeners.push(listener);
+            return () => listener.remove();
+        });
+        return observable;
+    }
+    /** Asserts that the map has been initialized. */
+    _assertInitialized() {
+        if (!this.autoComplete && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw Error('Cannot access Google Map Places information before the API has been initialized. ' +
+                'Please wait for the API to load before trying to interact with it.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsPlacesAutocompleteDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamGoogleMapsPlacesAutocompleteDirective, isStandalone: true, selector: "input[seamGoogleMapsPlacesAutocomplete]", inputs: { options: "options" }, outputs: { placeChanged: "placeChanged" }, host: { properties: { "attr.type": "this._attrType" } }, exportAs: ["seamGoogleMapsPlacesAutocomplete"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsPlacesAutocompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[seamGoogleMapsPlacesAutocomplete]',
+                    exportAs: 'seamGoogleMapsPlacesAutocomplete'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { options: [{
+                type: Input
+            }], placeChanged: [{
+                type: Output
+            }], _attrType: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }] } });
+
+/**
+ *
+ */
+class TheSeamGoogleMapsPlacesAutoCompleteComponent {
+    _elementRef;
+    static ngAcceptInputType_disabled;
+    _ngUnsubscribe = new Subject();
+    _autoCompleteReadySubject = new Subject();
+    _placeChangedPending = [];
+    autoComplete;
+    label = 'Search by address, place or name';
+    icon = faSearchLocation;
+    disabled = false;
+    placeholder = 'Enter address, place or name';
+    autocorrect = 'off';
+    autocapitalize = 'off';
+    /**
+     * Set the tab index to `-1` to allow the root element of the
+     * component to receive `focus` event from javascript, but not get focused by
+     * keyboard navigation.
+     */
+    set tabIndex(value) { this._tabIndex = coerceNumberProperty(value); }
+    get tabIndex() { return this._tabIndex; }
+    _tabIndex = -1;
+    set options(value) {
+        this._options = value || SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+    }
+    _options = SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS;
+    /**
+     * This event is fired when a PlaceResult is made available for a Place the
+     * user has selected. If the user enters the name of a Place that was not
+     * suggested by the control and presses the Enter key, or if a Place Details
+     * request fails, the PlaceResult contains the user input in the name
+     * property, with no other properties defined.
+     *
+     * See: https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.place_changed
+     */
+    placeChanged;
+    _inputDirective;
+    set __autocompleteDirective(value) {
+        this._autoCompleteDirective = value;
+        this._untilAutoCompleteReady().pipe(takeUntil(this._ngUnsubscribe)).subscribe(() => {
+            this.autoComplete = this._autoCompleteDirective.autoComplete;
+            this._placeChangedPending.forEach(pending => pending.observable.subscribe(pending.subscriber));
+            this._placeChangedPending = [];
+        });
+    }
+    _autoCompleteDirective;
+    get _attrTabIndex() { return this.disabled ? -1 : (this.tabIndex || 0); }
+    _onClick(event) {
+        this._inputDirective.focus();
+    }
+    _onFocus() {
+        this._inputDirective?.focus();
+    }
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.placeChanged = this._autoCompleteReadySubject.pipe(startWith(undefined), switchMap(() => this._createPlaceChangedObservable()));
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    _untilAutoCompleteReady() {
+        return interval(500).pipe(filter(() => !!this._autoCompleteDirective.autoComplete), take(1), mapTo(undefined));
+    }
+    /**
+     * Returns the bounds to which predictions are biased.
+     */
+    getBounds() {
+        this._assertInitialized();
+        return this.autoComplete.getBounds();
+    }
+    /**
+     * Returns the fields to be included for the Place in the details response
+     * when the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    getFields() {
+        this._assertInitialized();
+        return this.autoComplete.getFields();
+    }
+    /**
+     * Returns the details of the Place selected by user if the details were
+     * successfully retrieved. Otherwise returns a stub Place object, with the
+     * name property set to the current value of the input field.
+     */
+    getPlace() {
+        this._assertInitialized();
+        return this.autoComplete.getPlace();
+    }
+    /**
+     * Sets the preferred area within which to return Place results. Results are
+     * biased towards, but not restricted to, this area.
+     */
+    setBounds(bounds) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setBounds(bounds);
+    }
+    /**
+     * Sets the component restrictions. Component restrictions are used to
+     * restrict predictions to only those within the parent component. For
+     * example, the country.
+     */
+    setComponentRestrictions(restrictions) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setComponentRestrictions(restrictions);
+    }
+    /**
+     * Sets the fields to be included for the Place in the details response when
+     * the details are successfully retrieved. For a list of fields see
+     * [PlaceResult](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult).
+     */
+    setFields(fields) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setFields(fields);
+    }
+    /** */
+    setOptions(options) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setOptions(options);
+    }
+    /**
+     * Sets the types of predictions to be returned. For supported types, see the
+     * [developer's guide](https://developers.google.com/maps/documentation/javascript/places-autocomplete#constrain-place-types).
+     * If no types are specified, all types will be returned.
+     */
+    setTypes(types) {
+        this._assertInitialized();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.autoComplete.setTypes(types);
+    }
+    /** Focuses the input. */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** Unfocuses the input. */
+    blur() {
+        this._elementRef.nativeElement.blur();
+    }
+    getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    _createPlaceChangedObservable() {
+        const observable = new Observable(subscriber => {
+            if (!this.autoComplete) {
+                this._placeChangedPending.push({ observable, subscriber });
+                return undefined;
+            }
+            const sub = this._autoCompleteDirective.placeChanged.subscribe(subscriber);
+            return () => sub.unsubscribe();
+        });
+        return observable;
+    }
+    /** Asserts that the map has been initialized. */
+    _assertInitialized() {
+        if (!this.autoComplete && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            throw Error('Cannot access Google Map Places information before the API has been initialized. ' +
+                'Please wait for the API to load before trying to interact with it.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsPlacesAutoCompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TheSeamGoogleMapsPlacesAutoCompleteComponent, isStandalone: false, selector: "seam-google-maps-places-autocomplete", inputs: { label: "label", icon: "icon", disabled: "disabled", placeholder: "placeholder", autocorrect: "autocorrect", autocapitalize: "autocapitalize", tabIndex: "tabIndex", options: "options" }, outputs: { placeChanged: "placeChanged" }, host: { listeners: { "click": "_onClick(event)", "focus": "_onFocus($event)" }, properties: { "attr.tabindex": "this._attrTabIndex" } }, viewQueries: [{ propertyName: "_inputDirective", first: true, predicate: ["inp"], descendants: true, read: InputDirective, static: true }, { propertyName: "__autocompleteDirective", first: true, predicate: TheSeamGoogleMapsPlacesAutocompleteDirective, descendants: true, static: true }], exportAs: ["seamGoogleMapsPlacesAutoComplete"], ngImport: i0, template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\r\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\r\n</div>\r\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\r\n<input #inp=\"seamInput\"\r\n  seamInput\r\n  seamGoogleMapsPlacesAutocomplete\r\n  [disabled]=\"disabled\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocorrect]=\"autocorrect\"\r\n  [attr.autocapitalize]=\"autocapitalize\"\r\n  [options]=\"_options\"\r\n/>\r\n", styles: [":host{position:relative;width:100%}:host>input{padding-left:40px}:host .search-container--icon-wrapper{position:absolute;top:6px;left:10px;bottom:0}:host .search-container--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: TheSeamGoogleMapsPlacesAutocompleteDirective, selector: "input[seamGoogleMapsPlacesAutocomplete]", inputs: ["options"], outputs: ["placeChanged"], exportAs: ["seamGoogleMapsPlacesAutocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+__decorate([
+    InputBoolean()
+], TheSeamGoogleMapsPlacesAutoCompleteComponent.prototype, "disabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsPlacesAutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-google-maps-places-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMapsPlacesAutoComplete', standalone: false, template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\r\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\r\n</div>\r\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\r\n<input #inp=\"seamInput\"\r\n  seamInput\r\n  seamGoogleMapsPlacesAutocomplete\r\n  [disabled]=\"disabled\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocorrect]=\"autocorrect\"\r\n  [attr.autocapitalize]=\"autocapitalize\"\r\n  [options]=\"_options\"\r\n/>\r\n", styles: [":host{position:relative;width:100%}:host>input{padding-left:40px}:host .search-container--icon-wrapper{position:absolute;top:6px;left:10px;bottom:0}:host .search-container--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocorrect: [{
+                type: Input
+            }], autocapitalize: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], placeChanged: [{
+                type: Output
+            }], _inputDirective: [{
+                type: ViewChild,
+                args: ['inp', { read: InputDirective, static: true }]
+            }], __autocompleteDirective: [{
+                type: ViewChild,
+                args: [TheSeamGoogleMapsPlacesAutocompleteDirective, { static: true }]
+            }], _attrTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], _onClick: [{
+                type: HostListener,
+                args: ['click', ['event']]
+            }], _onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }] } });
+
+class TheSeamGoogleMapsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsModule, declarations: [TheSeamGoogleMapsComponent,
+            TheSeamMapFileDropComponent,
+            TheSeamGoogleMapsUploadButtonControlComponent,
+            TheSeamGoogleMapsRecenterButtonControlComponent,
+            TheSeamMapsControlComponent,
+            TheSeamGoogleMapsPlacesAutoCompleteComponent], imports: [CommonModule,
+            ObserversModule,
+            TheSeamSharedModule,
+            TheSeamMenuModule,
+            TheSeamIconModule,
+            TheSeamFormFieldModule,
+            GoogleMapsModule,
+            TheSeamGoogleMapsPlacesAutocompleteDirective], exports: [TheSeamGoogleMapsComponent,
+            TheSeamGoogleMapsPlacesAutocompleteDirective,
+            TheSeamGoogleMapsPlacesAutoCompleteComponent,
+            TheSeamMapsControlComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsModule, imports: [CommonModule,
+            ObserversModule,
+            TheSeamSharedModule,
+            TheSeamMenuModule,
+            TheSeamIconModule,
+            TheSeamFormFieldModule,
+            GoogleMapsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamGoogleMapsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TheSeamGoogleMapsComponent,
+                        TheSeamMapFileDropComponent,
+                        TheSeamGoogleMapsUploadButtonControlComponent,
+                        TheSeamGoogleMapsRecenterButtonControlComponent,
+                        TheSeamMapsControlComponent,
+                        TheSeamGoogleMapsPlacesAutoCompleteComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ObserversModule,
+                        TheSeamSharedModule,
+                        TheSeamMenuModule,
+                        TheSeamIconModule,
+                        TheSeamFormFieldModule,
+                        GoogleMapsModule,
+                        TheSeamGoogleMapsPlacesAutocompleteDirective,
+                    ],
+                    exports: [
+                        TheSeamGoogleMapsComponent,
+                        TheSeamGoogleMapsPlacesAutocompleteDirective,
+                        TheSeamGoogleMapsPlacesAutoCompleteComponent,
+                        TheSeamMapsControlComponent,
+                    ]
+                }]
+        }] });
+
+/**
+ * Token for the config of the LazyMapsAPILoader. Please provide an object of
+ * type {@link TheSeamLazyMapsApiLoader}.
+ */
+const THESEAM_LAZY_MAPS_API_CONFIG = new InjectionToken('THESEAM_LAZY_MAPS_API_CONFIG');
+class TheSeamLazyMapsApiLoader extends TheSeamGoogleMapsApiLoader {
+    _localeId;
+    config;
+    _scriptLoadingPromise;
+    _config;
+    _SCRIPT_ID = 'seamGoogleMapsApiScript';
+    callbackName = `__seamLazyGoogleMapsApiLoader`;
+    constructor(_localeId, config) {
+        super();
+        this._localeId = _localeId;
+        this.config = config;
+        this._config = config || {};
+    }
+    load() {
+        if (window.google && window.google.maps) {
+            // Google maps already loaded on the page.
+            return of(undefined);
+        }
+        if (this._scriptLoadingPromise) {
+            return from(this._scriptLoadingPromise);
+        }
+        // This can happen in HMR situations or Stackblitz.io editors.
+        const scriptOnPage = document.getElementById(this._SCRIPT_ID);
+        if (scriptOnPage) {
+            this._assignScriptLoadingPromise(scriptOnPage);
+            return from(this._getScriptLoadingPromise());
+        }
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.async = true;
+        script.defer = true;
+        script.id = this._SCRIPT_ID;
+        script.src = this._getScriptSrc(this.callbackName);
+        this._assignScriptLoadingPromise(script);
+        document.body.appendChild(script);
+        return from(this._getScriptLoadingPromise());
+    }
+    _assignScriptLoadingPromise(scriptElem) {
+        this._scriptLoadingPromise = new Promise((resolve, reject) => {
+            const win = window;
+            win[this.callbackName] = () => { resolve(); };
+            scriptElem.onerror = (error) => {
+                reject(error);
+            };
+        });
+    }
+    _getScriptLoadingPromise() {
+        if (!this._scriptLoadingPromise) {
+            throw Error(`_scriptLoadingPromise has not been assigned.`);
+        }
+        return this._scriptLoadingPromise;
+    }
+    _getScriptSrc(callbackName) {
+        const hostAndPath = this._config.url || 'https://maps.googleapis.com/maps/api/js';
+        const queryParams = {
+            v: this._config.apiVersion || 'quarterly',
+            callback: callbackName,
+            key: this._config.apiKey,
+            client: this._config.clientId,
+            channel: this._config.channel,
+            libraries: this._config.libraries,
+            region: this._config.region,
+            language: this._config.language || (this._localeId !== 'en-US' ? this._localeId : null),
+            loading: this._config.loading || 'async'
+        };
+        const params = Object.keys(queryParams)
+            // Remove undefined or null params.
+            .filter((k) => queryParams[k] !== undefined && queryParams[k] !== null)
+            // Remove empty arrays.
+            .filter((k) => {
+            const param = queryParams[k];
+            return !Array.isArray(param) || param.length > 0;
+        })
+            // Join arrays as comma seperated strings.
+            .map((k) => {
+            const param = queryParams[k];
+            return { key: k, value: Array.isArray(param) ? param.join(',') : param };
+        })
+            .map((entry) => {
+            return `${entry.key}=${entry.value}`;
+        })
+            .join('&');
+        return `${hostAndPath}?${params}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamLazyMapsApiLoader, deps: [{ token: LOCALE_ID }, { token: THESEAM_LAZY_MAPS_API_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamLazyMapsApiLoader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamLazyMapsApiLoader, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THESEAM_LAZY_MAPS_API_CONFIG]
+                }] }] });
+
+/**
+ * When using the TheSeamNoopGoogleMapsAPILoader, the Google Maps API must be
+ * added to the page some other way before the map component is initialixed. One
+ * way would be via a `<script>` Tag.
+ */
+class TheSeamNoopGoogleMapsAPILoader extends TheSeamGoogleMapsApiLoader {
+    load() {
+        return defer(() => {
+            if (!window.google || !window.google.maps) {
+                return throwError(new Error('Google Maps API not loaded on page. Make sure window.google.maps is available.'));
+            }
+            return of(undefined);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNoopGoogleMapsAPILoader, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNoopGoogleMapsAPILoader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TheSeamNoopGoogleMapsAPILoader, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppFeaturePropertyName, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, MAP_CONTROLS_SERVICE, MAP_CONTROL_DATA, MapControlRef, MapValueManagerService, MapValueSource, SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS, THESEAM_LAZY_MAPS_API_CONFIG, TheSeamGoogleMapsApiLoader, TheSeamGoogleMapsComponent, TheSeamGoogleMapsModule, TheSeamGoogleMapsPlacesAutoCompleteComponent, TheSeamGoogleMapsPlacesAutocompleteDirective, TheSeamGoogleMapsRecenterButtonControlComponent, TheSeamGoogleMapsUploadButtonControlComponent, TheSeamLazyMapsApiLoader, TheSeamMapFileDropComponent, TheSeamMapsControlComponent, TheSeamNoopGoogleMapsAPILoader, addInnerFeatureCutoutToExteriorFeature, createDataFeatureFromPolygon, createFeatureChangeObservable, featureContains, fixPathDifferentStartingAndEndingPoint, getBoundsWithAllFeatures, getFeatureBounds, getFeatureCenter, getFeaturesCount, getHoveredStyleOptionsDefinedByFeature, getPossibleExteriorFeature, getSelectedStyleOptionsDefinedByFeature, getStyleOptionsDefinedByFeature, isAppFeatureProperty, isFeatureSelected, multiPolygonCoordinates, polygonCoordinates, polygonHasValidPathsLengths, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson, toTurfJsFeature, toTurfJsMultiPolygon, toTurfJsPolygon };
+//# sourceMappingURL=theseam-ui-common-google-maps.mjs.map