@dereekb/dbx-web 9.24.20 → 9.24.22

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Host, Optional, Inject, Component, ChangeDetectionStrategy, SkipSelf, Directive, Injector, ElementRef, ViewChild, Input, NgModule } from '@angular/core';
+import { Injectable, Host, Optional, Inject, Component, ChangeDetectionStrategy, SkipSelf, Directive, Injector, EventEmitter, ElementRef, Output, ViewChild, Input, NgModule } from '@angular/core';
 import * as i2 from '@dereekb/dbx-core';
 import { safeMarkForCheck, safeDetectChanges, AbstractSubscriptionDirective, DbxInjectionComponentModule } from '@dereekb/dbx-core';
 import { asObservable, cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, distinctUntilMapHasDifferentKeys } from '@dereekb/rxjs';
@@ -437,10 +437,10 @@ class DbxMapboxMapStore extends ComponentStore {
             }
         }), shareReplay(1));
         this.whenInitialized$ = this.isInitialized$.pipe(filter((x) => true), shareReplay(1));
-        this.isRendering$ = this.whenInitialized$.pipe(switchMap(() => this.lifecycleState$.pipe(map((x) => x === 'render'), distinctUntilChanged(), shareReplay())));
-        this.isMoving$ = this.whenInitialized$.pipe(switchMap(() => this.moveState$.pipe(map((x) => x === 'moving'), distinctUntilChanged(), shareReplay())));
-        this.isZooming$ = this.whenInitialized$.pipe(switchMap(() => this.zoomState$.pipe(map((x) => x === 'zooming'), distinctUntilChanged(), shareReplay())));
-        this.isRotating$ = this.whenInitialized$.pipe(switchMap(() => this.rotateState$.pipe(map((x) => x === 'rotating'), distinctUntilChanged(), shareReplay())));
+        this.isRendering$ = this.whenInitialized$.pipe(switchMap(() => this.lifecycleState$.pipe(map((x) => x === 'render'), distinctUntilChanged(), shareReplay(1))));
+        this.isMoving$ = this.whenInitialized$.pipe(switchMap(() => this.moveState$.pipe(map((x) => x === 'moving'), distinctUntilChanged(), shareReplay(1))));
+        this.isZooming$ = this.whenInitialized$.pipe(switchMap(() => this.zoomState$.pipe(map((x) => x === 'zooming'), distinctUntilChanged(), shareReplay(1))));
+        this.isRotating$ = this.whenInitialized$.pipe(switchMap(() => this.rotateState$.pipe(map((x) => x === 'rotating'), distinctUntilChanged(), shareReplay(1))));
         this._movingTimer = this.movingTimer();
         this._renderingTimer = this.lifecycleRenderTimer();
         this.centerNow$ = this.whenInitialized$.pipe(switchMap(() => this.mapInstance$.pipe(switchMap((x) => this._movingTimer.pipe(map(() => this.latLngPoint(x.getCenter())))), shareReplay(1))), shareReplay(1));
