@dereekb/dbx-web 9.7.2 → 9.7.5

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

@@ -1,18 +1,19 @@
 import * as i0 from '@angular/core';
 import { Injectable, Host, Optional, Inject, Directive, Component, ElementRef, ViewChild, Input, ChangeDetectionStrategy, SkipSelf, Injector, NgModule } from '@angular/core';
 import * as i2 from '@dereekb/dbx-core';
-import { safeMarkForCheck, safeDetectChanges, AbstractSubscriptionDirective, tapSafeMarkForCheck, DbxInjectionComponentModule } from '@dereekb/dbx-core';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { safeMarkForCheck, safeDetectChanges, AbstractSubscriptionDirective, DbxInjectionComponentModule } from '@dereekb/dbx-core';
+import { switchMap as switchMap$1 } from 'rxjs/operators';
 import { cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, asObservable } from '@dereekb/rxjs';
-import { latLngPointFunction, latLngBoundFunction, isSameLatLngPoint, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, vectorsAreEqual, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject, getValueFromGetter, LAT_LONG_10M_PRECISION, roundNumberToStepFunction } from '@dereekb/util';
+import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, merge, throttleTime, BehaviorSubject, combineLatestWith } from 'rxjs';
+import { latLngPointFunction, latLngBoundFunction, filterUndefinedValues, isSameLatLngPoint, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, vectorsAreEqual, latLngBoundCenterPoint, addLatLngPoints, latLngPoint, DestroyFunctionObject, getValueFromGetter, LAT_LONG_10M_PRECISION, roundNumberToStepFunction } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
-import { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, BehaviorSubject, throttleTime, combineLatestWith } from 'rxjs';
 import * as MapboxGl from 'mapbox-gl';
 import { bounds } from '@mapbox/geo-viewport';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i1 from 'ngx-mapbox-gl';
 import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
-import * as i3$1 from '@dereekb/dbx-web';
+import * as i4$1 from '@dereekb/dbx-web';
 import { dbxColorBackground, disableRightClickInCdkBackdrop, DbxRouterAnchorModule } from '@dereekb/dbx-web';
 import * as i3 from '@angular/material/sidenav';
 import { MatDrawerContainer, MatSidenavModule } from '@angular/material/sidenav';
@@ -26,6 +27,8 @@ import * as i2$2 from '@angular/material/menu';
 
 /**
  * Provided in the parent component that allows children to import the parent's cdRef for use.
+ *
+ * @Deprecated consider using DbxMapboxChangeService instead.
  */
 class DbxMapboxChangeDetectorRefService {
     constructor(cdRef) {
@@ -110,7 +113,7 @@ class DbxMapboxMapStore extends ComponentStore {
             retainContent: true
         });
         this.dbxMapboxService = dbxMapboxService;
-        this.safeLatLngPoint = latLngPointFunction();
+        this.safeLatLngPoint = latLngPointFunction({ wrap: true });
         this.latLngPoint = latLngPointFunction({ wrap: false, validate: false });
         this.latLngBound = latLngBoundFunction({ pointFunction: this.latLngPoint });
         // MARK: Effects
@@ -193,6 +196,14 @@ class DbxMapboxMapStore extends ComponentStore {
                 return this.mapInstance$.pipe(tap((map) => map.setZoom(zoom)));
             }));
         });
