@dereekb/dbx-web 12.0.2 → 12.0.4

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

@@ -1,15 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Directive, Injector, Optional, SkipSelf, output, viewChild, ElementRef, input, signal, computed, effect, NgModule, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Directive, Injector, Optional, SkipSelf, 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 { LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, diffLatLngBoundPoints, latLngBoundCenterPoint, addLatLngPoints, isSameLatLngPoint, isSameVector, vectorMinimumSizeResizeFunction, isSameLatLngBound, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, latLngPoint, isNotFalse, DestroyFunctionObject, getValueFromGetter, pushItemOrArrayItemsIntoArray, spaceSeparatedCssClasses } from '@dereekb/util';
+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 * as MapboxGl from 'mapbox-gl';
 import { bounds } from '@placemarkio/geo-viewport';
 import { DbxInjectionArrayComponent, DbxInjectionComponent, AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
-import * as i1$1 from 'ngx-mapbox-gl';
-import { MapService, MapComponent, NgxMapboxGLModule } from 'ngx-mapbox-gl';
+import { MapService, MapComponent, MAP_COMPONENT_INITIALIZATION_OPTIONS, MarkerComponent, provideMapboxGL } from 'ngx-mapbox-gl';
 import { DbxColorDirective, disableRightClickInCdkBackdrop, DbxAnchorComponent } from '@dereekb/dbx-web';
 import * as i1 from 'angular-resize-event-package';
 import { AngularResizeEventModule } from 'angular-resize-event-package';
@@ -44,6 +43,13 @@ class DbxMapboxService {
     get mapboxMapStoreTimerRefreshPeriod() {
         return this._config.defaultStoreRefreshPeriod ?? DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD;
     }
+    initializationOptions() {
+        return {
+            style: this.defaultStyle,
+            zoom: this.defaultZoom,
+            center: latLngPoint(this.defaultCenter)
+        };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxService });
 }
@@ -801,21 +807,30 @@ class DbxMapboxMapDirective {
     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;
-        this.mapboxMap.zoom = this.dbxMapboxService.defaultZoom;
-        this.mapboxMap.center = latLngPoint(this.dbxMapboxService.defaultCenter);
         if (this.dbxMapboxMapStore) {
             this.dbxMapboxMapStore.setMapService(this.mapService);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxMapboxMapDirective, isStandalone: true, selector: "[dbxMapboxMap]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxMapboxMapDirective, isStandalone: true, selector: "[dbxMapboxMap]", providers: [
+            {
+                provide: MAP_COMPONENT_INITIALIZATION_OPTIONS,
+                useFactory: (dbxMapboxService) => dbxMapboxService.initializationOptions(),
+                deps: [DbxMapboxService]
+            }
+        ], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxMap]',
+                    providers: [
+                        {
+                            provide: MAP_COMPONENT_INITIALIZATION_OPTIONS,
+                            useFactory: (dbxMapboxService) => dbxMapboxService.initializationOptions(),
+                            deps: [DbxMapboxService]
+                        }
+                    ],
                     standalone: true
                 }]
         }] });
@@ -859,15 +874,10 @@ class DbxMapboxLayoutComponent {
     forceHasDrawerContent = input(undefined);
     drawerButtonColor = input('background', { transform: (x) => x ?? 'background' });
     openDrawer = input(undefined); // input open/close drawer config
-    toggleDrawerSignal = signal(undefined); // Signal to toggle the drawer
-    isDrawerOpenSignal = computed(() => {
-        const toggleDrawer = this.toggleDrawerSignal();
-        let drawerOpened = toggleDrawer;
-        if (toggleDrawer == null) {
-            drawerOpened = this.openDrawer();
-        }
-        return drawerOpened;
-    });
+    isDrawerOpenSignal = signal(undefined); // Signal to toggle the drawer
+    _openDrawerEffect = effect(() => {
+        this.isDrawerOpenSignal.set(this.openDrawer());
+    }, { allowSignalWrites: true });
     storeHasDrawerContent = toSignal(this.dbxMapboxMapStore.hasDrawerContent$);
     drawerHasContentSignal = computed(() => this.forceHasDrawerContent() ?? this.storeHasDrawerContent());
     refreshContentMargins$ = this._refreshContentMargins;
@@ -958,22 +968,22 @@ class DbxMapboxLayoutComponent {
         this._reszieSyncSub.destroy();
         this._toggleSyncSub.destroy();
     }
-    toggleDrawer(open) {
-        if (open == null) {
-            open = !this.isDrawerOpenSignal();
-        }
-        this.toggleDrawerSignal.set(open);
-    }
     viewResized(event) {
         this._viewResized.next(event);
     }
     drawerOpened(opened) {
-        const currentToggleState = this.toggleDrawerSignal();
+        const currentToggleState = this.isDrawerOpenSignal();
         if (currentToggleState !== opened) {
             this.toggleDrawer(opened); // sync with drawer toggling
             this.drawerOpenedChange.emit(opened);
         }
     }
+    toggleDrawer(open) {
+        if (open == null) {
+            open = !this.isDrawerOpenSignal();
+        }
+        this.isDrawerOpenSignal.set(open);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", 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" }, 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\" (resized)=\"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}.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: "ngmodule", type: AngularResizeEventModule }, { kind: "directive", type: i1.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1006,8 +1016,9 @@ class DbxMapboxMenuComponent extends AbstractSubscriptionDirective {
     });
     _menuCloseSub = new SubscriptionObject();
     _preventRightClick = new DestroyFunctionObject();
