@progress/kendo-angular-map 0.1.1 → 0.2.0-dev.202206021322

package/fesm2015/kendo-angular-map.js

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, SimpleChange, Directive, TemplateRef, Component, ChangeDetectionStrategy, ContentChild, SecurityContext, Input, forwardRef, EventEmitter, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Injectable, SimpleChange, Directive, TemplateRef, Component, ChangeDetectionStrategy, ContentChild, SecurityContext, Input, forwardRef, ElementRef, EventEmitter, ViewChild, Output, ContentChildren, Optional, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import * as i3 from '@angular/platform-browser';
-import * as i4 from '@progress/kendo-angular-common';
+import * as i5 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, hasObservers, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i3$1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -14,7 +14,11 @@ import { InstanceObserver, Map } from '@progress/kendo-charts';
 export { Extent, Location } from '@progress/kendo-charts';
 import { validatePackage } from '@progress/kendo-licensing';
 import { tap } from 'rxjs/operators';
+import * as i1 from '@progress/kendo-angular-popup';
+import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { TooltipsModule } from '@progress/kendo-angular-tooltip';
 
 /**
  * @hidden
@@ -349,6 +353,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+function hasParent(element, parent) {
+    let current = element;
+    while (current && current !== parent) {
+        current = current.parentNode;
+    }
+    return current ? true : false;
+}
+
 /**
  * @hidden
  */
