@c8y/ngx-components 1021.75.8 → 1021.77.0

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

@@ -40,7 +40,7 @@ const defaultLayer = {
     priority: 1000,
     options: {
         maxZoom: 18,
-        minZoom: 2,
+        minZoom: 0,
         attribution: '&copy;<a href="http://www.openstreetmap.org/copyright" rel="noreferrer nofollow">OpenStreetMap</a>',
         noWrap: false
     }
@@ -49,6 +49,9 @@ const defaultMapConfig = {
     center: [51.23544, 6.79599], // Düsseldorf
     zoomLevel: 2
 };
+const defaultFitBoundsOptions = {
+    padding: [50, 50]
+};
 
 class MapService {
     /**
@@ -259,6 +262,22 @@ class MapService {
         const shiftWorld = (lngRevMin?.lng ?? 0) - (lngRevMax?.lng ?? 0) > 180;
         return latLngBounds(latLng(latMin?.lat, shiftWorld ? lngRevMin?.lng : lngMin?.lng), latLng(latMax?.lat, shiftWorld ? lngRevMax?.lng + 360 : lngMax?.lng));
     }
+    async getAssetsBounds(assets) {
+        const leaflet = await this.getLeaflet();
+        const bounds = leaflet.latLngBounds([]);
+        let hasValidPositions = false;
+        assets.forEach(asset => {
+            const position = asset.c8y_Position;
+            if (position && typeof position.lat === 'number' && typeof position.lng === 'number') {
+                bounds.extend([position.lat, position.lng]);
+                hasValidPositions = true;
+            }
+        });
+        if (!hasValidPositions || !bounds.isValid()) {
+            return;
+        }
+        return bounds;
+    }
     /**
      * Returns the cluster size for clustered maps. Counting the position MOs in a bounding
      * and if it reach a threshold, returning a [[ClusterSize]].
@@ -1089,7 +1108,7 @@ class ClusterMapComponent extends MapComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ClusterMapComponent, 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: "18.2.13", ngImport: i0, type: ClusterMapComponent, decorators: [{
             type: Component,
@@ -1111,12 +1130,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], mapChange: [{
                 type: Output
+            }], mapElement: [{
+                type: ViewChild,
+                args: ['map']
             }] } });
 
 class MapStatusComponent {
     constructor() {
         this.configChange = new EventEmitter();
         this.onUnfollow = new EventEmitter();
+        this.fitAssetsToBounds = new EventEmitter();
         this.buttonsConfig = {};
         this.centerMapButtonDisabled = true;
         this.refreshPaused = false;
@@ -1139,6 +1162,10 @@ class MapStatusComponent {
     center() {
         this.clusterMap.center();
     }
+    fitToBounds() {
+        this.fitToBoundsButtonDisabled = true;
+        this.fitAssetsToBounds.emit();
+    }
     reload() {
         this.clusterMap.reload();
     }
@@ -1183,9 +1210,12 @@ class MapStatusComponent {
     }
     checkIfMapIsAlreadyCentered() {
         this.clusterMap.mapChange.pipe(takeUntil(this.destroy$)).subscribe((event) => {
-            if (this.config?.center && event.sourceTarget?.getBounds) {
+            if (event.sourceTarget?.getBounds) {
                 const bounds = event.sourceTarget.getBounds();
-                this.centerMapButtonDisabled = this.shouldDisableCenterButton(bounds);
+                this.fitToBoundsButtonDisabled = this.shouldDisableFitToBoundsButton(bounds);
+                if (this.config?.center) {
+                    this.centerMapButtonDisabled = this.shouldDisableCenterButton(bounds);
+                }
             }
         });
     }
@@ -1203,23 +1233,33 @@ class MapStatusComponent {
         const shrunkBounds = bounds.pad(-0.25);
         return shrunkBounds.contains(this.config.center);
     }
+    shouldDisableFitToBoundsButton(bounds) {
+        if (!this.assets) {
+            return true;
+        }
+        return this.assets.every(({ c8y_Position }) => bounds.contains([c8y_Position.lat, c8y_Position.lng]));
+    }
     defaultButtonsConfig() {
         return {
             realtime: { show: this.config.realtime || this.clusterMap.config.follow, disabled: false }
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapStatusComponent, selector: "c8y-map-status", inputs: { config: "config", clusterMap: "clusterMap", buttonsConfig: "buttonsConfig" }, outputs: { configChange: "configChange", onUnfollow: "onUnfollow" }, 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=\"{{ '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: "18.2.13", type: MapStatusComponent, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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        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=\"{{ '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', 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" }]
         }], propDecorators: { config: [{
                 type: Input
+            }], assets: [{
+                type: Input
             }], configChange: [{
                 type: Output
             }], onUnfollow: [{
                 type: Output
+            }], fitAssetsToBounds: [{
+                type: Output
             }], clusterMap: [{
                 type: Input
             }], buttonsConfig: [{
@@ -1298,5 +1338,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * 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 };
+export { ClusterMap, ClusterMapComponent, ClusterSize, MAP_DEFAULT_CONFIG, MAP_TILE_LAYER, MapComponent, MapModule, MapPopupDirective, MapService, MapStatusComponent, MapTenantOptionKeys, defaultFitBoundsOptions, defaultLayer, defaultMapConfig, getC8yMarker };
 //# sourceMappingURL=c8y-ngx-components-map.mjs.map