+    active$ = toObservable(this.active);
     ngOnInit() {
-        this.sub = toObservable(this.active)
+        this.sub = this.active$
             .pipe(switchMap((active) => {
             if (active) {
                 return this.dbxMapboxMapStore.rightClickEvent$;
@@ -1189,47 +1200,44 @@ class DbxMapboxMarkerComponent {
     });
     ngOnDestroy() {
         this._dbxMapboxChangeService?.emitMarkerDestroyed();
+        console.log('destroyed?');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxMapboxMarkerComponent, isStandalone: true, selector: "dbx-mapbox-marker", inputs: { marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (marker()) {
-      <mgl-marker [lngLat]="latLngSignal()">
-        <dbx-anchor [anchor]="marker()?.anchor">
-          <div class="dbx-mapbox-marker" [ngClass]="presentationCssClassSignal()">
-            <div class="dbx-mapbox-marker-icon-content" [ngStyle]="styleSignal()">
-              @if (marker()?.icon) {
-                <mat-icon>{{ marker()?.icon }}</mat-icon>
-              }
-            </div>
-            @if (marker()?.label) {
-              <div class="dbx-mapbox-marker-label dbx-outlined-text">{{ marker()?.label }}</div>
+    <mgl-marker [lngLat]="latLngSignal()">
+      <dbx-anchor [anchor]="marker()?.anchor">
+        <div class="dbx-mapbox-marker" [ngClass]="presentationCssClassSignal()">
+          <div class="dbx-mapbox-marker-icon-content" [ngStyle]="styleSignal()">
+            @if (marker()?.icon) {
+              <mat-icon>{{ marker()?.icon }}</mat-icon>
             }
           </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: "ngmodule", type: NgxMapboxGLModule }, { kind: "component", type: i1$1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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 });
+          @if (marker()?.label) {
+            <div class="dbx-mapbox-marker-label dbx-outlined-text">{{ marker()?.label }}</div>
+          }
+        </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: "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: i2.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: "18.2.13", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-marker', template: `
-    @if (marker()) {
-      <mgl-marker [lngLat]="latLngSignal()">
-        <dbx-anchor [anchor]="marker()?.anchor">
-          <div class="dbx-mapbox-marker" [ngClass]="presentationCssClassSignal()">
-            <div class="dbx-mapbox-marker-icon-content" [ngStyle]="styleSignal()">
-              @if (marker()?.icon) {
-                <mat-icon>{{ marker()?.icon }}</mat-icon>
-              }
-            </div>
-            @if (marker()?.label) {
-              <div class="dbx-mapbox-marker-label dbx-outlined-text">{{ marker()?.label }}</div>
+    <mgl-marker [lngLat]="latLngSignal()">
+      <dbx-anchor [anchor]="marker()?.anchor">
+        <div class="dbx-mapbox-marker" [ngClass]="presentationCssClassSignal()">
+          <div class="dbx-mapbox-marker-icon-content" [ngStyle]="styleSignal()">
+            @if (marker()?.icon) {
+              <mat-icon>{{ marker()?.icon }}</mat-icon>
             }
           </div>
-        </dbx-anchor>
-      </mgl-marker>
-    }
-  `, imports: [NgxMapboxGLModule, DbxAnchorComponent, MatIconModule, NgStyle, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, standalone: 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"] }]
+          @if (marker()?.label) {
+            <div class="dbx-mapbox-marker-label dbx-outlined-text">{{ marker()?.label }}</div>
+          }
+        </div>
+      </dbx-anchor>
+    </mgl-marker>
+  `, imports: [MarkerComponent, DbxAnchorComponent, MatIconModule, NgStyle, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, standalone: 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"] }]
         }] });
 
 /**
@@ -1249,7 +1257,7 @@ class DbxMapboxMarkersComponent {
         }
     });
     trackMarkerById(index, marker) {
-        return marker.id;
+        return marker.id ?? `__MID__${index}_`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: `
@@ -1311,8 +1319,9 @@ const importsAndExports = [
     DbxMapboxMarkerComponent,
     DbxMapboxMarkersComponent,
     DbxMapboxMapStoreInjectionBlockDirective,
-    // modules
-    NgxMapboxGLModule
+    // ngx-mapbox-gl
+    MapComponent,
+    MarkerComponent
 ];
 class DbxMapboxModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1327,8 +1336,9 @@ class DbxMapboxModule {
             DbxMapboxMarkerComponent,
             DbxMapboxMarkersComponent,
             DbxMapboxMapStoreInjectionBlockDirective,
-            // modules
-            NgxMapboxGLModule], exports: [
+            // ngx-mapbox-gl
+            MapComponent,
+            MarkerComponent], exports: [
             //
             DbxMapboxLayoutVirtualResizeSyncComponent,
             DbxMapboxMapDirective,
@@ -1339,17 +1349,17 @@ class DbxMapboxModule {
             DbxMapboxMarkerComponent,
             DbxMapboxMarkersComponent,
             DbxMapboxMapStoreInjectionBlockDirective,
-            // modules
-            NgxMapboxGLModule] });
+            // ngx-mapbox-gl
+            MapComponent,
+            MarkerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxModule, imports: [DbxMapboxLayoutComponent,
             DbxMapboxLayoutDrawerComponent,
             DbxMapboxInjectionComponent,
             DbxMapboxMarkerComponent,
             DbxMapboxMarkersComponent,
-            // modules
-            NgxMapboxGLModule, 
-            // modules
-            NgxMapboxGLModule] });
+            // ngx-mapbox-gl
+            MapComponent,
+            MarkerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxModule, decorators: [{
             type: NgModule,
@@ -1376,7 +1386,7 @@ function provideDbxMapbox(config) {
         // service
         DbxMapboxService,
         // ngxMapboxGL
-        importProvidersFrom(NgxMapboxGLModule.withConfig(ngxMapboxGLModuleConfig))
+        provideMapboxGL(ngxMapboxGLModuleConfig)
     ];
     return makeEnvironmentProviders(providers);
 }