@@ -674,11 +689,217 @@ const packageMetadata = {
     name: '@progress/kendo-angular-map',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1651750442,
+    publishDate: 1654176122,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
+const CALLOUT_SIZE = 5;
+const POSITION_MODE = 'absolute';
+const COLLISION = { horizontal: "fit", vertical: "fit" };
+/**
+ * @hidden
+ */
+class BaseTooltip {
+    constructor(popupService, localizationService) {
+        this.popupService = popupService;
+        this.localizationService = localizationService;
+        this.animate = true;
+        this.style = {
+            position: 'relative'
+        };
+        this.popupRef = null;
+    }
+    get active() {
+        return this.popupRef !== null;
+    }
+    show(e) {
+        const offset = this.position(e.anchor);
+        offset.top -= CALLOUT_SIZE;
+        if (!this.popupRef) {
+            this.popupRef = this.popupService.open(Object.assign({
+                offset: offset,
+                popupAlign: { vertical: 'bottom', horizontal: 'center' },
+                animate: this.animate,
+                content: this.templateRef,
+                collision: COLLISION,
+                positionMode: POSITION_MODE
+            }, this.popupSettings));
+            if (this.localizationService.rtl) {
+                this.popupRef.popupElement.setAttribute('dir', 'rtl');
+            }
+            this.onInit();
+        }
+        else {
+            const popup = this.popupRef.popup.instance;
+            popup.offset = offset;
+        }
+    }
+    hide() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
+    onInit() {
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    position(offset) {
+        if (!this.popupSettings || !this.popupSettings.appendTo) {
+            return offset;
+        }
+        const appendTo = this.popupSettings.appendTo.element.nativeElement;
+        const bbox = appendTo.getBoundingClientRect();
+        const { scrollLeft, scrollTop } = this.scrollOffset(appendTo);
+        return {
+            left: offset.left - bbox.left - scrollLeft,
+            top: offset.top - bbox.top - scrollTop
+        };
+    }
+    scrollOffset(element) {
+        if (!element) {
+            return null;
+        }
+        let scrollLeft = element.scrollLeft;
+        let scrollTop = element.scrollTop;
+        let parent = element.parentElement;
+        while (parent) {
+            scrollLeft += parent.scrollLeft;
+            scrollTop += parent.scrollTop;
+            parent = parent.parentElement;
+        }
+        return { scrollLeft, scrollTop };
+    }
+}
+BaseTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseTooltip, deps: [{ token: i1.PopupService }, { token: i3$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+BaseTooltip.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseTooltip, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseTooltip, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i3$1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+function bodyFactory() {
+    if (isDocumentAvailable()) {
+        return new ElementRef(document.body);
+    }
+}
+
+/**
+ * @hidden
+ */
+class TooltipTemplateService {
+}
+TooltipTemplateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TooltipTemplateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipTemplateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipTemplateService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+class TooltipPopupComponent extends BaseTooltip {
+    constructor(popupService, templateService, localizationService, ngZone) {
+        super(popupService, localizationService);
+        this.popupService = popupService;
+        this.templateService = templateService;
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.tooltipContext = {};
+        this.animate = true;
+        this.wrapperClass = 'k-tooltip-wrapper';
+        this.leave = new EventEmitter();
+        this.popupClasses = {};
+    }
+    show(e) {
+        this.tooltipTemplateRef = this.templateService[e.type + 'Template'];
+        if (!this.tooltipTemplateRef) {
+            return;
+        }
+        this.popupClasses = Object.assign({
+            'k-tooltip': true,
+            'k-map-tooltip': true,
+            [e.className]: Boolean(e.className)
+        }, this.classNames);
+        this.tooltipContext = e;
+        super.show(e);
+    }
+    containsElement(element) {
+        if (this.popupRef) {
+            return hasParent(element, this.popupRef.popupElement);
+        }
+    }
+    onInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.mouseleaveSubscription = this.popupRef.popupElement.addEventListener('mouseleave', (args) => {
+                this.leave.emit(args);
+            });
+        });
+        this.popupRef.popupElement.classList.add(this.wrapperClass);
+    }
+    hide() {
+        if (this.mouseleaveSubscription) {
+            this.mouseleaveSubscription();
+            this.mouseleaveSubscription = null;
+        }
+        this.tooltipTemplateRef = null;
+        super.hide();
+    }
+}
+TooltipPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipPopupComponent, deps: [{ token: i1.PopupService }, { token: TooltipTemplateService }, { token: i3$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TooltipPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipPopupComponent, selector: "kendo-map-tooltip-popup", inputs: { animate: "animate", classNames: "classNames", popupSettings: "popupSettings", wrapperClass: "wrapperClass" }, outputs: { leave: "leave" }, providers: [PopupService, {
+            provide: POPUP_CONTAINER,
+            useFactory: bodyFactory
+        }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #content>
+        <div [ngClass]="popupClasses" [ngStyle]="style">
+            <div class="k-tooltip-content">
+                <ng-template [ngTemplateOutlet]="tooltipTemplateRef"
+                            [ngTemplateOutletContext]="tooltipContext">
+                </ng-template>
+            </div>
+        </div>
+    </ng-template>
+    `, isInline: true, directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [PopupService, {
+                            provide: POPUP_CONTAINER,
+                            useFactory: bodyFactory
+                        }],
+                    selector: 'kendo-map-tooltip-popup',
+                    template: `
+    <ng-template #content>
+        <div [ngClass]="popupClasses" [ngStyle]="style">
+            <div class="k-tooltip-content">
+                <ng-template [ngTemplateOutlet]="tooltipTemplateRef"
+                            [ngTemplateOutletContext]="tooltipContext">
+                </ng-template>
+            </div>
+        </div>
+    </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: TooltipTemplateService }, { type: i3$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }], animate: [{
+                type: Input
+            }], classNames: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], wrapperClass: [{
+                type: Input
+            }], leave: [{
+                type: Output
+            }] } });
+
 /**
  * A sample component
  */
