@dereekb/dbx-web 12.1.12 → 12.1.14
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/esm2022/lib/interaction/popover/popover.content.component.mjs +6 -7
- package/esm2022/lib/interaction/popover/popover.content.module.mjs +2 -2
- package/esm2022/lib/layout/block/block.layout.module.mjs +2 -2
- package/esm2022/lib/layout/block/two.block.component.mjs +6 -7
- package/esm2022/lib/layout/column/column.layout.module.mjs +2 -2
- package/esm2022/lib/layout/column/one/one.column.module.mjs +2 -2
- package/esm2022/lib/layout/column/two/two.column.component.mjs +8 -9
- package/esm2022/lib/layout/column/two/two.column.module.mjs +2 -2
- package/esm2022/lib/screen/index.mjs +3 -1
- package/esm2022/lib/screen/resize.directive.mjs +24 -0
- package/esm2022/lib/screen/resize.mjs +34 -0
- package/esm2022/mapbox/lib/mapbox.layout.component.mjs +6 -8
- package/esm2022/table/lib/table.column.size.directive.mjs +102 -0
- package/esm2022/table/lib/table.component.mjs +25 -3
- package/esm2022/table/lib/table.item.cell.component.mjs +3 -2
- package/fesm2022/dereekb-dbx-web-mapbox.mjs +6 -8
- package/fesm2022/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/fesm2022/dereekb-dbx-web-table.mjs +125 -6
- package/fesm2022/dereekb-dbx-web-table.mjs.map +1 -1
- package/fesm2022/dereekb-dbx-web.mjs +92 -40
- package/fesm2022/dereekb-dbx-web.mjs.map +1 -1
- package/lib/interaction/popover/popover.content.component.d.ts +1 -1
- package/lib/layout/block/two.block.component.d.ts +1 -1
- package/lib/layout/column/two/two.column.component.d.ts +1 -1
- package/lib/screen/index.d.ts +2 -0
- package/lib/screen/resize.d.ts +19 -0
- package/lib/screen/resize.directive.d.ts +14 -0
- package/mapbox/lib/mapbox.layout.component.d.ts +1 -2
- package/package.json +1 -2
- package/table/lib/table.column.size.directive.d.ts +29 -0
- package/table/lib/table.component.d.ts +1 -0
- package/table/lib/table.item.cell.component.d.ts +1 -0
|
@@ -9,13 +9,11 @@ import { bounds } from '@placemarkio/geo-viewport';
|
|
|
9
9
|
import { DbxInjectionArrayComponent, DbxInjectionComponent, AbstractSubscriptionDirective } from '@dereekb/dbx-core';
|
|
10
10
|
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
11
11
|
import { MapService, MapComponent, MAP_COMPONENT_INITIALIZATION_OPTIONS, MarkerComponent, provideMapboxGL } from 'ngx-mapbox-gl';
|
|
12
|
-
import { DbxColorDirective, disableRightClickInCdkBackdrop, DbxAnchorComponent } from '@dereekb/dbx-web';
|
|
13
|
-
import * as i1 from 'angular-resize-event-package';
|
|
14
|
-
import { AngularResizeEventModule } from 'angular-resize-event-package';
|
|
12
|
+
import { DbxResizedDirective, DbxColorDirective, disableRightClickInCdkBackdrop, DbxAnchorComponent } from '@dereekb/dbx-web';
|
|
15
13
|
import { MatDrawerContainer, MatDrawer, MatDrawerContent } from '@angular/material/sidenav';
|
|
16
14
|
import { NgClass, NgStyle } from '@angular/common';
|
|
17
15
|
import { MatIconButton } from '@angular/material/button';
|
|
18
|
-
import * as
|
|
16
|
+
import * as i1 from '@angular/material/icon';
|
|
19
17
|
import { MatIconModule } from '@angular/material/icon';
|
|
20
18
|
import { MatMenuTrigger } from '@angular/material/menu';
|
|
21
19
|
|
|
@@ -910,7 +908,7 @@ class DbxMapboxLayoutComponent {
|
|
|
910
908
|
_reszieSyncSub = new SubscriptionObject();
|
|
911
909
|
_toggleSyncSub = new SubscriptionObject();
|
|
912
910
|
ngOnInit() {
|
|
913
|
-
this._reszieSyncSub.subscription = this.side$.pipe(switchMap(() => this._viewResized.pipe(throttleTime(
|
|
911
|
+
this._reszieSyncSub.subscription = this.side$.pipe(switchMap(() => this._viewResized.pipe(throttleTime(80, undefined, { leading: true, trailing: true }), map(() => 'r'), startWith('s')))).subscribe((reason) => {
|
|
914
912
|
this.dbxMapboxMapStore.mapInstance$.subscribe((x) => {
|
|
915
913
|
x.resize();
|
|
916
914
|
// side changed
|
|
@@ -985,11 +983,11 @@ class DbxMapboxLayoutComponent {
|
|
|
985
983
|
this.isDrawerOpenSignal.set(open);
|
|
986
984
|
}
|
|
987
985
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
988
|
-
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\" (
|
|
986
|
+
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\" (dbxResized)=\"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: "directive", type: DbxResizedDirective, selector: "[dbxResized]", outputs: ["dbxResized"] }, { 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: i1.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 });
|
|
989
987
|
}
|
|
990
988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxLayoutComponent, decorators: [{
|
|
991
989
|
type: Component,
|
|
992
|
-
args: [{ selector: 'dbx-mapbox-layout', imports: [
|
|
990
|
+
args: [{ selector: 'dbx-mapbox-layout', imports: [DbxResizedDirective, 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\" (dbxResized)=\"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"] }]
|
|
993
991
|
}] });
|
|
994
992
|
|
|
995
993
|
/**
|
|
@@ -1217,7 +1215,7 @@ class DbxMapboxMarkerComponent {
|
|
|
1217
1215
|
</div>
|
|
1218
1216
|
</dbx-anchor>
|
|
1219
1217
|
</mgl-marker>
|
|
1220
|
-
`, 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: "component", type: MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "zIndex", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
1218
|
+
`, 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: "component", type: MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "zIndex", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.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 });
|
|
1221
1219
|
}
|
|
1222
1220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
|
|
1223
1221
|
type: Component,
|