@dereekb/dbx-web 10.2.0 → 11.0.0

package/fesm2022/dereekb-dbx-web-mapbox.mjs

@@ -1,39 +1,41 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Inject, Component, ChangeDetectionStrategy, SkipSelf, Directive, Injector, Host, EventEmitter, ElementRef, Output, ViewChild, Input, NgModule } from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Directive, Injector, Optional, SkipSelf, EventEmitter, ElementRef, Output, ViewChild, Input, NgZone, ChangeDetectorRef, NgModule } from '@angular/core';
 import { asObservable, cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, distinctUntilMapHasDifferentKeys } from '@dereekb/rxjs';
-import { distinctUntilChanged, switchMap, map, combineLatestWith, shareReplay, NEVER, defaultIfEmpty, tap, EMPTY, of, combineLatest, filter, first, startWith, throttleTime, interval, Subject, merge, BehaviorSubject } from 'rxjs';
-import { LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, isSameLatLngPoint, isSameVector, isSameLatLngBound, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, latLngBoundCenterPoint, addLatLngPoints, vectorMinimumSizeResizeFunction, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
+import { distinctUntilChanged, switchMap, map, combineLatestWith, shareReplay, NEVER, defaultIfEmpty, tap, EMPTY, interval, of, first, combineLatest, filter, startWith, throttleTime, Subject, merge, BehaviorSubject } from 'rxjs';
+import { LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, diffLatLngBoundPoints, latLngBoundCenterPoint, addLatLngPoints, isSameLatLngPoint, isSameVector, vectorMinimumSizeResizeFunction, isSameLatLngBound, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import * as MapboxGl from 'mapbox-gl';
 import { bounds } from '@placemarkio/geo-viewport';
-import * as i2 from '@dereekb/dbx-core';
+import * as i1 from '@dereekb/dbx-core';
 import { AbstractSubscriptionDirective, safeMarkForCheck, DbxInjectionComponentModule } from '@dereekb/dbx-core';
-import * as i2$1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from 'ngx-mapbox-gl';
-import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
-import * as i3 from '@angular/material/sidenav';
+import * as i4$1 from 'ngx-mapbox-gl';
+import { MapService, MapComponent, NgxMapboxGLModule } from 'ngx-mapbox-gl';
+import * as i2 from '@angular/material/sidenav';
 import { MatDrawerContainer, MatSidenavModule } from '@angular/material/sidenav';
-import * as i4 from '@dereekb/dbx-web';
+import * as i3 from '@dereekb/dbx-web';
 import { disableRightClickInCdkBackdrop, DbxStyleLayoutModule, DbxRouterAnchorModule } from '@dereekb/dbx-web';
-import * as i5 from '@angular/material/button';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i6 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7 from 'angular-resize-event';
+import * as i6 from 'angular-resize-event';
 import { AngularResizeEventModule } from 'angular-resize-event';
-import * as i2$2 from '@angular/material/menu';
+import { MatMenuTrigger } from '@angular/material/menu';
 
 class DbxMapboxConfig {
+    defaultStyle;
+    defaultZoom;
+    defaultCenter;
+    defaultStoreRefreshPeriod;
 }
 const DEFAULT_MAPBOX_STYLE = 'mapbox://styles/mapbox/streets-v12';
 const DEFAULT_MAPBOX_CENTER = [30.2690138665, -97.7408297965];
 const DEFAULT_MAPBOX_ZOOM = 8;
 const DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD = 200;
 class DbxMapboxService {
-    constructor(config) {
-        this._config = config ?? {};
-    }
+    _config = inject(DbxMapboxConfig, { optional: true }) ?? {};
     get defaultStyle() {
         return this._config.defaultStyle ?? DEFAULT_MAPBOX_STYLE;
     }
@@ -46,17 +48,15 @@ class DbxMapboxService {
     get mapboxMapStoreTimerRefreshPeriod() {
         return this._config.defaultStoreRefreshPeriod ?? DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxService, deps: [{ token: DbxMapboxConfig, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxConfig, decorators: [{
-                    type: Optional
-                }] }]; } });
+        }] });
 
 function mapboxViewportBoundFunction(config) {
     const { mapCanvasSize, tileSize = 512 } = config;
@@ -126,7 +126,11 @@ function filterByMapboxViewportBound(config) {
  * Store used for retrieving information.
  */
 class DbxMapboxMapStore extends ComponentStore {
-    constructor(dbxMapboxService) {
+    dbxMapboxService = inject(DbxMapboxService);
+    safeLatLngPoint = latLngPointFunction({ wrap: true });
+    latLngPoint = latLngPointFunction({ wrap: false, validate: false });
+    latLngBound = latLngBoundFunction({ pointFunction: this.latLngPoint });
+    constructor() {
         super({
             lifecycleState: 'init',
             moveState: 'init',
@@ -139,419 +143,243 @@ class DbxMapboxMapStore extends ComponentStore {
                 refreshType: 'always'
             }
         });
-        this.dbxMapboxService = dbxMapboxService;
-        this.safeLatLngPoint = latLngPointFunction({ wrap: true });
-        this.latLngPoint = latLngPointFunction({ wrap: false, validate: false });
-        this.latLngBound = latLngBoundFunction({ pointFunction: this.latLngPoint });
-        // MARK: Effects
-        this.setMapService = this.effect((input) => {
-            return input.pipe(switchMap((service) => {
-                this._setMapService(service);
-                if (!service) {
-                    return NEVER;
+    }
+    // MARK: Effects
+    setMapService = this.effect((input) => {
+        return input.pipe(switchMap((service) => {
+            this._setMapService(service);
+            if (!service) {
+                return NEVER;
+            }
+            else {
+                return service.mapLoaded$.pipe(defaultIfEmpty(undefined), map(() => {
+                    this._setLifecycleState('idle');
+                    this._setMoveState('idle');
+                    this._setZoomState('idle');
+                    this._setRotateState('idle');
+                    const map = service.mapInstance;
+                    const listenerPairs = [];
+                    function addListener(type, listener) {
+                        map.on(type, listener);
+                        listenerPairs.push({ type, listener });
+                    }
+                    addListener('idle', () => this._setLifecycleState('idle'));
+                    addListener('render', () => this._setLifecycleState('render'));
+                    addListener('error', (x) => {
+                        this._setError(x.error);
+                    });
+                    addListener('movestart', () => this._setMoveState('moving'));
+                    addListener('moveend', () => this._setMoveState('idle'));
+                    addListener('zoomstart', () => this._setZoomState('zooming'));
+                    addListener('zoomend', () => this._setZoomState('idle'));
+                    addListener('rotatestart', () => this._setRotateState('rotating'));
+                    addListener('rotateend', () => this._setRotateState('idle'));
+                    addListener('click', (x) => this._setClickEvent(x));
+                    addListener('dblclick', (x) => this._setDoubleClickEvent(x));
+                    addListener('contextmenu', (x) => this._setRightClickEvent(x));
+                    const refreshForResize = () => {
+                        const { clientWidth: x, clientHeight: y } = map.getCanvas();
+                        this._setMapCanvasSize({ x, y });
+                    };
+                    addListener('resize', refreshForResize);
+                    refreshForResize();
+                    const subs = [];
+                    return {
+                        service,
+                        listenerPairs,
+                        subs
+                    };
+                }));
+            }
+        }), cleanup(({ service, listenerPairs, subs }) => {
+            const map = service.mapInstance;
+            if (map) {
+                listenerPairs.forEach((x) => {
+                    map.off(x.type, x.listener);
+                });
+            }
+            subs.forEach((sub) => sub.unsubscribe());
+        }));
+    });
+    setStyle = this.effect((input) => {
+        return input.pipe(switchMap((style) => {
+            return this.mapInstance$.pipe(tap((map) => {
+                if (typeof style === 'string') {
+                    map.setStyle(style);
                 }
                 else {
-                    return service.mapLoaded$.pipe(defaultIfEmpty(undefined), map(() => {
-                        this._setLifecycleState('idle');
-                        this._setMoveState('idle');
-                        this._setZoomState('idle');
-                        this._setRotateState('idle');
-                        const map = service.mapInstance;
-                        const listenerPairs = [];
-                        function addListener(type, listener) {
-                            map.on(type, listener);
-                            listenerPairs.push({ type, listener });
-                        }
-                        addListener('idle', () => this._setLifecycleState('idle'));
-                        addListener('render', () => this._setLifecycleState('render'));
-                        addListener('error', (x) => {
-                            this._setError(x.error);
-                        });
-                        addListener('movestart', () => this._setMoveState('moving'));
-                        addListener('moveend', () => this._setMoveState('idle'));
-                        addListener('zoomstart', () => this._setZoomState('zooming'));
-                        addListener('zoomend', () => this._setZoomState('idle'));
-                        addListener('rotatestart', () => this._setRotateState('rotating'));
-                        addListener('rotateend', () => this._setRotateState('idle'));
-                        addListener('click', (x) => this._setClickEvent(x));
-                        addListener('dblclick', (x) => this._setDoubleClickEvent(x));
-                        addListener('contextmenu', (x) => this._setRightClickEvent(x));
-                        const refreshForResize = () => {
-                            const { clientWidth: x, clientHeight: y } = map.getCanvas();
-                            this._setMapCanvasSize({ x, y });
-                        };
-                        addListener('resize', refreshForResize);
-                        refreshForResize();
-                        const subs = [];
-                        return {
-                            service,
-                            listenerPairs,
-                            subs
-                        };
-                    }));
+                    map.setStyle(style.style, style.options);
                 }
-            }), cleanup(({ service, listenerPairs, subs }) => {
-                const map = service.mapInstance;
-                if (map) {
-                    listenerPairs.forEach((x) => {
-                        map.off(x.type, x.listener);
-                    });
-                }
-                subs.forEach((sub) => sub.unsubscribe());
-            }));
-        });
-        this.setStyle = this.effect((input) => {
-            return input.pipe(switchMap((style) => {
-                return this.mapInstance$.pipe(tap((map) => {
-                    if (typeof style === 'string') {
-                        map.setStyle(style);
-                    }
-                    else {
-                        map.setStyle(style.style, style.options);
-                    }
-                }));
-            }));
-        });
-        this.setCenter = this.effect((input) => {
-            return input.pipe(switchMap((center) => {
-                const centerPoint = this.safeLatLngPoint(center);
-                return this.mapInstance$.pipe(tap((map) => map.setCenter(centerPoint)));
-            }));
-        });
-        this.setZoom = this.effect((input) => {
-            return input.pipe(switchMap((zoom) => {
-                return this.mapInstance$.pipe(tap((map) => map.setZoom(zoom)));
-            }));
-        });
-        this.setZoomRange = this.effect((input) => {
-            return input.pipe(switchMap((zoomRange) => {
-                return this.mapInstance$.pipe(tap((map) => {
-                    map.setMinZoom(zoomRange.min || null);
-                    map.setMaxZoom(zoomRange.max || null);
-                }));
-            }));
-        });
-        this.setMinZoom = this.effect((input) => {
-            return input.pipe(switchMap((zoom) => {
-                return this.mapInstance$.pipe(tap((map) => map.setMinZoom(zoom)));
-            }));
-        });
-        this.setMaxZoom = this.effect((input) => {
-            return input.pipe(switchMap((zoom) => {
-                return this.mapInstance$.pipe(tap((map) => map.setMaxZoom(zoom)));
-            }));
-        });
-        this.setKeyboardDisabled = this.effect((input) => {
-            return input.pipe(switchMap((disabled) => {
-                return this.mapInstance$.pipe(tap((map) => {
-                    if (disabled === false) {
-                        map.keyboard.enable();
-                    }
-                    else {
-                        map.keyboard.disable();
-                    }
-                }));
-            }));
-        });
-        this.setDragRotateDisabled = this.effect((input) => {
-            return input.pipe(switchMap((disabled) => {
-                return this.mapInstance$.pipe(tap((map) => {
-                    if (disabled === false) {
-                        map.dragRotate.enable();
-                    }
-                    else {
-                        map.dragRotate.disable();
-                    }
-                }));
-            }));
-        });
-        this.setDragPanDisabled = this.effect((input) => {
-            return input.pipe(switchMap((disabled) => {
-                return this.mapInstance$.pipe(tap((map) => {
-                    if (disabled === false) {
-                        map.dragPan.enable();
-                    }
-                    else {
-                        map.dragPan.disable();
-                    }
-                }));
-            }));
-        });
-        this.setZoomDisabled = this.effect((input) => {
-            return input.pipe(switchMap((disabled) => {
-                return this.mapInstance$.pipe(tap((map) => {
-                    if (disabled === false) {
-                        map.scrollZoom.enable();
-                        map.doubleClickZoom.enable();
-                    }
-                    else {
-                        map.scrollZoom.disable();
-                        map.doubleClickZoom.disable();
-                    }
-                }));
-            }));
-        });
-        this.setPitch = this.effect((input) => {
-            return input.pipe(switchMap((pitch) => {
-                return this.mapInstance$.pipe(tap((map) => map.setPitch(pitch)));
-            }));
-        });
-        this.setMinPitch = this.effect((input) => {
-            return input.pipe(switchMap((pitch) => {
-                return this.mapInstance$.pipe(tap((map) => map.setMinPitch(pitch)));
-            }));
-        });
-        this.setMaxPitch = this.effect((input) => {
-            return input.pipe(switchMap((pitch) => {
-                return this.mapInstance$.pipe(tap((map) => map.setMaxPitch(pitch)));
-            }));
-        });
-        this.setBearing = this.effect((input) => {
-            return input.pipe(switchMap((bearing) => {
-                return this.mapInstance$.pipe(tap((map) => map.setBearing(bearing)));
-            }));
-        });
-        this.rotateTo = this.effect((input) => {
-            return input.pipe(switchMap((rotateInput) => {
-                const rotate = typeof rotateInput === 'number' ? { bearing: rotateInput } : rotateInput;
-                return this.mapInstance$.pipe(tap((map) => map.rotateTo(rotate.bearing, rotate.options, rotate?.eventData)));
             }));
-        });
-        this.resetNorth = this.effect((input) => {
-            return input.pipe(switchMap((reset) => {
-                return this.mapInstance$.pipe(tap((map) => map.resetNorth(reset?.options, reset?.eventData)));
-            }));
-        });
-        this.resetNorthPitch = this.effect((input) => {
-            return input.pipe(switchMap((reset) => {
-                return this.mapInstance$.pipe(tap((map) => map.resetNorthPitch(reset?.options, reset?.eventData)));
-            }));
-        });
-        this.snapToNorth = this.effect((input) => {
-            return input.pipe(switchMap((snap) => {
-                return this.mapInstance$.pipe(tap((map) => map.snapToNorth(snap?.options, snap?.eventData)));
+        }));
+    });
+    setCenter = this.effect((input) => {
+        return input.pipe(switchMap((center) => {
+            const centerPoint = this.safeLatLngPoint(center);
+            return this.mapInstance$.pipe(tap((map) => map.setCenter(centerPoint)));
+        }));
+    });
+    setZoom = this.effect((input) => {
+        return input.pipe(switchMap((zoom) => {
+            return this.mapInstance$.pipe(tap((map) => map.setZoom(zoom)));
+        }));
+    });
+    setZoomRange = this.effect((input) => {
+        return input.pipe(switchMap((zoomRange) => {
+            return this.mapInstance$.pipe(tap((map) => {
+                map.setMinZoom(zoomRange.min || null);
+                map.setMaxZoom(zoomRange.max || null);
             }));
-        });
-        this.fitPositions = this.effect((input) => {
-            return input.pipe(switchMap((x) => {
-                const boundFromInput = latLngBoundFromInput(x.positions);
-                if (boundFromInput) {
-                    const bound = this.latLngBound(boundFromInput);
-                    return this.mapInstance$.pipe(tap((map) => map.fitBounds(new MapboxGl.LngLatBounds(bound.sw, bound.ne), x.options, x.eventData)));
+        }));
+    });
+    setMinZoom = this.effect((input) => {
+        return input.pipe(switchMap((zoom) => {
+            return this.mapInstance$.pipe(tap((map) => map.setMinZoom(zoom)));
+        }));
+    });
+    setMaxZoom = this.effect((input) => {
+        return input.pipe(switchMap((zoom) => {
+            return this.mapInstance$.pipe(tap((map) => map.setMaxZoom(zoom)));
+        }));
+    });
+    setKeyboardDisabled = this.effect((input) => {
+        return input.pipe(switchMap((disabled) => {
+            return this.mapInstance$.pipe(tap((map) => {
+                if (disabled === false) {
+                    map.keyboard.enable();
                 }
                 else {
-                    return EMPTY;
+                    map.keyboard.disable();
                 }
             }));
-        });
-        this.fitBounds = this.effect((input) => {
-            return input.pipe(switchMap((x) => {
-                const bound = this.latLngBound(x.bounds);
-                return this.mapInstance$.pipe(tap((map) => map.fitBounds(new MapboxGl.LngLatBounds(bound.sw, bound.ne), x.options, x.eventData)));
-            }));
-        });
-        this.jumpTo = this.effect((input) => {
-            return input.pipe(switchMap((x) => {
-                const inputCenter = x.center ?? x.to?.center;
-                const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
-                return this.mapInstance$.pipe(tap((map) => map.jumpTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
-            }));
-        });
-        this.easeTo = this.effect((input) => {
-            return input.pipe(switchMap((x) => {
-                const inputCenter = x.center ?? x.to?.center;
-                const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
-                return this.mapInstance$.pipe(tap((map) => map.easeTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
-            }));
-        });
-        this.flyTo = this.effect((input) => {
-            return input.pipe(switchMap((x) => {
-                const inputCenter = x.center ?? x.to?.center;
-                const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
-                return this.mapInstance$.pipe(tap((map) => map.flyTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
-            }));
-        });
-        this.resetPitchAndBearing = this.effect((input) => {
-            return input.pipe(switchMap(() => {
-                return this.mapInstance$.pipe(tap((map) => {
-                    map.setPitch(0);
-                    map.setBearing(0);
-                }));
-            }));
-        });
-        this.currentMapService$ = this.state$.pipe(map((x) => x.mapService), distinctUntilChanged(), shareReplay(1));
-        this.mapService$ = this.currentMapService$.pipe(filterMaybe());
-        this.currentMapInstance$ = this.currentMapService$.pipe(switchMap((currentMapService) => {
-            if (currentMapService) {
-                return currentMapService.mapLoaded$.pipe(defaultIfEmpty(undefined), map(() => currentMapService.mapInstance));
-            }
-            else {
-                return of(undefined);
-            }
-        }), distinctUntilChanged(), shareReplay(1));
-        this.mapInstance$ = this.currentMapInstance$.pipe(filterMaybe());
-        this.boundRefreshSettings$ = this.state$.pipe(map((x) => x.boundRefreshSettings), shareReplay(1));
-        this.moveState$ = this.state$.pipe(map((x) => x.moveState), distinctUntilChanged(), shareReplay(1));
-        this.lifecycleState$ = this.state$.pipe(map((x) => x.lifecycleState), distinctUntilChanged(), shareReplay(1));
-        this.zoomState$ = this.state$.pipe(map((x) => x.zoomState), distinctUntilChanged(), shareReplay(1));
-        this.rotateState$ = this.state$.pipe(map((x) => x.rotateState), distinctUntilChanged(), shareReplay(1));
-        this.isInitialized$ = this.currentMapInstance$.pipe(switchMap((x) => {
-            if (!x) {
-                return of(false);
-            }
-            else {
-                return combineLatest([this.moveState$.pipe(map((x) => x === 'idle')), this.lifecycleState$.pipe(map((x) => x === 'idle'))]).pipe(filter(([m, l]) => m && l), first(), map(() => true));
-            }
-        }), shareReplay(1));
-        this.whenInitialized$ = this.isInitialized$.pipe(filter((x) => true), shareReplay(1));
-        this.isRendering$ = this.whenInitialized$.pipe(switchMap(() => this.lifecycleState$.pipe(map((x) => x === 'render'), distinctUntilChanged(), shareReplay(1))));
-        this.isMoving$ = this.whenInitialized$.pipe(switchMap(() => this.moveState$.pipe(map((x) => x === 'moving'), distinctUntilChanged(), shareReplay(1))));
-        this.isZooming$ = this.whenInitialized$.pipe(switchMap(() => this.zoomState$.pipe(map((x) => x === 'zooming'), distinctUntilChanged(), shareReplay(1))));
-        this.isRotating$ = this.whenInitialized$.pipe(switchMap(() => this.rotateState$.pipe(map((x) => x === 'rotating'), distinctUntilChanged(), shareReplay(1))));
-        this._movingTimer = this.movingTimer();
-        this._renderingTimer = this.lifecycleRenderTimer();
-        this.centerNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => this.latLngPoint(x.getCenter())))), shareReplay(1))), shareReplay(1));
-        this.center$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isMoving$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.centerNow$.pipe(first())), distinctUntilChanged(isSameLatLngPoint), shareReplay(1));
-        }), shareReplay(1));
-        this.minimumVirtualViewportSize$ = this.state$.pipe(map((x) => x.minimumVirtualViewportSize), distinctUntilChanged(isSameVector), shareReplay(1));
-        this.currentMapCanvasSize$ = this.state$.pipe(map((x) => x.mapCanvasSize), distinctUntilChanged(isSameVector), shareReplay(1));
-        /**
-         * The map canvas size with consideration to the virtual viewport size.
-         */
-        this.mapCanvasSize$ = this.currentMapCanvasSize$.pipe(filterMaybe());
-        /**
-         * The map canvas size with consideration to the virtual viewport size.
-         */
-        this.virtualMapCanvasSize$ = this.minimumVirtualViewportSize$.pipe(switchMap((minimumVirtualViewportSize) => {
-            if (minimumVirtualViewportSize) {
-                return this.minimumMapCanvasSize(minimumVirtualViewportSize);
-            }
-            else {
-                return this.mapCanvasSize$;
-            }
-        }), distinctUntilChanged(isSameVector), shareReplay(1));
-        this.rawViewportBoundFunction$ = this.mapCanvasSize$.pipe(map((mapCanvasSize) => mapboxViewportBoundFunction({ mapCanvasSize })), shareReplay(1));
-        this.viewportBoundFunction$ = this.minimumVirtualViewportSize$.pipe(switchMap((minimumVirtualViewportSize) => {
-            if (minimumVirtualViewportSize) {
-                return this.viewportBoundFunctionWithMinimumSize(minimumVirtualViewportSize);
-            }
-            else {
-                return this.rawViewportBoundFunction$;
-            }
-        }), shareReplay(1));
-        this.virtualBound$ = this.viewportBoundFunction$.pipe(switchMap((fn) => {
-            return this.boundRefreshSettings$.pipe(switchMap((settings) => {
-                const { throttle: throttleMs, refreshType } = settings;
-                let obs;
-                switch (refreshType) {
-                    case 'always':
-                        obs = combineLatest([this.centerNow$, this.zoomNow$]);
-                        break;
-                    case 'when_not_rendering':
-                    case 'only_after_render_finishes':
-                        obs = this.bound$.pipe(switchMap(() => combineLatest([this.centerNow$, this.zoomNow$]))); // refresh whenever the bound refreshes
-                        break;
+        }));
+    });
+    setDragRotateDisabled = this.effect((input) => {
+        return input.pipe(switchMap((disabled) => {
+            return this.mapInstance$.pipe(tap((map) => {
+                if (disabled === false) {
+                    map.dragRotate.enable();
+                }
+                else {
+                    map.dragRotate.disable();
                 }
-                return obs.pipe(throttleTime(throttleMs, undefined, { leading: true, trailing: true }), map(([center, zoom]) => fn({
-                    center,
-                    zoom
-                })));
             }));
-        }), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
-        this.margin$ = this.state$.pipe(map((x) => x.margin), distinctUntilChanged((a, b) => a != null && b != null && a.fullWidth === b.fullWidth && a.leftMargin === b.leftMargin && a.rightMargin === b.rightMargin), shareReplay(1));
-        this.reverseMargin$ = this.margin$.pipe(map((x) => {
-            if (x) {
-                return { leftMargin: -x.leftMargin, rightMargin: -x.rightMargin, fullWidth: x.fullWidth };
-            }
-            else {
-                return x;
-            }
         }));
-        this.centerGivenMargin$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.reverseMargin$.pipe(switchMap((x) => {
-                if (x) {
-                    return this.center$.pipe(switchMap((_) => this.calculateNextCenterOffsetWithScreenMarginChange(x)));
+    });
+    setDragPanDisabled = this.effect((input) => {
+        return input.pipe(switchMap((disabled) => {
+            return this.mapInstance$.pipe(tap((map) => {
+                if (disabled === false) {
+                    map.dragPan.enable();
                 }
                 else {
-                    return this.isMoving$.pipe(filter((x) => !x), switchMap(() => this.center$));
+                    map.dragPan.disable();
                 }
             }));
-        }), shareReplay(1));
-        this.rawBoundNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => {
-            const bound = x.getBounds();
-            const boundSw = bound.getSouthWest();
-            const boundNe = bound.getNorthEast();
-            const sw = isDefaultLatLngPoint(boundSw) ? swMostLatLngPoint() : { lat: boundSw.lat, lng: boundSw.lng };
-            const ne = isDefaultLatLngPoint(boundNe) ? neMostLatLngPoint() : { lat: boundNe.lat, lng: boundNe.lng };
-            return this.latLngBound(sw, ne);
-        }))))), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
-        this.rawBound$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.boundRefreshSettings$.pipe(switchMap((settings) => {
-                const { throttle: throttleMs, refreshType } = settings;
-                let obs;
-                switch (refreshType) {
-                    case 'always':
-                        obs = this.rawBoundNow$;
-                        break;
-                    case 'when_not_rendering':
-                        obs = this.isRendering$.pipe(switchMap((x) => (x ? EMPTY : this.rawBoundNow$)));
-                        break;
-                    case 'only_after_render_finishes':
-                        obs = this.isRendering$.pipe(onTrueToFalse(), switchMap((x) => this.rawBoundNow$.pipe(first())));
-                        break;
+        }));
+    });
+    setZoomDisabled = this.effect((input) => {
+        return input.pipe(switchMap((disabled) => {
+            return this.mapInstance$.pipe(tap((map) => {
+                if (disabled === false) {
+                    map.scrollZoom.enable();
+                    map.doubleClickZoom.enable();
+                }
+                else {
+                    map.scrollZoom.disable();
+                    map.doubleClickZoom.disable();
                 }
-                return obs.pipe(throttleTime(throttleMs, undefined, { leading: true, trailing: true }));
             }));
-        }), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
-        this.useVirtualBound$ = this.state$.pipe(map((x) => x.useVirtualBound), distinctUntilChanged(), shareReplay(1));
-        this.bound$ = this.useVirtualBound$.pipe(switchMap((useVirtualBound) => {
-            if (useVirtualBound) {
-                return this.virtualBound$;
+        }));
+    });
+    setPitch = this.effect((input) => {
+        return input.pipe(switchMap((pitch) => {
+            return this.mapInstance$.pipe(tap((map) => map.setPitch(pitch)));
+        }));
+    });
+    setMinPitch = this.effect((input) => {
+        return input.pipe(switchMap((pitch) => {
+            return this.mapInstance$.pipe(tap((map) => map.setMinPitch(pitch)));
+        }));
+    });
+    setMaxPitch = this.effect((input) => {
+        return input.pipe(switchMap((pitch) => {
+            return this.mapInstance$.pipe(tap((map) => map.setMaxPitch(pitch)));
+        }));
+    });
+    setBearing = this.effect((input) => {
+        return input.pipe(switchMap((bearing) => {
+            return this.mapInstance$.pipe(tap((map) => map.setBearing(bearing)));
+        }));
+    });
+    rotateTo = this.effect((input) => {
+        return input.pipe(switchMap((rotateInput) => {
+            const rotate = typeof rotateInput === 'number' ? { bearing: rotateInput } : rotateInput;
+            return this.mapInstance$.pipe(tap((map) => map.rotateTo(rotate.bearing, rotate.options, rotate?.eventData)));
+        }));
+    });
+    resetNorth = this.effect((input) => {
+        return input.pipe(switchMap((reset) => {
+            return this.mapInstance$.pipe(tap((map) => map.resetNorth(reset?.options, reset?.eventData)));
+        }));
+    });
+    resetNorthPitch = this.effect((input) => {
+        return input.pipe(switchMap((reset) => {
+            return this.mapInstance$.pipe(tap((map) => map.resetNorthPitch(reset?.options, reset?.eventData)));
+        }));
+    });
+    snapToNorth = this.effect((input) => {
+        return input.pipe(switchMap((snap) => {
+            return this.mapInstance$.pipe(tap((map) => map.snapToNorth(snap?.options, snap?.eventData)));
+        }));
+    });
+    fitPositions = this.effect((input) => {
+        return input.pipe(switchMap((x) => {
+            const boundFromInput = latLngBoundFromInput(x.positions);
+            if (boundFromInput) {
+                const bound = this.latLngBound(boundFromInput);
+                return this.mapInstance$.pipe(tap((map) => map.fitBounds(new MapboxGl.LngLatBounds(bound.sw, bound.ne), x.options, x.eventData)));
             }
             else {
-                return this.rawBound$;
+                return EMPTY;
             }
-        }), shareReplay(1));
-        this.boundSizing$ = this.bound$.pipe(map((x) => diffLatLngBoundPoints(x)), shareReplay(1));
-        this.boundWrapsAroundWorld$ = this.bound$.pipe(map((x) => latLngBoundWrapsMap(x)), distinctUntilChanged(), shareReplay(1));
-        this.isWithinBoundFunction$ = this.bound$.pipe(map((x) => isWithinLatLngBoundFunction(x)), shareReplay(1));
-        this.overlapsBoundFunction$ = this.virtualBound$.pipe(map((x) => overlapsLatLngBoundFunction(x)), shareReplay(1));
-        this.zoomNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => x.getZoom()))), shareReplay(1))));
-        this.zoom$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isZooming$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.zoomNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
         }));
-        this.pitchNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => x.getPitch()))), shareReplay(1))));
-        this.pitch$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.pitchNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+    });
+    fitBounds = this.effect((input) => {
+        return input.pipe(switchMap((x) => {
+            const bound = this.latLngBound(x.bounds);
+            return this.mapInstance$.pipe(tap((map) => map.fitBounds(new MapboxGl.LngLatBounds(bound.sw, bound.ne), x.options, x.eventData)));
         }));
-        this.bearingNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => x.getBearing()))), shareReplay(1))));
-        this.bearing$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.bearingNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+    });
+    jumpTo = this.effect((input) => {
+        return input.pipe(switchMap((x) => {
+            const inputCenter = x.center ?? x.to?.center;
+            const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
+            return this.mapInstance$.pipe(tap((map) => map.jumpTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
         }));
-        this.content$ = this.state$.pipe(map((x) => x.content), distinctUntilChanged(), shareReplay(1));
-        this.hasContent$ = this.content$.pipe(map(Boolean));
-        this.clickEvent$ = this.state$.pipe(map((x) => x.clickEvent), distinctUntilChanged(), shareReplay(1));
-        this.doubleClickEvent$ = this.state$.pipe(map((x) => x.doubleClickEvent), distinctUntilChanged(), shareReplay(1));
-        this.rightClickEvent$ = this.state$.pipe(map((x) => x.rightClickEvent), distinctUntilChanged(), shareReplay(1));
-        // MARK: State Changes
-        this.setMargin = this.updater((state, margin) => ({ ...state, margin: margin && (margin.rightMargin !== 0 || margin.leftMargin !== 0) ? margin : undefined }));
-        this.setMinimumVirtualViewportSize = this.updater((state, minimumVirtualViewportSize) => ({ ...state, minimumVirtualViewportSize }));
-        this.setUseVirtualBound = this.updater((state, useVirtualBound) => ({ ...state, useVirtualBound }));
-        this.setBoundRefreshSettings = this.updater((state, boundRefreshSettings) => ({ ...state, boundRefreshSettings: { ...state.boundRefreshSettings, ...boundRefreshSettings } }));
-        this._setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init', retainContent: state.retainContent, content: state.retainContent ? state.content : undefined, useVirtualBound: state.useVirtualBound, boundRefreshSettings: state.boundRefreshSettings }));
-        this._setLifecycleState = this.updater((state, lifecycleState) => ({ ...state, lifecycleState }));
-        this._setMoveState = this.updater((state, moveState) => ({ ...state, moveState }));
-        this._setZoomState = this.updater((state, zoomState) => ({ ...state, zoomState }));
-        this._setRotateState = this.updater((state, rotateState) => ({ ...state, rotateState }));
-        this._setMapCanvasSize = this.updater((state, mapCanvasSize) => ({ ...state, mapCanvasSize }));
-        this._setClickEvent = this.updater((state, clickEvent) => ({ ...state, clickEvent }));
-        this._setDoubleClickEvent = this.updater((state, doubleClickEvent) => ({ ...state, doubleClickEvent }));
-        this._setRightClickEvent = this.updater((state, rightClickEvent) => ({ ...state, rightClickEvent }));
-        this._setError = this.updater((state, error) => ({ ...state, error }));
-        this.clearContent = this.updater((state) => ({ ...state, content: undefined }));
-        this.setContent = this.updater((state, content) => ({ ...state, content }));
-    }
+    });
+    easeTo = this.effect((input) => {
+        return input.pipe(switchMap((x) => {
+            const inputCenter = x.center ?? x.to?.center;
+            const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
+            return this.mapInstance$.pipe(tap((map) => map.easeTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
+        }));
+    });
+    flyTo = this.effect((input) => {
+        return input.pipe(switchMap((x) => {
+            const inputCenter = x.center ?? x.to?.center;
+            const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
+            return this.mapInstance$.pipe(tap((map) => map.flyTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
+        }));
+    });
+    resetPitchAndBearing = this.effect((input) => {
+        return input.pipe(switchMap(() => {
+            return this.mapInstance$.pipe(tap((map) => {
+                map.setPitch(0);
+                map.setBearing(0);
+            }));
+        }));
+    });
     // MARK: Accessors
     get timerRefreshPeriod() {
         return this.dbxMapboxService.mapboxMapStoreTimerRefreshPeriod;
@@ -616,10 +444,63 @@ class DbxMapboxMapStore extends ComponentStore {
             boundDecisionObs: this.overlapsBoundFunction$
         });
     }
+    currentMapService$ = this.state$.pipe(map((x) => x.mapService), distinctUntilChanged(), shareReplay(1));
+    mapService$ = this.currentMapService$.pipe(filterMaybe());
+    currentMapInstance$ = this.currentMapService$.pipe(switchMap((currentMapService) => {
+        if (currentMapService) {
+            return currentMapService.mapLoaded$.pipe(defaultIfEmpty(undefined), map(() => currentMapService.mapInstance));
+        }
+        else {
+            return of(undefined);
+        }
+    }), distinctUntilChanged(), shareReplay(1));
+    mapInstance$ = this.currentMapInstance$.pipe(filterMaybe());
+    boundRefreshSettings$ = this.state$.pipe(map((x) => x.boundRefreshSettings), shareReplay(1));
+    moveState$ = this.state$.pipe(map((x) => x.moveState), distinctUntilChanged(), shareReplay(1));
+    lifecycleState$ = this.state$.pipe(map((x) => x.lifecycleState), distinctUntilChanged(), shareReplay(1));
+    zoomState$ = this.state$.pipe(map((x) => x.zoomState), distinctUntilChanged(), shareReplay(1));
+    rotateState$ = this.state$.pipe(map((x) => x.rotateState), distinctUntilChanged(), shareReplay(1));
+    isInitialized$ = this.currentMapInstance$.pipe(switchMap((x) => {
+        if (!x) {
+            return of(false);
+        }
+        else {
+            return combineLatest([this.moveState$.pipe(map((x) => x === 'idle')), this.lifecycleState$.pipe(map((x) => x === 'idle'))]).pipe(filter(([m, l]) => m && l), first(), map(() => true));
+        }
+    }), shareReplay(1));
+    whenInitialized$ = this.isInitialized$.pipe(filter((x) => true), shareReplay(1));
+    isRendering$ = this.whenInitialized$.pipe(switchMap(() => this.lifecycleState$.pipe(map((x) => x === 'render'), distinctUntilChanged(), shareReplay(1))));
+    isMoving$ = this.whenInitialized$.pipe(switchMap(() => this.moveState$.pipe(map((x) => x === 'moving'), distinctUntilChanged(), shareReplay(1))));
+    isZooming$ = this.whenInitialized$.pipe(switchMap(() => this.zoomState$.pipe(map((x) => x === 'zooming'), distinctUntilChanged(), shareReplay(1))));
+    isRotating$ = this.whenInitialized$.pipe(switchMap(() => this.rotateState$.pipe(map((x) => x === 'rotating'), distinctUntilChanged(), shareReplay(1))));
+    _movingTimer = this.movingTimer();
+    _renderingTimer = this.lifecycleRenderTimer();
+    centerNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => this.latLngPoint(x.getCenter())))), shareReplay(1))), shareReplay(1));
+    center$ = this.whenInitialized$.pipe(switchMap(() => {
+        return this.isMoving$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.centerNow$.pipe(first())), distinctUntilChanged(isSameLatLngPoint), shareReplay(1));
+    }), shareReplay(1));
+    minimumVirtualViewportSize$ = this.state$.pipe(map((x) => x.minimumVirtualViewportSize), distinctUntilChanged(isSameVector), shareReplay(1));
+    currentMapCanvasSize$ = this.state$.pipe(map((x) => x.mapCanvasSize), distinctUntilChanged(isSameVector), shareReplay(1));
+    /**
+     * The map canvas size with consideration to the virtual viewport size.
+     */
+    mapCanvasSize$ = this.currentMapCanvasSize$.pipe(filterMaybe());
     minimumMapCanvasSize(minVector) {
         const resizeFn = vectorMinimumSizeResizeFunction(minVector);
         return this.mapCanvasSize$.pipe(map((x) => resizeFn(x)), distinctUntilChanged(isSameVector), shareReplay(1));
     }