@@ -803,6 +1024,14 @@ class MapComponent {
         validatePackage(packageMetadata);
     }
     ngAfterViewInit() {
+        if (this.canRender) {
+            this.ngZone.runOutsideAngular(() => {
+                const mapMouseleave = this.renderer.listen(this.surfaceElement.nativeElement, 'mouseleave', this.mapMouseleave.bind(this));
+                this.domSubscriptions = () => {
+                    mapMouseleave();
+                };
+            });
+        }
         this.setDirection();
         this.initConfig();
         this.subscriptions = this.localizationService.changes.subscribe(() => this.setDirection());
@@ -823,6 +1052,23 @@ class MapComponent {
         store.popupSettings = null;
         this.configurationService.push(store);
     }
+    ngOnDestroy() {
+        this.destroyed = true;
+        if (this.optionsChange) {
+            this.optionsChange.unsubscribe();
+        }
+        if (this.domSubscriptions) {
+            this.domSubscriptions();
+            this.domSubscriptions = null;
+        }
+        if (this.instance) {
+            this.instance.destroy();
+            this.instance = null;
+        }
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
     /**
      * Detects the size of the container and redraws the Map.
      * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
@@ -924,20 +1170,53 @@ class MapComponent {
     get isRTL() {
         return Boolean(this.localizationService.rtl);
     }
+    onShowTooltip(e) {
+        this.run(() => {
+            this.tooltipInstance.show(e);
+        }, true, true);
+    }
+    onHideTooltip() {
+        this.run(() => {
+            this.tooltipInstance.hide();
+        }, true, true);
+    }
+    /**
+     * @hidden
+     */
+    tooltipMouseleave(e) {
+        const relatedTarget = e.relatedTarget;
+        const chartElement = this.element.nativeElement;
+        if (this.instance && (!relatedTarget || !hasParent(relatedTarget, chartElement))) {
+            this.tooltipInstance.hide();
+        }
+    }
+    /**
+     * @hidden
+     */
+    mapMouseleave(e) {
+        const relatedTarget = e.relatedTarget;
+        const chartElement = this.element.nativeElement;
+        if (this.instance && (!relatedTarget || !(this.tooltipInstance.containsElement(relatedTarget) || hasParent(relatedTarget, chartElement)))) {
+            this.tooltipInstance.hide();
+        }
+    }
 }
 MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapComponent, deps: [{ token: ConfigurationService }, { token: InstanceEventService }, { token: i0.ElementRef }, { token: i3$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kendo-map", inputs: { resizeRateLimit: "resizeRateLimit", center: "center", controls: "controls", minZoom: "minZoom", maxZoom: "maxZoom", minSize: "minSize", pannable: "pannable", wraparound: "wraparound", zoom: "zoom", zoomable: "zoomable" }, outputs: { beforeReset: "beforeReset", mapClick: "mapClick", markerActivate: "markerActivate", markerClick: "markerClick", markerCreated: "markerCreated", panEnd: "panEnd", pan: "pan", reset: "reset", shapeClick: "shapeClick", shapeCreated: "shapeCreated", shapeFeatureCreated: "shapeFeatureCreated", shapeMouseEnter: "shapeMouseEnter", shapeMouseLeave: "shapeMouseLeave", zoomStart: "zoomStart", zoomEnd: "zoomEnd" }, providers: [
+MapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MapComponent, selector: "kendo-map", inputs: { resizeRateLimit: "resizeRateLimit", center: "center", controls: "controls", minZoom: "minZoom", maxZoom: "maxZoom", minSize: "minSize", pannable: "pannable", popupSettings: "popupSettings", wraparound: "wraparound", zoom: "zoom", zoomable: "zoomable" }, outputs: { beforeReset: "beforeReset", mapClick: "mapClick", markerActivate: "markerActivate", markerClick: "markerClick", markerCreated: "markerCreated", panEnd: "panEnd", pan: "pan", reset: "reset", shapeClick: "shapeClick", shapeCreated: "shapeCreated", shapeFeatureCreated: "shapeFeatureCreated", shapeMouseEnter: "shapeMouseEnter", shapeMouseLeave: "shapeMouseLeave", zoomStart: "zoomStart", zoomEnd: "zoomEnd" }, providers: [
         ConfigurationService,
         InstanceEventService,
         LocalizationService,
+        TooltipTemplateService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.map'
         }
-    ], viewQueries: [{ propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }, { propertyName: "tooltipInstance", first: true, predicate: TooltipPopupComponent, descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
     <div #surface></div>
+    <kendo-map-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
+    </kendo-map-tooltip-popup>
     <kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: TooltipPopupComponent, selector: "kendo-map-tooltip-popup", inputs: ["animate", "classNames", "popupSettings", "wrapperClass"], outputs: ["leave"] }, { type: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
             args: [{
@@ -948,6 +1227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         ConfigurationService,
                         InstanceEventService,
                         LocalizationService,
+                        TooltipTemplateService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.map'
@@ -955,6 +1235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     template: `
     <div #surface></div>
+    <kendo-map-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
+    </kendo-map-tooltip-popup>
     <kendo-resize-sensor (resize)="onResize()" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
   `
                 }]
@@ -972,6 +1254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], pannable: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
             }], wraparound: [{
                 type: Input
             }], zoom: [{
@@ -1011,6 +1295,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], surfaceElement: [{
                 type: ViewChild,
                 args: ['surface', { static: true }]
+            }], tooltipInstance: [{
+                type: ViewChild,
+                args: [TooltipPopupComponent, { static: true }]
             }] } });
 
 /**
@@ -1204,17 +1491,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A directive that sets a [template]({{ site.data.urls.angular['templatesyntax'] }})
+ * within the `<kendo-map-tooltip>` component for the Map
+ * [Bubble layer tooltip]({% slug bubble_layers_map %}#toc-tooltip).
+ *
+ * The available inputs for the bubble tooltip template are:
+ *    * `dataItem: any`&mdash;The original data item used to create the bubble.
+ *    * `location: Location`&mdash;The location of the bubble.
+ *    * `value: number`&mdash;The value of the bubble.
+ */
+class BubbleTooltipTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+BubbleTooltipTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BubbleTooltipTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+BubbleTooltipTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BubbleTooltipTemplateDirective, selector: "[kendoMapBubbleTooltipTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BubbleTooltipTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMapBubbleTooltipTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * A directive that sets a [template]({{ site.data.urls.angular['templatesyntax'] }})
+ * within the `<kendo-map-tooltip>` component for the Map
+ * [Marker layer tooltip]({% slug marker_layers_map %}#toc-tooltip).
+ *
+ * The available inputs for the marker tooltip template are:
+ *    * `title: string`&mdash;The marker title.
+ *    * `location: Location`&mdash;The marker location.
+ */
+class MarkerTooltipTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+MarkerTooltipTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MarkerTooltipTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+MarkerTooltipTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: MarkerTooltipTemplateDirective, selector: "[kendoMapMarkerTooltipTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MarkerTooltipTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMapMarkerTooltipTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * A directive that sets a [template]({{ site.data.urls.angular['templatesyntax'] }})
+ * within the `<kendo-map-tooltip>` component for the Map
+ * [Shape layer tooltip]({% slug shape_layers_map %}#toc-tooltip).
+ *
+ * The available inputs for the shape tooltip template are:
+ *    * `dataItem: any`&mdash;The original data item used to create the shape.
+ *    * `location: Location`&mdash;The location of the center of the shape.
+ */
+class ShapeTooltipTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ShapeTooltipTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ShapeTooltipTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ShapeTooltipTemplateDirective, selector: "[kendoMapShapeTooltipTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMapShapeTooltipTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * The configuration options of the Marker Layer tooltip.
+ */
+class TooltipComponent extends SettingsComponent {
+    constructor(configurationService, templateService) {
+        super('tooltip', configurationService);
+        this.configurationService = configurationService;
+        this.templateService = templateService;
+        this.markAsVisible();
+    }
+    ngAfterContentChecked() {
+        var _a, _b, _c;
+        this.templateService.markerTemplate = (_a = this.markerTooltipTemplate) === null || _a === void 0 ? void 0 : _a.templateRef;
+        this.templateService.shapeTemplate = (_b = this.shapeTooltipTemplate) === null || _b === void 0 ? void 0 : _b.templateRef;
+        this.templateService.bubbleTemplate = (_c = this.bubbleTooltipTemplate) === null || _c === void 0 ? void 0 : _c.templateRef;
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipComponent, deps: [{ token: ConfigurationService }, { token: TooltipTemplateService }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TooltipComponent, selector: "kendo-map-tooltip", inputs: { visible: "visible" }, queries: [{ propertyName: "markerTooltipTemplate", first: true, predicate: MarkerTooltipTemplateDirective, descendants: true }, { propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "bubbleTooltipTemplate", first: true, predicate: BubbleTooltipTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-map-tooltip',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: TooltipTemplateService }]; }, propDecorators: { visible: [{
+                type: Input
+            }], markerTooltipTemplate: [{
+                type: ContentChild,
+                args: [MarkerTooltipTemplateDirective, { static: false }]
+            }], shapeTooltipTemplate: [{
+                type: ContentChild,
+                args: [ShapeTooltipTemplateDirective, { static: false }]
+            }], bubbleTooltipTemplate: [{
+                type: ContentChild,
+                args: [BubbleTooltipTemplateDirective, { static: false }]
+            }] } });
+
 /**
  * @hidden
  */
 const MAP_DIRECTIVES = [
-    MapComponent,
-    LayersComponent,
     BubbleLayerComponent,
+    BubbleTooltipTemplateDirective,
+    LayersComponent,
+    LayerTooltipComponent,
+    MapComponent,
     MarkerLayerComponent,
+    MarkerTooltipTemplateDirective,
     ShapeLayerComponent,
+    ShapeTooltipTemplateDirective,
     TileLayerComponent,
-    LayerTooltipComponent
+    TooltipComponent,
+    TooltipPopupComponent
 ];
 
 /**
@@ -1223,13 +1629,13 @@ const MAP_DIRECTIVES = [
 class MapModule {
 }
 MapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapModule, declarations: [MapComponent, LayersComponent, BubbleLayerComponent, MarkerLayerComponent, ShapeLayerComponent, TileLayerComponent, LayerTooltipComponent], imports: [CommonModule, ResizeSensorModule], exports: [MapComponent, LayersComponent, BubbleLayerComponent, MarkerLayerComponent, ShapeLayerComponent, TileLayerComponent, LayerTooltipComponent] });
-MapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapModule, imports: [[CommonModule, ResizeSensorModule]] });
+MapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapModule, declarations: [BubbleLayerComponent, BubbleTooltipTemplateDirective, LayersComponent, LayerTooltipComponent, MapComponent, MarkerLayerComponent, MarkerTooltipTemplateDirective, ShapeLayerComponent, ShapeTooltipTemplateDirective, TileLayerComponent, TooltipComponent, TooltipPopupComponent], imports: [CommonModule, TooltipsModule, ResizeSensorModule], exports: [BubbleLayerComponent, BubbleTooltipTemplateDirective, LayersComponent, LayerTooltipComponent, MapComponent, MarkerLayerComponent, MarkerTooltipTemplateDirective, ShapeLayerComponent, ShapeTooltipTemplateDirective, TileLayerComponent, TooltipComponent, TooltipPopupComponent] });
+MapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapModule, imports: [[CommonModule, TooltipsModule, ResizeSensorModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MapModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MAP_DIRECTIVES],
-                    imports: [CommonModule, ResizeSensorModule],
+                    imports: [CommonModule, TooltipsModule, ResizeSensorModule],
                     exports: [MAP_DIRECTIVES]
                 }]
         }] });
@@ -1238,5 +1644,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BeforeResetEvent, BubbleLayerComponent, LayerTooltipComponent, LayersComponent, MapClickEvent, MapComponent, MapModule, MarkerActivateEvent, MarkerClickEvent, MarkerCreatedEvent, MarkerLayerComponent, PanEndEvent, PanEvent, ResetEvent, ShapeClickEvent, ShapeCreatedEvent, ShapeFeatureCreatedEvent, ShapeLayerComponent, ShapeMouseEnterEvent, ShapeMouseLeaveEvent, TileLayerComponent, ZoomEndEvent, ZoomStartEvent };
+export { BeforeResetEvent, BubbleLayerComponent, BubbleTooltipTemplateDirective, LayerTooltipComponent, LayersComponent, MapClickEvent, MapComponent, MapModule, MarkerActivateEvent, MarkerClickEvent, MarkerCreatedEvent, MarkerLayerComponent, MarkerTooltipTemplateDirective, PanEndEvent, PanEvent, ResetEvent, ShapeClickEvent, ShapeCreatedEvent, ShapeFeatureCreatedEvent, ShapeLayerComponent, ShapeMouseEnterEvent, ShapeMouseLeaveEvent, ShapeTooltipTemplateDirective, TileLayerComponent, TooltipComponent, TooltipPopupComponent, ZoomEndEvent, ZoomStartEvent, bodyFactory };
 

package/main.d.ts

@@ -11,4 +11,6 @@ export { TileLayerComponent } from './map/tile-layer.component';
 export { LayersComponent } from './map/layers.component';
 export { LayerTooltipComponent } from './map/layer/tooltip.component';
 export * from './events';
+export * from './tooltip';
+export { bodyFactory } from './tooltip/body-factory';
 export { MapLayer, MapLayerOptions, MapMarker, BubbleLayerSymbolArgs, BubbleLayerSymbol, MapControls, MapControlsPosition, TileUrlTemplateArgs, Location, Extent } from '@progress/kendo-charts';

package/map.component.d.ts

@@ -2,19 +2,21 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, Renderer2, SimpleChange } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChange } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PopupSettings } from '@progress/kendo-angular-popup';
 import { Location, Map, MapControls } from '@progress/kendo-charts';
 import { Subscription } from 'rxjs';
 import { ConfigurationService } from './common/configuration.service';
 import { MapInstanceObserver } from './common/map-instance-observer';
 import { BeforeResetEvent, MapClickEvent, MarkerActivateEvent, MarkerClickEvent, MarkerCreatedEvent, PanEndEvent, PanEvent, ResetEvent, ShapeClickEvent, ShapeCreatedEvent, ShapeFeatureCreatedEvent, ShapeMouseEnterEvent, ShapeMouseLeaveEvent, ZoomEndEvent, ZoomStartEvent } from './events';
 import { InstanceEventService } from './events/instance-event.service';
+import { TooltipPopupComponent } from './tooltip/tooltip-popup.component';
 import * as i0 from "@angular/core";
 /**
  * A sample component
  */
-export declare class MapComponent implements AfterViewInit, AfterViewChecked, OnChanges {
+export declare class MapComponent implements AfterViewInit, AfterViewChecked, OnChanges, OnDestroy {
     configurationService: ConfigurationService;
     protected instanceEventService: InstanceEventService;
     protected element: ElementRef;
@@ -77,6 +79,10 @@ export declare class MapComponent implements AfterViewInit, AfterViewChecked, On
      * @default true
      */
     pannable: boolean;
+    /**
+     * The settings for the tooltip popup.
+     */
+    popupSettings: PopupSettings;
     /**
      * Specifies whether the map should wrap around the east-west edges.
      *
@@ -174,6 +180,7 @@ export declare class MapComponent implements AfterViewInit, AfterViewChecked, On
      */
     zoomEnd: EventEmitter<ZoomEndEvent>;
     surfaceElement: ElementRef;
+    tooltipInstance: TooltipPopupComponent;
     instance: Map;
     protected options: any;
     protected theme: any;
@@ -183,12 +190,14 @@ export declare class MapComponent implements AfterViewInit, AfterViewChecked, On
     protected rtl: boolean;
     protected subscriptions: Subscription;
     protected optionsChange: Subscription;
+    protected domSubscriptions: () => void;
     constructor(configurationService: ConfigurationService, instanceEventService: InstanceEventService, element: ElementRef, localizationService: LocalizationService, changeDetector: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
     ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
     ngOnChanges(changes: {
         [propertyName: string]: SimpleChange;
     }): void;
+    ngOnDestroy(): void;
     /**
      * Detects the size of the container and redraws the Map.
      * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
@@ -209,6 +218,16 @@ export declare class MapComponent implements AfterViewInit, AfterViewChecked, On
     protected detectChanges(): void;
     protected setDirection(): void;
     protected get isRTL(): boolean;
+    protected onShowTooltip(e: any): void;
+    protected onHideTooltip(): void;
+    /**
+     * @hidden
+     */
+    tooltipMouseleave(e: any): void;
+    /**
+     * @hidden
+     */
+    mapMouseleave(e: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MapComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MapComponent, "kendo-map", ["kendoChart"], { "resizeRateLimit": "resizeRateLimit"; "center": "center"; "controls": "controls"; "minZoom": "minZoom"; "maxZoom": "maxZoom"; "minSize": "minSize"; "pannable": "pannable"; "wraparound": "wraparound"; "zoom": "zoom"; "zoomable": "zoomable"; }, { "beforeReset": "beforeReset"; "mapClick": "mapClick"; "markerActivate": "markerActivate"; "markerClick": "markerClick"; "markerCreated": "markerCreated"; "panEnd": "panEnd"; "pan": "pan"; "reset": "reset"; "shapeClick": "shapeClick"; "shapeCreated": "shapeCreated"; "shapeFeatureCreated": "shapeFeatureCreated"; "shapeMouseEnter": "shapeMouseEnter"; "shapeMouseLeave": "shapeMouseLeave"; "zoomStart": "zoomStart"; "zoomEnd": "zoomEnd"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MapComponent, "kendo-map", ["kendoChart"], { "resizeRateLimit": "resizeRateLimit"; "center": "center"; "controls": "controls"; "minZoom": "minZoom"; "maxZoom": "maxZoom"; "minSize": "minSize"; "pannable": "pannable"; "popupSettings": "popupSettings"; "wraparound": "wraparound"; "zoom": "zoom"; "zoomable": "zoomable"; }, { "beforeReset": "beforeReset"; "mapClick": "mapClick"; "markerActivate": "markerActivate"; "markerClick": "markerClick"; "markerCreated": "markerCreated"; "panEnd": "panEnd"; "pan": "pan"; "reset": "reset"; "shapeClick": "shapeClick"; "shapeCreated": "shapeCreated"; "shapeFeatureCreated": "shapeFeatureCreated"; "shapeMouseEnter": "shapeMouseEnter"; "shapeMouseLeave": "shapeMouseLeave"; "zoomStart": "zoomStart"; "zoomEnd": "zoomEnd"; }, never, never>;
 }

package/map.directives.d.ts

@@ -9,7 +9,12 @@ import { LayersComponent } from './map/layers.component';
 import { MarkerLayerComponent } from './map/marker-layer.component';
 import { ShapeLayerComponent } from './map/shape-layer.component';
 import { TileLayerComponent } from './map/tile-layer.component';
-export { MapComponent, LayersComponent, BubbleLayerComponent, MarkerLayerComponent, ShapeLayerComponent, TileLayerComponent, LayerTooltipComponent };
+import { BubbleTooltipTemplateDirective } from './tooltip/bubble-tooltip-template.directive';
+import { MarkerTooltipTemplateDirective } from './tooltip/marker-tooltip-template.directive';
+import { ShapeTooltipTemplateDirective } from './tooltip/shape-tooltip-template.directive';
+import { TooltipPopupComponent } from './tooltip/tooltip-popup.component';
+import { TooltipComponent } from './tooltip/tooltip.component';
+export { BubbleLayerComponent, BubbleTooltipTemplateDirective, LayersComponent, LayerTooltipComponent, MapComponent, MarkerLayerComponent, MarkerTooltipTemplateDirective, ShapeLayerComponent, ShapeTooltipTemplateDirective, TileLayerComponent, TooltipComponent, TooltipPopupComponent };
 /**
  * @hidden
  */