@dereekb/dbx-web 9.3.2 → 9.5.0

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

@@ -1,12 +1,25 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Inject, Directive, Host, NgModule } from '@angular/core';
+import { Injectable, Optional, Inject, Directive, Host, Component, ElementRef, ViewChild, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { latLngPointFunction, latLngBoundFunction, isSameLatLngPoint, isSameLatLngBound, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, latLngTuple } from '@dereekb/util';
+import { latLngPointFunction, latLngBoundFunction, isSameLatLngPoint, isSameLatLngBound, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, diffLatLngBoundPoints, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject } from '@dereekb/util';
 import * as i1 from 'ngx-mapbox-gl';
-import { cleanup, filterMaybe, onTrueToFalse } from '@dereekb/rxjs';
+import { cleanup, filterMaybe, onTrueToFalse, SubscriptionObject } from '@dereekb/rxjs';
 import { ComponentStore } from '@ngrx/component-store';
-import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval } from 'rxjs';
+import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, BehaviorSubject, throttleTime, skip } from 'rxjs';
 import * as MapboxGl from 'mapbox-gl';
+import { dbxColorBackground, disableRightClickInCdkBackdrop } from '@dereekb/dbx-web';
+import * as i3 from '@angular/material/sidenav';
+import { MatDrawerContainer, MatSidenavModule } from '@angular/material/sidenav';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from 'angular-resize-event';
+import { AngularResizeEventModule } from 'angular-resize-event';
+import * as i2 from '@dereekb/dbx-core';
+import { AbstractSubscriptionDirective, safeMarkForCheck, DbxInjectionComponentModule } from '@dereekb/dbx-core';
+import * as i2$2 from '@angular/material/menu';
 
 class DbxMapboxConfig {
 }
@@ -57,7 +70,8 @@ class DbxMapboxMapStore extends ComponentStore {
             lifecycleState: 'init',
             moveState: 'init',
             zoomState: 'init',
-            rotateState: 'init'
+            rotateState: 'init',
+            retainContent: true
         });
         this.dbxMapboxService = dbxMapboxService;
         this.latLngPoint = latLngPointFunction();
@@ -94,6 +108,7 @@ class DbxMapboxMapStore extends ComponentStore {
                         addListener('rotateend', () => this._setRotateState('idle'));
                         addListener('click', (x) => this._setClickEvent(x));
                         addListener('dblclick', (x) => this._setDoubleClickEvent(x));
+                        addListener('contextmenu', (x) => this._setRightClickEvent(x));
                         const subs = [];
                         return {
                             service,
@@ -279,17 +294,23 @@ class DbxMapboxMapStore extends ComponentStore {
         this.bearing$ = this.whenInitialized$.pipe(switchMap(() => {
             return this.isRotating$.pipe(onTrueToFalse(), startWith(undefined), switchMap((x) => this.bearingNow$.pipe(first())), distinctUntilChanged(), shareReplay(1));
         }));
-        this.clickEvent$ = this.state$.pipe(map((x) => x.clickEvent));
-        this.doubleClickEvent$ = this.state$.pipe(map((x) => x.doubleClickEvent));
+        this.content$ = this.state$.pipe(map((x) => x.content), distinctUntilChanged(), shareReplay(1));
+        this.hasContent$ = this.content$.pipe(map(Boolean));
+        this.clickEvent$ = this.state$.pipe(map((x) => x.clickEvent), distinctUntilChanged(), shareReplay(1));
+        this.doubleClickEvent$ = this.state$.pipe(map((x) => x.doubleClickEvent), distinctUntilChanged(), shareReplay(1));
+        this.rightClickEvent$ = this.state$.pipe(map((x) => x.rightClickEvent), distinctUntilChanged(), shareReplay(1));
         // MARK: State Changes
-        this._setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init' }));
+        this._setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init', retainContent: state.retainContent, content: state.retainContent ? state.content : undefined }));
         this._setLifecycleState = this.updater((state, lifecycleState) => (Object.assign(Object.assign({}, state), { lifecycleState })));
         this._setMoveState = this.updater((state, moveState) => (Object.assign(Object.assign({}, state), { moveState })));
         this._setZoomState = this.updater((state, zoomState) => (Object.assign(Object.assign({}, state), { zoomState })));
         this._setRotateState = this.updater((state, rotateState) => (Object.assign(Object.assign({}, state), { rotateState })));
         this._setClickEvent = this.updater((state, clickEvent) => (Object.assign(Object.assign({}, state), { clickEvent })));
         this._setDoubleClickEvent = this.updater((state, doubleClickEvent) => (Object.assign(Object.assign({}, state), { doubleClickEvent })));
+        this._setRightClickEvent = this.updater((state, rightClickEvent) => (Object.assign(Object.assign({}, state), { rightClickEvent })));
         this._setError = this.updater((state, error) => (Object.assign(Object.assign({}, state), { error })));
+        this.clearContent = this.updater((state) => (Object.assign(Object.assign({}, state), { content: undefined })));
+        this.setContent = this.updater((state, content) => (Object.assign(Object.assign({}, state), { content })));
     }
     // MARK: Accessors
     get timerRefreshPeriod() {
@@ -315,6 +336,38 @@ class DbxMapboxMapStore extends ComponentStore {
             }
         }), shareReplay());
     }
