@dereekb/dbx-web 9.7.2 → 9.7.3

package/fesm2015/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 { 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 * as i1 from 'ngx-mapbox-gl';
-import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
+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 { switchMap, NEVER, defaultIfEmpty, map, tap, distinctUntilChanged, shareReplay, of, combineLatest, filter, first, startWith, interval, Subject, merge, throttleTime, BehaviorSubject, combineLatestWith } from '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 { 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 i3$1 from '@dereekb/dbx-web';
+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 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) {
@@ -511,6 +514,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                     }] }];
     } });
 
+/**
+ * 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.
  */
@@ -866,6 +906,9 @@ function provideMapboxStoreIfParentIsUnavailable() {
 }
 
 class DbxMapboxMarkerComponent {
+    constructor(_dbxMapboxChangeService) {
+        this._dbxMapboxChangeService = _dbxMapboxChangeService;
+    }
     get marker() {
         return this._marker;
     }
@@ -922,11 +965,15 @@ class DbxMapboxMarkerComponent {
         const style = Object.assign(Object.assign({}, (_c = this._marker) === null || _c === void 0 ? void 0 : _c.style), { width: width + 'px', height: height + 'px', 'font-size': width + 'px', 'background-image': image });
         return style;
     }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._dbxMapboxChangeService) === null || _a === void 0 ? void 0 : _a.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">
@@ -936,11 +983,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">
@@ -951,7 +998,11 @@ 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
             }] } });
 
@@ -959,9 +1010,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) {
-        var _a;
-        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]) => {
@@ -971,7 +1020,10 @@ class DbxMapboxMarkersComponent {
             else {
                 return [];
             }
-        }), tapSafeMarkForCheck((_a = this.cdRefService) === null || _a === void 0 ? void 0 : _a.cdRef), shareReplay(1));
+        }), shareReplay(1));
+    }
+    trackMarkerById(index, marker) {
+        return marker.id;
     }
     get data() {
         return this._data.value;
@@ -990,24 +1042,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
@@ -1183,5 +1231,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