@dereekb/dbx-web 11.1.7 → 12.0.0

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

@@ -1,27 +1,23 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Directive, Injector, Optional, SkipSelf, EventEmitter, ElementRef, Output, ViewChild, Input, NgZone, ChangeDetectorRef, NgModule } 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 { 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, 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 { 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 { ComponentStore } from '@ngrx/component-store';
 import * as MapboxGl from 'mapbox-gl';
 import { bounds } from '@placemarkio/geo-viewport';
-import * as i1 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, safeMarkForCheck, DbxInjectionComponentModule } from '@dereekb/dbx-core';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4$1 from 'ngx-mapbox-gl';
+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 * as i2 from '@angular/material/sidenav';
-import { MatDrawerContainer, MatSidenavModule } from '@angular/material/sidenav';
-import * as i3 from '@dereekb/dbx-web';
-import { disableRightClickInCdkBackdrop, DbxStyleLayoutModule, DbxRouterAnchorModule } from '@dereekb/dbx-web';
-import * as i4 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/icon';
+import { DbxColorDirective, disableRightClickInCdkBackdrop, DbxAnchorComponent } from '@dereekb/dbx-web';
+import * as i1 from 'angular-resize-event-package';
+import { AngularResizeEventModule } from 'angular-resize-event-package';
+import { MatDrawerContainer, MatDrawer, MatDrawerContent } from '@angular/material/sidenav';
+import { NgClass, NgStyle } from '@angular/common';
+import { MatIconButton } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from 'angular-resize-event';
-import { AngularResizeEventModule } from 'angular-resize-event';
 import { MatMenuTrigger } from '@angular/material/menu';
 
 class DbxMapboxConfig {
@@ -48,14 +44,11 @@ class DbxMapboxService {
     get mapboxMapStoreTimerRefreshPeriod() {
         return this._config.defaultStoreRefreshPeriod ?? DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD;
     }
-    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' });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxService, decorators: [{
+            type: Injectable
         }] });
 
 function mapboxViewportBoundFunction(config) {
@@ -559,12 +552,16 @@ class DbxMapboxMapStore extends ComponentStore {
     }), 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));
