@dereekb/dbx-web 13.6.17 → 13.8.0

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, ChangeDetectionStrategy, Component, Directive, Injector, Optional, SkipSelf, output, viewChild, ElementRef, input, signal, effect, computed, NgModule, makeEnvironmentProviders } from '@angular/core';
+import { inject, Injectable, ChangeDetectionStrategy, Component, Directive, Optional, SkipSelf, Injector, output, viewChild, ElementRef, input, signal, effect, computed, NgModule, makeEnvironmentProviders } from '@angular/core';
 import { asObservable, cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, distinctUntilMapHasDifferentKeys } from '@dereekb/rxjs';
 import { distinctUntilChanged, switchMap, map, combineLatestWith, shareReplay, NEVER, defaultIfEmpty, tap, EMPTY, interval, of, first, combineLatest, filter, startWith, throttleTime, Subject, merge, delay } from 'rxjs';
 import { latLngPoint, LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, diffLatLngBoundPoints, latLngBoundCenterPoint, addLatLngPoints, isSameLatLngPoint, isSameVector, vectorMinimumSizeResizeFunction, isSameLatLngBound, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, isNotFalse, DestroyFunctionObject, getValueFromGetter, pushItemOrArrayItemsIntoArray, spaceSeparatedCssClasses } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
-import MapboxGl from 'mapbox-gl';
+import { LngLatBounds } from 'mapbox-gl';
 import { bounds } from '@placemarkio/geo-viewport';
 import { DbxInjectionArrayComponent, DbxInjectionComponent, cleanSubscription, clean } from '@dereekb/dbx-core';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
@@ -60,10 +60,10 @@ class DbxMapboxService {
             center: latLngPoint(this.defaultCenter)
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxService, decorators: [{
             type: Injectable
         }] });
 
@@ -162,11 +162,9 @@ class DbxMapboxMapStore extends ComponentStore {
     setMapService = this.effect((input) => {
         return input.pipe(switchMap((service) => {
             this._setMapService(service);
-            if (!service) {
-                return NEVER;
-            }
-            else {
-                return service.mapLoaded$.pipe(defaultIfEmpty(undefined), map(() => {
+            let result = NEVER;
+            if (service) {
+                result = service.mapLoaded$.pipe(defaultIfEmpty(undefined), map(() => {
                     this._setLifecycleState('idle');
                     this._setMoveState('idle');
                     this._setZoomState('idle');
@@ -205,7 +203,9 @@ class DbxMapboxMapStore extends ComponentStore {
                     };
                 }));
             }
-        }), cleanup(({ service, listenerPairs, subs }) => {
+            return result;
+        }), cleanup((state) => {
+            const { service, listenerPairs, subs } = state;
             const map = service.mapInstance;
             if (map) {
                 listenerPairs.forEach((x) => {
@@ -350,19 +350,18 @@ class DbxMapboxMapStore extends ComponentStore {
     fitPositions = this.effect((input) => {
         return input.pipe(switchMap((x) => {
             const boundFromInput = latLngBoundFromInput(x.positions);
+            let result = EMPTY;
             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 EMPTY;
+                result = this.mapInstance$.pipe(tap((map) => map.fitBounds(new LngLatBounds(bound.sw, bound.ne), x.options, x.eventData)));
             }
+            return result;
         }));
     });
     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)));
+            return this.mapInstance$.pipe(tap((map) => map.fitBounds(new LngLatBounds(bound.sw, bound.ne), x.options, x.eventData)));
         }));
     });
     jumpTo = this.effect((input) => {
@@ -400,22 +399,12 @@ class DbxMapboxMapStore extends ComponentStore {
     }
     movingTimer(period = this.timerRefreshPeriod) {
         return this.moveState$.pipe(switchMap((x) => {
-            if (x === 'moving') {
-                return interval(period);
-            }
-            else {
-                return of(0);
-            }
+            return x === 'moving' ? interval(period) : of(0);
         }), shareReplay(1));
     }
     lifecycleRenderTimer(period = this.timerRefreshPeriod) {
         return this.lifecycleState$.pipe(switchMap((x) => {
-            if (x === 'render') {
-                return interval(period);
-            }
-            else {
-                return of(0);
-            }
+            return x === 'render' ? interval(period) : of(0);
         }), shareReplay(1));
     }
     atNextIdle() {
@@ -460,12 +449,9 @@ class DbxMapboxMapStore extends ComponentStore {
     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);
-        }
+        return currentMapService
+            ? currentMapService.mapLoaded$.pipe(defaultIfEmpty(undefined), map(() => currentMapService.mapInstance))
+            : of(undefined);
     }), distinctUntilChanged(), shareReplay(1));
     mapInstance$ = this.currentMapInstance$.pipe(filterMaybe());
     boundRefreshSettings$ = this.state$.pipe(map((x) => x.boundRefreshSettings), shareReplay(1));
@@ -474,12 +460,11 @@ class DbxMapboxMapStore extends ComponentStore {
     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));
+        let result = of(false);
+        if (x) {
+            result = combineLatest([this.moveState$.pipe(map((x) => x === 'idle')), this.lifecycleState$.pipe(map((x) => x === 'idle'))]).pipe(filter(([m, l]) => m && l), first(), map(() => true));
         }
+        return result;
     }), shareReplay(1));
     whenInitialized$ = this.isInitialized$.pipe(filter(() => true), shareReplay(1));
     isRendering$ = this.whenInitialized$.pipe(switchMap(() => this.lifecycleState$.pipe(map((x) => x === 'render'), distinctUntilChanged(), shareReplay(1))));
