@c8y/ngx-components 1018.503.1 → 1018.503.23

package/fesm2015/c8y-ngx-components-map.mjs

@@ -1,36 +1,18 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Injectable, EventEmitter, Component, Inject, ViewChild, ContentChild, Input, Output, SimpleChange, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Directive, EventEmitter, Component, Inject, ViewChild, ContentChild, Input, Output, SimpleChange, NgModule } from '@angular/core';
 import * as i1$1 from '@c8y/ngx-components';
 import { gettext, sortByPriority, ManagedObjectRealtimeService, CommonModule as CommonModule$1, FormsModule as FormsModule$1, RealtimeModule } from '@c8y/ngx-components';
 import * as i4 from 'rxjs';
 import { from, Subject, combineLatest, fromEvent, BehaviorSubject, NEVER, interval, of, merge } from 'rxjs';
-import { map, first, takeUntil, switchMap, tap, filter, debounceTime, mergeMap } from 'rxjs/operators';
-import { isUndefined, flatten, cloneDeep } from 'lodash-es';
+import { map, first, takeUntil, switchMap, tap, filter, mergeMap, debounceTime } from 'rxjs/operators';
 import * as i1 from '@c8y/client';
+import { isUndefined, flatten, cloneDeep } from 'lodash-es';
 import * as i3 from '@ngx-translate/core';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-function getStatus(device) {
-    if (!device.c8y_ActiveAlarmsStatus) {
-        return 'text-primary';
-    }
-    if (device.c8y_ActiveAlarmsStatus.critical) {
-        return 'status critical';
-    }
-    if (device.c8y_ActiveAlarmsStatus.major) {
-        return 'status major';
-    }
-    if (device.c8y_ActiveAlarmsStatus.warning) {
-        return 'status warning';
-    }
-    if (device.c8y_ActiveAlarmsStatus.minor) {
-        return 'status minor';
-    }
-    return 'text-primary';
-}
 function getC8yMarker(marker, asset) {
     marker.asset = asset;
     return marker;
@@ -64,110 +46,30 @@ const defaultMapConfig = {
     zoomLevel: 2
 };
 
-class ClusterMap {
-    set clusterMarker(item) {
-        this.removeClusterToBigMarker();
-        this._clusterMarker = item;
-    }
-    get clusterMarker() {
-        return this._clusterMarker;
-    }
-    set rect(item) {
-        if (this._rect) {
-            this._rect.remove();
+class MapService {
+    /**
+     * Returns asset icon status for highest alarm severity found in device object.
+     * @param device Device that contains alarms information.
+     * @returns Status string according to alarm severity
+     */
+    static getStatus(device) {
+        if (!device.c8y_ActiveAlarmsStatus) {
+            return 'text-muted';
         }
-        this._rect = item;
-    }
-    get rect() {
-        return this._rect;
-    }
-    constructor(iterable, addAssetCallback, translateService) {
-        this.iterable = iterable;
-        this.addAssetCallback = addAssetCallback;
-        this.translateService = translateService;
-        this.markers = [];
-        this.positions = [];
-        this.iterableDiffer = this.iterable.find(this.positions).create(this.trackBy);
-    }
-    render(map) {
-        if (this._rect) {
-            this._rect.addTo(map);
+        if (device.c8y_ActiveAlarmsStatus.critical) {
+            return 'status critical';
         }
-        this.updateChanges(map);
-        if (this._clusterMarker) {
-            this._clusterMarker.addTo(map);
+        if (device.c8y_ActiveAlarmsStatus.major) {
+            return 'status major';
         }
-    }
-    clear(map) {
-        this.removeClusterToBigMarker();
-        this._rect.remove();
-        this.positions = [];
-        this.updateChanges(map);
-    }
-    removeClusterToBigMarker() {
-        if (this._clusterMarker) {
-            this._clusterMarker.remove();
-            this._clusterMarker = null;
+        if (device.c8y_ActiveAlarmsStatus.minor) {
+            return 'status minor';
         }
-    }
-    addMarkerToMap(device, map) {
-        const marker = this.addAssetCallback(device);
-        this.markers.push(marker);
-        marker.addTo(map);
-    }
-    setClusterToBigMarker(map, count, leaflet) {
-        const bound = this.rect.getBounds();
-        const text = this.translateService.instant(gettext('Zoom in'));
-        const divMarker = leaflet.divIcon({
-            html: `<div class="c8y-map-marker-count" data-count="${count}" title="${text}"></div>`
-        });
-        const labelIcon = leaflet.marker(bound.getCenter(), {
-            icon: divMarker
-        });
-        labelIcon.addTo(map);
-        labelIcon.on('click', () => {
-            map.fitBounds(bound);
-        });
-        this.clusterMarker = labelIcon;
-    }
-    updateChanges(map) {
-        const changes = this.iterableDiffer.diff(this.positions);
-        if (changes) {
-            changes.forEachRemovedItem((record) => {
-                this.removeMarkerFromMap(record.item);
-            });
-            changes.forEachAddedItem((record) => {
-                this.addMarkerToMap(record.item, map);
-            });
+        if (device.c8y_ActiveAlarmsStatus.warning) {
+            return 'status warning';
         }
+        return 'text-muted';
     }
-    trackBy(index, item) {
-        const trackItems = [item.id, item.c8y_Position.lat, item.c8y_Position.lng, getStatus(item)];
-        return trackItems.join('');
-    }
-    removeMarkerFromMap(device) {
-        const markers = this.markers.filter((marker) => { var _a; return ((_a = marker.asset) === null || _a === void 0 ? void 0 : _a.id) === device.id; });
-        markers.forEach(marker => marker.remove());
-    }
-}
-
-class MapPopupDirective {
-    constructor(template, elementRef, viewContainer) {
-        this.template = template;
-        this.elementRef = elementRef;
-        this.viewContainer = viewContainer;
-    }
-}
-MapPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MapPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-MapPopupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: MapPopupDirective, selector: "[c8yMapPopup]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MapPopupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[c8yMapPopup]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
-
-class MapService {
     /**
      * @ignore: Only DI.
      */
@@ -332,6 +234,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1.InventoryService }, { type: i1$1.OptionsService }]; } });
 
+class ClusterMap {
+    set clusterMarker(item) {
+        this.removeClusterToBigMarker();
+        this._clusterMarker = item;
+    }
+    get clusterMarker() {
+        return this._clusterMarker;
+    }
+    set rect(item) {
+        if (this._rect) {
+            this._rect.remove();
+        }
+        this._rect = item;
+    }
+    get rect() {
+        return this._rect;
+    }
+    constructor(iterable, addAssetCallback, translateService) {
+        this.iterable = iterable;
+        this.addAssetCallback = addAssetCallback;
+        this.translateService = translateService;
+        this.markers = [];
+        this.positions = [];
+        this.iterableDiffer = this.iterable.find(this.positions).create(this.trackBy);
+    }
+    render(map) {
+        if (this._rect) {
+            this._rect.addTo(map);
+        }
+        this.updateChanges(map);
+        if (this._clusterMarker) {
+            this._clusterMarker.addTo(map);
+        }
+    }
+    clear(map) {
+        this.removeClusterToBigMarker();
+        this._rect.remove();
+        this.positions = [];
+        this.updateChanges(map);
+    }
+    removeClusterToBigMarker() {
+        if (this._clusterMarker) {
+            this._clusterMarker.remove();
+            this._clusterMarker = null;
+        }
+    }
+    addMarkerToMap(device, map) {
+        const marker = this.addAssetCallback(device);
+        this.markers.push(marker);
+        marker.addTo(map);
+    }
+    setClusterToBigMarker(map, count, leaflet) {
+        const bound = this.rect.getBounds();
+        const text = this.translateService.instant(gettext('Zoom in'));
+        const divMarker = leaflet.divIcon({
+            html: `<div class="c8y-map-marker-count" data-count="${count}" title="${text}"></div>`
+        });
+        const labelIcon = leaflet.marker(bound.getCenter(), {
+            icon: divMarker
+        });
+        labelIcon.addTo(map);
+        labelIcon.on('click', () => {
+            map.fitBounds(bound);
+        });
+        this.clusterMarker = labelIcon;
+    }
+    updateChanges(map) {
+        const changes = this.iterableDiffer.diff(this.positions);
+        if (changes) {
+            changes.forEachRemovedItem((record) => {
+                this.removeMarkerFromMap(record.item);
+            });
+            changes.forEachAddedItem((record) => {
+                this.addMarkerToMap(record.item, map);
+            });
+        }
+    }
+    trackBy(index, item) {
+        const trackItems = [
+            item.id,
+            item.c8y_Position.lat,
+            item.c8y_Position.lng,
+            MapService.getStatus(item)
+        ];
+        return trackItems.join('');
+    }
+    removeMarkerFromMap(device) {
+        const markers = this.markers.filter((marker) => { var _a; return ((_a = marker.asset) === null || _a === void 0 ? void 0 : _a.id) === device.id; });
+        markers.forEach(marker => marker.remove());
+    }
+}
+
+class MapPopupDirective {
+    constructor(template, elementRef, viewContainer) {
+        this.template = template;
+        this.elementRef = elementRef;
+        this.viewContainer = viewContainer;
+    }
+}
+MapPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MapPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+MapPopupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: MapPopupDirective, selector: "[c8yMapPopup]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MapPopupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c8yMapPopup]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
+
 class MapComponent {
     constructor(moRealtimeService, mapService, layers$, defaultConfig$, translateService) {
         this.moRealtimeService = moRealtimeService;
@@ -354,7 +364,7 @@ class MapComponent {
         this.onZoomEnd = new EventEmitter();
         this.onRealtimeUpdate = new EventEmitter();
         this.onInit = new EventEmitter();
-        this.destroy$ = new Subject();
+        this.unsubscribeTrigger$ = new Subject();
     }
     startRealtime() {
         if (!this.assets || (Array.isArray(this.assets) && this.assets.length > 1)) {
@@ -429,7 +439,7 @@ class MapComponent {
     getAssetIcon(asset) {
         var _a;
         const assetTypeIcon = this.config.icon || ((_a = asset.icon) === null || _a === void 0 ? void 0 : _a.name);
-        const status = getStatus(asset);
+        const status = MapService.getStatus(asset);
         const color = this.config.color ? `style='color: ${this.config.color};'` : '';
         const icon = this.leaflet.divIcon({
             html: `<div class="dlt-c8y-icon-marker icon-3x ${status}" ${color}><i class="dlt-c8y-icon-${assetTypeIcon || 'data-transfer'}" /></div>`,
@@ -470,7 +480,7 @@ class MapComponent {
         return __awaiter(this, void 0, void 0, function* () {
             this.leaflet = yield this.mapService.getLeaflet();
             combineLatest([this.layers$, this.defaultConfig$])
-                .pipe(first(), takeUntil(this.destroy$))
+                .pipe(first(), takeUntil(this.unsubscribeTrigger$))
                 .subscribe(([layers, defaultConfig]) => {
                 this.initMap(layers, defaultConfig);
                 this.refreshMarkers();
@@ -490,7 +500,7 @@ class MapComponent {
         this.unsubscribeAllListeners();
     }
     unsubscribeAllListeners() {
-        this.destroy$.next();
+        this.unsubscribeTrigger$.next();
         this.stopRealtime();
     }
     initMap(layers, defaultConfig) {
@@ -507,16 +517,16 @@ class MapComponent {
         this.addLayers(layers);
         this.handleMobile();
         fromEvent(this.map, 'moveend')
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil(this.unsubscribeTrigger$))
             .subscribe(event => this.onMoveEnd.emit(event));
         fromEvent(this.map, 'move')
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil(this.unsubscribeTrigger$))
             .subscribe(event => this.onMove.emit(event));
         fromEvent(this.map, 'zoomend')
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil(this.unsubscribeTrigger$))
             .subscribe(event => this.onZoomEnd.emit(event));
         fromEvent(this.map, 'zoomstart')
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil(this.unsubscribeTrigger$))
             .subscribe(event => this.onZoomStart.emit(event));
         this.isInit = true;
         this.onInit.emit(this.leaflet);
@@ -733,7 +743,7 @@ class ClusterMapComponent extends MapComponent {
                 this.leaflet = yield this.mapService.getLeaflet();
             }
             combineLatest([this.layers$, this.defaultConfig$])
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntil(this.unsubscribeTrigger$))
                 .subscribe(([layers, defaultConfig]) => {
                 this.initMap(layers, defaultConfig);
                 this.changeRootNode(this.rootNode);
@@ -753,17 +763,17 @@ class ClusterMapComponent extends MapComponent {
     cancelReload() {
         this.reloadTrigger$.next(false);
     }
-    listenToClusterChanges() {
+    listenToClusterAndIntervalChanges() {
         const timerStart$ = new Subject();
         const timerEnd$ = new Subject();
-        const documentHiddenEvent$ = fromEvent(document, 'visibilitychange').pipe(takeUntil(this.destroy$));
+        const documentHiddenEvent$ = fromEvent(document, 'visibilitychange').pipe(takeUntil(this.unsubscribeTrigger$));
         const interval$ = timerStart$.pipe(map(() => this.config.refreshInterval), switchMap(configInterval => {
             if (!configInterval) {
                 return NEVER;
             }
             return interval(1000).pipe(map(value => value * 1000), tap(value => this.msUntilRefresh$.next(configInterval - value)), filter(value => value >= this.MIN_INTERVAL && value >= configInterval), first(), takeUntil(timerEnd$));
-        }), switchMap(() => (document.hidden ? documentHiddenEvent$ : of(true))), takeUntil(this.destroy$));
-        const mapChange$ = merge(fromEvent(this.map, 'move'), fromEvent(this.map, 'moveend')).pipe(debounceTime(this.EVENT_THROTTLE_TIME), tap(event => this.mapChange.emit(event)), takeUntil(this.destroy$));
+        }), switchMap(() => (document.hidden ? documentHiddenEvent$ : of(true))), takeUntil(this.unsubscribeTrigger$));
+        const mapChange$ = this.getMapChangeObservable();
         merge(this.reloadTrigger$, mapChange$, interval$)
             .pipe(tap(() => {
             timerEnd$.next(true);
@@ -771,7 +781,7 @@ class ClusterMapComponent extends MapComponent {
             this.isLoading$.next(true);
         }), switchMap(value => value === false
             ? of([])
-            : from(this.mapService.getClusterSize(this.map.getBounds())).pipe(mergeMap((clusterSize) => this.getClusterRects(clusterSize, this.map.getBounds())), mergeMap(rects => this.createOrUpdateCluster(rects)))), takeUntil(this.destroy$))
+            : from(this.mapService.getClusterSize(this.map.getBounds())).pipe(mergeMap((clusterSize) => this.getClusterRects(clusterSize, this.map.getBounds())), mergeMap(rects => this.createOrUpdateCluster(rects)))), takeUntil(this.unsubscribeTrigger$))
             .subscribe((clusters) => {
             clusters.forEach(cluster => cluster.render(this.map));
             this.isLoading$.next(false);
@@ -779,6 +789,9 @@ class ClusterMapComponent extends MapComponent {
             this.msUntilRefresh$.next(this.config.refreshInterval);
         });
     }
+    listenToClusterMapChanges() {
+        this.getMapChangeObservable().subscribe();
+    }
     refreshMarkers() {
         if (this.assets) {
             super.refreshMarkers();
@@ -797,11 +810,13 @@ class ClusterMapComponent extends MapComponent {
         if (isPositionDevice) {
             this.assets = mo;
             this.refreshMarkers();
-            return;
+            this.listenToClusterMapChanges();
+        }
+        else {
+            this.assets = null;
+            this.listenToClusterAndIntervalChanges();
+            this.reload();
         }
-        this.assets = null;
-        this.listenToClusterChanges();
-        this.reload();
     }
     getClusterRects(levelThreshold = ClusterSize.FOUR, viewBounds, level = 0) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -896,6 +911,9 @@ class ClusterMapComponent extends MapComponent {
         });
         return Promise.all(updatePromise);
     }
+    getMapChangeObservable() {
+        return merge(fromEvent(this.map, 'move'), fromEvent(this.map, 'moveend')).pipe(debounceTime(this.EVENT_THROTTLE_TIME), tap(event => this.mapChange.emit(event)), takeUntil(this.unsubscribeTrigger$));
+    }
 }
 ClusterMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ClusterMapComponent, deps: [{ token: i1$1.ManagedObjectRealtimeService }, { token: MapService }, { token: MAP_TILE_LAYER }, { token: MAP_DEFAULT_CONFIG }, { token: i3.TranslateService }, { token: i0.IterableDiffers }, { token: i1$1.ColorService }], target: i0.ɵɵFactoryTarget.Component });
 ClusterMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ClusterMapComponent, selector: "c8y-cluster-map", inputs: { config: "config", rootNode: "rootNode", assets: ["asset", "assets"], showClusterColor: "showClusterColor" }, outputs: { mapChange: "mapChange" }, providers: [ManagedObjectRealtimeService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" });
@@ -928,7 +946,7 @@ class MapStatusComponent {
         this.configChange = new EventEmitter();
         this.onUnfollow = new EventEmitter();
         this.buttonsConfig = {};
-        this.showCenter = false;
+        this.centerMapButtonDisabled = true;
         this.destroy$ = new Subject();
     }
     ngOnInit() {
@@ -972,10 +990,24 @@ class MapStatusComponent {
             var _a, _b;
             if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.center) && ((_b = event.sourceTarget) === null || _b === void 0 ? void 0 : _b.getBounds)) {
                 const bounds = event.sourceTarget.getBounds();
-                this.showCenter = !bounds.getCenter().equals(this.config.center, 3);
+                this.centerMapButtonDisabled = this.shouldDisableCenterButton(bounds);
             }
         });
     }
+    /**
+     * Checks if Center button should be disabled according to provided bounds.
+     * Provided bounds contain coordinates of current map rectangle corners.
+     * Center button should be disabled if distance between center coordinates (from config) and center of current bounds
+     * is less than 1/4 of bounds dimensions.
+     * To achieve it we just need to check if center coordinates (from config) are contained in the boundaries of
+     * current bounds shrunk by 25%.
+     * @param bounds Current map view boundaries.
+     * @returns True if distance between config center and current boundaries center is bigger than 1/4 of boundaries dimensions
+     */
+    shouldDisableCenterButton(bounds) {
+        const shrunkBounds = bounds.pad(-0.25);
+        return shrunkBounds.contains(this.config.center);
+    }
     defaultButtonsConfig() {
         return {
             realtime: { show: this.config.realtime || this.clusterMap.config.follow, disabled: false }
@@ -983,10 +1015,10 @@ class MapStatusComponent {
     }
 }
 MapStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MapStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: MapStatusComponent, selector: "c8y-map-status", inputs: { config: "config", clusterMap: "clusterMap", buttonsConfig: "buttonsConfig" }, outputs: { configChange: "configChange", onUnfollow: "onUnfollow" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-map-status\">\n  <div class=\"leaflet-touch\">\n    <div\n      class=\"leaflet-bar\"\n      role=\"group\"\n    >\n      <button\n        type=\"button\"\n        title=\"{{ 'Realtime' | translate }}\"\n        class=\"c8y-realtime\"\n        *ngIf=\"buttonsConfig.realtime.show\"\n        (click)=\"toggleRealtime()\"\n        [disabled]=\"buttonsConfig.realtime.disabled\"\n      >\n        <span\n          class=\"c8y-pulse\"\n          [ngClass]=\"{\n            active: clusterMap?.config.realtime,\n            inactive: !clusterMap?.config.realtime\n          }\"\n        ></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"time-ellapsed\"\n        *ngIf=\"\n          clusterMap?.config.refreshInterval &&\n          (secondsUntilRefresh$ | async) &&\n          !clusterMap?.config.follow\n        \"\n        disabled=\"disabled\"\n        title=\"{{ secondsUntilRefresh$ | async }}s / {{\n          clusterMap?.config.refreshInterval / 1000\n        }}s\"\n        [style.--timescope]=\"clusterMap?.config.refreshInterval + 1000 + 'ms'\"\n      >\n        <svg\n          [ngClass]=\"{ 'time-on': !(clusterMap?.isLoading$ | async) }\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"15.8\"\n            stroke=\"var(--c8y-brand-primary)\"\n            stroke-width=\"6\"\n          />\n        </svg>\n\n        <span>{{ secondsUntilRefresh$ | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"clusterMap?.isLoading$ | async\"\n        title=\"{{ 'Cancel reload' | translate }}\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          class=\"icon-spin\"\n        ></i>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime && !clusterMap?.assets && !(clusterMap?.isLoading$ | async)\n        \"\n        (click)=\"reload()\"\n        [title]=\"'Reload' | translate\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"center()\"\n        title=\"{{ 'Center map' | translate }}\"\n        [disabled]=\"!showCenter || clusterMap?.config.follow\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Unfollow' | translate }}\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        type=\"button\"\n        title=\"{{ 'Follow' | translate }}\"\n        *ngIf=\"initConfig.follow && !clusterMap?.config.follow\"\n        (click)=\"follow()\"\n      >\n        <i c8yIcon=\"marker\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] });
+MapStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: MapStatusComponent, selector: "c8y-map-status", inputs: { config: "config", clusterMap: "clusterMap", buttonsConfig: "buttonsConfig" }, outputs: { configChange: "configChange", onUnfollow: "onUnfollow" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-map-status\">\n  <div class=\"leaflet-touch\">\n    <div\n      class=\"leaflet-bar\"\n      role=\"group\"\n    >\n      <button\n        type=\"button\"\n        title=\"{{ 'Realtime' | translate }}\"\n        class=\"c8y-realtime\"\n        *ngIf=\"buttonsConfig.realtime.show\"\n        (click)=\"toggleRealtime()\"\n        [disabled]=\"buttonsConfig.realtime.disabled\"\n      >\n        <span\n          class=\"c8y-pulse\"\n          [ngClass]=\"{\n            active: clusterMap?.config.realtime,\n            inactive: !clusterMap?.config.realtime\n          }\"\n        ></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"time-ellapsed\"\n        *ngIf=\"\n          clusterMap?.config.refreshInterval &&\n          (secondsUntilRefresh$ | async) &&\n          !clusterMap?.config.follow\n        \"\n        disabled=\"disabled\"\n        title=\"{{ secondsUntilRefresh$ | async }}s / {{\n          clusterMap?.config.refreshInterval / 1000\n        }}s\"\n        [style.--timescope]=\"clusterMap?.config.refreshInterval + 1000 + 'ms'\"\n      >\n        <svg\n          [ngClass]=\"{ 'time-on': !(clusterMap?.isLoading$ | async) }\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"15.8\"\n            stroke=\"var(--c8y-brand-primary)\"\n            stroke-width=\"6\"\n          />\n        </svg>\n\n        <span>{{ secondsUntilRefresh$ | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"clusterMap?.isLoading$ | async\"\n        title=\"{{ 'Cancel reload' | translate }}\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          class=\"icon-spin\"\n        ></i>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime && !clusterMap?.assets && !(clusterMap?.isLoading$ | async)\n        \"\n        (click)=\"reload()\"\n        [title]=\"'Reload' | translate\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"center()\"\n        title=\"{{ 'Center map' | translate }}\"\n        [disabled]=\"centerMapButtonDisabled || clusterMap?.config.follow\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Unfollow' | translate }}\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        type=\"button\"\n        title=\"{{ 'Follow' | translate }}\"\n        *ngIf=\"initConfig.follow && !clusterMap?.config.follow\"\n        (click)=\"follow()\"\n      >\n        <i c8yIcon=\"marker\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MapStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-map-status', template: "<div class=\"c8y-map-status\">\n  <div class=\"leaflet-touch\">\n    <div\n      class=\"leaflet-bar\"\n      role=\"group\"\n    >\n      <button\n        type=\"button\"\n        title=\"{{ 'Realtime' | translate }}\"\n        class=\"c8y-realtime\"\n        *ngIf=\"buttonsConfig.realtime.show\"\n        (click)=\"toggleRealtime()\"\n        [disabled]=\"buttonsConfig.realtime.disabled\"\n      >\n        <span\n          class=\"c8y-pulse\"\n          [ngClass]=\"{\n            active: clusterMap?.config.realtime,\n            inactive: !clusterMap?.config.realtime\n          }\"\n        ></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"time-ellapsed\"\n        *ngIf=\"\n          clusterMap?.config.refreshInterval &&\n          (secondsUntilRefresh$ | async) &&\n          !clusterMap?.config.follow\n        \"\n        disabled=\"disabled\"\n        title=\"{{ secondsUntilRefresh$ | async }}s / {{\n          clusterMap?.config.refreshInterval / 1000\n        }}s\"\n        [style.--timescope]=\"clusterMap?.config.refreshInterval + 1000 + 'ms'\"\n      >\n        <svg\n          [ngClass]=\"{ 'time-on': !(clusterMap?.isLoading$ | async) }\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"15.8\"\n            stroke=\"var(--c8y-brand-primary)\"\n            stroke-width=\"6\"\n          />\n        </svg>\n\n        <span>{{ secondsUntilRefresh$ | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"clusterMap?.isLoading$ | async\"\n        title=\"{{ 'Cancel reload' | translate }}\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          class=\"icon-spin\"\n        ></i>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime && !clusterMap?.assets && !(clusterMap?.isLoading$ | async)\n        \"\n        (click)=\"reload()\"\n        [title]=\"'Reload' | translate\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"center()\"\n        title=\"{{ 'Center map' | translate }}\"\n        [disabled]=\"!showCenter || clusterMap?.config.follow\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Unfollow' | translate }}\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        type=\"button\"\n        title=\"{{ 'Follow' | translate }}\"\n        *ngIf=\"initConfig.follow && !clusterMap?.config.follow\"\n        (click)=\"follow()\"\n      >\n        <i c8yIcon=\"marker\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-map-status', template: "<div class=\"c8y-map-status\">\n  <div class=\"leaflet-touch\">\n    <div\n      class=\"leaflet-bar\"\n      role=\"group\"\n    >\n      <button\n        type=\"button\"\n        title=\"{{ 'Realtime' | translate }}\"\n        class=\"c8y-realtime\"\n        *ngIf=\"buttonsConfig.realtime.show\"\n        (click)=\"toggleRealtime()\"\n        [disabled]=\"buttonsConfig.realtime.disabled\"\n      >\n        <span\n          class=\"c8y-pulse\"\n          [ngClass]=\"{\n            active: clusterMap?.config.realtime,\n            inactive: !clusterMap?.config.realtime\n          }\"\n        ></span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"time-ellapsed\"\n        *ngIf=\"\n          clusterMap?.config.refreshInterval &&\n          (secondsUntilRefresh$ | async) &&\n          !clusterMap?.config.follow\n        \"\n        disabled=\"disabled\"\n        title=\"{{ secondsUntilRefresh$ | async }}s / {{\n          clusterMap?.config.refreshInterval / 1000\n        }}s\"\n        [style.--timescope]=\"clusterMap?.config.refreshInterval + 1000 + 'ms'\"\n      >\n        <svg\n          [ngClass]=\"{ 'time-on': !(clusterMap?.isLoading$ | async) }\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"15.8\"\n            stroke=\"var(--c8y-brand-primary)\"\n            stroke-width=\"6\"\n          />\n        </svg>\n\n        <span>{{ secondsUntilRefresh$ | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"clusterMap?.isLoading$ | async\"\n        title=\"{{ 'Cancel reload' | translate }}\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          c8yIcon=\"refresh\"\n          class=\"icon-spin\"\n        ></i>\n      </button>\n      <button\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime && !clusterMap?.assets && !(clusterMap?.isLoading$ | async)\n        \"\n        (click)=\"reload()\"\n        [title]=\"'Reload' | translate\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        type=\"button\"\n        (click)=\"center()\"\n        title=\"{{ 'Center map' | translate }}\"\n        [disabled]=\"centerMapButtonDisabled || clusterMap?.config.follow\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n        type=\"button\"\n        title=\"{{ 'Unfollow' | translate }}\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        type=\"button\"\n        title=\"{{ 'Follow' | translate }}\"\n        *ngIf=\"initConfig.follow && !clusterMap?.config.follow\"\n        (click)=\"follow()\"\n      >\n        <i c8yIcon=\"marker\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], configChange: [{
@@ -1048,5 +1080,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ClusterMap, ClusterMapComponent, ClusterSize, MAP_DEFAULT_CONFIG, MAP_TILE_LAYER, MapComponent, MapModule, MapPopupDirective, MapService, MapStatusComponent, MapTenantOptionKeys, defaultLayer, defaultMapConfig, getC8yMarker, getStatus };
+export { ClusterMap, ClusterMapComponent, ClusterSize, MAP_DEFAULT_CONFIG, MAP_TILE_LAYER, MapComponent, MapModule, MapPopupDirective, MapService, MapStatusComponent, MapTenantOptionKeys, defaultLayer, defaultMapConfig, getC8yMarker };
 //# sourceMappingURL=c8y-ngx-components-map.mjs.map