+        let result = null;
+        if (bound != null) {
+            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 };
+            result = this.latLngBound(sw, ne);
+        }
+        return result;
+    }), filterMaybe())))), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
     rawBound$ = this.whenInitialized$.pipe(switchMap(() => {
         return this.boundRefreshSettings$.pipe(switchMap((settings) => {
             const { throttle: throttleMs, refreshType } = settings;
@@ -608,8 +605,8 @@ class DbxMapboxMapStore extends ComponentStore {
     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));
+    drawerContent$ = this.state$.pipe(map((x) => x.drawerContent), distinctUntilChanged(), shareReplay(1));
+    hasDrawerContent$ = this.drawerContent$.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));
@@ -628,14 +625,34 @@ class DbxMapboxMapStore extends ComponentStore {
     _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 });
+    clearDrawerContent = this.updater((state) => setDrawerContent(state, undefined));
+    setDrawerContent = this.updater(setDrawerContent);
+    // MARK: Compat
+    /**
+     * @deprecated use drawerContent$ instead.
+     */
+    content$ = this.drawerContent$;
+    /**
+     * @deprecated use hasDrawerContent$ instead.
+     */
+    hasContent$ = this.hasDrawerContent$;
+    /**
+     * @deprecated use clearDrawerContent instead.
+     */
+    clearContent = this.updater((state) => setDrawerContent(state, undefined));
+    /**
+     * @deprecated use setDrawerContent instead.
+     */
+    setContent = this.updater(setDrawerContent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStore, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
+function setDrawerContent(state, drawerContent) {
+    return { ...state, drawerContent, content: drawerContent };
+}
 
 /**
  * Provided in the parent component that allows children to emit events related to their lifecycles.
@@ -662,10 +679,10 @@ class DbxMapboxChangeService {
         this._applyChanges.complete();
         this._applyChangesSub.destroy();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxChangeService, providedIn: null });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxChangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxChangeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: null
@@ -686,12 +703,12 @@ class DbxMapboxInjectionStore extends ComponentStore {
     // 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStore });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStore, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 function updateDbxMapboxMapInjectionStoreStateWithInjectionConfig(state, config) {
     const map = new Map(state.map).set(config.key, config);
     return { ...state, map };
@@ -711,20 +728,22 @@ function updateDbxMapboxMapInjectionStoreStateWithRemovedKey(state, key) {
  */
 class DbxMapboxInjectionComponent {
     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: i1.DbxInjectionArrayComponent, selector: "dbx-injection-array", inputs: ["entries"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    entriesSignal = toSignal(this.dbxMapboxMapKeyInjectionStore.allInjectionConfigs$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "16.2.12", ngImport: i0, type: DbxMapboxInjectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-mapbox-injection',
                     template: `
-    <dbx-injection-array [entries]="entries$ | async"></dbx-injection-array>
+    <dbx-injection-array [entries]="entriesSignal()"></dbx-injection-array>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    imports: [DbxInjectionArrayComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -733,21 +752,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStoreProviderBlock, decorators: [{
             type: Injectable
         }] });
 class DbxMapboxInjectionStoreInjectionBlockDirective {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxMapboxInjectionStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxMapboxInjectionStoreParentBlocker]", providers: [DbxMapboxInjectionStoreProviderBlock], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxInjectionStoreInjectionBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxInjectionStoreParentBlocker]',
-                    providers: [DbxMapboxInjectionStoreProviderBlock]
+                    providers: [DbxMapboxInjectionStoreProviderBlock],
+                    standalone: true
                 }]
         }] });
 /**
@@ -783,19 +803,20 @@ class DbxMapboxMapDirective {
     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.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: "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 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxMapboxMap]'
+                    selector: '[dbxMapboxMap]',
+                    standalone: true
                 }]
         }] });
 
@@ -804,15 +825,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class DbxMapboxLayoutDrawerComponent {
     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" }] });
+    drawerConfigSignal = toSignal(this.dbxMapboxMapStore.drawerContent$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: "16.2.12", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
+                    }, imports: [DbxInjectionComponent], standalone: true, template: "<div>\n  <dbx-injection [config]=\"drawerConfigSignal()\"></dbx-injection>\n</div>\n" }]
         }] });
 
 /**
@@ -822,65 +843,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *
  * Requires a TwoColumnsContextStore to be provided.
  */
-class DbxMapboxLayoutComponent extends AbstractSubscriptionDirective {
+class DbxMapboxLayoutComponent {
     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]) => {
+    _viewResized = new Subject();
+    _refreshContentMargins = new Subject();
+    drawerOpenedChange = output();
+    drawerContainer = viewChild.required(MatDrawerContainer);
+    drawerContainerElement = viewChild.required(MatDrawerContainer, { read: (ElementRef) });
+    drawerContent = viewChild.required('drawerContent');
+    side = input('right', { transform: (x) => x || 'right' });
+    mode = input('side', { transform: (x) => x || 'side' });
+    /**
+     * Forces the drawer to assume the drawer has content if true, or assume it has no content if false.
+     */
+    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;
+    });
+    storeHasDrawerContent = toSignal(this.dbxMapboxMapStore.hasDrawerContent$);
+    drawerHasContentSignal = computed(() => this.forceHasDrawerContent() ?? this.storeHasDrawerContent());
+    refreshContentMargins$ = this._refreshContentMargins;
+    isOpenAndHasContentSignal = computed(() => {
+        return this.drawerHasContentSignal() && this.isDrawerOpenSignal();
+    });
+    viewResized$ = this._viewResized.asObservable();
+    side$ = toObservable(this.side);
+    mode$ = toObservable(this.mode);
+    drawerHasContent$ = toObservable(this.drawerHasContentSignal);
+    isOpenAndHasContent$ = toObservable(this.isOpenAndHasContentSignal);
+    positionSignal = computed(() => {
+        return this.side() === 'right' ? 'end' : 'start';
+    });
+    drawerClassesSignal = computed(() => {
+        const side = this.side();
+        const hasContent = this.drawerHasContentSignal();
+        const isOpen = this.isDrawerOpenSignal(); // NOTE: isOpenAndHasContentSignal is not used here
+        return (hasContent ? 'has-drawer-content' : 'no-drawer-content') + ` ${side}-drawer ` + (isOpen ? 'open-drawer' : '');
+    });
+    buttonIconSignal = computed(() => {
+        const side = this.side();
+        const opened = this.isDrawerOpenSignal(); // NOTE: isOpenAndHasContentSignal is not used here
         let icons = ['chevron_right', 'chevron_left'];
         if (side === 'left') {
             icons = icons.reverse();
         }
         return opened ? icons[0] : icons[1];
-    }));
+    });
+    _reszieSyncSub = new SubscriptionObject();
+    _toggleSyncSub = new SubscriptionObject();
     ngOnInit() {
-        this.sub = this.side$.pipe(switchMap(() => this._resized.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
+        this._reszieSyncSub.subscription = this.side$.pipe(switchMap(() => this._viewResized.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
             this.dbxMapboxMapStore.mapInstance$.subscribe((x) => {
                 x.resize();
                 // side changed
                 if (reason === 's') {
-                    setTimeout(() => {
-                        this._updateMargins.next();
-                    });
+                    this._refreshContentMargins.next();
                 }
             });
         });
         let init = false;
-        this._toggleSub.subscription = this.mode$
+        this._toggleSyncSub.subscription = this.mode$
             .pipe(switchMap((mode) => {
             let obs;
             if (mode === 'push') {
-                obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(tap(([opened]) => {
-                    let { right } = this.drawerContainer._contentMargins;
-                    this.drawerContainer.updateContentMargins();
+                obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this.refreshContentMargins$]).pipe(tap(([opened]) => {
+                    const drawerContainer = this.drawerContainer();
+                    let { right } = drawerContainer._contentMargins;
+                    drawerContainer.updateContentMargins();
                     setTimeout(() => {
                         const flip = opened ? 1 : -1;
                         if (opened) {
-                            right = this.drawerContainer._contentMargins.right;
+                            right = drawerContainer._contentMargins.right;
                         }
                         right = (right || 0) * flip;
-                        const element = this.content.nativeElement;
+                        const element = this.drawerContent().nativeElement;
                         const width = element.clientWidth;
                         const margin = {
                             leftMargin: 0,
@@ -899,9 +943,9 @@ class DbxMapboxLayoutComponent extends AbstractSubscriptionDirective {
                 }));
             }
             else {
-                obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(switchMap((_) => this.dbxMapboxMapStore.mapInstance$), tap((x) => {
-                    this.drawerContainer.updateContentMargins();
-                    x.triggerRepaint();
+                obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this._refreshContentMargins.pipe(delay(0))]).pipe(switchMap((_) => this.dbxMapboxMapStore.mapInstance$), tap((map) => {
+                    this.drawerContainer().updateContentMargins();
+                    map.triggerRepaint();
                 }));
             }
             return obs;
@@ -909,82 +953,34 @@ class DbxMapboxLayoutComponent extends AbstractSubscriptionDirective {
             .subscribe();
     }
     ngOnDestroy() {
-        super.ngOnDestroy();
-        this.openedChange.complete();
-        this._resized.complete();
-        this._updateMargins.complete();
-        this._side.complete();
-        this._isOpen.complete();
-        this._color.complete();
-        this._toggleSub.destroy();
-        this._forceHasContent.complete();
+        this._viewResized.complete();
+        this._refreshContentMargins.complete();
+        this._reszieSyncSub.destroy();
+        this._toggleSyncSub.destroy();
     }
     toggleDrawer(open) {
         if (open == null) {
-            open = !this._isOpen.value;
-        }
-        this._isOpen.next(open);
-    }
-    set side(side) {
-        if (side != null) {
-            this._side.next(side);
-        }
-    }
-    set mode(mode) {
-        if (mode != null) {
-            this._mode.next(mode);
-        }
-    }
-    set opened(opened) {
-        if (opened != null) {
-            this._isOpen.next(opened);
+            open = !this.isDrawerOpenSignal();
         }
+        this.toggleDrawerSignal.set(open);
     }
-    set hasContent(hasContent) {
-        if (hasContent != null) {
-            this._forceHasContent.next(hasContent);
-        }
-    }
-    set drawerButtonColor(color) {
-        this._color.next(color);
-    }
-    onResized(event) {
-        this._resized.next(event);
+    viewResized(event) {
+        this._viewResized.next(event);
     }
-    onOpened(opened) {
-        this.openedChange.next(opened);
-        if (this._isOpen.value !== opened) {
-            this.openedChange.next(opened);
+    drawerOpened(opened) {
+        const currentToggleState = this.toggleDrawerSignal();
+        if (currentToggleState !== opened) {
+            this.toggleDrawer(opened); // sync with drawer toggling
+            this.drawerOpenedChange.emit(opened);
         }
     }
-    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" }] });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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"] }]
-        }], propDecorators: { openedChange: [{
-                type: Output
-            }], containerElement: [{
-                type: ViewChild,
-                args: [MatDrawerContainer, { read: ElementRef }]
-            }], drawerContainer: [{
-                type: ViewChild,
-                args: [MatDrawerContainer]
-            }], content: [{
-                type: ViewChild,
-                args: ['content', { read: ElementRef, static: true }]
-            }], side: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], opened: [{
-                type: Input
-            }], hasContent: [{
-                type: Input
-            }], drawerButtonColor: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'dbx-mapbox-layout', imports: [AngularResizeEventModule, NgClass, DbxMapboxLayoutDrawerComponent, MatDrawer, MatDrawerContainer, MatDrawerContent, MatIconModule, MatIconButton, DbxColorDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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"] }]
+        }] });
 
 /**
  * Directive that connects a host MatMenuTrigger to a DbxMapboxMapStore and listens for right-clicks on the map.
@@ -994,20 +990,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 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);
+    active = input(true, { transform: isNotFalse });
+    openCloseSignal = signal(undefined);
+    posSignal = signal({ x: `0`, y: `0` });
+    _openCloseEffect = effect(() => {
+        const openOrClose = this.openCloseSignal();
+        switch (openOrClose) {
+            case true:
+                this.matMenuTrigger.openMenu();
+                break;
+            case false:
+                this.matMenuTrigger.closeMenu();
+                break;
+        }
+    });
     _menuCloseSub = new SubscriptionObject();
     _preventRightClick = new DestroyFunctionObject();
-    get pos() {
-        return this._pos;
-    }
-    set active(active) {
-        this._active.next(active ?? true);
-    }
     ngOnInit() {
-        this.sub = this._active
+        this.sub = toObservable(this.active)
             .pipe(switchMap((active) => {
             if (active) {
                 return this.dbxMapboxMapStore.rightClickEvent$;
@@ -1022,16 +1022,15 @@ class DbxMapboxMenuComponent extends AbstractSubscriptionDirective {
             if (menu && buttonEvent) {
                 buttonEvent.preventDefault();
                 // update position of this component for menu to open at
-                this._pos = {
+                this.posSignal.set({
                     x: `${buttonEvent.x}px`,
                     y: `${buttonEvent.y}px`
-                };
-                safeMarkForCheck(this.cdRef);
+                });
                 // open menu
-                this.ngZone.run(() => this.matMenuTrigger.openMenu());
+                this.matMenuTrigger.openMenu();
                 // prevent right clicks in the cdkOverlay while the menu is open
                 this._preventRightClick.destroy = disableRightClickInCdkBackdrop(undefined, () => {
-                    this.ngZone.run(() => this.matMenuTrigger.closeMenu());
+                    this.matMenuTrigger.closeMenu();
                 });
             }
         });
@@ -1042,52 +1041,51 @@ class DbxMapboxMenuComponent extends AbstractSubscriptionDirective {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this._active.complete();
         this._menuCloseSub.destroy();
         this._preventRightClick.destroy();
         if (this.matMenuTrigger) {
             this.matMenuTrigger.closeMenu();
         }
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", 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" }, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-mapbox-menu',
                     template: '',
                     host: {
                         style: 'visibility: hidden; position: fixed',
-                        '[style.top]': 'pos.y',
-                        '[style.left]': 'pos.x'
+                        '[style.top]': 'posSignal().y',
+                        '[style.left]': 'posSignal().x'
                     },
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { active: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Token used by provideMapboxStoreIfDoesNotExist() to prevent injecting a parent DbxMapboxMapStore into the child view.
  */
 class 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStoreProviderBlock });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStoreProviderBlock, decorators: [{
             type: Injectable
         }] });
 class DbxMapboxMapStoreInjectionBlockDirective {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxMapboxMapStoreInjectionBlockDirective, isStandalone: true, selector: "[dbxMapboxStoreParentBlocker]", providers: [DbxMapboxMapStoreProviderBlock], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMapStoreInjectionBlockDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxMapboxStoreParentBlocker]',
-                    providers: [DbxMapboxMapStoreProviderBlock]
+                    providers: [DbxMapboxMapStoreProviderBlock],
+                    standalone: true
                 }]
         }] });
 /**
@@ -1115,31 +1113,18 @@ function provideMapboxStoreIfParentIsUnavailable() {
 class DbxMapboxMarkerComponent {
     _dbxMapboxChangeService = inject(DbxMapboxChangeService, { optional: true });
     static _latLngPoint = latLngPointFunction({ wrap: true });
-    _marker;
-    get marker() {
-        return this._marker;
-    }
-    set marker(marker) {
-        this._marker = marker;
-    }
-    get latLng() {
-        const input = this._marker?.latLng;
-        return input ? DbxMapboxMarkerComponent._latLngPoint(input) : undefined;
-    }
-    get anchor() {
-        return this._marker?.anchor;
-    }
-    get label() {
-        return this._marker?.label;
-    }
-    get icon() {
-        return this._marker?.icon;
-    }
-    get style() {
+    marker = input.required();
+    latLngSignal = computed(() => {
+        const marker = this.marker();
+        return marker?.latLng ? DbxMapboxMarkerComponent._latLngPoint(marker.latLng) : undefined;
+    });
+    presentationSignal = computed(() => this.marker()?.presentation ?? 'normal');
+    styleSignal = computed(() => {
+        const marker = this.marker();
         let width = 0;
         let height = 0;
-        const size = this._marker?.size || 'medium';
-        switch (this.presentation) {
+        const size = marker?.size || 'medium';
+        switch (marker?.presentation) {
             case 'normal':
                 if (typeof size === 'number') {
                     width = size;
@@ -1167,10 +1152,10 @@ class DbxMapboxMarkerComponent {
         if (!height) {
             height = width;
         }
-        const imageInput = this._marker?.image;
+        const imageInput = marker?.image;
         const image = imageInput ? (typeof imageInput === 'string' ? imageInput : getValueFromGetter(imageInput, width)) : undefined;
         const style = {
-            ...this._marker?.style,
+            ...marker?.style,
             'background-image': image
         };
         if (width && height) {
@@ -1179,126 +1164,122 @@ class DbxMapboxMarkerComponent {
             style['font-size'] = width + 'px';
         }
         return style;
-    }
-    get presentation() {
-        return this._marker?.presentation ?? 'normal';
-    }
-    get presentationClasses() {
-        const presentation = this.presentation;
-        const markerClasses = this._marker?.markerClasses;
-        let cssClasses = '';
+    });
+    presentationCssClassSignal = computed(() => {
+        const marker = this.marker();
+        const presentation = this.presentationSignal();
+        const markerClasses = marker?.markerClasses;
+        let cssClasses = [];
         switch (presentation) {
             case 'chip':
             case 'chip-small':
-                cssClasses = 'dbx-mapbox-marker-chip dbx-chip mat-standard-chip dbx-bg';
+                cssClasses = ['dbx-mapbox-marker-chip', 'dbx-chip', 'mat-standard-chip', 'dbx-bg'];
                 if (presentation === 'chip-small') {
-                    cssClasses += ' dbx-chip-small';
+                    cssClasses.push('dbx-chip-small');
                 }
                 break;
         }
-        if (!this.icon) {
-            cssClasses += ' dbx-mapbox-marker-no-icon';
+        if (!marker?.icon) {
+            cssClasses.push('dbx-mapbox-marker-no-icon');
         }
         if (markerClasses) {
-            cssClasses += ` ${markerClasses}`;
+            pushItemOrArrayItemsIntoArray(cssClasses, markerClasses);
         }
-        return cssClasses;
-    }
+        return spaceSeparatedCssClasses(cssClasses);
+    });
     ngOnDestroy() {
         this._dbxMapboxChangeService?.emitMarkerDestroyed();
     }
-    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">
-          <div class="dbx-mapbox-marker-icon-content" [ngStyle]="style">
-            <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+    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>
+            }
           </div>
-          <div class="dbx-mapbox-marker-label dbx-outlined-text" *ngIf="label">{{ 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: "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 });
+        </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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-marker', template: `
-    <mgl-marker *ngIf="marker" [lngLat]="latLng">
-      <dbx-anchor [anchor]="anchor">
-        <div class="dbx-mapbox-marker" [ngClass]="presentationClasses">
-          <div class="dbx-mapbox-marker-icon-content" [ngStyle]="style">
-            <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+    @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>
+            }
           </div>
-          <div class="dbx-mapbox-marker-label dbx-outlined-text" *ngIf="label">{{ label }}</div>
-        </div>
-      </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"] }]
-        }], propDecorators: { marker: [{
-                type: Input
-            }] } });
+        </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"] }]
+        }] });
 
 /**
  * Component used to render a set of DbxMapboxMarker values from the input data and marker factory.
  */
 class DbxMapboxMarkersComponent {
-    _data = new BehaviorSubject(undefined);
-    _markerFactory = new BehaviorSubject(undefined);
-    markers$ = combineLatest([this._data.pipe(distinctUntilChanged()), this._markerFactory.pipe(distinctUntilChanged())]).pipe(map(([data, markerFactory]) => {
+    data = input.required();
+    markerFactory = input.required();
+    markersSignal = computed(() => {
+        const data = this.data();
+        const markerFactory = this.markerFactory();
         if (data?.length && markerFactory) {
             return data.map(markerFactory);
         }
         else {
             return [];
         }
-    }), shareReplay(1));
+    });
     trackMarkerById(index, marker) {
         return marker.id;
     }
-    get data() {
-        return this._data.value;
-    }
-    set data(data) {
-        this._data.next(data || []);
-    }
-    get markerFactory() {
-        return this._markerFactory.value;
+    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: `
+    @for (marker of markersSignal(); track trackMarkerById($index, marker)) {
+      <dbx-mapbox-marker [marker]="marker"></dbx-mapbox-marker>
     }
-    set markerFactory(markerFactory) {
-        this._markerFactory.next(markerFactory);
-    }
-    ngOnDestroy() {
-        this._data.complete();
-        this._markerFactory.complete();
-    }
-    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: 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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxMarkersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMarkersComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-mapbox-markers',
                     template: `
-    <dbx-mapbox-marker *ngFor="let marker of markers$ | async; trackBy: trackMarkerById" [marker]="marker"></dbx-mapbox-marker>
+    @for (marker of markersSignal(); track trackMarkerById($index, marker)) {
+      <dbx-mapbox-marker [marker]="marker"></dbx-mapbox-marker>
+    }
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    imports: [DbxMapboxMarkerComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], markerFactory: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Directive that synchronizes a map's virtual size with the size of the element.
  */
 class DbxMapboxLayoutVirtualResizeSyncComponent extends AbstractSubscriptionDirective {
     dbxMapboxLayoutComponent = inject(DbxMapboxLayoutComponent, { host: true });
-    resizedVector$ = this.dbxMapboxLayoutComponent.resized$.pipe(map(() => {
-        const element = this.dbxMapboxLayoutComponent.containerElement.nativeElement;
+    resizedVector$ = this.dbxMapboxLayoutComponent.viewResized$.pipe(map(() => {
+        const element = this.dbxMapboxLayoutComponent.drawerContainerElement()?.nativeElement;
         const { clientWidth, clientHeight } = element;
         return {
             x: clientWidth,
@@ -1306,19 +1287,20 @@ class DbxMapboxLayoutVirtualResizeSyncComponent extends AbstractSubscriptionDire
         };
     }), distinctUntilChanged(isSameVector), shareReplay(1));
     ngOnInit() {
-        this.sub = this.dbxMapboxLayoutComponent.dbxMapboxMapStore.setMinimumVirtualViewportSize(this.resizedVector$) ?? undefined;
+        this.sub = this.dbxMapboxLayoutComponent.dbxMapboxMapStore.setMinimumVirtualViewportSize(this.resizedVector$);
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxMapboxLayoutVirtualResizeSyncComponent, isStandalone: true, selector: "[dbxMapboxLayoutVirtualResizeSync]", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxLayoutVirtualResizeSyncComponent, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxMapboxLayoutVirtualResizeSync]'
+                    selector: '[dbxMapboxLayoutVirtualResizeSync]',
+                    standalone: true
                 }]
         }] });
 
