@dereekb/dbx-web 9.6.2 → 9.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/mapbox/lib/mapbox.layout.component.mjs +53 -30
- package/fesm2015/dereekb-dbx-web-mapbox.mjs +51 -28
- package/fesm2015/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-web-mapbox.mjs +51 -28
- package/fesm2020/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/mapbox/esm2020/lib/mapbox.layout.component.mjs +53 -30
- package/mapbox/fesm2015/dereekb-dbx-web-mapbox.mjs +51 -28
- package/mapbox/fesm2015/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/mapbox/fesm2020/dereekb-dbx-web-mapbox.mjs +51 -28
- package/mapbox/fesm2020/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/mapbox/lib/mapbox.layout.component.d.ts +5 -1
- package/mapbox/package.json +3 -3
- package/package.json +3 -3
|
@@ -514,11 +514,13 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
514
514
|
this._resized = new Subject();
|
|
515
515
|
this._updateMargins = new Subject();
|
|
516
516
|
this._forceHasContent = new BehaviorSubject(false);
|
|
517
|
+
this._mode = new BehaviorSubject('side');
|
|
517
518
|
this._side = new BehaviorSubject('right');
|
|
518
519
|
this._openToggle = new BehaviorSubject(true);
|
|
519
520
|
this._color = new BehaviorSubject(undefined);
|
|
520
521
|
this._toggleSub = new SubscriptionObject();
|
|
521
522
|
this.side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
|
|
523
|
+
this.mode$ = this._mode.pipe(distinctUntilChanged(), shareReplay(1));
|
|
522
524
|
this.hasContent$ = combineLatest([this._forceHasContent, this.dbxMapboxMapStore.hasContent$]).pipe(map(([hasContent, forceHasContent]) => hasContent || forceHasContent), distinctUntilChanged(), shareReplay(1));
|
|
523
525
|
this.opened$ = combineLatest([this.hasContent$, this._openToggle]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
|
|
524
526
|
this.position$ = this.side$.pipe(map((x) => (x === 'right' ? 'end' : 'start')), distinctUntilChanged(), shareReplay(1));
|
|
@@ -549,32 +551,46 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
549
551
|
});
|
|
550
552
|
});
|
|
551
553
|
let init = false;
|
|
552
|
-
this._toggleSub.subscription =
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
554
|
+
this._toggleSub.subscription = this.mode$
|
|
555
|
+
.pipe(switchMap((mode) => {
|
|
556
|
+
let obs;
|
|
557
|
+
if (mode === 'push') {
|
|
558
|
+
obs = combineLatest([this.opened$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(tap(([opened]) => {
|
|
559
|
+
let { right } = this.container._contentMargins;
|
|
560
|
+
this.container.updateContentMargins();
|
|
561
|
+
setTimeout(() => {
|
|
562
|
+
const flip = opened ? 1 : -1;
|
|
563
|
+
if (opened) {
|
|
564
|
+
right = this.container._contentMargins.right;
|
|
565
|
+
}
|
|
566
|
+
right = (right || 0) * flip;
|
|
567
|
+
const element = this.content.nativeElement;
|
|
568
|
+
const width = element.clientWidth;
|
|
569
|
+
const margin = {
|
|
570
|
+
leftMargin: 0,
|
|
571
|
+
rightMargin: right,
|
|
572
|
+
fullWidth: width
|
|
573
|
+
};
|
|
574
|
+
const easeTo = this.dbxMapboxMapStore.calculateNextCenterOffsetWithScreenMarginChange(margin).pipe(first(), map((center) => ({ to: { center, duration: 3200, essential: false } })));
|
|
575
|
+
this.dbxMapboxMapStore.setMargin(opened ? margin : undefined);
|
|
576
|
+
if (!init) {
|
|
577
|
+
this.dbxMapboxMapStore.easeTo(easeTo);
|
|
578
|
+
}
|
|
579
|
+
else {
|
|
580
|
+
init = true;
|
|
581
|
+
}
|
|
582
|
+
});
|
|
583
|
+
}));
|
|
584
|
+
}
|
|
585
|
+
else {
|
|
586
|
+
obs = combineLatest([this.opened$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(switchMap((_) => this.dbxMapboxMapStore.mapInstance$), tap((x) => {
|
|
587
|
+
this.container.updateContentMargins();
|
|
588
|
+
x.triggerRepaint();
|
|
589
|
+
}));
|
|
590
|
+
}
|
|
591
|
+
return obs;
|
|
592
|
+
}))
|
|
593
|
+
.subscribe();
|
|
578
594
|
}
|
|
579
595
|
ngOnDestroy() {
|
|
580
596
|
this._resized.complete();
|
|
@@ -596,6 +612,11 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
596
612
|
this._side.next(side);
|
|
597
613
|
}
|
|
598
614
|
}
|
|
615
|
+
set mode(mode) {
|
|
616
|
+
if (mode != null) {
|
|
617
|
+
this._mode.next(mode);
|
|
618
|
+
}
|
|
619
|
+
}
|
|
599
620
|
set opened(opened) {
|
|
600
621
|
if (opened != null) {
|
|
601
622
|
this._openToggle.next(opened);
|
|
@@ -614,10 +635,10 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
614
635
|
}
|
|
615
636
|
}
|
|
616
637
|
DbxMapboxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
617
|
-
DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", opened: "opened", hasContent: "hasContent", 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=\"
|
|
638
|
+
DbxMapboxLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxLayoutComponent, selector: "dbx-mapbox-layout", inputs: { side: "side", mode: "mode", opened: "opened", hasContent: "hasContent", 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]=\"(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" }] });
|
|
618
639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
|
|
619
640
|
type: Component,
|
|
620
|
-
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=\"
|
|
641
|
+
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]=\"(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"] }]
|
|
621
642
|
}], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; }, propDecorators: { container: [{
|
|
622
643
|
type: ViewChild,
|
|
623
644
|
args: [MatDrawerContainer]
|
|
@@ -626,6 +647,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
|
|
|
626
647
|
args: ['content', { read: ElementRef, static: true }]
|
|
627
648
|
}], side: [{
|
|
628
649
|
type: Input
|
|
650
|
+
}], mode: [{
|
|
651
|
+
type: Input
|
|
629
652
|
}], opened: [{
|
|
630
653
|
type: Input
|
|
631
654
|
}], hasContent: [{
|