+        this.setZoomRange = this.effect((input) => {
+            return input.pipe(switchMap((zoomRange) => {
+                return this.mapInstance$.pipe(tap((map) => {
+                    map.setMinZoom(zoomRange.min || null);
+                    map.setMaxZoom(zoomRange.max || null);
+                }));
+            }));
+        });
         this.setMinZoom = this.effect((input) => {
             return input.pipe(switchMap((zoom) => {
                 return this.mapInstance$.pipe(tap((map) => map.setMinZoom(zoom)));
@@ -304,21 +315,21 @@ class DbxMapboxMapStore extends ComponentStore {
             return input.pipe(switchMap((x) => {
                 const inputCenter = x.center ?? x.to?.center;
                 const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
-                return this.mapInstance$.pipe(tap((map) => map.jumpTo({ ...x.to, center }, x.eventData)));
+                return this.mapInstance$.pipe(tap((map) => map.jumpTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
             }));
         });
         this.easeTo = this.effect((input) => {
             return input.pipe(switchMap((x) => {
                 const inputCenter = x.center ?? x.to?.center;
                 const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
-                return this.mapInstance$.pipe(tap((map) => map.easeTo({ ...x.to, center }, x.eventData)));
+                return this.mapInstance$.pipe(tap((map) => map.easeTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
             }));
         });
         this.flyTo = this.effect((input) => {
             return input.pipe(switchMap((x) => {
                 const inputCenter = x.center ?? x.to?.center;
                 const center = inputCenter ? this.safeLatLngPoint(inputCenter) : undefined;
-                return this.mapInstance$.pipe(tap((map) => map.flyTo({ ...x.to, center }, x.eventData)));
+                return this.mapInstance$.pipe(tap((map) => map.flyTo(filterUndefinedValues({ ...x.to, center }), x.eventData)));
             }));
         });
         this.resetPitchAndBearing = this.effect((input) => {
@@ -498,6 +509,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                     args: [DbxMapboxService]
                 }] }]; } });
 
+/**
+ * Provided in the parent component that allows children to emit events related to their lifecycles.
+ */
+class DbxMapboxChangeService {
+    constructor(dbxMapboxMapStore) {
+        this.dbxMapboxMapStore = dbxMapboxMapStore;
+        this._markerDestroyed = new Subject();
+        this._applyChanges = new Subject();
+        this.markerDestroyed$ = this._markerDestroyed;
+        this.applyChanges$ = merge(this._applyChanges, this.markerDestroyed$).pipe(throttleTime(100, undefined, { leading: false, trailing: true }));
+        this._applyChangesSub = new SubscriptionObject(this.dbxMapboxMapStore.mapService$
+            .pipe(switchMap$1((mapService) => this.applyChanges$.pipe(tap(() => {
+            mapService.applyChanges();
+        }))))
+            .subscribe());
+    }
+    applyChanges() {
+        this._applyChanges.next();
+    }
+    emitMarkerDestroyed() {
+        this._markerDestroyed.next();
+    }
+    ngOnDestroy() {
+        this._markerDestroyed.complete();
+        this._applyChanges.complete();
+        this._applyChangesSub.destroy();
+    }
+}
+DbxMapboxChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxChangeService, deps: [{ token: DbxMapboxMapStore }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxMapboxChangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxChangeService, providedIn: null });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxChangeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: null
+                }]
+        }], ctorParameters: function () { return [{ type: DbxMapboxMapStore }]; } });
+
 /**
  * Directive that configures a MapComponent with content from DbxMapboxService. Connects a host MapService to a parent DbxMapboxMapStore if available.
  */
@@ -847,6 +895,9 @@ function provideMapboxStoreIfParentIsUnavailable() {
 }
 
 class DbxMapboxMarkerComponent {
+    constructor(_dbxMapboxChangeService) {
+        this._dbxMapboxChangeService = _dbxMapboxChangeService;
+    }
     get marker() {
         return this._marker;
     }
@@ -904,11 +955,14 @@ class DbxMapboxMarkerComponent {
         };
         return style;
     }
+    ngOnDestroy() {
+        this._dbxMapboxChangeService?.emitMarkerDestroyed();
+    }
 }
 DbxMapboxMarkerComponent._latLngPoint = latLngPointFunction({ wrap: true });
-DbxMapboxMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxMapboxMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkerComponent, deps: [{ token: DbxMapboxChangeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DbxMapboxMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: { marker: "marker" }, ngImport: i0, template: `
-    <mgl-marker *ngIf="marker" [lngLat]="latLng">
+    <mgl-marker [lngLat]="latLng">
       <dbx-anchor [anchor]="anchor">
         <div class="dbx-mapbox-marker">
           <div class="dbx-mapbox-marker-content" [ngStyle]="style">
@@ -918,11 +972,11 @@ DbxMapboxMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
         </div>
       </dbx-anchor>
     </mgl-marker>
-  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-marker', template: `
-    <mgl-marker *ngIf="marker" [lngLat]="latLng">
+    <mgl-marker [lngLat]="latLng">
       <dbx-anchor [anchor]="anchor">
         <div class="dbx-mapbox-marker">
           <div class="dbx-mapbox-marker-content" [ngStyle]="style">
@@ -933,7 +987,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
       </dbx-anchor>
     </mgl-marker>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}\n"] }]
-        }], propDecorators: { marker: [{
+        }], ctorParameters: function () { return [{ type: DbxMapboxChangeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { marker: [{
                 type: Input
             }] } });
 
@@ -941,8 +997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
  * Component used to render a set of DbxMapboxMarker values from the input data and marker factory.
  */
 class DbxMapboxMarkersComponent {
-    constructor(cdRefService) {
-        this.cdRefService = cdRefService;
+    constructor() {
         this._data = new BehaviorSubject(undefined);
         this._markerFactory = new BehaviorSubject(undefined);
         this.markers$ = combineLatest([this._data.pipe(distinctUntilChanged()), this._markerFactory.pipe(distinctUntilChanged())]).pipe(map(([data, markerFactory]) => {
@@ -952,7 +1007,10 @@ class DbxMapboxMarkersComponent {
             else {
                 return [];
             }
-        }), tapSafeMarkForCheck(this.cdRefService?.cdRef), shareReplay(1));
+        }), shareReplay(1));
+    }
+    trackMarkerById(index, marker) {
+        return marker.id;
     }
     get data() {
         return this._data.value;
@@ -971,22 +1029,20 @@ class DbxMapboxMarkersComponent {
         this._markerFactory.complete();
     }
 }
-DbxMapboxMarkersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [{ token: DbxMapboxChangeDetectorRefService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DbxMapboxMarkersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 DbxMapboxMarkersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxMapboxMarkersComponent, selector: "dbx-mapbox-markers", inputs: { data: "data", markerFactory: "markerFactory" }, ngImport: i0, template: `
-    <dbx-mapbox-marker *ngFor="let marker of markers$ | async" [marker]="marker"></dbx-mapbox-marker>
+    <dbx-mapbox-marker *ngFor="let marker of markers$ | async; trackBy: trackMarkerById" [marker]="marker"></dbx-mapbox-marker>
   `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxMapboxMarkersComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-mapbox-markers',
                     template: `
-    <dbx-mapbox-marker *ngFor="let marker of markers$ | async" [marker]="marker"></dbx-mapbox-marker>
+    <dbx-mapbox-marker *ngFor="let marker of markers$ | async; trackBy: trackMarkerById" [marker]="marker"></dbx-mapbox-marker>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMapboxChangeDetectorRefService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { data: [{
+        }], propDecorators: { data: [{
                 type: Input
             }], markerFactory: [{
                 type: Input
@@ -1125,7 +1181,7 @@ function filterByMapboxViewportBound(config) {
                     };
                 });
             }), combineLatestWith(boundDecisionObs), map(([items, boundFunction]) => {
-                let valuesInBounds = [];
+                const valuesInBounds = [];
                 items.forEach((item) => {
                     if (boundFunction(item.bound)) {
                         valuesInBounds.push(item.value);
@@ -1158,5 +1214,5 @@ function mapboxZoomLevel(input) {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeDetectorRefService, DbxMapboxConfig, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideMapboxStoreIfParentIsUnavailable };
+export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeDetectorRefService, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideMapboxStoreIfParentIsUnavailable };
 //# sourceMappingURL=dereekb-dbx-web-mapbox.mjs.map