-const declarations = [
+const importsAndExports = [
     //
     DbxMapboxLayoutVirtualResizeSyncComponent,
     DbxMapboxMapDirective,
@@ -1328,22 +1310,13 @@ const declarations = [
     DbxMapboxMenuComponent,
     DbxMapboxMarkerComponent,
     DbxMapboxMarkersComponent,
-    DbxMapboxMapStoreInjectionBlockDirective
+    DbxMapboxMapStoreInjectionBlockDirective,
+    // modules
+    NgxMapboxGLModule
 ];
 class DbxMapboxModule {
-    static forRoot(config) {
-        return {
-            ngModule: DbxMapboxModule,
-            providers: [
-                {
-                    provide: DbxMapboxConfig,
-                    useValue: config
-                }
-            ]
-        };
-    }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxModule, imports: [
             //
             DbxMapboxLayoutVirtualResizeSyncComponent,
             DbxMapboxMapDirective,
@@ -1353,16 +1326,8 @@ class DbxMapboxModule {
             DbxMapboxMenuComponent,
             DbxMapboxMarkerComponent,
             DbxMapboxMarkersComponent,
-            DbxMapboxMapStoreInjectionBlockDirective], imports: [
-            //
-            CommonModule,
-            MatSidenavModule,
-            DbxStyleLayoutModule,
-            DbxInjectionComponentModule,
-            MatButtonModule,
-            MatIconModule,
-            AngularResizeEventModule,
-            DbxRouterAnchorModule,
+            DbxMapboxMapStoreInjectionBlockDirective,
+            // modules
             NgxMapboxGLModule], exports: [
             //
             DbxMapboxLayoutVirtualResizeSyncComponent,
@@ -1373,39 +1338,49 @@ class DbxMapboxModule {
             DbxMapboxMenuComponent,
             DbxMapboxMarkerComponent,
             DbxMapboxMarkersComponent,
-            DbxMapboxMapStoreInjectionBlockDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, imports: [
-            //
-            CommonModule,
-            MatSidenavModule,
-            DbxStyleLayoutModule,
-            DbxInjectionComponentModule,
-            MatButtonModule,
-            MatIconModule,
-            AngularResizeEventModule,
-            DbxRouterAnchorModule,
+            DbxMapboxMapStoreInjectionBlockDirective,
+            // modules
+            NgxMapboxGLModule] });
+    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] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxMapboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        //
-                        CommonModule,
-                        MatSidenavModule,
-                        DbxStyleLayoutModule,
-                        DbxInjectionComponentModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        AngularResizeEventModule,
-                        DbxRouterAnchorModule,
-                        NgxMapboxGLModule
-                    ],
-                    declarations,
-                    exports: declarations
+                    imports: importsAndExports,
+                    exports: importsAndExports
                 }]
         }] });
 
