@c8y/ngx-components 1022.10.1 → 1022.13.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Directive, EventEmitter, Output, Input, ContentChild, ViewChild, Inject, Component, SimpleChange, NgModule } from '@angular/core';
 import * as i1$1 from '@c8y/ngx-components';
-import { gettext, sortByPriority, ManagedObjectRealtimeService, globalAutoRefreshLoading, CountdownIntervalComponent, CommonModule as CommonModule$1, FormsModule as FormsModule$1, RealtimeModule, CoreModule } from '@c8y/ngx-components';
+import { gettext, sortByPriority, ManagedObjectRealtimeService, globalAutoRefreshLoading, CountdownIntervalComponent, IconDirective, C8yTranslatePipe, CommonModule as CommonModule$1, FormsModule as FormsModule$1, RealtimeModule, CoreModule } from '@c8y/ngx-components';
 import * as i3 from '@ngx-translate/core';
 import * as i4 from 'rxjs';
 import { of, combineLatest, defer, NEVER, BehaviorSubject, Subject, fromEvent, EMPTY, merge, from } from 'rxjs';
@@ -10,30 +10,55 @@ import * as i1 from '@c8y/client';
 import { latLng, latLngBounds } from 'leaflet';
 import { get, remove, isUndefined, flatten, every, isNull, isEmpty, cloneDeep } from 'lodash-es';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3$1 from 'ngx-bootstrap/tooltip';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { NgIf, NgClass, AsyncPipe, CommonModule } from '@angular/common';
+import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
 import { FormsModule } from '@angular/forms';
 
+/**
+ * Utility function to assign asset and event information to a Leaflet marker.
+ * @param marker The Leaflet marker instance.
+ * @param asset The managed object representing the asset (optional).
+ * @param event The event associated with the marker (optional).
+ * @returns The marker with asset and/or event information attached.
+ */
 function getC8yMarker(marker, asset, event) {
     marker.asset = asset;
     marker.event = event;
     return marker;
 }
+/**
+ * Injection token for providing map tile layers as an observable.
+ */
 const MAP_TILE_LAYER = new InjectionToken('MAP_TILE_LAYER');
+/**
+ * Enum for supported cluster sizes on the map.
+ */
 var ClusterSize;
 (function (ClusterSize) {
+    /** No clustering. */
     ClusterSize[ClusterSize["NONE"] = 0] = "NONE";
+    /** Cluster of 4. */
     ClusterSize[ClusterSize["FOUR"] = 1] = "FOUR";
+    /** Cluster of 16. */
     ClusterSize[ClusterSize["SIXTEEN"] = 2] = "SIXTEEN";
 })(ClusterSize || (ClusterSize = {}));
+/**
+ * Enum for map tenant option keys used in configuration.
+ */
 var MapTenantOptionKeys;
 (function (MapTenantOptionKeys) {
+    /** Map configuration key. */
     MapTenantOptionKeys["CONFIG"] = "map-config";
+    /** Map layers key. */
     MapTenantOptionKeys["LAYERS"] = "map-layers";
 })(MapTenantOptionKeys || (MapTenantOptionKeys = {}));
+/**
+ * Injection token for providing the default map configuration as an observable.
+ */
 const MAP_DEFAULT_CONFIG = new InjectionToken('MAP_DEFAULT_CONFIG');
+/**
+ * Default map tile layer configuration (OpenStreetMap).
+ */
 const defaultLayer = {
     layerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
     label: 'OpenStreetMap',
@@ -45,10 +70,16 @@ const defaultLayer = {
         noWrap: false
     }
 };
+/**
+ * Default map configuration (centered on Düsseldorf, zoom level 2).
+ */
 const defaultMapConfig = {
     center: [51.23544, 6.79599], // Düsseldorf
     zoomLevel: 2
 };
+/**
+ * Default options for fitting map bounds (padding).
+ */
 const defaultFitBoundsOptions = {
     padding: [50, 50]
 };