+    /**
+     * The map canvas size with consideration to the virtual viewport size.
+     */
+    virtualMapCanvasSize$ = this.minimumVirtualViewportSize$.pipe(switchMap((minimumVirtualViewportSize) => {
+        if (minimumVirtualViewportSize) {
+            return this.minimumMapCanvasSize(minimumVirtualViewportSize);
+        }
+        else {
+            return this.mapCanvasSize$;
+        }
+    }), distinctUntilChanged(isSameVector), shareReplay(1));
+    rawViewportBoundFunction$ = this.mapCanvasSize$.pipe(map((mapCanvasSize) => mapboxViewportBoundFunction({ mapCanvasSize })), shareReplay(1));
     /**
      * Creates a MapboxViewportBoundFunction observable that returns the minimum viewport size.
      *
@@ -630,32 +511,146 @@ class DbxMapboxMapStore extends ComponentStore {
         const resizeFn = vectorMinimumSizeResizeFunction(minVector);
         return this.mapCanvasSize$.pipe(map((x) => resizeFn(x)), distinctUntilChanged(isSameVector), map((mapCanvasSize) => mapboxViewportBoundFunction({ mapCanvasSize })), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStore, deps: [{ token: DbxMapboxService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStore }); }
+    viewportBoundFunction$ = this.minimumVirtualViewportSize$.pipe(switchMap((minimumVirtualViewportSize) => {
+        if (minimumVirtualViewportSize) {
+            return this.viewportBoundFunctionWithMinimumSize(minimumVirtualViewportSize);
+        }
+        else {
+            return this.rawViewportBoundFunction$;
+        }
+    }), shareReplay(1));
+    virtualBound$ = this.viewportBoundFunction$.pipe(switchMap((fn) => {
+        return this.boundRefreshSettings$.pipe(switchMap((settings) => {
+            const { throttle: throttleMs, refreshType } = settings;
+            let obs;
+            switch (refreshType) {
+                case 'always':
+                    obs = combineLatest([this.centerNow$, this.zoomNow$]);
+                    break;
+                case 'when_not_rendering':
+                case 'only_after_render_finishes':
+                    obs = this.bound$.pipe(switchMap(() => combineLatest([this.centerNow$, this.zoomNow$]))); // refresh whenever the bound refreshes
+                    break;
+            }
+            return obs.pipe(throttleTime(throttleMs, undefined, { leading: true, trailing: true }), map(([center, zoom]) => fn({
+                center,
+                zoom
+            })));
+        }));
+    }), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
+    margin$ = this.state$.pipe(map((x) => x.margin), distinctUntilChanged((a, b) => a != null && b != null && a.fullWidth === b.fullWidth && a.leftMargin === b.leftMargin && a.rightMargin === b.rightMargin), shareReplay(1));
+    reverseMargin$ = this.margin$.pipe(map((x) => {
+        if (x) {
+            return { leftMargin: -x.leftMargin, rightMargin: -x.rightMargin, fullWidth: x.fullWidth };
+        }
+        else {
+            return x;
+        }
+    }));
+    centerGivenMargin$ = this.whenInitialized$.pipe(switchMap(() => {
+        return this.reverseMargin$.pipe(switchMap((x) => {
+            if (x) {
+                return this.center$.pipe(switchMap((_) => this.calculateNextCenterOffsetWithScreenMarginChange(x)));
+            }
+            else {
+                return this.isMoving$.pipe(filter((x) => !x), switchMap(() => this.center$));
+            }
+        }));
+    }), shareReplay(1));
+    rawBoundNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => {
+        const bound = x.getBounds();
+        const boundSw = bound.getSouthWest();
+        const boundNe = bound.getNorthEast();
+        const sw = isDefaultLatLngPoint(boundSw) ? swMostLatLngPoint() : { lat: boundSw.lat, lng: boundSw.lng };
+        const ne = isDefaultLatLngPoint(boundNe) ? neMostLatLngPoint() : { lat: boundNe.lat, lng: boundNe.lng };
+        return this.latLngBound(sw, ne);
+    }))))), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
+    rawBound$ = this.whenInitialized$.pipe(switchMap(() => {
+        return this.boundRefreshSettings$.pipe(switchMap((settings) => {
+            const { throttle: throttleMs, refreshType } = settings;
+            let obs;
+            switch (refreshType) {
+                case 'always':
+                    obs = this.rawBoundNow$;
+                    break;
+                case 'when_not_rendering':
+                    obs = this.isRendering$.pipe(switchMap((x) => (x ? EMPTY : this.rawBoundNow$)));
+                    break;
+                case 'only_after_render_finishes':
+                    obs = this.isRendering$.pipe(onTrueToFalse(), switchMap((x) => this.rawBoundNow$.pipe(first())));
+                    break;
+            }
+            return obs.pipe(throttleTime(throttleMs, undefined, { leading: true, trailing: true }));
+        }));
+    }), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
+    useVirtualBound$ = this.state$.pipe(map((x) => x.useVirtualBound), distinctUntilChanged(), shareReplay(1));
+    bound$ = this.useVirtualBound$.pipe(switchMap((useVirtualBound) => {
+        if (useVirtualBound) {
+            return this.virtualBound$;
+        }
+        else {
+            return this.rawBound$;
+        }
+    }), shareReplay(1));
+    boundSizing$ = this.bound$.pipe(map((x) => diffLatLngBoundPoints(x)), shareReplay(1));
+    boundWrapsAroundWorld$ = this.bound$.pipe(map((x) => latLngBoundWrapsMap(x)), distinctUntilChanged(), shareReplay(1));
+    isWithinBoundFunction$ = this.bound$.pipe(map((x) => isWithinLatLngBoundFunction(x)), shareReplay(1));
+    overlapsBoundFunction$ = this.virtualBound$.pipe(map((x) => overlapsLatLngBoundFunction(x)), shareReplay(1));
+    zoomNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._renderingTimer.pipe(map(() => x.getZoom()))), shareReplay(1))));
+    zoom$ = this.whenInitialized$.pipe(switchMap(() => {
+        return this.isZooming$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.zoomNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+    }));
+    pitchNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => x.getPitch()))), shareReplay(1))));
+    pitch$ = this.whenInitialized$.pipe(switchMap(() => {
+        return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.pitchNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+    }));
+    bearingNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => x.getBearing()))), shareReplay(1))));
+    bearing$ = this.whenInitialized$.pipe(switchMap(() => {
+        return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap(() => this.bearingNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
+    }));
+    content$ = this.state$.pipe(map((x) => x.content), distinctUntilChanged(), shareReplay(1));
+    hasContent$ = this.content$.pipe(map(Boolean));
+    clickEvent$ = this.state$.pipe(map((x) => x.clickEvent), distinctUntilChanged(), shareReplay(1));
+    doubleClickEvent$ = this.state$.pipe(map((x) => x.doubleClickEvent), distinctUntilChanged(), shareReplay(1));
+    rightClickEvent$ = this.state$.pipe(map((x) => x.rightClickEvent), distinctUntilChanged(), shareReplay(1));
+    // MARK: State Changes
+    setMargin = this.updater((state, margin) => ({ ...state, margin: margin && (margin.rightMargin !== 0 || margin.leftMargin !== 0) ? margin : undefined }));
+    setMinimumVirtualViewportSize = this.updater((state, minimumVirtualViewportSize) => ({ ...state, minimumVirtualViewportSize }));
+    setUseVirtualBound = this.updater((state, useVirtualBound) => ({ ...state, useVirtualBound }));
+    setBoundRefreshSettings = this.updater((state, boundRefreshSettings) => ({ ...state, boundRefreshSettings: { ...state.boundRefreshSettings, ...boundRefreshSettings } }));
+    _setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init', retainContent: state.retainContent, content: state.retainContent ? state.content : undefined, useVirtualBound: state.useVirtualBound, boundRefreshSettings: state.boundRefreshSettings }));
+    _setLifecycleState = this.updater((state, lifecycleState) => ({ ...state, lifecycleState }));
+    _setMoveState = this.updater((state, moveState) => ({ ...state, moveState }));
+    _setZoomState = this.updater((state, zoomState) => ({ ...state, zoomState }));
+    _setRotateState = this.updater((state, rotateState) => ({ ...state, rotateState }));
+    _setMapCanvasSize = this.updater((state, mapCanvasSize) => ({ ...state, mapCanvasSize }));
+    _setClickEvent = this.updater((state, clickEvent) => ({ ...state, clickEvent }));
+    _setDoubleClickEvent = this.updater((state, doubleClickEvent) => ({ ...state, doubleClickEvent }));
+    _setRightClickEvent = this.updater((state, rightClickEvent) => ({ ...state, rightClickEvent }));
+    _setError = this.updater((state, error) => ({ ...state, error }));
+    clearContent = this.updater((state) => ({ ...state, content: undefined }));
+    setContent = this.updater((state, content) => ({ ...state, content }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStore });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStore, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DbxMapboxService, decorators: [{
-                    type: Inject,
-                    args: [DbxMapboxService]
-                }] }]; } });
+        }], ctorParameters: function () { return []; } });
 
 /**
  * Provided in the parent component that allows children to emit events related to their lifecycles.
  */
 class DbxMapboxChangeService {
-    constructor(dbxMapboxMapStore) {
-        this.dbxMapboxMapStore = dbxMapboxMapStore;
-        this._markerDestroyed = new Subject();
-        this._applyChanges = new Subject();
-        this.markerDestroyed$ = this._markerDestroyed;
-        this.applyChanges$ = merge(this._applyChanges, this.markerDestroyed$).pipe(throttleTime(100, undefined, { leading: false, trailing: true }));
-        this._applyChangesSub = new SubscriptionObject(this.dbxMapboxMapStore.mapService$
-            .pipe(switchMap((mapService) => this.applyChanges$.pipe(tap(() => {
-            mapService.applyChanges();
-        }))))
-            .subscribe());
-    }
+    dbxMapboxMapStore = inject(DbxMapboxMapStore);
+    _markerDestroyed = new Subject();
+    _applyChanges = new Subject();
+    markerDestroyed$ = this._markerDestroyed;
+    applyChanges$ = merge(this._applyChanges, this.markerDestroyed$).pipe(throttleTime(100, undefined, { leading: false, trailing: true }));
+    _applyChangesSub = new SubscriptionObject(this.dbxMapboxMapStore.mapService$
+        .pipe(switchMap((mapService) => this.applyChanges$.pipe(tap(() => {
+        mapService.applyChanges();
+    }))))
+        .subscribe());
     applyChanges() {
         this._applyChanges.next();
     }
@@ -667,15 +662,15 @@ class DbxMapboxChangeService {
         this._applyChanges.complete();
         this._applyChangesSub.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxChangeService, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxChangeService, providedIn: null }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxChangeService, providedIn: null });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxChangeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: null
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; } });
+        }] });
 
 /**
  * Store used for storing injectable content into the map.
@@ -685,14 +680,14 @@ class DbxMapboxInjectionStore extends ComponentStore {
         super({
             map: new Map()
         });
-        this.map$ = this.state$.pipe(map((x) => x.map), distinctUntilMapHasDifferentKeys(), shareReplay(1));
-        this.allInjectionConfigs$ = this.map$.pipe(map((x) => Array.from(x.values())), shareReplay(1));
-        // MARK: State Changes
-        this.addInjectionConfig = this.updater(updateDbxMapboxMapInjectionStoreStateWithInjectionConfig);
-        this.removeInjectionConfigWithKey = this.updater(updateDbxMapboxMapInjectionStoreStateWithRemovedKey);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStore }); }
+    map$ = this.state$.pipe(map((x) => x.map), distinctUntilMapHasDifferentKeys(), shareReplay(1));
+    allInjectionConfigs$ = this.map$.pipe(map((x) => Array.from(x.values())), shareReplay(1));
+    // MARK: State Changes
+    addInjectionConfig = this.updater(updateDbxMapboxMapInjectionStoreStateWithInjectionConfig);
+    removeInjectionConfigWithKey = this.updater(updateDbxMapboxMapInjectionStoreStateWithRemovedKey);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStore });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStore, decorators: [{
             type: Injectable
@@ -715,15 +710,12 @@ function updateDbxMapboxMapInjectionStoreStateWithRemovedKey(state, key) {
  * Injects the components configured in the DbxMapboxInjectionStore into the view.
  */
 class DbxMapboxInjectionComponent {
-    constructor(dbxMapboxMapKeyInjectionStore, injector) {
-        this.dbxMapboxMapKeyInjectionStore = dbxMapboxMapKeyInjectionStore;
-        this.injector = injector;
-        this.entries$ = this.dbxMapboxMapKeyInjectionStore.allInjectionConfigs$.pipe(shareReplay(1));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionComponent, deps: [{ token: DbxMapboxInjectionStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxInjectionComponent, selector: "dbx-mapbox-injection", ngImport: i0, template: `
+    dbxMapboxMapKeyInjectionStore = inject(DbxMapboxInjectionStore);
+    entries$ = this.dbxMapboxMapKeyInjectionStore.allInjectionConfigs$.pipe(shareReplay(1));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxInjectionComponent, selector: "dbx-mapbox-injection", ngImport: i0, template: `
     <dbx-injection-array [entries]="entries$ | async"></dbx-injection-array>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.DbxInjectionArrayComponent, selector: "dbx-injection-array", inputs: ["entries"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1.DbxInjectionArrayComponent, selector: "dbx-injection-array", inputs: ["entries"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionComponent, decorators: [{
             type: Component,
@@ -734,26 +726,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxInjectionStore }, { type: i0.Injector }]; } });
+        }] });
 
 /**
  * Token used by provideMapboxInjectionStoreIfDoesNotExist() to prevent injecting a parent DbxMapboxInjectionStore into the child view.
  */
 class DbxMapboxInjectionStoreProviderBlock {
-    constructor(dbxMapboxInjectionStore) {
-        this.dbxMapboxInjectionStore = dbxMapboxInjectionStore;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, deps: [{ token: DbxMapboxInjectionStore, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock }); }
+    dbxMapboxInjectionStore = inject(DbxMapboxInjectionStore, { skipSelf: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DbxMapboxInjectionStore, decorators: [{
-                    type: SkipSelf
-                }] }]; } });
+        }] });
 class DbxMapboxInjectionStoreInjectionBlockDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxInjectionStoreInjectionBlockDirective, selector: "[dbxMapboxInjectionStoreParentBlocker]", providers: [DbxMapboxInjectionStoreProviderBlock], ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxInjectionStoreInjectionBlockDirective, selector: "[dbxMapboxInjectionStoreParentBlocker]", providers: [DbxMapboxInjectionStoreProviderBlock], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, decorators: [{
             type: Directive,
@@ -788,14 +776,10 @@ function provideMapboxInjectionStoreIfParentIsUnavailable() {
  * Directive that configures a MapComponent with content from DbxMapboxService. Connects a host MapService to a parent DbxMapboxMapStore if available.
  */
 class DbxMapboxMapDirective {
-    constructor(
-    //
-    mapService, mapboxMap, dbxMapboxService, dbxMapboxMapStore) {
-        this.mapService = mapService;
-        this.mapboxMap = mapboxMap;
-        this.dbxMapboxService = dbxMapboxService;
-        this.dbxMapboxMapStore = dbxMapboxMapStore;
-    }
+    mapService = inject(MapService, { host: true });
+    mapboxMap = inject(MapComponent, { host: true });
+    dbxMapboxService = inject(DbxMapboxService);
+    dbxMapboxMapStore = inject(DbxMapboxMapStore, { optional: true });
     ngOnInit() {
         // style must be provided first before the map will load.
         this.mapboxMap.style = this.dbxMapboxService.defaultStyle;
@@ -805,39 +789,31 @@ class DbxMapboxMapDirective {
             this.dbxMapboxMapStore.setMapService(this.mapService);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapDirective, deps: [{ token: i1.MapService, host: true }, { token: i1.MapComponent, host: true }, { token: DbxMapboxService }, { token: DbxMapboxMapStore, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMapDirective, selector: "[dbxMapboxMap]", ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMapDirective, selector: "[dbxMapboxMap]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxMap]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MapService, decorators: [{
-                    type: Host
-                }] }, { type: i1.MapComponent, decorators: [{
-                    type: Host
-                }] }, { type: DbxMapboxService }, { type: DbxMapboxMapStore, decorators: [{
-                    type: Optional
-                }] }]; } });
+        }] });
 
 /**
  * Content drawer that connects with DbxMapboxMapStore to show the content.
  */
 class DbxMapboxLayoutDrawerComponent {
-    constructor(dbxMapboxMapStore) {
-        this.dbxMapboxMapStore = dbxMapboxMapStore;
-        this.config$ = this.dbxMapboxMapStore.content$;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer", host: { classAttribute: "dbx-mapbox-layout-drawer" }, ngImport: i0, template: "<div>\n  <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n</div>\n", dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    dbxMapboxMapStore = inject(DbxMapboxMapStore);
+    config$ = this.dbxMapboxMapStore.content$;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer", host: { classAttribute: "dbx-mapbox-layout-drawer" }, ngImport: i0, template: "<div>\n  <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n</div>\n", dependencies: [{ kind: "component", type: i1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-layout-drawer', host: {
                         class: 'dbx-mapbox-layout-drawer'
                     }, template: "<div>\n  <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; } });
+        }] });
 
 /**
  * Responsive component meant to split a left and right column.
@@ -846,40 +822,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *
  * Requires a TwoColumnsContextStore to be provided.
  */