+/**
+ * Creates EnvironmentProviders for providing DbxMapboxConfig and configuring the NgxMapboxGLModule.
+ *
+ * @param config Configuration
+ * @returns EnvironmentProviders
+ */
+function provideDbxMapbox(config) {
+    const { dbxMapboxConfig, ngxMapboxGLModuleConfig } = config;
+    const providers = [
+        // config
+        {
+            provide: DbxMapboxConfig,
+            useValue: dbxMapboxConfig
+        },
+        // service
+        DbxMapboxService,
+        // ngxMapboxGL
+        importProvidersFrom(NgxMapboxGLModule.withConfig(ngxMapboxGLModuleConfig))
+    ];
+    return makeEnvironmentProviders(providers);
+}
+
 /**
  * Creates the styling for rendering a dot.
  *
@@ -1417,7 +1392,7 @@ function dbxMapboxColoredDotStyle(background, color) {
     return {
         background,
         padding: '2px',
-        color: color ?? background ? 'white' : undefined,
+        color: (color ?? background) ? 'white' : undefined,
         'border-radius': '50%'
     };
 }
@@ -1445,5 +1420,5 @@ function mapboxZoomLevel(input) {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxLayoutVirtualResizeSyncComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
+export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxLayoutVirtualResizeSyncComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideDbxMapbox, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
 //# sourceMappingURL=dereekb-dbx-web-mapbox.mjs.map