@nbalazs/snazzy-info-window
Version:
Fork of [ng-map/snazzy-info-window](https://github.com/ng-maps/ng-maps/tree/main/libs/snazzy-info-window)
348 lines (342 loc) • 13.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, ElementRef, ViewContainerRef, Component, Optional, Host, SkipSelf, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
import SnazzyInfoWindow from 'snazzy-info-window';
import * as i1 from '@ng-maps/core';
class NgMapsSnazzyInfoWindowComponent {
_marker;
_wrapper;
_manager;
_loader;
/**
* The latitude and longitude where the info window is anchored.
* The offset will default to 0px when using this option. Only required/used if you are not using a agm-marker.
*/
latitude;
/**
* The longitude where the info window is anchored.
* The offset will default to 0px when using this option. Only required/used if you are not using a agm-marker.
*/
longitude;
/**
* Changes the open status of the snazzy info window.
*/
isOpen = false;
/**
* Emits when the open status changes.
*/
isOpenChange = new EventEmitter();
/**
* Choose where you want the info window to be displayed, relative to the marker.
*/
placement = 'top';
/**
* The max width in pixels of the info window.
*/
maxWidth = 200;
/**
* The max height in pixels of the info window.
*/
maxHeight = 200;
/**
* The color to use for the background of the info window.
*/
backgroundColor;
/**
* A custom padding size around the content of the info window.
*/
padding;
/**
* A custom border around the info window. Set to false to completely remove the border.
* The units used for border should be the same as pointer.
*/
border;
/**
* A custom CSS border radius property to specify the rounded corners of the info window.
*/
borderRadius;
/**
* The font color to use for the content inside the body of the info window.
*/
fontColor;
/**
* The font size to use for the content inside the body of the info window.
*/
fontSize;
/**
* The height of the pointer from the info window to the marker.
* Set to false to completely remove the pointer.
* The units used for pointer should be the same as border.
*/
pointer;
/**
* The CSS properties for the shadow of the info window.
* Set to false to completely remove the shadow.
*/
shadow;
/**
* Determines if the info window will open when the marker is clicked.
* An internal listener is added to the Google Maps click event which calls the open() method.
*/
openOnMarkerClick = true;
/**
* Determines if the info window will close when the map is clicked. An internal listener is added to the Google Maps click event which calls the close() method.
* This will not activate on the Google Maps drag event when the user is panning the map.
*/
closeOnMapClick = true;
/**
* An optional CSS class to assign to the wrapper container of the info window.
* Can be used for applying custom CSS to the info window.
*/
wrapperClass;
/**
* Determines if the info window will close when any other Snazzy Info Window is opened.
*/
closeWhenOthersOpen = false;
/**
* Determines if the info window will show a close button.
*/
showCloseButton = true;
/**
* Determines if the info window will be panned into view when opened.
*/
panOnOpen = true;
/**
* Emits before the info window opens.
*/
beforeOpen = new EventEmitter();
/**
* Emits before the info window closes.
*/
afterClose = new EventEmitter();
/**
* @internal
*/
_outerWrapper;
/**
* @internal
*/
_viewContainerRef;
/**
* @internal
*/
_templateRef;
_nativeSnazzyInfoWindow;
_snazzyInfoWindowInitialized = null;
constructor(_marker, _wrapper, _manager, _loader) {
this._marker = _marker;
this._wrapper = _wrapper;
this._manager = _manager;
this._loader = _loader;
}
/**
* @internal
*/
ngOnChanges(changes) {
if (this._nativeSnazzyInfoWindow == null) {
return;
}
if ('isOpen' in changes && this.isOpen) {
this._openInfoWindow();
}
else if ('isOpen' in changes && !this.isOpen) {
this._closeInfoWindow();
}
if (('latitude' in changes || 'longitude' in changes) &&
this._marker == null) {
this._updatePosition();
}
}
/**
* @internal
*/
ngAfterViewInit() {
this._snazzyInfoWindowInitialized = this.init();
}
async init() {
const marker = this._manager != null
? this._manager.getNativeMarker(this._marker)
: null;
await this._loader.load();
const map = await this._wrapper.getNativeMap();
const options = {
map,
content: '',
placement: this.placement,
maxWidth: this.maxWidth,
maxHeight: this.maxHeight,
backgroundColor: this.backgroundColor,
padding: this.padding,
border: this.border,
borderRadius: this.borderRadius,
fontColor: this.fontColor,
pointer: this.pointer,
shadow: this.shadow,
closeOnMapClick: this.closeOnMapClick,
openOnMarkerClick: this.openOnMarkerClick,
closeWhenOthersOpen: this.closeWhenOthersOpen,
showCloseButton: this.showCloseButton,
panOnOpen: this.panOnOpen,
wrapperClass: this.wrapperClass,
callbacks: {
beforeOpen: () => {
this._createViewContent();
this.beforeOpen.emit();
},
afterOpen: () => {
this.isOpenChange.emit(this.openStatus());
},
afterClose: () => {
this.afterClose.emit();
this.isOpenChange.emit(this.openStatus());
},
},
};
if (marker != null) {
options.marker = marker;
}
else {
options.position = {
lat: this.latitude,
lng: this.longitude,
};
}
this._nativeSnazzyInfoWindow = new SnazzyInfoWindow(options);
if (this.isOpen) {
this._openInfoWindow();
}
}
_openInfoWindow() {
this._snazzyInfoWindowInitialized.then(() => {
console.log(this._nativeSnazzyInfoWindow);
this._createViewContent();
this._nativeSnazzyInfoWindow.open();
});
}
_closeInfoWindow() {
this._snazzyInfoWindowInitialized.then(() => {
this._nativeSnazzyInfoWindow.close();
});
}
_createViewContent() {
if (this._viewContainerRef.length === 1) {
return;
}
const evr = this._viewContainerRef.createEmbeddedView(this._templateRef);
this._nativeSnazzyInfoWindow.setContent(this._outerWrapper.nativeElement);
// we have to run this in a separate cycle.
setTimeout(() => {
evr.detectChanges();
});
}
_updatePosition() {
this._nativeSnazzyInfoWindow.setPosition({
lat: this.latitude,
lng: this.longitude,
});
}
/**
* Returns true when the Snazzy Info Window is initialized and open.
*/
openStatus() {
return (this._nativeSnazzyInfoWindow && this._nativeSnazzyInfoWindow.isOpen());
}
/**
* @internal
*/
ngOnDestroy() {
if (this._nativeSnazzyInfoWindow) {
this._nativeSnazzyInfoWindow.destroy();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgMapsSnazzyInfoWindowComponent, deps: [{ token: i1.NgMapsMarkerComponent, host: true, optional: true, skipSelf: true }, { token: i1.MapsApiWrapper }, { token: i1.MarkerManager }, { token: i1.MapsAPILoader }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: NgMapsSnazzyInfoWindowComponent, isStandalone: false, selector: "map-snazzy-info-window", inputs: { latitude: "latitude", longitude: "longitude", isOpen: "isOpen", placement: "placement", maxWidth: "maxWidth", maxHeight: "maxHeight", backgroundColor: "backgroundColor", padding: "padding", border: "border", borderRadius: "borderRadius", fontColor: "fontColor", fontSize: "fontSize", pointer: "pointer", shadow: "shadow", openOnMarkerClick: "openOnMarkerClick", closeOnMapClick: "closeOnMapClick", wrapperClass: "wrapperClass", closeWhenOthersOpen: "closeWhenOthersOpen", showCloseButton: "showCloseButton", panOnOpen: "panOnOpen" }, outputs: { isOpenChange: "isOpenChange", beforeOpen: "beforeOpen", afterClose: "afterClose" }, queries: [{ propertyName: "_templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "_outerWrapper", first: true, predicate: ["outerWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "_viewContainerRef", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #outerWrapper><div #viewContainer></div></div><ng-content></ng-content>', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgMapsSnazzyInfoWindowComponent, decorators: [{
type: Component,
args: [{
selector: 'map-snazzy-info-window',
template: '<div #outerWrapper><div #viewContainer></div></div><ng-content></ng-content>',
standalone: false,
}]
}], ctorParameters: () => [{ type: i1.NgMapsMarkerComponent, decorators: [{
type: Optional
}, {
type: Host
}, {
type: SkipSelf
}] }, { type: i1.MapsApiWrapper }, { type: i1.MarkerManager }, { type: i1.MapsAPILoader }], propDecorators: { latitude: [{
type: Input
}], longitude: [{
type: Input
}], isOpen: [{
type: Input
}], isOpenChange: [{
type: Output
}], placement: [{
type: Input
}], maxWidth: [{
type: Input
}], maxHeight: [{
type: Input
}], backgroundColor: [{
type: Input
}], padding: [{
type: Input
}], border: [{
type: Input
}], borderRadius: [{
type: Input
}], fontColor: [{
type: Input
}], fontSize: [{
type: Input
}], pointer: [{
type: Input
}], shadow: [{
type: Input
}], openOnMarkerClick: [{
type: Input
}], closeOnMapClick: [{
type: Input
}], wrapperClass: [{
type: Input
}], closeWhenOthersOpen: [{
type: Input
}], showCloseButton: [{
type: Input
}], panOnOpen: [{
type: Input
}], beforeOpen: [{
type: Output
}], afterClose: [{
type: Output
}], _outerWrapper: [{
type: ViewChild,
args: ['outerWrapper', { read: ElementRef, static: true }]
}], _viewContainerRef: [{
type: ViewChild,
args: ['viewContainer', { read: ViewContainerRef, static: true }]
}], _templateRef: [{
type: ContentChild,
args: [TemplateRef, { static: true }]
}] } });
class NgMapsSnazzyInfoWindowModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgMapsSnazzyInfoWindowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: NgMapsSnazzyInfoWindowModule, declarations: [NgMapsSnazzyInfoWindowComponent], exports: [NgMapsSnazzyInfoWindowComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgMapsSnazzyInfoWindowModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NgMapsSnazzyInfoWindowModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgMapsSnazzyInfoWindowComponent],
exports: [NgMapsSnazzyInfoWindowComponent],
}]
}] });
/*
* Public API Surface of snazzy-info-window
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgMapsSnazzyInfoWindowComponent, NgMapsSnazzyInfoWindowModule };
//# sourceMappingURL=nbalazs-snazzy-info-window.mjs.map