@theseam/ui-common 0.4.0-beta.4 → 0.4.0-beta.6

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

@@ -1,9 +1,9 @@
 import { __awaiter, __decorate } from 'tslib';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Injector, Component, ChangeDetectionStrategy, Optional, Inject, Input, HostListener, EventEmitter, forwardRef, HostBinding, Output, ViewChild, Directive, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Injector, Component, ChangeDetectionStrategy, Optional, Inject, Input, HostListener, EventEmitter, forwardRef, HostBinding, Output, ViewChild, Directive, NgModule, LOCALE_ID } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Observable, Subject, fromEvent, BehaviorSubject, from, of, interval } from 'rxjs';
+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';
@@ -1733,13 +1733,13 @@ class TheSeamGoogleMapsPlacesAutoCompleteComponent {
     }
 }
 TheSeamGoogleMapsPlacesAutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TheSeamGoogleMapsPlacesAutoCompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamGoogleMapsPlacesAutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: TheSeamGoogleMapsPlacesAutoCompleteComponent, 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\">\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\n</div>\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\n<input #inp=\"seamInput\"\n  seamInput\n  seamGoogleMapsPlacesAutocomplete\n  [disabled]=\"disabled\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocorrect]=\"autocorrect\"\n  [attr.autocapitalize]=\"autocapitalize\"\n  [options]=\"_options\"\n/>\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-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[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 });
+TheSeamGoogleMapsPlacesAutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.6", type: TheSeamGoogleMapsPlacesAutoCompleteComponent, 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-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[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: "15.2.6", ngImport: i0, type: TheSeamGoogleMapsPlacesAutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-google-maps-places-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMapsPlacesAutoComplete', template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\n</div>\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\n<input #inp=\"seamInput\"\n  seamInput\n  seamGoogleMapsPlacesAutocomplete\n  [disabled]=\"disabled\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocorrect]=\"autocorrect\"\n  [attr.autocapitalize]=\"autocapitalize\"\n  [options]=\"_options\"\n/>\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"] }]
+            args: [{ selector: 'seam-google-maps-places-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMapsPlacesAutoComplete', 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: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -1829,9 +1829,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImpor
                 }]
         }] });
 
+/**
+ * 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 {
+    constructor(_localeId, config) {
+        super();
+        this._localeId = _localeId;
+        this.config = config;
+        this._SCRIPT_ID = 'seamGoogleMapsApiScript';
+        this.callbackName = `__seamLazyGoogleMapsApiLoader`;
+        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),
+        };
+        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}`;
+    }
+}
+TheSeamLazyMapsApiLoader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TheSeamLazyMapsApiLoader, deps: [{ token: LOCALE_ID }, { token: THESEAM_LAZY_MAPS_API_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TheSeamLazyMapsApiLoader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TheSeamLazyMapsApiLoader });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TheSeamLazyMapsApiLoader, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ 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);
+        });
+    }
+}
+TheSeamNoopGoogleMapsAPILoader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TheSeamNoopGoogleMapsAPILoader, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+TheSeamNoopGoogleMapsAPILoader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TheSeamNoopGoogleMapsAPILoader });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.6", ngImport: i0, type: TheSeamNoopGoogleMapsAPILoader, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppFeaturePropertyName, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, MapControlRef, MapValueManagerService, MapValueSource, SEAM_GOOGLE_PLACES_AUTOCOMPLETE_DEFAULT_OPTIONS, TheSeamGoogleMapsComponent, TheSeamGoogleMapsModule, TheSeamGoogleMapsPlacesAutoCompleteComponent, TheSeamGoogleMapsPlacesAutocompleteDirective, TheSeamGoogleMapsRecenterButtonControlComponent, TheSeamGoogleMapsUploadButtonControlComponent, TheSeamMapFileDropComponent, TheSeamMapsControlComponent, addInnerFeatureCutoutToExteriorFeature, createDataFeatureFromPolygon, createFeatureChangeObservable, featureContains, fixPathDifferentStartingAndEndingPoint, getBoundsWithAllFeatures, getFeatureBounds, getFeatureCenter, getFeaturesCount, getPossibleExteriorFeature, isAppFeatureProperty, isFeatureSelected, multiPolygonCoordinates, polygonCoordinates, polygonHasValidPathsLengths, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson, toTurfJsFeature, toTurfJsMultiPolygon, toTurfJsPolygon };
+export { AppFeaturePropertyName, GoogleMapsContextMenu, GoogleMapsControlsService, GoogleMapsService, 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, getPossibleExteriorFeature, isAppFeatureProperty, isFeatureSelected, multiPolygonCoordinates, polygonCoordinates, polygonHasValidPathsLengths, removeAllFeatures, setFeatureSelected, stripAppFeaturePropertiesFromJson, toTurfJsFeature, toTurfJsMultiPolygon, toTurfJsPolygon };
 //# sourceMappingURL=theseam-ui-common-google-maps.mjs.map