+    atNextIdle() {
+        return this.moveState$.pipe(map((x) => x === 'idle'), first());
+    }
+    calculateNextCenterWithOffset(inputOffset) {
+        const offset = this.latLngPoint(inputOffset);
+        return this.atNextIdle().pipe(switchMap(() => this.center$.pipe(first(), map((center) => {
+            const newCenter = {
+                lat: offset.lat + center.lat,
+                lng: offset.lng + center.lng
+            };
+            return newCenter;
+        }))));
+    }
+    calculateNextCenterOffsetWithScreenMarginChange(sizing) {
+        return this.atNextIdle().pipe(switchMap(() => this.bound$.pipe((first(),
+            map((bounds) => {
+                const diff = diffLatLngBoundPoints(bounds);
+                const center = latLngBoundCenterPoint(bounds);
+                const offsetWidth = sizing.leftMargin + sizing.rightMargin; // 300 + 0
+                const newWidth = sizing.fullWidth - offsetWidth; // 1000 - 300 - 0
+                const newWidthRatio = newWidth / sizing.fullWidth; // 700 / 1000
+                const newCenterLongitudeWidth = diff.lng * newWidthRatio; // 70% offset
+                const effectiveOffset = {
+                    lat: 0,
+                    lng: newCenterLongitudeWidth / 2
+                };
+                const newCenter = addLatLngPoints(bounds.sw, effectiveOffset);
+                newCenter.lat = center.lat; // retain center position
+                // console.log({ sizing, bounds, effectiveOffset, newWidth, offsetWidth, diff, center, newCenter });
+                return newCenter;
+            })))));
+    }
 }
 DbxMapboxMapStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStore, deps: [{ token: DbxMapboxService }], target: i0.ɵɵFactoryTarget.Injectable });
 DbxMapboxMapStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMapStore });
@@ -342,14 +395,10 @@ 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.center = latLngPoint(this.dbxMapboxService.defaultCenter);
         if (this.dbxMapboxMapStore) {
             this.dbxMapboxMapStore.setMapService(this.mapService);
-            this.dbxMapboxMapStore.setCenter(this.dbxMapboxService.defaultCenter);
-            this.dbxMapboxMapStore.setZoom(this.dbxMapboxService.defaultZoom);
-        }
-        else {
-            this.mapboxMap.zoom = [this.dbxMapboxService.defaultZoom];
-            this.mapboxMap.center = latLngTuple(this.dbxMapboxService.defaultCenter);
         }
     }
 }
@@ -370,6 +419,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                     }] }];
     } });
 