@@ -442,14 +473,11 @@ class MapPopupDirective {
         this.viewContainer = viewContainer;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: MapPopupDirective, isStandalone: false, selector: "[c8yMapPopup]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: MapPopupDirective, isStandalone: true, selector: "[c8yMapPopup]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapPopupDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[c8yMapPopup]',
-                    standalone: false
-                }]
+            args: [{ selector: '[c8yMapPopup]' }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }] });
 
 class MapComponent {
@@ -463,23 +491,42 @@ class MapComponent {
         this.datePipe = datePipe;
         this.widgetGlobalAutoRefreshService = widgetGlobalAutoRefreshService;
         /**
-         * The markers placed on the map.
+         * The markers currently placed on the map.
          */
         this.markers = [];
         /**
-         * Tells if the map was already initialized.
+         * Indicates if the map was already initialized.
          */
         this.isInit = false;
+        /**
+         * Map configuration object (center, zoom, icon, color, etc).
+         */
         this.config = {};
+        /**
+         * Observable for polyline coordinates to display on the map.
+         */
         this.polyline$ = NEVER;
+        /**
+         * Emits when a tracked asset is updated in real-time.
+         */
         this.onRealtimeUpdate = new EventEmitter();
+        /**
+         * Emits the Leaflet map instance when available.
+         */
         this.onMap = new BehaviorSubject(null);
+        /**
+         * Emits when the map and Leaflet library are initialized.
+         */
         this.onInit = new EventEmitter();
         this.unsubscribeTrigger$ = new Subject();
         this.destroy$ = new Subject();
         this.markerTitle = gettext('Marker at position {{lat}}, {{lng}}');
         this.initOutputs();
     }
+    /**
+     * Starts real-time updates for a single asset on the map.
+     * Updates marker position and icon as new data arrives.
+     */
     startRealtime() {
         if (!this.assets || (Array.isArray(this.assets) && this.assets.length > 1)) {
             this.config.realtime = false;
@@ -504,25 +551,46 @@ class MapComponent {
             this.onRealtimeUpdate.emit(asset);
         });
     }
+    /**
+     * Moves the map view to the position of the given asset(s) if follow is enabled.
+     * @param positions The asset or array of assets to center the map on.
+     */
     moveToPositionOfMo(positions) {
         const position = Array.isArray(positions) ? positions[0] : positions;
         if (this.config.follow) {
             this.map.setView([position.c8y_Position.lat, position.c8y_Position.lng]);
         }
     }
+    /**
+     * Stops real-time updates for the asset.
+     */
     stopRealtime() {
         if (this.realtimeSubscription) {
             this.realtimeSubscription.unsubscribe();
         }
     }
+    /**
+     * Finds a marker on the map by asset, event, or ID.
+     * @param moOrId Asset, event, or string ID to search for.
+     * @returns The found marker or undefined.
+     */
     findMarker(moOrId) {
         const getId = moOrId => (typeof moOrId === 'string' ? moOrId : moOrId?.id);
         return this.markers.find((marker) => marker.asset?.id === getId(moOrId) || marker.event?.id === getId(moOrId));
     }
+    /**
+     * Adds a marker to the map and internal marker list.
+     * @param marker The marker to add.
+     */
     addMarkerToMap(marker) {
         this.markers.push(marker);
         marker.addTo(this.map);
     }
+    /**
+     * Creates and returns a marker for the given asset, including icon and popup.
+     * @param asset The asset to create a marker for.
+     * @returns The created marker.
+     */
     getAssetMarker(asset) {
         if (!asset) {
             return;
@@ -537,6 +605,11 @@ class MapComponent {
         this.bindPopup(marker, asset);
         return marker;
     }
+    /**
+     * Creates and returns a marker for a tracking event, including icon and popup.
+     * @param event The event to create a marker for.
+     * @returns The created marker.
+     */
     getTrackingMarker(event) {
         if (!event) {
             return;
@@ -551,6 +624,11 @@ class MapComponent {
         this.bindPopup(marker, event);
         return marker;
     }
+    /**
+     * Returns a Leaflet icon for the given asset, using config or asset icon and color.
+     * @param asset The asset to get the icon for.
+     * @returns The Leaflet icon.
+     */
     getAssetIcon(asset) {
         const assetTypeIcon = this.config.icon || asset.icon?.name;
         const status = MapService.getStatus(asset);
@@ -563,6 +641,10 @@ class MapComponent {
         });
         return icon;
     }
+    /**
+     * Returns a Leaflet icon for a tracking event.
+     * @returns The Leaflet icon.
+     */
     getTrackingIcon() {
         const icon = this.leaflet.divIcon({
             html: `<div class="dlt-c8y-icon-marker icon-3x text-muted"></div>`,
@@ -572,17 +654,28 @@ class MapComponent {
         });
         return icon;
     }
+    /**
+     * Removes a marker from the map and internal marker list.
+     * @param marker The marker to remove.
+     */
     removeMarker(marker) {
         if (marker) {
             marker.remove();
             remove(this.markers, m => m === marker);
         }
     }
+    /**
+     * Removes all markers from the map, optionally filtered by marker attribute.
+     * @param fragment Optional marker attribute to filter by.
+     */
     clearMarkers(fragment) {
         const matchingMarkers = marker => !fragment || !!marker[fragment];
         this.markers.filter(matchingMarkers).forEach(marker => marker.remove());
         this.markers = this.markers.filter(marker => !matchingMarkers(marker));
     }
+    /**
+     * Refreshes all markers on the map based on the current assets.
+     */
     refreshMarkers() {
         this.clearMarkers();
         let assets = [];
@@ -598,9 +691,15 @@ class MapComponent {
         }
         this.toggleControls();
     }
+    /**
+     * Centers the map on the configured center coordinates.
+     */
     center() {
         this.map?.setView(this.config.center);
     }
+    /**
+     * Refreshes the map and markers if the map is initialized.
+     */
     refresh() {
         if (this.isInit) {
             this.refreshMarkers();
@@ -841,11 +940,11 @@ class MapComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapComponent, deps: [{ token: i1$1.ManagedObjectRealtimeService }, { token: MapService }, { token: MAP_TILE_LAYER }, { token: MAP_DEFAULT_CONFIG }, { token: i3.TranslateService }, { token: i1$1.GeoService }, { token: i1$1.DatePipe }, { token: i1$1.WidgetGlobalAutoRefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MapComponent, isStandalone: false, selector: "c8y-map", inputs: { config: "config", assets: "assets", polyline$: "polyline$", polylineOptions: "polylineOptions" }, outputs: { onRealtimeUpdate: "onRealtimeUpdate", onMove: "onMove", onMoveEnd: "onMoveEnd", onZoomStart: "onZoomStart", onZoomEnd: "onZoomEnd", onMap: "onMap", onInit: "onInit" }, providers: [ManagedObjectRealtimeService], queries: [{ propertyName: "popup", first: true, predicate: MapPopupDirective, descendants: true }], viewQueries: [{ propertyName: "mapElement", first: true, predicate: ["map"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MapComponent, isStandalone: true, selector: "c8y-map", inputs: { config: "config", assets: "assets", polyline$: "polyline$", polylineOptions: "polylineOptions" }, outputs: { onRealtimeUpdate: "onRealtimeUpdate", onMove: "onMove", onMoveEnd: "onMoveEnd", onZoomStart: "onZoomStart", onZoomEnd: "onZoomEnd", onMap: "onMap", onInit: "onInit" }, providers: [ManagedObjectRealtimeService], queries: [{ propertyName: "popup", first: true, predicate: MapPopupDirective, descendants: true }], viewQueries: [{ propertyName: "mapElement", first: true, predicate: ["map"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-map', providers: [ManagedObjectRealtimeService], standalone: false, template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }]
+            args: [{ selector: 'c8y-map', providers: [ManagedObjectRealtimeService], template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ManagedObjectRealtimeService }, { type: MapService }, { type: i4.Observable, decorators: [{
                     type: Inject,
                     args: [MAP_TILE_LAYER]
@@ -882,7 +981,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Smart map component for that clusters devices together when there are too many to display individually.
+ * Unlike the basic map, this component loads device data dynamically and manages cluster rendering and updates.
+ * Extends the base MapComponent with clustering, dynamic data loading, and advanced refresh logic.
+ */
 class ClusterMapComponent extends MapComponent {
+    /**
+     * Constructs the ClusterMapComponent, injecting required services and initializing the base map.
+     */
     constructor(moRealtimeService, mapService, layers$, defaultConfig$, translateService, widgetGlobalAutoRefreshService, iterable, colorService, geo, datePipe) {
         super(moRealtimeService, mapService, layers$, defaultConfig$, translateService, geo, datePipe, widgetGlobalAutoRefreshService);
         this.moRealtimeService = moRealtimeService;
@@ -893,14 +1000,25 @@ class ClusterMapComponent extends MapComponent {
         this.widgetGlobalAutoRefreshService = widgetGlobalAutoRefreshService;
         this.iterable = iterable;
         this.colorService = colorService;
+        /** Emits true while the map is loading or refreshing clusters. */
         this.isLoading$ = new BehaviorSubject(false);
+        /**
+         * Whether to show a color overlay for each cluster rectangle. This can be useful for debugging or visualizing clusters.
+         */
         this.showClusterColor = false;
+        /**
+         * Emits Leaflet map change events (move, moveend) for external listeners.
+         */
         this.mapChange = new EventEmitter();
+        /** @ignore */
         this.errorNotifier = new BehaviorSubject(null);
         this.reloadTrigger$ = new BehaviorSubject(false);
         this.clusters = [];
         this.EVENT_THROTTLE_TIME = 750;
     }
+    /**
+     * @ignore
+     */
     async ngOnChanges(changes) {
         if (changes.config?.firstChange) {
             return;
@@ -912,6 +1030,11 @@ class ClusterMapComponent extends MapComponent {
             this.changeConfig(changes.config);
         }
     }
+    /**
+     * Handles changes to the map configuration, including follow and refresh interval.
+     * Cancels reload on follow, triggers reload on refresh interval change, and delegates to base config change logic.
+     * @param change The config change object.
+     */
     changeConfig(change) {
         // on following, cancel reload to avoid stale state
         if (change.currentValue.follow === true) {
@@ -923,6 +1046,9 @@ class ClusterMapComponent extends MapComponent {
         }
         super.changeConfig(change);
     }
+    /**
+     * @ignore
+     */
     async ngAfterViewInit() {
         if (!this.leaflet) {
             this.leaflet = await this.mapService.getLeaflet();
@@ -938,16 +1064,29 @@ class ClusterMapComponent extends MapComponent {
             this.changeConfig(new SimpleChange({}, this.config, false));
         });
     }
+    /**
+     * Resets the map and clusters, re-initializing the component.
+     */
     async reset() {
         this.ngOnDestroy();
         await this.ngAfterViewInit();
     }
+    /**
+     * Triggers a reload of cluster data.
+     */
     reload() {
         this.reloadTrigger$.next(true);
     }
+    /**
+     * Cancels an ongoing reload operation.
+     */
     cancelReload() {
         this.reloadTrigger$.next(false);
     }
+    /**
+     * Subscribes to cluster and interval changes, updating clusters as needed.
+     * Handles auto-refresh and global refresh loading.
+     */
     listenToClusterAndIntervalChanges() {
         const countdownEnded$ = this.config.widgetInstanceGlobalAutoRefreshContext
             ? this.widgetGlobalAutoRefreshService.countdownActions.countdownEnded$.pipe(takeUntil(this.destroy$))
@@ -978,9 +1117,15 @@ class ClusterMapComponent extends MapComponent {
             this.countdownIntervalComp?.start();
         });
     }
+    /**
+     * Subscribes to map change events for cluster updates.
+     */
     listenToClusterMapChanges() {
         this.getMapChangeObservable().subscribe();
     }
+    /**
+     * Refreshes markers or clusters, depending on whether a single asset or clusters are shown.
+     */
     refreshMarkers() {
         if (this.assets) {
             super.refreshMarkers();
@@ -1109,11 +1254,11 @@ class ClusterMapComponent extends MapComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClusterMapComponent, deps: [{ token: i1$1.ManagedObjectRealtimeService }, { token: MapService }, { token: MAP_TILE_LAYER }, { token: MAP_DEFAULT_CONFIG }, { token: i3.TranslateService }, { token: i1$1.WidgetGlobalAutoRefreshService }, { token: i0.IterableDiffers }, { token: i1$1.ColorService }, { token: i1$1.GeoService }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ClusterMapComponent, isStandalone: false, selector: "c8y-cluster-map", inputs: { config: "config", rootNode: "rootNode", assets: ["asset", "assets"], showClusterColor: "showClusterColor" }, outputs: { mapChange: "mapChange" }, providers: [ManagedObjectRealtimeService], viewQueries: [{ propertyName: "mapElement", first: true, predicate: ["map"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ClusterMapComponent, isStandalone: true, selector: "c8y-cluster-map", inputs: { config: "config", rootNode: "rootNode", assets: ["asset", "assets"], showClusterColor: "showClusterColor" }, outputs: { mapChange: "mapChange" }, providers: [ManagedObjectRealtimeService], viewQueries: [{ propertyName: "mapElement", first: true, predicate: ["map"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClusterMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-cluster-map', providers: [ManagedObjectRealtimeService], standalone: false, template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }]
+            args: [{ selector: 'c8y-cluster-map', providers: [ManagedObjectRealtimeService], template: "<div class=\"c8y-map\">\n  <div #map></div>\n</div>\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ManagedObjectRealtimeService }, { type: MapService }, { type: i4.Observable, decorators: [{
                     type: Inject,
                     args: [MAP_TILE_LAYER]
@@ -1136,43 +1281,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['map']
             }] } });
 
+/**
+ * Component to display controls and status information for a map rendered on an IoT Dashboard.
+ * Provides UI for centering, fitting bounds, toggling real-time updates, auto-refresh, and following assets.
+ */
 class MapStatusComponent {
     constructor() {
+        /**
+         * Emits when the map configuration changes (e.g., toggling real-time, follow, etc.).
+         */
         this.configChange = new EventEmitter();
+        /**
+         * Emits when the user unfollows an asset on the map.
+         */
         this.onUnfollow = new EventEmitter();
+        /**
+         * Emits when the user requests to fit all assets within the map bounds.
+         */
         this.fitAssetsToBounds = new EventEmitter();
+        /**
+         * Configuration for which map status buttons are shown/enabled.
+         * By default the "center" button is shown and realtime is disabled.
+         * See {@link MapStatusButtonsConfig} for available options.
+         */
         this.buttonsConfig = {};
-        this.centerMapButtonDisabled = true;
+        /**
+         * @ignore
+         */
         this.refreshPaused = false;
         this.destroy$ = new Subject();
     }
+    /**
+     * @ignore
+     */
     ngOnInit() {
         this.initConfig = cloneDeep(this.config);
         this.buttonsConfig = Object.assign(this.defaultButtonsConfig(), this.buttonsConfig);
     }
+    /**
+     * @ignore
+     */
     ngAfterViewInit() {
         if (!this.config.widgetInstanceGlobalAutoRefreshContext) {
             this.clusterMap.countdownIntervalComp = this.countdownIntervalComp;
         }
     }
+    /**
+     * @ignore
+     */
     ngOnChanges(changes) {
         if (changes.clusterMap?.previousValue !== changes.clusterMap?.currentValue) {
             this.checkIfMapIsAlreadyCentered();
         }
     }
+    /**
+     * Centers the map on the configured center coordinates.
+     */
     center() {
         this.clusterMap.center();
     }
+    /**
+     * Emits an event to fit all assets within the map bounds and disables the button until the next change.
+     */
     fitToBounds() {
-        this.fitToBoundsButtonDisabled = true;
+        this.buttonsConfig.fitToBounds.disabled = true;
         this.fitAssetsToBounds.emit();
     }
+    /**
+     * Reloads the map data.
+     */
     reload() {
         this.clusterMap.reload();
     }
+    /**
+     * Cancels the map reload operation.
+     */
     cancelReload() {
         this.clusterMap.cancelReload();
     }
+    /**
+     * Toggles real-time updates for the map.
+     */
     toggleRealtime() {
         this.config = {
             ...this.config,
@@ -1180,6 +1369,10 @@ class MapStatusComponent {
         };
         this.configChange.emit(this.config);
     }
+    /**
+     * Toggles the auto-refresh state for the map, pausing or resuming the countdown.
+     * @param $event Mouse event to prevent default and stop propagation.
+     */
     toggleAutoRefresh($event) {
         $event.preventDefault();
         $event.stopPropagation();
@@ -1191,6 +1384,9 @@ class MapStatusComponent {
             this.countdownIntervalComp.start();
         }
     }
+    /**
+     * Disables following an asset on the map and emits the change.
+     */
     unfollow() {
         this.config = {
             ...this.clusterMap.config,
@@ -1199,6 +1395,9 @@ class MapStatusComponent {
         this.configChange.emit(this.config);
         this.onUnfollow.emit(this.config);
     }
+    /**
+     * Enables following an asset on the map and emits the change.
+     */
     follow() {
         this.config = {
             ...this.config,
@@ -1206,16 +1405,22 @@ class MapStatusComponent {
         };
         this.configChange.emit(this.config);
     }
+    /**
+     * @ignore
+     */
     ngOnDestroy() {
         this.destroy$.next();
     }
+    /**
+     * Subscribes to map changes and updates button states based on map bounds and center.
+     */
     checkIfMapIsAlreadyCentered() {
         this.clusterMap.mapChange.pipe(takeUntil(this.destroy$)).subscribe((event) => {
             if (event.sourceTarget?.getBounds) {
                 const bounds = event.sourceTarget.getBounds();
-                this.fitToBoundsButtonDisabled = this.shouldDisableFitToBoundsButton(bounds);
+                this.buttonsConfig.fitToBounds.disabled = this.shouldDisableFitToBoundsButton(bounds);
                 if (this.config?.center) {
-                    this.centerMapButtonDisabled = this.shouldDisableCenterButton(bounds);
+                    this.buttonsConfig.center.disabled = this.shouldDisableCenterButton(bounds);
                 }
             }
         });
@@ -1234,23 +1439,42 @@ class MapStatusComponent {
         const shrunkBounds = bounds.pad(-0.25);
         return shrunkBounds.contains(this.config.center);
     }
+    /**
+     * Checks if Fit to Bounds button should be disabled based on whether all assets are within the current bounds.
+     * @param bounds Current map view boundaries.
+     * @returns True if all assets are already within bounds, false otherwise.
+     */
     shouldDisableFitToBoundsButton(bounds) {
         if (!this.assets) {
             return true;
         }
         return this.assets.every(({ c8y_Position }) => bounds.contains([c8y_Position.lat, c8y_Position.lng]));
     }
+    /**
+     * Returns the default configuration for map status buttons.
+     * @returns Default MapStatusButtonsConfig object.
+     */
     defaultButtonsConfig() {
         return {
-            realtime: { show: this.config.realtime || this.clusterMap.config.follow, disabled: false }
+            realtime: { show: this.config.realtime || this.clusterMap.config.follow, disabled: false },
+            fitToBounds: { show: false, disabled: false },
+            center: { show: true, disabled: false }
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MapStatusComponent, isStandalone: false, selector: "c8y-map-status", inputs: { config: "config", assets: "assets", clusterMap: "clusterMap", buttonsConfig: "buttonsConfig" }, outputs: { configChange: "configChange", onUnfollow: "onUnfollow", fitAssetsToBounds: "fitAssetsToBounds" }, viewQueries: [{ propertyName: "countdownIntervalComp", first: true, predicate: CountdownIntervalComponent, descendants: true }], 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        class=\"c8y-realtime\"\n        title=\"{{ 'Realtime' | translate }}\"\n        type=\"button\"\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\n      <label\n        class=\"toggle-countdown vertical\"\n        [attr.aria-label]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        [tooltip]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        placement=\"left\"\n        *ngIf=\"\n          !config.widgetInstanceGlobalAutoRefreshContext &&\n          clusterMap?.config.refreshInterval &&\n          !clusterMap?.config.follow\n        \"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"1000\"\n      >\n        <input\n          type=\"checkbox\"\n          (click)=\"toggleAutoRefresh($event)\"\n        />\n        <c8y-countdown-interval\n          [hidden]=\"refreshPaused\"\n          [countdownInterval]=\"clusterMap?.config.refreshInterval\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"refreshPaused\"\n        ></i>\n      </label>\n\n      <button\n        title=\"{{ 'Cancel reload' | translate }}\"\n        type=\"button\"\n        *ngIf=\"(clusterMap?.isLoading$ | async) && !config.widgetInstanceGlobalAutoRefreshContext\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          class=\"icon-spin\"\n          c8yIcon=\"refresh\"\n        ></i>\n      </button>\n      <button\n        [title]=\"'Reload' | translate\"\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime &&\n          !clusterMap?.assets &&\n          !(clusterMap?.isLoading$ | async) &&\n          !config.widgetInstanceGlobalAutoRefreshContext\n        \"\n        (click)=\"reload()\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        title=\"{{ 'Center map' | translate }}\"\n        type=\"button\"\n        (click)=\"center()\"\n        [disabled]=\"centerMapButtonDisabled || clusterMap?.config.follow\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n      title=\"{{ 'Fit to assets bounds' | translate }}\"\n      type=\"button\"\n      (click)=\"fitToBounds()\"\n      [disabled]=\"fitToBoundsButtonDisabled || clusterMap?.config.follow\"\n    >\n      <i c8yIcon=\"waypoint-map\"></i>\n    </button>\n      <button\n        title=\"{{ 'Unfollow' | translate }}\"\n        type=\"button\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        title=\"{{ 'Follow' | translate }}\"\n        type=\"button\"\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: "component", type: i1$1.CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: i3$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MapStatusComponent, isStandalone: true, selector: "c8y-map-status", inputs: { config: "config", assets: "assets", clusterMap: "clusterMap", buttonsConfig: "buttonsConfig" }, outputs: { configChange: "configChange", onUnfollow: "onUnfollow", fitAssetsToBounds: "fitAssetsToBounds" }, viewQueries: [{ propertyName: "countdownIntervalComp", first: true, predicate: CountdownIntervalComponent, descendants: true }], 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        class=\"c8y-realtime\"\n        title=\"{{ 'Realtime' | translate }}\"\n        type=\"button\"\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\n      <label\n        class=\"toggle-countdown vertical\"\n        [attr.aria-label]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        [tooltip]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        placement=\"left\"\n        *ngIf=\"\n          !config.widgetInstanceGlobalAutoRefreshContext &&\n          clusterMap?.config.refreshInterval &&\n          !clusterMap?.config.follow\n        \"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"1000\"\n      >\n        <input\n          type=\"checkbox\"\n          (click)=\"toggleAutoRefresh($event)\"\n        />\n        <c8y-countdown-interval\n          [hidden]=\"refreshPaused\"\n          [countdownInterval]=\"clusterMap?.config.refreshInterval\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"refreshPaused\"\n        ></i>\n      </label>\n\n      <button\n        title=\"{{ 'Cancel reload' | translate }}\"\n        type=\"button\"\n        *ngIf=\"(clusterMap?.isLoading$ | async) && !config.widgetInstanceGlobalAutoRefreshContext\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          class=\"icon-spin\"\n          c8yIcon=\"refresh\"\n        ></i>\n      </button>\n      <button\n        [title]=\"'Reload' | translate\"\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime &&\n          !clusterMap?.assets &&\n          !(clusterMap?.isLoading$ | async) &&\n          !config.widgetInstanceGlobalAutoRefreshContext\n        \"\n        (click)=\"reload()\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        title=\"{{ 'Center map' | translate }}\"\n        type=\"button\"\n        (click)=\"center()\"\n        [disabled]=\"buttonsConfig.center.disabled || clusterMap?.config.follow\"\n        *ngIf=\"buttonsConfig.center.show\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n      title=\"{{ 'Fit to assets bounds' | translate }}\"\n      type=\"button\"\n      (click)=\"fitToBounds()\"\n      [disabled]=\"buttonsConfig.fitToBounds.disabled || clusterMap?.config.follow\"\n      *ngIf=\"buttonsConfig.fitToBounds.show\"\n    >\n      <i c8yIcon=\"waypoint-map\"></i>\n    </button>\n      <button\n        title=\"{{ 'Unfollow' | translate }}\"\n        type=\"button\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        title=\"{{ 'Follow' | translate }}\"\n        type=\"button\"\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: CountdownIntervalComponent, selector: "c8y-countdown-interval", inputs: ["countdownInterval"], outputs: ["countdownEnded"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-map-status', standalone: false, template: "<div class=\"c8y-map-status\">\n  <div class=\"leaflet-touch\">\n    <div\n      class=\"leaflet-bar\"\n      role=\"group\"\n    >\n      <button\n        class=\"c8y-realtime\"\n        title=\"{{ 'Realtime' | translate }}\"\n        type=\"button\"\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\n      <label\n        class=\"toggle-countdown vertical\"\n        [attr.aria-label]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        [tooltip]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        placement=\"left\"\n        *ngIf=\"\n          !config.widgetInstanceGlobalAutoRefreshContext &&\n          clusterMap?.config.refreshInterval &&\n          !clusterMap?.config.follow\n        \"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"1000\"\n      >\n        <input\n          type=\"checkbox\"\n          (click)=\"toggleAutoRefresh($event)\"\n        />\n        <c8y-countdown-interval\n          [hidden]=\"refreshPaused\"\n          [countdownInterval]=\"clusterMap?.config.refreshInterval\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"refreshPaused\"\n        ></i>\n      </label>\n\n      <button\n        title=\"{{ 'Cancel reload' | translate }}\"\n        type=\"button\"\n        *ngIf=\"(clusterMap?.isLoading$ | async) && !config.widgetInstanceGlobalAutoRefreshContext\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          class=\"icon-spin\"\n          c8yIcon=\"refresh\"\n        ></i>\n      </button>\n      <button\n        [title]=\"'Reload' | translate\"\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime &&\n          !clusterMap?.assets &&\n          !(clusterMap?.isLoading$ | async) &&\n          !config.widgetInstanceGlobalAutoRefreshContext\n        \"\n        (click)=\"reload()\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        title=\"{{ 'Center map' | translate }}\"\n        type=\"button\"\n        (click)=\"center()\"\n        [disabled]=\"centerMapButtonDisabled || clusterMap?.config.follow\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n      title=\"{{ 'Fit to assets bounds' | translate }}\"\n      type=\"button\"\n      (click)=\"fitToBounds()\"\n      [disabled]=\"fitToBoundsButtonDisabled || clusterMap?.config.follow\"\n    >\n      <i c8yIcon=\"waypoint-map\"></i>\n    </button>\n      <button\n        title=\"{{ 'Unfollow' | translate }}\"\n        type=\"button\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        title=\"{{ 'Follow' | translate }}\"\n        type=\"button\"\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', imports: [
+                        NgIf,
+                        NgClass,
+                        TooltipDirective,
+                        CountdownIntervalComponent,
+                        IconDirective,
+                        AsyncPipe,
+                        C8yTranslatePipe
+                    ], template: "<div class=\"c8y-map-status\">\n  <div class=\"leaflet-touch\">\n    <div\n      class=\"leaflet-bar\"\n      role=\"group\"\n    >\n      <button\n        class=\"c8y-realtime\"\n        title=\"{{ 'Realtime' | translate }}\"\n        type=\"button\"\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\n      <label\n        class=\"toggle-countdown vertical\"\n        [attr.aria-label]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        [tooltip]=\"\n          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)\n        \"\n        placement=\"left\"\n        *ngIf=\"\n          !config.widgetInstanceGlobalAutoRefreshContext &&\n          clusterMap?.config.refreshInterval &&\n          !clusterMap?.config.follow\n        \"\n        [adaptivePosition]=\"false\"\n        [container]=\"'body'\"\n        [delay]=\"1000\"\n      >\n        <input\n          type=\"checkbox\"\n          (click)=\"toggleAutoRefresh($event)\"\n        />\n        <c8y-countdown-interval\n          [hidden]=\"refreshPaused\"\n          [countdownInterval]=\"clusterMap?.config.refreshInterval\"\n        ></c8y-countdown-interval>\n        <i\n          c8yIcon=\"pause\"\n          *ngIf=\"refreshPaused\"\n        ></i>\n      </label>\n\n      <button\n        title=\"{{ 'Cancel reload' | translate }}\"\n        type=\"button\"\n        *ngIf=\"(clusterMap?.isLoading$ | async) && !config.widgetInstanceGlobalAutoRefreshContext\"\n        (click)=\"cancelReload()\"\n      >\n        <i\n          class=\"icon-spin\"\n          c8yIcon=\"refresh\"\n        ></i>\n      </button>\n      <button\n        [title]=\"'Reload' | translate\"\n        type=\"button\"\n        *ngIf=\"\n          !clusterMap?.config.realtime &&\n          !clusterMap?.assets &&\n          !(clusterMap?.isLoading$ | async) &&\n          !config.widgetInstanceGlobalAutoRefreshContext\n        \"\n        (click)=\"reload()\"\n      >\n        <i c8yIcon=\"refresh\"></i>\n      </button>\n      <button\n        title=\"{{ 'Center map' | translate }}\"\n        type=\"button\"\n        (click)=\"center()\"\n        [disabled]=\"buttonsConfig.center.disabled || clusterMap?.config.follow\"\n        *ngIf=\"buttonsConfig.center.show\"\n      >\n        <i c8yIcon=\"target1\"></i>\n      </button>\n      <button\n      title=\"{{ 'Fit to assets bounds' | translate }}\"\n      type=\"button\"\n      (click)=\"fitToBounds()\"\n      [disabled]=\"buttonsConfig.fitToBounds.disabled || clusterMap?.config.follow\"\n      *ngIf=\"buttonsConfig.fitToBounds.show\"\n    >\n      <i c8yIcon=\"waypoint-map\"></i>\n    </button>\n      <button\n        title=\"{{ 'Unfollow' | translate }}\"\n        type=\"button\"\n        *ngIf=\"clusterMap?.config.follow\"\n        (click)=\"unfollow()\"\n      >\n        <i c8yIcon=\"marker-off\"></i>\n      </button>\n\n      <button\n        title=\"{{ 'Follow' | translate }}\"\n        type=\"button\"\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
             }], assets: [{
@@ -1272,13 +1496,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class MapModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: MapModule, declarations: [MapComponent, MapStatusComponent, ClusterMapComponent, MapPopupDirective], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: MapModule, imports: [CommonModule,
             FormsModule,
             CommonModule$1,
             FormsModule$1,
             RealtimeModule,
             CoreModule,
-            TooltipModule], exports: [MapComponent, MapStatusComponent, ClusterMapComponent, MapPopupDirective] }); }
+            TooltipModule,
+            MapComponent,
+            MapStatusComponent,
+            ClusterMapComponent,
+            MapPopupDirective], exports: [MapComponent, MapStatusComponent, ClusterMapComponent, MapPopupDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapModule, providers: [
             {
                 provide: MAP_TILE_LAYER,
@@ -1300,12 +1528,12 @@ class MapModule {
             FormsModule$1,
             RealtimeModule,
             CoreModule,
-            TooltipModule] }); }
+            TooltipModule,
+            MapStatusComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MapModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MapComponent, MapStatusComponent, ClusterMapComponent, MapPopupDirective],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -1313,7 +1541,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule$1,
                         RealtimeModule,
                         CoreModule,
-                        TooltipModule
+                        TooltipModule,
+                        MapComponent,
+                        MapStatusComponent,
+                        ClusterMapComponent,
+                        MapPopupDirective
                     ],
                     exports: [MapComponent, MapStatusComponent, ClusterMapComponent, MapPopupDirective],
                     providers: [