-class DbxMapboxLayoutComponent extends SubscriptionObject {
-    constructor(dbxMapboxMapStore) {
-        super();
-        this.dbxMapboxMapStore = dbxMapboxMapStore;
-        this.openedChange = new EventEmitter();
-        this._resized = new Subject();
-        this._updateMargins = new Subject();
-        this._forceHasContent = new BehaviorSubject(false);
-        this._mode = new BehaviorSubject('side');
-        this._side = new BehaviorSubject('right');
-        this._isOpen = new BehaviorSubject(true);
-        this._color = new BehaviorSubject('background');
-        this._toggleSub = new SubscriptionObject();
-        this.resized$ = this._resized.asObservable();
-        this.side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
-        this.mode$ = this._mode.pipe(distinctUntilChanged(), shareReplay(1));
-        this.hasContent$ = combineLatest([this._forceHasContent, this.dbxMapboxMapStore.hasContent$]).pipe(map(([hasContent, forceHasContent]) => hasContent || forceHasContent), distinctUntilChanged(), shareReplay(1));
-        this.isOpen$ = this._isOpen.asObservable();
-        this.isOpenAndHasContent$ = combineLatest([this.hasContent$, this._isOpen]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
-        this.position$ = this.side$.pipe(map((x) => (x === 'right' ? 'end' : 'start')), distinctUntilChanged(), shareReplay(1));
-        this.drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.isOpenAndHasContent$]).pipe(
-        //
-        map(([side, hasContent, open]) => (hasContent ? 'has-drawer-content' : 'no-drawer-content') + ` ${side}-drawer ` + (open ? 'open-drawer' : '')), distinctUntilChanged(), shareReplay(1));
-        this.drawerButtonColor$ = this._color.pipe(distinctUntilChanged(), shareReplay(1));
-        this.buttonIcon$ = combineLatest([this.side$, this.isOpenAndHasContent$]).pipe(map(([side, opened]) => {
-            let icons = ['chevron_right', 'chevron_left'];
-            if (side === 'left') {
-                icons = icons.reverse();
-            }
-            return opened ? icons[0] : icons[1];
-        }));
-    }
+class DbxMapboxLayoutComponent extends AbstractSubscriptionDirective {
+    dbxMapboxMapStore = inject(DbxMapboxMapStore);
+    openedChange = new EventEmitter();
+    containerElement;
+    drawerContainer;
+    content;
+    _resized = new Subject();
+    _updateMargins = new Subject();
+    _forceHasContent = new BehaviorSubject(false);
+    _mode = new BehaviorSubject('side');
+    _side = new BehaviorSubject('right');
+    _isOpen = new BehaviorSubject(true);
+    _color = new BehaviorSubject('background');
+    _toggleSub = new SubscriptionObject();
+    resized$ = this._resized.asObservable();
+    side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
+    mode$ = this._mode.pipe(distinctUntilChanged(), shareReplay(1));
+    hasContent$ = combineLatest([this._forceHasContent, this.dbxMapboxMapStore.hasContent$]).pipe(map(([hasContent, forceHasContent]) => hasContent || forceHasContent), distinctUntilChanged(), shareReplay(1));
+    isOpen$ = this._isOpen.asObservable();
+    isOpenAndHasContent$ = combineLatest([this.hasContent$, this._isOpen]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
+    position$ = this.side$.pipe(map((x) => (x === 'right' ? 'end' : 'start')), distinctUntilChanged(), shareReplay(1));
+    drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.isOpenAndHasContent$]).pipe(
+    //
+    map(([side, hasContent, open]) => (hasContent ? 'has-drawer-content' : 'no-drawer-content') + ` ${side}-drawer ` + (open ? 'open-drawer' : '')), distinctUntilChanged(), shareReplay(1));
+    drawerButtonColor$ = this._color.pipe(distinctUntilChanged(), shareReplay(1));
+    buttonIcon$ = combineLatest([this.side$, this.isOpenAndHasContent$]).pipe(map(([side, opened]) => {
+        let icons = ['chevron_right', 'chevron_left'];
+        if (side === 'left') {
+            icons = icons.reverse();
+        }
+        return opened ? icons[0] : icons[1];
+    }));
     ngOnInit() {
-        this.subscription = this.side$.pipe(switchMap(() => this._resized.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
+        this.sub = this.side$.pipe(switchMap(() => this._resized.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
             this.dbxMapboxMapStore.mapInstance$.subscribe((x) => {
                 x.resize();
                 // side changed
@@ -933,6 +909,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
             .subscribe();
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.openedChange.complete();
         this._resized.complete();
         this._updateMargins.complete();
@@ -980,13 +957,13 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
             this.openedChange.next(opened);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", drawerButtonColor: "drawerButtonColor" }, outputs: { openedChange: "openedChange" }, viewQueries: [{ propertyName: "containerElement", first: true, predicate: MatDrawerContainer, descendants: true, read: ElementRef }, { propertyName: "drawerContainer", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-drawer-container #containerElement class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer (openedChange)=\"onOpened($event)\" [opened]=\"isOpenAndHasContent$ | async\" [mode]=\"(mode$ | async) || 'side'\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerClasses$ | async) || ''\">\n      <ng-content select=\"[drawer]\"></ng-content>\n      <dbx-mapbox-layout-drawer></dbx-mapbox-layout-drawer>\n    </div>\n  </mat-drawer>\n  <mat-drawer-content #content class=\"dbx-mapbox-layout-content\" (resized)=\"onResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [dbxColor]=\"drawerButtonColor$ | async\">\n      <mat-icon>{{ buttonIcon$ | async }}</mat-icon>\n    </button>\n    <ng-content></ng-content>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [".dbx-mapbox-layout-container{height:100%;max-width:100%}.dbx-mapbox-layout-container .mat-drawer-container{height:100%}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 33px))}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer-content{height:100%;width:100%;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{position:absolute;z-index:2;top:40%;border:none;display:flex;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button{padding-left:0}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button ::ng-deep>.mat-mdc-button-persistent-ripple{border-radius:unset}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "directive", type: i4.DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", drawerButtonColor: "drawerButtonColor" }, outputs: { openedChange: "openedChange" }, viewQueries: [{ propertyName: "containerElement", first: true, predicate: MatDrawerContainer, descendants: true, read: ElementRef }, { propertyName: "drawerContainer", first: true, predicate: MatDrawerContainer, descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-drawer-container #containerElement class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer (openedChange)=\"onOpened($event)\" [opened]=\"isOpenAndHasContent$ | async\" [mode]=\"(mode$ | async) || 'side'\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerClasses$ | async) || ''\">\n      <ng-content select=\"[drawer]\"></ng-content>\n      <dbx-mapbox-layout-drawer></dbx-mapbox-layout-drawer>\n    </div>\n  </mat-drawer>\n  <mat-drawer-content #content class=\"dbx-mapbox-layout-content\" (resized)=\"onResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [dbxColor]=\"drawerButtonColor$ | async\">\n      <mat-icon>{{ buttonIcon$ | async }}</mat-icon>\n    </button>\n    <ng-content></ng-content>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [".dbx-mapbox-layout-container{height:100%;max-width:100%}.dbx-mapbox-layout-container .mat-drawer-container{height:100%}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 33px))}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer-content{height:100%;width:100%;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{position:absolute;z-index:2;top:40%;border:none;display:flex;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button{padding-left:0}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button ::ng-deep>.mat-mdc-button-persistent-ripple{border-radius:unset}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "directive", type: i3.DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-layout', template: "<mat-drawer-container #containerElement class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer (openedChange)=\"onOpened($event)\" [opened]=\"isOpenAndHasContent$ | async\" [mode]=\"(mode$ | async) || 'side'\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerClasses$ | async) || ''\">\n      <ng-content select=\"[drawer]\"></ng-content>\n      <dbx-mapbox-layout-drawer></dbx-mapbox-layout-drawer>\n    </div>\n  </mat-drawer>\n  <mat-drawer-content #content class=\"dbx-mapbox-layout-content\" (resized)=\"onResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [dbxColor]=\"drawerButtonColor$ | async\">\n      <mat-icon>{{ buttonIcon$ | async }}</mat-icon>\n    </button>\n    <ng-content></ng-content>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [".dbx-mapbox-layout-container{height:100%;max-width:100%}.dbx-mapbox-layout-container .mat-drawer-container{height:100%}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 33px))}.dbx-mapbox-layout-container .dbx-mapbox-layout-drawer-content{height:100%;width:100%;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{position:absolute;z-index:2;top:40%;border:none;display:flex;overflow:hidden}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button{padding-left:0}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button ::ng-deep>.mat-mdc-button-persistent-ripple{border-radius:unset}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; }, propDecorators: { openedChange: [{
+        }], propDecorators: { openedChange: [{
                 type: Output
             }], containerElement: [{
                 type: ViewChild,
@@ -1015,20 +992,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * The map dissapears if the mouse scrolls anywhere else on the map.
  */
 class DbxMapboxMenuComponent extends AbstractSubscriptionDirective {
+    dbxMapboxMapStore = inject(DbxMapboxMapStore);
+    matMenuTrigger = inject(MatMenuTrigger, { host: true });
+    ngZone = inject(NgZone);
+    cdRef = inject(ChangeDetectorRef);
+    _pos = { x: `0`, y: `0` };
+    _active = new BehaviorSubject(true);
+    _menuCloseSub = new SubscriptionObject();
+    _preventRightClick = new DestroyFunctionObject();
     get pos() {
         return this._pos;
     }
-    constructor(dbxMapboxMapStore, matMenuTrigger, ngZone, cdRef) {
-        super();
-        this.dbxMapboxMapStore = dbxMapboxMapStore;
-        this.matMenuTrigger = matMenuTrigger;
-        this.ngZone = ngZone;
-        this.cdRef = cdRef;
-        this._pos = { x: `0`, y: `0` };
-        this._active = new BehaviorSubject(true);
-        this._menuCloseSub = new SubscriptionObject();
-        this._preventRightClick = new DestroyFunctionObject();
-    }
     set active(active) {
         this._active.next(active ?? true);
     }
@@ -1069,14 +1043,14 @@ class DbxMapboxMenuComponent extends AbstractSubscriptionDirective {
     ngOnDestroy() {
         super.ngOnDestroy();
         this._active.complete();
-        this._preventRightClick.destroy();
         this._menuCloseSub.destroy();
+        this._preventRightClick.destroy();
         if (this.matMenuTrigger) {
             this.matMenuTrigger.closeMenu();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMenuComponent, deps: [{ token: DbxMapboxMapStore }, { token: i2$2.MatMenuTrigger, host: true }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMenuComponent, selector: "dbx-mapbox-menu", inputs: { active: "active" }, host: { properties: { "style.top": "pos.y", "style.left": "pos.x" }, styleAttribute: "visibility: hidden; position: fixed" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMenuComponent, selector: "dbx-mapbox-menu", inputs: { active: "active" }, host: { properties: { "style.top": "pos.y", "style.left": "pos.x" }, styleAttribute: "visibility: hidden; position: fixed" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMenuComponent, decorators: [{
             type: Component,
@@ -1090,9 +1064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }, { type: i2$2.MatMenuTrigger, decorators: [{
-                    type: Host
-                }] }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { active: [{
+        }], propDecorators: { active: [{
                 type: Input
             }] } });
 
@@ -1100,20 +1072,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Token used by provideMapboxStoreIfDoesNotExist() to prevent injecting a parent DbxMapboxMapStore into the child view.
  */
 class DbxMapboxMapStoreProviderBlock {
-    constructor(dbxMapboxMapStore) {
-        this.dbxMapboxMapStore = dbxMapboxMapStore;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, deps: [{ token: DbxMapboxMapStore, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreProviderBlock }); }
+    dbxMapboxMapStore = inject(DbxMapboxMapStore, { skipSelf: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreProviderBlock });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore, decorators: [{
-                    type: SkipSelf
-                }] }]; } });
+        }] });
 class DbxMapboxMapStoreInjectionBlockDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMapStoreInjectionBlockDirective, selector: "[dbxMapboxStoreParentBlocker]", providers: [DbxMapboxMapStoreProviderBlock], ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMapStoreInjectionBlockDirective, selector: "[dbxMapboxStoreParentBlocker]", providers: [DbxMapboxMapStoreProviderBlock], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, decorators: [{
             type: Directive,
@@ -1145,10 +1113,9 @@ function provideMapboxStoreIfParentIsUnavailable() {
 }
 
 class DbxMapboxMarkerComponent {
-    static { this._latLngPoint = latLngPointFunction({ wrap: true }); }
-    constructor(_dbxMapboxChangeService) {
-        this._dbxMapboxChangeService = _dbxMapboxChangeService;
-    }
+    _dbxMapboxChangeService = inject(DbxMapboxChangeService, { optional: true });
+    static _latLngPoint = latLngPointFunction({ wrap: true });
+    _marker;
     get marker() {
         return this._marker;
     }
@@ -1240,8 +1207,8 @@ class DbxMapboxMarkerComponent {
     ngOnDestroy() {
         this._dbxMapboxChangeService?.emitMarkerDestroyed();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [{ token: DbxMapboxChangeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: { marker: "marker" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: { marker: "marker" }, ngImport: i0, template: `
     <mgl-marker *ngIf="marker" [lngLat]="latLng">
       <dbx-anchor [anchor]="anchor">
         <div class="dbx-mapbox-marker" [ngClass]="presentationClasses">
@@ -1252,7 +1219,7 @@ class DbxMapboxMarkerComponent {
         </div>
       </dbx-anchor>
     </mgl-marker>
-  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip{flex-direction:row;font-size:1em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-icon-content{width:18px;height:18px;font-size:18px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-label{padding-left:3px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-icon-content{padding:0!important;width:16px;height:16px;font-size:16px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content{display:none}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content .dbx-mapbox-marker-label{padding-left:0}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-label{padding-left:4px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip{flex-direction:row;font-size:1em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-icon-content{width:18px;height:18px;font-size:18px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-label{padding-left:3px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-icon-content{padding:0!important;width:16px;height:16px;font-size:16px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content{display:none}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content .dbx-mapbox-marker-label{padding-left:0}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-label{padding-left:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i4$1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
             type: Component,
@@ -1268,9 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       </dbx-anchor>
     </mgl-marker>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip{flex-direction:row;font-size:1em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-icon-content{width:18px;height:18px;font-size:18px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-label{padding-left:3px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-icon-content{padding:0!important;width:16px;height:16px;font-size:16px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content{display:none}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content .dbx-mapbox-marker-label{padding-left:0}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-label{padding-left:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxChangeService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { marker: [{
+        }], propDecorators: { marker: [{
                 type: Input
             }] } });
 
@@ -1278,18 +1243,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Component used to render a set of DbxMapboxMarker values from the input data and marker factory.
  */
 class DbxMapboxMarkersComponent {
-    constructor() {
-        this._data = new BehaviorSubject(undefined);
-        this._markerFactory = new BehaviorSubject(undefined);
-        this.markers$ = combineLatest([this._data.pipe(distinctUntilChanged()), this._markerFactory.pipe(distinctUntilChanged())]).pipe(map(([data, markerFactory]) => {
-            if (data?.length && markerFactory) {
-                return data.map(markerFactory);
-            }
-            else {
-                return [];
-            }
-        }), shareReplay(1));
-    }
+    _data = new BehaviorSubject(undefined);
+    _markerFactory = new BehaviorSubject(undefined);
+    markers$ = combineLatest([this._data.pipe(distinctUntilChanged()), this._markerFactory.pipe(distinctUntilChanged())]).pipe(map(([data, markerFactory]) => {
+        if (data?.length && markerFactory) {
+            return data.map(markerFactory);
+        }
+        else {
+            return [];
+        }
+    }), shareReplay(1));
     trackMarkerById(index, marker) {
         return marker.id;
     }
@@ -1309,10 +1272,10 @@ class DbxMapboxMarkersComponent {
         this._data.complete();
         this._markerFactory.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMarkersComponent, selector: "dbx-mapbox-markers", inputs: { data: "data", markerFactory: "markerFactory" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxMarkersComponent, selector: "dbx-mapbox-markers", inputs: { data: "data", markerFactory: "markerFactory" }, ngImport: i0, template: `
     <dbx-mapbox-marker *ngFor="let marker of markers$ | async; trackBy: trackMarkerById" [marker]="marker"></dbx-mapbox-marker>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkersComponent, decorators: [{
             type: Component,
@@ -1332,33 +1295,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Directive that synchronizes a map's virtual size with the size of the element.
  */
-class DbxMapboxLayoutVirtualResizeSyncComponent extends SubscriptionObject {
-    constructor(dbxMapboxLayoutComponent) {
-        super();
-        this.dbxMapboxLayoutComponent = dbxMapboxLayoutComponent;
-        this.resizedVector$ = this.dbxMapboxLayoutComponent.resized$.pipe(map(() => {
-            const element = this.dbxMapboxLayoutComponent.containerElement.nativeElement;
-            const { clientWidth, clientHeight } = element;
-            return {
-                x: clientWidth,
-                y: clientHeight
-            };
-        }), distinctUntilChanged(isSameVector), shareReplay(1));
-    }
+class DbxMapboxLayoutVirtualResizeSyncComponent extends AbstractSubscriptionDirective {
+    dbxMapboxLayoutComponent = inject(DbxMapboxLayoutComponent, { host: true });
+    resizedVector$ = this.dbxMapboxLayoutComponent.resized$.pipe(map(() => {
+        const element = this.dbxMapboxLayoutComponent.containerElement.nativeElement;
+        const { clientWidth, clientHeight } = element;
+        return {
+            x: clientWidth,
+            y: clientHeight
+        };
+    }), distinctUntilChanged(isSameVector), shareReplay(1));
     ngOnInit() {
-        this.dbxMapboxLayoutComponent.dbxMapboxMapStore.setMinimumVirtualViewportSize(this.resizedVector$);
+        this.sub = this.dbxMapboxLayoutComponent.dbxMapboxMapStore.setMinimumVirtualViewportSize(this.resizedVector$) ?? undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, deps: [{ token: DbxMapboxLayoutComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxLayoutVirtualResizeSyncComponent, selector: "[dbxMapboxLayoutVirtualResizeSync]", usesInheritance: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxMapboxLayoutVirtualResizeSyncComponent, selector: "[dbxMapboxLayoutVirtualResizeSync]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxLayoutVirtualResizeSync]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxLayoutComponent, decorators: [{
-                    type: Host
-                }] }]; } });
+        }] });
 
 const declarations = [
     //
@@ -1384,8 +1342,8 @@ class DbxMapboxModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, declarations: [
             //
             DbxMapboxLayoutVirtualResizeSyncComponent,
             DbxMapboxMapDirective,
@@ -1415,8 +1373,8 @@ class DbxMapboxModule {
             DbxMapboxMenuComponent,
             DbxMapboxMarkerComponent,
             DbxMapboxMarkersComponent,
-            DbxMapboxMapStoreInjectionBlockDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, imports: [
+            DbxMapboxMapStoreInjectionBlockDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, imports: [
             //
             CommonModule,
             MatSidenavModule,
@@ -1426,7 +1384,7 @@ class DbxMapboxModule {
             MatIconModule,
             AngularResizeEventModule,
             DbxRouterAnchorModule,
-            NgxMapboxGLModule] }); }
+            NgxMapboxGLModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, decorators: [{
             type: NgModule,