+/**
+ * Content drawer that connects with DbxMapboxMapStore to
+ */
+class DbxMapboxLayoutDrawerComponent {
+    constructor(dbxMapboxMapStore) {
+        this.dbxMapboxMapStore = dbxMapboxMapStore;
+        this.config$ = this.dbxMapboxMapStore.content$;
+    }
+}
+DbxMapboxLayoutDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxMapboxLayoutDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutDrawerComponent, selector: "dbx-mapbox-layout-drawer", host: { classAttribute: "dbx-mapbox-layout-drawer" }, ngImport: i0, template: "<div>\n  <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n</div>\n", dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-mapbox-layout-drawer', host: {
+                        class: 'dbx-mapbox-layout-drawer'
+                    }, template: "<div>\n  <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; } });
+
+/**
+ * Responsive component meant to split a left and right column.
+ *
+ * The left column is smaller than the right column, which contains the primary content.
+ *
+ * Requires a TwoColumnsContextStore to be provided.
+ */
+class DbxMapboxLayoutComponent extends SubscriptionObject {
+    constructor(dbxMapboxMapStore) {
+        super();
+        this.dbxMapboxMapStore = dbxMapboxMapStore;
+        this._resized = new Subject();
+        this._updateMargins = new Subject();
+        this._side = new BehaviorSubject('right');
+        this._openToggle = new BehaviorSubject(true);
+        this._color = new BehaviorSubject(undefined);
+        this._toggleSub = new SubscriptionObject();
+        this.side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
+        this.opened$ = combineLatest([this.dbxMapboxMapStore.hasContent$, this._openToggle]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
+        this.position$ = this.side$.pipe(map((x) => (x === 'right' ? 'end' : 'start')), distinctUntilChanged(), shareReplay(1));
+        this.drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.opened$]).pipe(
+        //
+        map(([side, hasContent, open]) => (hasContent ? 'has-drawer-content' : 'no-drawer-content') + ` ${side}-drawer ` + (open ? 'open-drawer' : '')), distinctUntilChanged(), shareReplay(1));
+        this.drawerButtonClasses$ = combineLatest([this.dbxMapboxMapStore.hasContent$, this._color]).pipe(
+        //
+        map(([hasContent, color]) => dbxColorBackground(color)), distinctUntilChanged(), shareReplay(1));
+        this.buttonIcon$ = combineLatest([this.side$, this.opened$]).pipe(map(([side, opened]) => {
+            let icons = ['chevron_right', 'chevron_left'];
+            if (side === 'left') {
+                icons = icons.reverse();
+            }
+            return opened ? icons[0] : icons[1];
+        }));
+    }
+    ngOnInit() {
+        this.subscription = this.side$.pipe(switchMap(() => this._resized.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
+            this.dbxMapboxMapStore.mapInstance$.subscribe((x) => {
+                x.resize();
+                // side changed
+                if (reason === 's') {
+                    setTimeout(() => {
+                        this._updateMargins.next();
+                    });
+                }
+            });
+        });
+        this._toggleSub.subscription = combineLatest([this.opened$.pipe(distinctUntilChanged(), skip(1)), this._updateMargins]).subscribe(([opened]) => {
+            let { right } = this.container._contentMargins;
+            this.container.updateContentMargins();
+            setTimeout(() => {
+                const flip = opened ? 1 : -1;
+                if (opened) {
+                    right = this.container._contentMargins.right;
+                }
+                right = (right || 0) * flip;
+                const element = this.content.nativeElement;
+                const width = element.clientWidth;
+                const easeTo = this.dbxMapboxMapStore
+                    .calculateNextCenterOffsetWithScreenMarginChange({
+                    leftMargin: 0,
+                    rightMargin: right,
+                    fullWidth: width
+                })
+                    .pipe(first(), map((center) => ({ to: { center, duration: 3200, essential: false } })));
+                this.dbxMapboxMapStore.easeTo(easeTo);
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._resized.complete();
+        this._updateMargins.complete();
+        this._side.complete();
+        this._openToggle.complete();
+        this._color.complete();
+        this._toggleSub.destroy();
+    }
+    toggleDrawer(open) {
+        if (open == null) {
+            open = !this._openToggle.value;
+        }
+        this._openToggle.next(open);
+    }
+    set side(side) {
+        if (side != null) {
+            this._side.next(side);
+        }
+    }
+    set opened(opened) {
+        if (opened != null) {
+            this._openToggle.next(opened);
+        }
+    }
+    set drawerColor(color) {
+        this._color.next(color);
+    }
+    onResized(event) {
+        this._resized.next();
+    }
+}
+DbxMapboxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
+DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", opened: "opened", drawerColor: "drawerColor" }, viewQueries: [{ propertyName: "container", 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 class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer [opened]=\"opened$ | async\" mode=\"push\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerButtonClasses$ | 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\" [ngClass]=\"(drawerButtonClasses$ | 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-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}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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: i2$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-mapbox-layout', template: "<mat-drawer-container class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer [opened]=\"opened$ | async\" mode=\"push\" [position]=\"(position$ | async) || 'end'\">\n    <div class=\"dbx-mapbox-layout-drawer-content\" [ngClass]=\"(drawerButtonClasses$ | 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\" [ngClass]=\"(drawerButtonClasses$ | 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-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}.left-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{left:0;border-radius:0 20px 20px 0}.right-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{right:0;border-radius:20px 0 0 20px}.has-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.has-drawer-content.open-drawer .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:35px}.no-drawer-content .dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button{width:0px}.dbx-mapbox-layout-content>.dbx-mapbox-layout-drawer-button mat-icon{padding-left:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: [MatDrawerContainer]
+            }], content: [{
+                type: ViewChild,
+                args: ['content', { read: ElementRef, static: true }]
+            }], side: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], drawerColor: [{
+                type: Input
+            }] } });
+
+/**
+ * Directive that connects a host MatMenuTrigger to a DbxMapboxMapStore and listens for right-clicks on the map.
+ *
+ * The map dissapears if the mouse scrolls anywhere else on the map.
+ */
+class DbxMapboxMenuComponent extends AbstractSubscriptionDirective {
+    constructor(dbxMapboxMapStore, matMenuTrigger, cdRef) {
+        super();
+        this.dbxMapboxMapStore = dbxMapboxMapStore;
+        this.matMenuTrigger = matMenuTrigger;
+        this.cdRef = cdRef;
+        this._pos = { x: `0`, y: `0` };
+        this._active = new BehaviorSubject(true);
+        this._menuCloseSub = new SubscriptionObject();
+        this._preventRightClick = new DestroyFunctionObject();
+    }
+    get pos() {
+        return this._pos;
+    }
+    ngOnInit() {
+        this.sub = this._active
+            .pipe(switchMap((active) => {
+            if (active) {
+                return this.dbxMapboxMapStore.rightClickEvent$;
+            }
+            else {
+                return of();
+            }
+        }), filter(Boolean))
+            .subscribe((event) => {
+            const menu = this.matMenuTrigger.menu;
+            const buttonEvent = event.originalEvent;
+            if (menu && buttonEvent) {
+                buttonEvent.preventDefault();
+                // update position of this component for menu to open at
+                this._pos = {
+                    x: `${buttonEvent.x}px`,
+                    y: `${buttonEvent.y}px`
+                };
+                safeMarkForCheck(this.cdRef);
+                // open menu
+                this.matMenuTrigger.openMenu();
+                // prevent right clicks in the cdkOverlay while the menu is open
+                this._preventRightClick.destroy = disableRightClickInCdkBackdrop(undefined, () => {
+                    this.matMenuTrigger.closeMenu();
+                });
+            }
+        });
+        this._menuCloseSub.subscription = this.matMenuTrigger.menuClosed.subscribe(() => {
+            // destroy prevention when the menu is closed.
+            this._preventRightClick.destroy();
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._active.complete();
+        this._preventRightClick.destroy();
+        this._menuCloseSub.destroy();
+        if (this.matMenuTrigger) {
+            this.matMenuTrigger.closeMenu();
+        }
+    }
+    set active(active) {
+        this._active.next(active !== null && active !== void 0 ? active : true);
+    }
+}
+DbxMapboxMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMenuComponent, deps: [{ token: DbxMapboxMapStore }, { token: i2$2.MatMenuTrigger, host: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxMapboxMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxMenuComponent, selector: "dbx-mapbox-menu", inputs: { active: ["dbxMapboxMenu", "active"] }, host: { properties: { "style.top": "pos.y", "style.left": "pos.x" }, styleAttribute: "visibility: hidden; position: fixed" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", 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'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DbxMapboxMapStore }, { type: i2$2.MatMenuTrigger, decorators: [{
+                        type: Host
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { active: [{
+                type: Input,
+                args: ['dbxMapboxMenu']
+            }] } });
+
+const declarations = [
+    //
+    DbxMapboxMapDirective,
+    DbxMapboxLayoutComponent,
+    DbxMapboxLayoutDrawerComponent,
+    DbxMapboxMenuComponent
+];
 class DbxMapboxModule {
     static forRoot(config) {
         return {
@@ -384,14 +665,50 @@ class DbxMapboxModule {
     }
 }
 DbxMapboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, declarations: [DbxMapboxMapDirective], imports: [CommonModule], exports: [DbxMapboxMapDirective] });
-DbxMapboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, imports: [CommonModule] });
+DbxMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, declarations: [
+        //
+        DbxMapboxMapDirective,
+        DbxMapboxLayoutComponent,
+        DbxMapboxLayoutDrawerComponent,
+        DbxMapboxMenuComponent
+    ], imports: [
+        //
+        CommonModule,
+        MatSidenavModule,
+        DbxInjectionComponentModule,
+        MatButtonModule,
+        MatIconModule,
+        AngularResizeEventModule
+    ], exports: [
+        //
+        DbxMapboxMapDirective,
+        DbxMapboxLayoutComponent,
+        DbxMapboxLayoutDrawerComponent,
+        DbxMapboxMenuComponent
+    ] });
+DbxMapboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, imports: [
+        //
+        CommonModule,
+        MatSidenavModule,
+        DbxInjectionComponentModule,
+        MatButtonModule,
+        MatIconModule,
+        AngularResizeEventModule
+    ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [DbxMapboxMapDirective],
-                    exports: [DbxMapboxMapDirective]
+                    imports: [
+                        //
+                        CommonModule,
+                        MatSidenavModule,
+                        DbxInjectionComponentModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        AngularResizeEventModule
+                    ],
+                    declarations,
+                    exports: declarations
                 }]
         }] });
 
@@ -411,5 +728,5 @@ const KNOWN_MAPBOX_STYLES = [
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxConfig, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES };
+export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxConfig, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES };
 //# sourceMappingURL=dereekb-dbx-web-mapbox.mjs.map