@dereekb/dbx-web 9.24.21 → 9.24.23
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/calendar/package.json +2 -2
- package/esm2020/mapbox/lib/mapbox.layout.component.mjs +31 -15
- package/esm2020/mapbox/lib/mapbox.layout.drawer.component.mjs +2 -2
- package/fesm2015/dereekb-dbx-web-mapbox.mjs +31 -15
- package/fesm2015/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-web-mapbox.mjs +31 -15
- package/fesm2020/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/lib/layout/style/_style.scss +13 -10
- package/lib/layout/text/_text.scss +3 -2
- package/mapbox/esm2020/lib/mapbox.layout.component.mjs +31 -15
- package/mapbox/esm2020/lib/mapbox.layout.drawer.component.mjs +2 -2
- package/mapbox/fesm2015/dereekb-dbx-web-mapbox.mjs +31 -15
- package/mapbox/fesm2015/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/mapbox/fesm2020/dereekb-dbx-web-mapbox.mjs +31 -15
- package/mapbox/fesm2020/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/mapbox/lib/mapbox.layout.component.d.ts +11 -4
- package/mapbox/lib/mapbox.layout.drawer.component.d.ts +1 -1
- package/mapbox/package.json +3 -3
- package/package.json +3 -3
- package/table/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Host, Optional, Inject, Component, ChangeDetectionStrategy, SkipSelf, Directive, Injector, ElementRef, ViewChild, Input, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Host, Optional, Inject, Component, ChangeDetectionStrategy, SkipSelf, Directive, Injector, EventEmitter, ElementRef, Output, ViewChild, Input, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@dereekb/dbx-core';
|
|
4
4
|
import { safeMarkForCheck, safeDetectChanges, AbstractSubscriptionDirective, DbxInjectionComponentModule } from '@dereekb/dbx-core';
|
|
5
5
|
import { asObservable, cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, distinctUntilMapHasDifferentKeys } from '@dereekb/rxjs';
|
|
@@ -815,7 +815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
815
815
|
}] }]; } });
|
|
816
816
|
|
|
817
817
|
/**
|
|
818
|
-
* Content drawer that connects with DbxMapboxMapStore to
|
|
818
|
+
* Content drawer that connects with DbxMapboxMapStore to show the content.
|
|
819
819
|
*/
|
|
820
820
|
class DbxMapboxLayoutDrawerComponent {
|
|
821
821
|
constructor(dbxMapboxMapStore) {
|
|
@@ -843,33 +843,40 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
843
843
|
constructor(dbxMapboxMapStore) {
|
|
844
844
|
super();
|
|
845
845
|
this.dbxMapboxMapStore = dbxMapboxMapStore;
|
|
846
|
+
this.openedChange = new EventEmitter();
|
|
846
847
|
this._resized = new Subject();
|
|
847
848
|
this._updateMargins = new Subject();
|
|
848
849
|
this._forceHasContent = new BehaviorSubject(false);
|
|
849
850
|
this._mode = new BehaviorSubject('side');
|
|
850
851
|
this._side = new BehaviorSubject('right');
|
|
851
|
-
this.
|
|
852
|
+
this._isOpen = new BehaviorSubject(true);
|
|
852
853
|
this._color = new BehaviorSubject(undefined);
|
|
853
854
|
this._toggleSub = new SubscriptionObject();
|
|
854
855
|
this.resized$ = this._resized.asObservable();
|
|
855
856
|
this.side$ = this._side.pipe(distinctUntilChanged(), shareReplay(1));
|
|
856
857
|
this.mode$ = this._mode.pipe(distinctUntilChanged(), shareReplay(1));
|
|
857
858
|
this.hasContent$ = combineLatest([this._forceHasContent, this.dbxMapboxMapStore.hasContent$]).pipe(map(([hasContent, forceHasContent]) => hasContent || forceHasContent), distinctUntilChanged(), shareReplay(1));
|
|
858
|
-
this.
|
|
859
|
+
this.isOpen$ = this._isOpen.asObservable();
|
|
860
|
+
this.isOpenAndHasContent$ = combineLatest([this.hasContent$, this._isOpen]).pipe(map(([hasContent, open]) => hasContent && open), distinctUntilChanged(), shareReplay(1));
|
|
859
861
|
this.position$ = this.side$.pipe(map((x) => (x === 'right' ? 'end' : 'start')), distinctUntilChanged(), shareReplay(1));
|
|
860
|
-
this.drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.
|
|
862
|
+
this.drawerClasses$ = combineLatest([this.side$, this.dbxMapboxMapStore.hasContent$, this.isOpenAndHasContent$]).pipe(
|
|
861
863
|
//
|
|
862
864
|
map(([side, hasContent, open]) => (hasContent ? 'has-drawer-content' : 'no-drawer-content') + ` ${side}-drawer ` + (open ? 'open-drawer' : '')), distinctUntilChanged(), shareReplay(1));
|
|
863
865
|
this.drawerButtonClasses$ = combineLatest([this.dbxMapboxMapStore.hasContent$, this._color]).pipe(
|
|
864
866
|
//
|
|
865
867
|
map(([hasContent, color]) => dbxColorBackground(color)), distinctUntilChanged(), shareReplay(1));
|
|
866
|
-
this.buttonIcon$ = combineLatest([this.side$, this.
|
|
868
|
+
this.buttonIcon$ = combineLatest([this.side$, this.isOpenAndHasContent$]).pipe(map(([side, opened]) => {
|
|
867
869
|
let icons = ['chevron_right', 'chevron_left'];
|
|
868
870
|
if (side === 'left') {
|
|
869
871
|
icons = icons.reverse();
|
|
870
872
|
}
|
|
871
873
|
return opened ? icons[0] : icons[1];
|
|
872
874
|
}));
|
|
875
|
+
// MARK: Compat
|
|
876
|
+
/**
|
|
877
|
+
* @deprecated use isOpenAndHasContent$ instead.
|
|
878
|
+
*/
|
|
879
|
+
this.opened$ = this.isOpenAndHasContent$;
|
|
873
880
|
}
|
|
874
881
|
ngOnInit() {
|
|
875
882
|
this.subscription = this.side$.pipe(switchMap(() => this._resized.pipe(throttleTime(100, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
|
|
@@ -888,7 +895,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
888
895
|
.pipe(switchMap((mode) => {
|
|
889
896
|
let obs;
|
|
890
897
|
if (mode === 'push') {
|
|
891
|
-
obs = combineLatest([this.
|
|
898
|
+
obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(tap(([opened]) => {
|
|
892
899
|
let { right } = this.drawerContainer._contentMargins;
|
|
893
900
|
this.drawerContainer.updateContentMargins();
|
|
894
901
|
setTimeout(() => {
|
|
@@ -916,7 +923,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
916
923
|
}));
|
|
917
924
|
}
|
|
918
925
|
else {
|
|
919
|
-
obs = combineLatest([this.
|
|
926
|
+
obs = combineLatest([this.isOpenAndHasContent$.pipe(distinctUntilChanged()), this._updateMargins]).pipe(switchMap((_) => this.dbxMapboxMapStore.mapInstance$), tap((x) => {
|
|
920
927
|
this.drawerContainer.updateContentMargins();
|
|
921
928
|
x.triggerRepaint();
|
|
922
929
|
}));
|
|
@@ -926,19 +933,20 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
926
933
|
.subscribe();
|
|
927
934
|
}
|
|
928
935
|
ngOnDestroy() {
|
|
936
|
+
this.openedChange.complete();
|
|
929
937
|
this._resized.complete();
|
|
930
938
|
this._updateMargins.complete();
|
|
931
939
|
this._side.complete();
|
|
932
|
-
this.
|
|
940
|
+
this._isOpen.complete();
|
|
933
941
|
this._color.complete();
|
|
934
942
|
this._toggleSub.destroy();
|
|
935
943
|
this._forceHasContent.complete();
|
|
936
944
|
}
|
|
937
945
|
toggleDrawer(open) {
|
|
938
946
|
if (open == null) {
|
|
939
|
-
open = !this.
|
|
947
|
+
open = !this._isOpen.value;
|
|
940
948
|
}
|
|
941
|
-
this.
|
|
949
|
+
this._isOpen.next(open);
|
|
942
950
|
}
|
|
943
951
|
set side(side) {
|
|
944
952
|
if (side != null) {
|
|
@@ -952,7 +960,7 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
952
960
|
}
|
|
953
961
|
set opened(opened) {
|
|
954
962
|
if (opened != null) {
|
|
955
|
-
this.
|
|
963
|
+
this._isOpen.next(opened);
|
|
956
964
|
}
|
|
957
965
|
}
|
|
958
966
|
set hasContent(hasContent) {
|
|
@@ -966,13 +974,21 @@ class DbxMapboxLayoutComponent extends SubscriptionObject {
|
|
|
966
974
|
onResized(event) {
|
|
967
975
|
this._resized.next(event);
|
|
968
976
|
}
|
|
977
|
+
onOpened(opened) {
|
|
978
|
+
this.openedChange.next(opened);
|
|
979
|
+
if (this._isOpen.value !== opened) {
|
|
980
|
+
this.openedChange.next(opened);
|
|
981
|
+
}
|
|
982
|
+
}
|
|
969
983
|
}
|
|
970
984
|
DbxMapboxLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
971
|
-
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]=\"
|
|
985
|
+
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" }] });
|
|
972
986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
|
|
973
987
|
type: Component,
|
|
974
|
-
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]=\"
|
|
975
|
-
}], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; }, propDecorators: {
|
|
988
|
+
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"] }]
|
|
989
|
+
}], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; }, propDecorators: { openedChange: [{
|
|
990
|
+
type: Output
|
|
991
|
+
}], containerElement: [{
|
|
976
992
|
type: ViewChild,
|
|
977
993
|
args: [MatDrawerContainer, { read: ElementRef }]
|
|
978
994
|
}], drawerContainer: [{
|