@@ -568,7 +568,7 @@ class DbxMapboxMapStore extends ComponentStore {
             else {
                 return of(0);
             }
-        }), shareReplay());
+        }), shareReplay(1));
     }
     lifecycleRenderTimer(period = this.timerRefreshPeriod) {
         return this.lifecycleState$.pipe(switchMap((x) => {
@@ -578,7 +578,7 @@ class DbxMapboxMapStore extends ComponentStore {
             else {
                 return of(0);
             }
-        }), shareReplay());
+        }), shareReplay(1));
     }
     atNextIdle() {
         return this.moveState$.pipe(map((x) => x === 'idle'), first());
@@ -828,7 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
     } });
 
 /**
- * Content drawer that connects with DbxMapboxMapStore to
+ * Content drawer that connects with DbxMapboxMapStore to show the content.
  */
 class DbxMapboxLayoutDrawerComponent {
     constructor(dbxMapboxMapStore) {
@@ -856,33 +856,40 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
     constructor(dbxMapboxMapStore) {
         super();
         this.dbxMapboxMapStore = dbxMapboxMapStore;
+        this.openedChange = new EventEmitter();
         this._resized = new Subject();
         this._updateMargins = new Subject();
         this._forceHasContent = new BehaviorSubject(false);
         this._mode = new BehaviorSubject('side');
         this._side = new BehaviorSubject('right');
-        this._openToggle = new BehaviorSubject(true);
+        this._isOpen = new BehaviorSubject(true);
         this._color = new BehaviorSubject(undefined);
         this._toggleSub = new SubscriptionObject();
         this.resized$ = this._resized.asObservable();
         this.side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
         this.mode$ = this._mode.pipe(distinctUntilChanged(), shareReplay(1));
         this.hasContent$ = combineLatest([this._forceHasContent, this.dbxMapboxMapStore.hasContent$]).pipe(map(([hasContent, forceHasContent]) => hasContent || forceHasContent), distinctUntilChanged(), shareReplay(1));
-        this.opened$ = combineLatest([this.hasContent$, this._openToggle]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
+        this.isOpen$ = this._isOpen.asObservable();
+        this.isOpenAndHasContent$ = combineLatest([this.hasContent$, this._isOpen]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
         this.position$ = this.side$.pipe(map((x) => (x === 'right' ? 'end' : 'start')), distinctUntilChanged(), shareReplay(1));
-        this.drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.opened$]).pipe(
+        this.drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.isOpenAndHasContent$]).pipe(
         //
         map(([side, hasContent, open]) => (hasContent ? 'has-drawer-content' : 'no-drawer-content') + ` ${side}-drawer ` + (open ? 'open-drawer' : '')), distinctUntilChanged(), shareReplay(1));
         this.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]) => {
+        this.buttonIcon$ = combineLatest([this.side$, this.isOpenAndHasContent$]).pipe(map(([side, opened]) => {
             let icons = ['chevron_right', 'chevron_left'];
             if (side === 'left') {
                 icons = icons.reverse();
             }
             return opened ? icons[0] : icons[1];
         }));
+        // MARK: Compat
+        /**
+         * @deprecated use isOpenAndHasContent$ instead.
+         */
+        this.opened$ = this.isOpenAndHasContent$;
     }
     ngOnInit() {
         this.subscription = this.side$.pipe(switchMap(() => this._resized.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
@@ -901,7 +908,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
             .pipe(switchMap((mode) => {
             let obs;
             if (mode === 'push') {
-                obs = combineLatest([this.opened$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(tap(([opened]) => {
+                obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(tap(([opened]) => {
                     let { right } = this.drawerContainer._contentMargins;
                     this.drawerContainer.updateContentMargins();
                     setTimeout(() => {
@@ -929,7 +936,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
                 }));
             }
             else {
-                obs = combineLatest([this.opened$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(switchMap((_) => this.dbxMapboxMapStore.mapInstance$), tap((x) => {
+                obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(switchMap((_) => this.dbxMapboxMapStore.mapInstance$), tap((x) => {
                     this.drawerContainer.updateContentMargins();
                     x.triggerRepaint();
                 }));
@@ -939,19 +946,20 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
             .subscribe();
     }
     ngOnDestroy() {
+        this.openedChange.complete();
         this._resized.complete();
         this._updateMargins.complete();
         this._side.complete();
-        this._openToggle.complete();
+        this._isOpen.complete();
         this._color.complete();
         this._toggleSub.destroy();
         this._forceHasContent.complete();
     }
     toggleDrawer(open) {
         if (open == null) {
-            open = !this._openToggle.value;
+            open = !this._isOpen.value;
         }
-        this._openToggle.next(open);
+        this._isOpen.next(open);
     }
     set side(side) {
         if (side != null) {
@@ -965,7 +973,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
     }
     set opened(opened) {
         if (opened != null) {
-            this._openToggle.next(opened);
+            this._isOpen.next(opened);
         }
     }
     set hasContent(hasContent) {
@@ -979,13 +987,21 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
     onResized(event) {
         this._resized.next(event);
     }
+    onOpened(opened) {
+        this.openedChange.next(opened);
+        if (this._isOpen.value !== opened) {
+            this.openedChange.next(opened);
+        }
+    }
 }
 DbxMapboxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", drawerColor: "drawerColor" }, 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 [opened]=\"opened$ | async\" [mode]=\"(mode$ | async) || 'side'\" [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{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 60px))}.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" }] });
+DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", drawerColor: "drawerColor" }, 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]=\"(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{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 60px))}.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.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-mapbox-layout', template: "<mat-drawer-container #containerElement class=\"dbx-mapbox-layout-container\" [ngClass]=\"(drawerClasses$ | async) || ''\" [hasBackdrop]=\"false\">\n  <mat-drawer class=\"dbx-mapbox-layout-drawer\" #drawer [opened]=\"opened$ | async\" [mode]=\"(mode$ | async) || 'side'\" [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{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 60px))}.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: { containerElement: [{
+            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]=\"(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{max-width:calc(100% - var(--dbx-mapbox-min-width-var, 60px))}.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: { openedChange: [{
+                type: Output
+            }], containerElement: [{
                 type: ViewChild,
                 args: [MatDrawerContainer, { read: ElementRef }]
             }], drawerContainer: [{