@@ -506,12 +491,7 @@ class DbxMapboxMapStore extends ComponentStore {
      * 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$;
-        }
+        return minimumVirtualViewportSize ? this.minimumMapCanvasSize(minimumVirtualViewportSize) : this.mapCanvasSize$;
     }), distinctUntilChanged(isSameVector), shareReplay(1));
     rawViewportBoundFunction$ = this.mapCanvasSize$.pipe(map((mapCanvasSize) => mapboxViewportBoundFunction({ mapCanvasSize })), shareReplay(1));
     /**
@@ -525,12 +505,7 @@ class DbxMapboxMapStore extends ComponentStore {
         return this.mapCanvasSize$.pipe(map((x) => resizeFn(x)), distinctUntilChanged(isSameVector), map((mapCanvasSize) => mapboxViewportBoundFunction({ mapCanvasSize })), shareReplay(1));
     }
     viewportBoundFunction$ = this.minimumVirtualViewportSize$.pipe(switchMap((minimumVirtualViewportSize) => {
-        if (minimumVirtualViewportSize) {
-            return this.viewportBoundFunctionWithMinimumSize(minimumVirtualViewportSize);
-        }
-        else {
-            return this.rawViewportBoundFunction$;
-        }
+        return minimumVirtualViewportSize ? this.viewportBoundFunctionWithMinimumSize(minimumVirtualViewportSize) : this.rawViewportBoundFunction$;
     }), shareReplay(1));
     virtualBound$ = this.viewportBoundFunction$.pipe(switchMap((fn) => {
         return this.boundRefreshSettings$.pipe(switchMap((settings) => {
@@ -553,21 +528,13 @@ class DbxMapboxMapStore extends ComponentStore {
     }), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
     margin$ = this.state$.pipe(map((x) => x.margin), distinctUntilChanged((a, b) => a != 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;
-        }
+        return x ? { leftMargin: -x.leftMargin, rightMargin: -x.rightMargin, fullWidth: x.fullWidth } : 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$));
-            }
+            return x
+                ? this.center$.pipe(switchMap((_) => this.calculateNextCenterOffsetWithScreenMarginChange(x)))
+                : 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(() => {
@@ -602,12 +569,7 @@ class DbxMapboxMapStore extends ComponentStore {
     }), 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$;
-        }
+        return useVirtualBound ? this.virtualBound$ : 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));
@@ -647,10 +609,10 @@ class DbxMapboxMapStore extends ComponentStore {
     _setError = this.updater((state, error) => ({ ...state, error }));
     clearDrawerContent = this.updater((state) => setDrawerContent(state, undefined));
     setDrawerContent = this.updater(setDrawerContent);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 function setDrawerContent(state, drawerContent) {
@@ -682,10 +644,10 @@ class DbxMapboxChangeService {
         this._applyChanges.complete();
         this._applyChangesSub.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxChangeService, providedIn: null });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxChangeService, providedIn: null });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxChangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxChangeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: null
@@ -706,10 +668,10 @@ class DbxMapboxInjectionStore extends ComponentStore {
     // MARK: State Changes
     addInjectionConfig = this.updater(updateDbxMapboxMapInjectionStoreStateWithInjectionConfig);
     removeInjectionConfigWithKey = this.updater(updateDbxMapboxMapInjectionStoreStateWithRemovedKey);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStore });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 /**
@@ -746,12 +708,12 @@ function updateDbxMapboxMapInjectionStoreStateWithRemovedKey(state, key) {
 class DbxMapboxInjectionComponent {
     dbxMapboxMapKeyInjectionStore = inject(DbxMapboxInjectionStore);
     entriesSignal = toSignal(this.dbxMapboxMapKeyInjectionStore.allInjectionConfigs$);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", type: DbxMapboxInjectionComponent, isStandalone: true, selector: "dbx-mapbox-injection", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxMapboxInjectionComponent, isStandalone: true, selector: "dbx-mapbox-injection", ngImport: i0, template: `
     <dbx-injection-array [entries]="entriesSignal()"></dbx-injection-array>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionArrayComponent, selector: "dbx-injection-array", inputs: ["entries"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-mapbox-injection',
@@ -769,17 +731,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  */
 class DbxMapboxInjectionStoreProviderBlock {
     dbxMapboxInjectionStore = inject(DbxMapboxInjectionStore, { skipSelf: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, decorators: [{
             type: Injectable
         }] });
 class DbxMapboxInjectionStoreInjectionBlockDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", type: DbxMapboxInjectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxMapboxInjectionStoreParentBlocker]", providers: [DbxMapboxInjectionStoreProviderBlock], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DbxMapboxInjectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxMapboxInjectionStoreParentBlocker]", providers: [DbxMapboxInjectionStoreProviderBlock], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxInjectionStoreParentBlocker]',
@@ -797,15 +759,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
 function provideMapboxInjectionStoreIfParentIsUnavailable() {
     return {
         provide: DbxMapboxInjectionStore,
-        useFactory: (parentInjector, dbxMapboxInjectionStoreInjectionBlock, dbxMapboxInjectionStore) => {
+        useFactory: (dbxMapboxInjectionStoreInjectionBlock, dbxMapboxInjectionStore) => {
             if (!dbxMapboxInjectionStore || (dbxMapboxInjectionStore && dbxMapboxInjectionStoreInjectionBlock?.dbxMapboxInjectionStore === dbxMapboxInjectionStore)) {
                 // create a new dbxMapboxInjectionStore to use
+                const parentInjector = inject(Injector);
                 const injector = Injector.create({ providers: [{ provide: DbxMapboxInjectionStore }], parent: parentInjector });
                 dbxMapboxInjectionStore = injector.get(DbxMapboxInjectionStore);
             }
             return dbxMapboxInjectionStore;
         },
-        deps: [Injector, [new Optional(), DbxMapboxInjectionStoreProviderBlock], [new Optional(), new SkipSelf(), DbxMapboxInjectionStore]]
+        deps: [
+            [new Optional(), DbxMapboxInjectionStoreProviderBlock],
+            [new Optional(), new SkipSelf(), DbxMapboxInjectionStore]
+        ]
     };
 }
 
@@ -822,8 +788,8 @@ class DbxMapboxMapDirective {
             this.dbxMapboxMapStore.setMapService(this.mapService);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", type: DbxMapboxMapDirective, isStandalone: true, selector: "[dbxMapboxMap]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DbxMapboxMapDirective, isStandalone: true, selector: "[dbxMapboxMap]", providers: [
             {
                 provide: MAP_COMPONENT_INITIALIZATION_OPTIONS,
                 useFactory: (dbxMapboxService) => dbxMapboxService.initializationOptions(),
@@ -831,7 +797,7 @@ class DbxMapboxMapDirective {
             }
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxMap]',
@@ -852,10 +818,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
 class DbxMapboxLayoutDrawerComponent {
     dbxMapboxMapStore = inject(DbxMapboxMapStore);
     drawerConfigSignal = toSignal(this.dbxMapboxMapStore.drawerContent$);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", type: DbxMapboxLayoutDrawerComponent, isStandalone: true, selector: "dbx-mapbox-layout-drawer", host: { classAttribute: "dbx-mapbox-layout-drawer" }, ngImport: i0, template: "<div>\n  <dbx-injection [config]=\"drawerConfigSignal()\"></dbx-injection>\n</div>\n", dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxMapboxLayoutDrawerComponent, isStandalone: true, selector: "dbx-mapbox-layout-drawer", host: { classAttribute: "dbx-mapbox-layout-drawer" }, ngImport: i0, template: "<div>\n  <dbx-injection [config]=\"drawerConfigSignal()\"></dbx-injection>\n</div>\n", dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-layout-drawer', host: {
                         class: 'dbx-mapbox-layout-drawer'
@@ -996,10 +962,10 @@ class DbxMapboxLayoutComponent {
         }
         this.isDrawerOpenSignal.set(open);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxMapboxLayoutComponent, isStandalone: true, selector: "dbx-mapbox-layout", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, forceHasDrawerContent: { classPropertyName: "forceHasDrawerContent", publicName: "forceHasDrawerContent", isSignal: true, isRequired: false, transformFunction: null }, drawerButtonColor: { classPropertyName: "drawerButtonColor", publicName: "drawerButtonColor", isSignal: true, isRequired: false, transformFunction: null }, openDrawer: { classPropertyName: "openDrawer", publicName: "openDrawer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawerOpenedChange: "drawerOpenedChange" }, host: { properties: { "style.--mat-sidenav-container-width": "dbxMapboxService.drawerWidth" } }, viewQueries: [{ propertyName: "drawerContainer", first: true, predicate: MatDrawerContainer, descendants: true, isSignal: true }, { propertyName: "drawerContainerElement", first: true, predicate: MatDrawerContainer, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "drawerContent", first: true, predicate: ["drawerContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container #containerElement class=\"dbx-mapbox-layout-container\" [ngClass]=\"drawerClassesSignal()\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer (openedChange)=\"drawerOpened($event)\" [opened]=\"isOpenAndHasContentSignal()\" [mode]=\"mode()\" [position]=\"positionSignal()\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"drawerClassesSignal()\">\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\" (dbxResized)=\"viewResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [dbxColor]=\"drawerButtonColor()\">\n      <mat-icon>{{ buttonIconSignal() }}</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}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button.dbx-color{color:var(--dbx-color-current, transparent);background:color-mix(in srgb,var(--dbx-bg-color-current, transparent) var(--dbx-color-bg-tone, 100%),transparent)}.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: DbxResizedDirective, selector: "[dbxResized]", outputs: ["dbxResized"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer" }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: DbxMapboxLayoutComponent, isStandalone: true, selector: "dbx-mapbox-layout", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, forceHasDrawerContent: { classPropertyName: "forceHasDrawerContent", publicName: "forceHasDrawerContent", isSignal: true, isRequired: false, transformFunction: null }, drawerButtonColor: { classPropertyName: "drawerButtonColor", publicName: "drawerButtonColor", isSignal: true, isRequired: false, transformFunction: null }, openDrawer: { classPropertyName: "openDrawer", publicName: "openDrawer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawerOpenedChange: "drawerOpenedChange" }, host: { properties: { "style.--mat-sidenav-container-width": "dbxMapboxService.drawerWidth" } }, viewQueries: [{ propertyName: "drawerContainer", first: true, predicate: MatDrawerContainer, descendants: true, isSignal: true }, { propertyName: "drawerContainerElement", first: true, predicate: MatDrawerContainer, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "drawerContent", first: true, predicate: ["drawerContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container #containerElement class=\"dbx-mapbox-layout-container\" [ngClass]=\"drawerClassesSignal()\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer (openedChange)=\"drawerOpened($event)\" [opened]=\"isOpenAndHasContentSignal()\" [mode]=\"mode()\" [position]=\"positionSignal()\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"drawerClassesSignal()\">\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\" (dbxResized)=\"viewResized($event)\">\n    <button mat-icon-button (click)=\"toggleDrawer()\" class=\"dbx-mapbox-layout-drawer-button\" [dbxColor]=\"drawerButtonColor()\">\n      <mat-icon>{{ buttonIconSignal() }}</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}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button.mat-mdc-icon-button.dbx-color{color:var(--dbx-color-current, transparent);background:color-mix(in srgb,var(--dbx-bg-color-current, transparent) var(--dbx-color-bg-tone, 100%),transparent)}.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: DbxResizedDirective, selector: "[dbxResized]", outputs: ["dbxResized"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer" }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-layout', imports: [DbxResizedDirective, NgClass, DbxMapboxLayoutDrawerComponent, MatDrawer, MatDrawerContainer, MatDrawerContent, MatIconModule, MatIconButton, DbxColorDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[style.--mat-sidenav-container-width]': 'dbxMapboxService.drawerWidth'
@@ -1037,12 +1003,7 @@ class DbxMapboxMenuComponent {
     constructor() {
         cleanSubscription(this.active$
             .pipe(switchMap((active) => {
-            if (active) {
-                return this.dbxMapboxMapStore.rightClickEvent$;
-            }
-            else {
-                return of();
-            }
+            return active ? this.dbxMapboxMapStore.rightClickEvent$ : of();
         }), filter(Boolean))
             .subscribe((event) => {
             const menu = this.matMenuTrigger.menu;
@@ -1072,10 +1033,10 @@ class DbxMapboxMenuComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: DbxMapboxMenuComponent, isStandalone: true, selector: "dbx-mapbox-menu", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.top": "posSignal().y", "style.left": "posSignal().x" }, styleAttribute: "visibility: hidden; position: fixed" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: DbxMapboxMenuComponent, isStandalone: true, selector: "dbx-mapbox-menu", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.top": "posSignal().y", "style.left": "posSignal().x" }, styleAttribute: "visibility: hidden; position: fixed" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-mapbox-menu',
@@ -1095,17 +1056,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  */
 class DbxMapboxMapStoreProviderBlock {
     dbxMapboxMapStore = inject(DbxMapboxMapStore, { skipSelf: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStoreProviderBlock });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStoreProviderBlock });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, decorators: [{
             type: Injectable
         }] });
 class DbxMapboxMapStoreInjectionBlockDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", type: DbxMapboxMapStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxMapboxStoreParentBlocker]", providers: [DbxMapboxMapStoreProviderBlock], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DbxMapboxMapStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxMapboxStoreParentBlocker]", providers: [DbxMapboxMapStoreProviderBlock], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxStoreParentBlocker]',
@@ -1123,15 +1084,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
 function provideMapboxStoreIfParentIsUnavailable() {
     return {
         provide: DbxMapboxMapStore,
-        useFactory: (parentInjector, dbxMapboxMapStoreInjectionBlock, dbxMapboxMapStore) => {
+        useFactory: (dbxMapboxMapStoreInjectionBlock, dbxMapboxMapStore) => {
             if (!dbxMapboxMapStore || (dbxMapboxMapStore && dbxMapboxMapStoreInjectionBlock?.dbxMapboxMapStore === dbxMapboxMapStore)) {
+                const parentInjector = inject(Injector);
                 // create a new dbxMapboxMapStore to use
                 const injector = Injector.create({ providers: [{ provide: DbxMapboxMapStore }], parent: parentInjector });
                 dbxMapboxMapStore = injector.get(DbxMapboxMapStore);
             }
             return dbxMapboxMapStore;
         },
-        deps: [Injector, [new Optional(), DbxMapboxMapStoreProviderBlock], [new Optional(), new SkipSelf(), DbxMapboxMapStore]]
+        deps: [
+            [new Optional(), DbxMapboxMapStoreProviderBlock],
+            [new Optional(), new SkipSelf(), DbxMapboxMapStore]
+        ]
     };
 }
 
@@ -1221,8 +1186,8 @@ class DbxMapboxMarkerComponent {
     ngOnDestroy() {
         this._dbxMapboxChangeService?.emitMarkerDestroyed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxMapboxMarkerComponent, isStandalone: true, selector: "dbx-mapbox-marker", inputs: { marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxMapboxMarkerComponent, isStandalone: true, selector: "dbx-mapbox-marker", inputs: { marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <mgl-marker [lngLat]="latLngSignal()">
       <dbx-anchor [anchor]="marker()?.anchor">
         <div class="dbx-mapbox-marker" [ngClass]="presentationCssClassSignal()">
@@ -1239,7 +1204,7 @@ class DbxMapboxMarkerComponent {
     </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: "component", type: MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "zIndex", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-marker', template: `
     <mgl-marker [lngLat]="latLngSignal()">
@@ -1268,24 +1233,19 @@ class DbxMapboxMarkersComponent {
     markersSignal = computed(() => {
         const data = this.data();
         const markerFactory = this.markerFactory();
-        if (data?.length && markerFactory) {
-            return data.map(markerFactory);
-        }
-        else {
-            return [];
-        }
+        return data?.length && markerFactory ? data.map(markerFactory) : [];
     }, ...(ngDevMode ? [{ debugName: "markersSignal" }] : /* istanbul ignore next */ []));
     trackMarkerById(index, marker) {
         return marker.id ?? `__MID__${index}_`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxMapboxMarkersComponent, isStandalone: true, selector: "dbx-mapbox-markers", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, markerFactory: { classPropertyName: "markerFactory", publicName: "markerFactory", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxMapboxMarkersComponent, isStandalone: true, selector: "dbx-mapbox-markers", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, markerFactory: { classPropertyName: "markerFactory", publicName: "markerFactory", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @for (marker of markersSignal(); track trackMarkerById($index, marker)) {
       <dbx-mapbox-marker [marker]="marker"></dbx-mapbox-marker>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxMarkersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxMarkersComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-mapbox-markers',
@@ -1316,10 +1276,10 @@ class DbxMapboxLayoutVirtualResizeSyncComponent {
     constructor() {
         cleanSubscription(this.dbxMapboxLayoutComponent.dbxMapboxMapStore.setMinimumVirtualViewportSize(this.resizedVector$));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.3", type: DbxMapboxLayoutVirtualResizeSyncComponent, isStandalone: true, selector: "[dbxMapboxLayoutVirtualResizeSync]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DbxMapboxLayoutVirtualResizeSyncComponent, isStandalone: true, selector: "[dbxMapboxLayoutVirtualResizeSync]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxLayoutVirtualResizeSync]',
@@ -1343,8 +1303,8 @@ const importsAndExports = [
     MarkerComponent
 ];
 class DbxMapboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxModule, imports: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxModule, imports: [
             //
             DbxMapboxLayoutVirtualResizeSyncComponent,
             DbxMapboxMapDirective,
@@ -1371,7 +1331,7 @@ class DbxMapboxModule {
             // ngx-mapbox-gl
             MapComponent,
             MarkerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxModule, imports: [DbxMapboxLayoutComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxModule, imports: [DbxMapboxLayoutComponent,
             DbxMapboxLayoutDrawerComponent,
             DbxMapboxInjectionComponent,
             DbxMapboxMarkerComponent,
@@ -1380,7 +1340,7 @@ class DbxMapboxModule {
             MapComponent,
             MarkerComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxMapboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxMapboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports,