@tic-nova/ngx-mapbox-gl 14.0.0

package/README.md

@@ -0,0 +1,3 @@
+# ngx-mapbox-gl
+
+https://wykks.github.io/ngx-mapbox-gl

package/esm2022/index.js

@@ -0,0 +1,32 @@
+/*
+ * Public API Surface of ngx-mapbox-gl
+ */
+export * from './lib/provide-mapbox-gl';
+// Expose NgxMapboxGlModule and GeocoderControlDirective provided injection tokens
+export * from './lib/control/attribution-control.directive';
+// Expose control component to allow custom directives
+export * from './lib/control/control.component';
+export * from './lib/control/fullscreen-control.directive';
+export * from './lib/control/geolocate-control.directive';
+export * from './lib/control/navigation-control.directive';
+export * from './lib/control/scale-control.directive';
+export * from './lib/draggable/draggable.directive';
+export * from './lib/image/image.component';
+export * from './lib/layer/layer.component';
+export * from './lib/map/map.component';
+// Expose MapService for ngx-mapbox-gl extensions
+export * from './lib/map/map.service';
+export * from './lib/map/map.types';
+export * from './lib/marker/marker.component';
+export * from './lib/markers-for-clusters/markers-for-clusters.component';
+export * from './lib/popup/popup.component';
+export * from './lib/source/canvas-source.component';
+export * from './lib/source/geojson/feature.component';
+// Expose GeoJSONSourceComponent to access cluster functions
+export * from './lib/source/geojson/geojson-source.component';
+export * from './lib/source/image-source.component';
+export * from './lib/source/raster-dem-source.component';
+export * from './lib/source/raster-source.component';
+export * from './lib/source/vector-source.component';
+export * from './lib/source/video-source.component';
+//# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/ngx-mapbox-gl/src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,yBAAyB,CAAC;AACxC,kFAAkF;AAClF,cAAc,6CAA6C,CAAC;AAC5D,sDAAsD;AACtD,cAAc,iCAAiC,CAAC;AAChD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,iDAAiD;AACjD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2DAA2D,CAAC;AAC1E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,4DAA4D;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qCAAqC,CAAC;AACpD,cAAc,0CAA0C,CAAC;AACzD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC","sourcesContent":["/*\n * Public API Surface of ngx-mapbox-gl\n */\n\nexport * from './lib/provide-mapbox-gl';\n// Expose NgxMapboxGlModule and GeocoderControlDirective provided injection tokens\nexport * from './lib/control/attribution-control.directive';\n// Expose control component to allow custom directives\nexport * from './lib/control/control.component';\nexport * from './lib/control/fullscreen-control.directive';\nexport * from './lib/control/geolocate-control.directive';\nexport * from './lib/control/navigation-control.directive';\nexport * from './lib/control/scale-control.directive';\nexport * from './lib/draggable/draggable.directive';\nexport * from './lib/image/image.component';\nexport * from './lib/layer/layer.component';\nexport * from './lib/map/map.component';\n// Expose MapService for ngx-mapbox-gl extensions\nexport * from './lib/map/map.service';\nexport * from './lib/map/map.types';\nexport * from './lib/marker/marker.component';\nexport * from './lib/markers-for-clusters/markers-for-clusters.component';\nexport * from './lib/popup/popup.component';\nexport * from './lib/source/canvas-source.component';\nexport * from './lib/source/geojson/feature.component';\n// Expose GeoJSONSourceComponent to access cluster functions\nexport * from './lib/source/geojson/geojson-source.component';\nexport * from './lib/source/image-source.component';\nexport * from './lib/source/raster-dem-source.component';\nexport * from './lib/source/raster-source.component';\nexport * from './lib/source/vector-source.component';\nexport * from './lib/source/video-source.component';\n"]}

package/esm2022/lib/control/attribution-control.directive.js

@@ -0,0 +1,39 @@
+import { Directive, inject, input } from '@angular/core';
+import { AttributionControl } from 'mapbox-gl';
+import { MapService } from '../map/map.service';
+import { ControlComponent } from './control.component';
+import * as i0 from "@angular/core";
+export class AttributionControlDirective {
+    mapService = inject(MapService);
+    controlComponent = inject((ControlComponent), { host: true });
+    /* Init inputs */
+    compact = input(...(ngDevMode ? [undefined, { debugName: "compact" }] : []));
+    customAttribution = input(...(ngDevMode ? [undefined, { debugName: "customAttribution" }] : []));
+    ngAfterContentInit() {
+        this.mapService.mapCreated$.subscribe(() => {
+            if (this.controlComponent.control) {
+                throw new Error('Another control is already set for this control');
+            }
+            const options = {};
+            const compact = this.compact();
+            const customAttribution = this.customAttribution();
+            if (compact !== undefined) {
+                options.compact = compact;
+            }
+            if (customAttribution !== undefined) {
+                options.customAttribution = customAttribution;
+            }
+            this.controlComponent.control = new AttributionControl(options);
+            this.mapService.addControl(this.controlComponent.control, this.controlComponent.position());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AttributionControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: AttributionControlDirective, isStandalone: true, selector: "[mglAttribution]", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, customAttribution: { classPropertyName: "customAttribution", publicName: "customAttribution", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AttributionControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglAttribution]',
+                }]
+        }], propDecorators: { compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], customAttribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "customAttribution", required: false }] }] } });
+//# sourceMappingURL=attribution-control.directive.js.map

package/esm2022/lib/control/attribution-control.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribution-control.directive.js","sourceRoot":"","sources":["../../../../../../libs/ngx-mapbox-gl/src/lib/control/attribution-control.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;AAKvD,MAAM,OAAO,2BAA2B;IAC9B,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,gBAAgB,GAAG,MAAM,CAC/B,CAAA,gBAAoC,CAAA,EACpC,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IAEF,iBAAiB;IACjB,OAAO,GAAG,KAAK,6DAAW,CAAC;IAC3B,iBAAiB,GAAG,KAAK,uEAAqB,CAAC;IAE/C,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;YACzC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAClC,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YACD,MAAM,OAAO,GAGT,EAAE,CAAC;YACP,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/B,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACnD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC1B,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;YAC5B,CAAC;YACD,IAAI,iBAAiB,KAAK,SAAS,EAAE,CAAC;gBACpC,OAAO,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;YAChD,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,kBAAkB,CAAC,OAAO,CAAC,CAAC;YAChE,IAAI,CAAC,UAAU,CAAC,UAAU,CACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAC7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CACjC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;uGAlCU,2BAA2B;2FAA3B,2BAA2B;;2FAA3B,2BAA2B;kBAHvC,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;iBAC7B","sourcesContent":["import { AfterContentInit, Directive, inject, input } from '@angular/core';\nimport { AttributionControl } from 'mapbox-gl';\nimport { MapService } from '../map/map.service';\nimport { ControlComponent } from './control.component';\n\n@Directive({\n  selector: '[mglAttribution]',\n})\nexport class AttributionControlDirective implements AfterContentInit {\n  private mapService = inject(MapService);\n  private controlComponent = inject<ControlComponent<AttributionControl>>(\n    ControlComponent<AttributionControl>,\n    { host: true },\n  );\n\n  /* Init inputs */\n  compact = input<boolean>();\n  customAttribution = input<string | string[]>();\n\n  ngAfterContentInit() {\n    this.mapService.mapCreated$.subscribe(() => {\n      if (this.controlComponent.control) {\n        throw new Error('Another control is already set for this control');\n      }\n      const options: {\n        compact?: boolean;\n        customAttribution?: string | string[];\n      } = {};\n      const compact = this.compact();\n      const customAttribution = this.customAttribution();\n      if (compact !== undefined) {\n        options.compact = compact;\n      }\n      if (customAttribution !== undefined) {\n        options.customAttribution = customAttribution;\n      }\n      this.controlComponent.control = new AttributionControl(options);\n      this.mapService.addControl(\n        this.controlComponent.control,\n        this.controlComponent.position(),\n      );\n    });\n  }\n}\n"]}

package/esm2022/lib/control/control.component.js

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, input, } from '@angular/core';
+import { MapService } from '../map/map.service';
+import * as i0 from "@angular/core";
+export class CustomControl {
+    container;
+    constructor(container) {
+        this.container = container;
+    }
+    onAdd() {
+        return this.container;
+    }
+    onRemove() {
+        return this.container.parentNode.removeChild(this.container);
+    }
+    getDefaultPosition() {
+        return 'top-right';
+    }
+}
+export class ControlComponent {
+    mapService = inject(MapService);
+    /* Init inputs */
+    position = input(...(ngDevMode ? [undefined, { debugName: "position" }] : []));
+    content;
+    control;
+    controlAdded = false;
+    ngAfterContentInit() {
+        if (this.content.nativeElement.childNodes.length) {
+            this.control = new CustomControl(this.content.nativeElement);
+            this.mapService.mapCreated$.subscribe(() => {
+                this.mapService.addControl(this.control, this.position());
+                this.controlAdded = true;
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this.controlAdded) {
+            this.mapService.removeControl(this.control);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: ControlComponent, isStandalone: true, selector: "mgl-control", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
+    <div class="mapboxgl-ctrl" #content>
+      <ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mgl-control',
+                    template: `
+    <div class="mapboxgl-ctrl" #content>
+      <ng-content />
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], content: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }] } });
+//# sourceMappingURL=control.component.js.map

package/esm2022/lib/control/control.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.component.js","sourceRoot":"","sources":["../../../../../../libs/ngx-mapbox-gl/src/lib/control/control.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,uBAAuB,EACvB,SAAS,EACT,UAAU,EAEV,SAAS,EACT,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;;AAEhD,MAAM,OAAO,aAAa;IACJ;IAApB,YAAoB,SAAsB;QAAtB,cAAS,GAAT,SAAS,CAAa;IAAG,CAAC;IAE9C,KAAK;QACH,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,UAAW,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAChE,CAAC;IAED,kBAAkB;QAChB,OAAO,WAAW,CAAC;IACrB,CAAC;CACF;AAWD,MAAM,OAAO,gBAAgB;IAGnB,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAExC,iBAAiB;IACjB,QAAQ,GAAG,KAAK,8DAA6D,CAAC;IAEtC,OAAO,CAAa;IAE5D,OAAO,CAAoB;IAEnB,YAAY,GAAG,KAAK,CAAC;IAE7B,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YACjD,IAAI,CAAC,OAAO,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAC7D,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;gBACzC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,OAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAC3D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YAC3B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;uGA5BU,gBAAgB;2FAAhB,gBAAgB,sUAPjB;;;;GAIT;;2FAGU,gBAAgB;kBAT5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,aAAa;oBACvB,QAAQ,EAAE;;;;GAIT;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;;sBASE,SAAS;uBAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE","sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  OnDestroy,\n  ViewChild,\n  inject,\n  input,\n} from '@angular/core';\nimport { IControl, type ControlPosition } from 'mapbox-gl';\nimport { MapService } from '../map/map.service';\n\nexport class CustomControl implements IControl {\n  constructor(private container: HTMLElement) {}\n\n  onAdd() {\n    return this.container;\n  }\n\n  onRemove() {\n    return this.container.parentNode!.removeChild(this.container);\n  }\n\n  getDefaultPosition(): ControlPosition {\n    return 'top-right';\n  }\n}\n\n@Component({\n  selector: 'mgl-control',\n  template: `\n    <div class=\"mapboxgl-ctrl\" #content>\n      <ng-content />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ControlComponent<T extends IControl>\n  implements OnDestroy, AfterContentInit\n{\n  private mapService = inject(MapService);\n\n  /* Init inputs */\n  position = input<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>();\n\n  @ViewChild('content', { static: true }) content: ElementRef;\n\n  control: T | CustomControl;\n\n  private controlAdded = false;\n\n  ngAfterContentInit() {\n    if (this.content.nativeElement.childNodes.length) {\n      this.control = new CustomControl(this.content.nativeElement);\n      this.mapService.mapCreated$.subscribe(() => {\n        this.mapService.addControl(this.control!, this.position());\n        this.controlAdded = true;\n      });\n    }\n  }\n\n  ngOnDestroy() {\n    if (this.controlAdded) {\n      this.mapService.removeControl(this.control);\n    }\n  }\n}\n"]}

package/esm2022/lib/control/fullscreen-control.directive.js

@@ -0,0 +1,39 @@
+import { Directive, HostListener, inject, input, } from '@angular/core';
+import { FullscreenControl } from 'mapbox-gl';
+import { MapService } from '../map/map.service';
+import { ControlComponent } from './control.component';
+import * as i0 from "@angular/core";
+export class FullscreenControlDirective {
+    mapService = inject(MapService);
+    controlComponent = inject((ControlComponent), { host: true });
+    /* Init inputs */
+    container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : []));
+    onFullscreen(target) {
+        if (target) {
+            this.mapService.mapInstance.resize();
+        }
+    }
+    ngAfterContentInit() {
+        this.mapService.mapCreated$.subscribe(() => {
+            if (this.controlComponent.control) {
+                throw new Error('Another control is already set for this control');
+            }
+            this.controlComponent.control = new FullscreenControl({
+                container: this.container(),
+            });
+            this.mapService.addControl(this.controlComponent.control, this.controlComponent.position());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FullscreenControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: FullscreenControlDirective, isStandalone: true, selector: "[mglFullscreen]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:webkitfullscreenchange": "onFullscreen($event.target)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FullscreenControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglFullscreen]',
+                }]
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], onFullscreen: [{
+                type: HostListener,
+                args: ['window:webkitfullscreenchange', ['$event.target']]
+            }] } });
+//# sourceMappingURL=fullscreen-control.directive.js.map

package/esm2022/lib/control/fullscreen-control.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-control.directive.js","sourceRoot":"","sources":["../../../../../../libs/ngx-mapbox-gl/src/lib/control/fullscreen-control.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,YAAY,EACZ,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;AAKvD,MAAM,OAAO,0BAA0B;IAC7B,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,gBAAgB,GAAG,MAAM,CAC/B,CAAA,gBAAmC,CAAA,EACnC,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IAEF,iBAAiB;IACjB,SAAS,GAAG,KAAK,+DAAe,CAAC;IAGjC,YAAY,CAAC,MAA0B;QACrC,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QACvC,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;YACzC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAClC,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,iBAAiB,CAAC;gBACpD,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;aAC5B,CAAC,CAAC;YACH,IAAI,CAAC,UAAU,CAAC,UAAU,CACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAC7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CACjC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;uGA9BU,0BAA0B;2FAA1B,0BAA0B;;2FAA1B,0BAA0B;kBAHtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;iBAC5B;;sBAWE,YAAY;uBAAC,+BAA+B,EAAE,CAAC,eAAe,CAAC","sourcesContent":["import {\n  AfterContentInit,\n  Directive,\n  HostListener,\n  inject,\n  input,\n} from '@angular/core';\nimport { FullscreenControl } from 'mapbox-gl';\nimport { MapService } from '../map/map.service';\nimport { ControlComponent } from './control.component';\n\n@Directive({\n  selector: '[mglFullscreen]',\n})\nexport class FullscreenControlDirective implements AfterContentInit {\n  private mapService = inject(MapService);\n  private controlComponent = inject<ControlComponent<FullscreenControl>>(\n    ControlComponent<FullscreenControl>,\n    { host: true },\n  );\n\n  /* Init inputs */\n  container = input<HTMLElement>();\n\n  @HostListener('window:webkitfullscreenchange', ['$event.target'])\n  onFullscreen(target: EventTarget | null) {\n    if (target) {\n      this.mapService.mapInstance.resize();\n    }\n  }\n\n  ngAfterContentInit() {\n    this.mapService.mapCreated$.subscribe(() => {\n      if (this.controlComponent.control) {\n        throw new Error('Another control is already set for this control');\n      }\n      this.controlComponent.control = new FullscreenControl({\n        container: this.container(),\n      });\n      this.mapService.addControl(\n        this.controlComponent.control,\n        this.controlComponent.position(),\n      );\n    });\n  }\n}\n"]}

package/esm2022/lib/control/geolocate-control.directive.js

@@ -0,0 +1,52 @@
+import { Directive, EventEmitter, Output, inject, input, } from '@angular/core';
+import { GeolocateControl } from 'mapbox-gl';
+import { MapService } from '../map/map.service';
+import { ControlComponent } from './control.component';
+import * as i0 from "@angular/core";
+export class GeolocateControlDirective {
+    mapService = inject(MapService);
+    controlComponent = inject((ControlComponent), { host: true });
+    /* Init inputs */
+    positionOptions = input(...(ngDevMode ? [undefined, { debugName: "positionOptions" }] : []));
+    fitBoundsOptions = input(...(ngDevMode ? [undefined, { debugName: "fitBoundsOptions" }] : []));
+    trackUserLocation = input(...(ngDevMode ? [undefined, { debugName: "trackUserLocation" }] : []));
+    showUserLocation = input(...(ngDevMode ? [undefined, { debugName: "showUserLocation" }] : []));
+    showUserHeading = input(...(ngDevMode ? [undefined, { debugName: "showUserHeading" }] : []));
+    geolocate = new EventEmitter();
+    ngAfterContentInit() {
+        this.mapService.mapCreated$.subscribe(() => {
+            if (this.controlComponent.control) {
+                throw new Error('Another control is already set for this control');
+            }
+            const options = {
+                positionOptions: this.positionOptions(),
+                fitBoundsOptions: this.fitBoundsOptions(),
+                trackUserLocation: this.trackUserLocation(),
+                showUserLocation: this.showUserLocation(),
+                showUserHeading: this.showUserHeading(),
+            };
+            Object.keys(options).forEach((key) => {
+                const tkey = key;
+                if (options[tkey] === undefined) {
+                    delete options[tkey];
+                }
+            });
+            this.controlComponent.control = new GeolocateControl(options);
+            this.controlComponent.control.on('geolocate', (data) => {
+                this.geolocate.emit(data);
+            });
+            this.mapService.addControl(this.controlComponent.control, this.controlComponent.position());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GeolocateControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: GeolocateControlDirective, isStandalone: true, selector: "[mglGeolocate]", inputs: { positionOptions: { classPropertyName: "positionOptions", publicName: "positionOptions", isSignal: true, isRequired: false, transformFunction: null }, fitBoundsOptions: { classPropertyName: "fitBoundsOptions", publicName: "fitBoundsOptions", isSignal: true, isRequired: false, transformFunction: null }, trackUserLocation: { classPropertyName: "trackUserLocation", publicName: "trackUserLocation", isSignal: true, isRequired: false, transformFunction: null }, showUserLocation: { classPropertyName: "showUserLocation", publicName: "showUserLocation", isSignal: true, isRequired: false, transformFunction: null }, showUserHeading: { classPropertyName: "showUserHeading", publicName: "showUserHeading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { geolocate: "geolocate" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GeolocateControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglGeolocate]',
+                }]
+        }], propDecorators: { positionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionOptions", required: false }] }], fitBoundsOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitBoundsOptions", required: false }] }], trackUserLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackUserLocation", required: false }] }], showUserLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserLocation", required: false }] }], showUserHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUserHeading", required: false }] }], geolocate: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=geolocate-control.directive.js.map

package/esm2022/lib/control/geolocate-control.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geolocate-control.directive.js","sourceRoot":"","sources":["../../../../../../libs/ngx-mapbox-gl/src/lib/control/geolocate-control.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,YAAY,EACZ,MAAM,EACN,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAmB,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;AAKvD,MAAM,OAAO,yBAAyB;IAC5B,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,gBAAgB,GAAG,MAAM,CAC/B,CAAA,gBAAkC,CAAA,EAClC,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IAEF,iBAAiB;IACjB,eAAe,GAAG,KAAK,qEAAmB,CAAC;IAC3C,gBAAgB,GAAG,KAAK,sEAAkC,CAAC;IAC3D,iBAAiB,GAAG,KAAK,uEAAW,CAAC;IACrC,gBAAgB,GAAG,KAAK,sEAAW,CAAC;IACpC,eAAe,GAAG,KAAK,qEAAW,CAAC;IAGnC,SAAS,GACP,IAAI,YAAY,EAAuB,CAAC;IAE1C,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;YACzC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAClC,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YACD,MAAM,OAAO,GAAG;gBACd,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE;gBACvC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE;gBACzC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE;gBACzC,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE;aACxC,CAAC;YAEF,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAW,EAAE,EAAE;gBAC3C,MAAM,IAAI,GAAG,GAA2B,CAAC;gBACzC,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,SAAS,EAAE,CAAC;oBAChC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;YAC9D,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE;gBACrD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,UAAU,CAAC,UAAU,CACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAC7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CACjC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;uGA9CU,yBAAyB;2FAAzB,yBAAyB;;2FAAzB,yBAAyB;kBAHrC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;iBAC3B;;sBAeE,MAAM","sourcesContent":["import {\n  AfterContentInit,\n  Directive,\n  EventEmitter,\n  Output,\n  inject,\n  input,\n} from '@angular/core';\nimport { GeolocateControl, type MapOptions } from 'mapbox-gl';\nimport { MapService } from '../map/map.service';\nimport { ControlComponent } from './control.component';\n\n@Directive({\n  selector: '[mglGeolocate]',\n})\nexport class GeolocateControlDirective implements AfterContentInit {\n  private mapService = inject(MapService);\n  private controlComponent = inject<ControlComponent<GeolocateControl>>(\n    ControlComponent<GeolocateControl>,\n    { host: true },\n  );\n\n  /* Init inputs */\n  positionOptions = input<PositionOptions>();\n  fitBoundsOptions = input<MapOptions['fitBoundsOptions']>();\n  trackUserLocation = input<boolean>();\n  showUserLocation = input<boolean>();\n  showUserHeading = input<boolean>();\n\n  @Output()\n  geolocate: EventEmitter<GeolocationPosition> =\n    new EventEmitter<GeolocationPosition>();\n\n  ngAfterContentInit() {\n    this.mapService.mapCreated$.subscribe(() => {\n      if (this.controlComponent.control) {\n        throw new Error('Another control is already set for this control');\n      }\n      const options = {\n        positionOptions: this.positionOptions(),\n        fitBoundsOptions: this.fitBoundsOptions(),\n        trackUserLocation: this.trackUserLocation(),\n        showUserLocation: this.showUserLocation(),\n        showUserHeading: this.showUserHeading(),\n      };\n\n      Object.keys(options).forEach((key: string) => {\n        const tkey = key as keyof typeof options;\n        if (options[tkey] === undefined) {\n          delete options[tkey];\n        }\n      });\n      this.controlComponent.control = new GeolocateControl(options);\n      this.controlComponent.control.on('geolocate', (data) => {\n        this.geolocate.emit(data);\n      });\n      this.mapService.addControl(\n        this.controlComponent.control,\n        this.controlComponent.position(),\n      );\n    });\n  }\n}\n"]}

package/esm2022/lib/control/navigation-control.directive.js

@@ -0,0 +1,39 @@
+import { Directive, inject, input } from '@angular/core';
+import { NavigationControl } from 'mapbox-gl';
+import { MapService } from '../map/map.service';
+import { ControlComponent } from './control.component';
+import * as i0 from "@angular/core";
+export class NavigationControlDirective {
+    mapService = inject(MapService);
+    controlComponent = inject((ControlComponent), { host: true });
+    /* Init inputs */
+    showCompass = input(...(ngDevMode ? [undefined, { debugName: "showCompass" }] : []));
+    showZoom = input(...(ngDevMode ? [undefined, { debugName: "showZoom" }] : []));
+    ngAfterContentInit() {
+        this.mapService.mapCreated$.subscribe(() => {
+            if (this.controlComponent.control) {
+                throw new Error('Another control is already set for this control');
+            }
+            const options = {};
+            const showCompass = this.showCompass();
+            const showZoom = this.showZoom();
+            if (showCompass !== undefined) {
+                options.showCompass = showCompass;
+            }
+            if (showZoom !== undefined) {
+                options.showZoom = showZoom;
+            }
+            this.controlComponent.control = new NavigationControl(options);
+            this.mapService.addControl(this.controlComponent.control, this.controlComponent.position());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NavigationControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: NavigationControlDirective, isStandalone: true, selector: "[mglNavigation]", inputs: { showCompass: { classPropertyName: "showCompass", publicName: "showCompass", isSignal: true, isRequired: false, transformFunction: null }, showZoom: { classPropertyName: "showZoom", publicName: "showZoom", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NavigationControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglNavigation]',
+                }]
+        }], propDecorators: { showCompass: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCompass", required: false }] }], showZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZoom", required: false }] }] } });
+//# sourceMappingURL=navigation-control.directive.js.map

package/esm2022/lib/control/navigation-control.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-control.directive.js","sourceRoot":"","sources":["../../../../../../libs/ngx-mapbox-gl/src/lib/control/navigation-control.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;AAKvD,MAAM,OAAO,0BAA0B;IAC7B,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,gBAAgB,GAAG,MAAM,CAC/B,CAAA,gBAAmC,CAAA,EACnC,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IAEF,iBAAiB;IACjB,WAAW,GAAG,KAAK,iEAAW,CAAC;IAC/B,QAAQ,GAAG,KAAK,8DAAW,CAAC;IAE5B,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;YACzC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAClC,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YACD,MAAM,OAAO,GAAkD,EAAE,CAAC;YAClE,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjC,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;gBAC9B,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;YACpC,CAAC;YACD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;YAC9B,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAC/D,IAAI,CAAC,UAAU,CAAC,UAAU,CACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAC7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CACjC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;uGA/BU,0BAA0B;2FAA1B,0BAA0B;;2FAA1B,0BAA0B;kBAHtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,iBAAiB;iBAC5B","sourcesContent":["import { AfterContentInit, Directive, inject, input } from '@angular/core';\nimport { NavigationControl } from 'mapbox-gl';\nimport { MapService } from '../map/map.service';\nimport { ControlComponent } from './control.component';\n\n@Directive({\n  selector: '[mglNavigation]',\n})\nexport class NavigationControlDirective implements AfterContentInit {\n  private mapService = inject(MapService);\n  private controlComponent = inject<ControlComponent<NavigationControl>>(\n    ControlComponent<NavigationControl>,\n    { host: true },\n  );\n\n  /* Init inputs */\n  showCompass = input<boolean>();\n  showZoom = input<boolean>();\n\n  ngAfterContentInit() {\n    this.mapService.mapCreated$.subscribe(() => {\n      if (this.controlComponent.control) {\n        throw new Error('Another control is already set for this control');\n      }\n      const options: { showCompass?: boolean; showZoom?: boolean } = {};\n      const showCompass = this.showCompass();\n      const showZoom = this.showZoom();\n      if (showCompass !== undefined) {\n        options.showCompass = showCompass;\n      }\n      if (showZoom !== undefined) {\n        options.showZoom = showZoom;\n      }\n      this.controlComponent.control = new NavigationControl(options);\n      this.mapService.addControl(\n        this.controlComponent.control,\n        this.controlComponent.position(),\n      );\n    });\n  }\n}\n"]}

package/esm2022/lib/control/scale-control.directive.js

@@ -0,0 +1,45 @@
+import { Directive, inject, input, } from '@angular/core';
+import { ScaleControl } from 'mapbox-gl';
+import { MapService } from '../map/map.service';
+import { ControlComponent } from './control.component';
+import * as i0 from "@angular/core";
+export class ScaleControlDirective {
+    mapService = inject(MapService);
+    controlComponent = inject((ControlComponent), { host: true });
+    /* Init inputs */
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : []));
+    /* Dynamic inputs */
+    unit = input(...(ngDevMode ? [undefined, { debugName: "unit" }] : []));
+    ngOnChanges(changes) {
+        if (changes['unit'] && !changes['unit'].isFirstChange()) {
+            this.controlComponent.control.setUnit(changes['unit'].currentValue);
+        }
+    }
+    ngAfterContentInit() {
+        this.mapService.mapCreated$.subscribe(() => {
+            if (this.controlComponent.control) {
+                throw new Error('Another control is already set for this control');
+            }
+            const options = {};
+            const maxWidth = this.maxWidth();
+            const unit = this.unit();
+            if (maxWidth !== undefined) {
+                options.maxWidth = maxWidth;
+            }
+            if (unit !== undefined) {
+                options.unit = unit;
+            }
+            this.controlComponent.control = new ScaleControl(options);
+            this.mapService.addControl(this.controlComponent.control, this.controlComponent.position());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ScaleControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ScaleControlDirective, isStandalone: true, selector: "[mglScale]", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ScaleControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglScale]',
+                }]
+        }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }] } });
+//# sourceMappingURL=scale-control.directive.js.map

package/esm2022/lib/control/scale-control.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale-control.directive.js","sourceRoot":"","sources":["../../../../../../libs/ngx-mapbox-gl/src/lib/control/scale-control.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAA4B,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;AAKvD,MAAM,OAAO,qBAAqB;IACxB,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,gBAAgB,GAAG,MAAM,CAC/B,CAAA,gBAA8B,CAAA,EAC9B,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IAEF,iBAAiB;IACjB,QAAQ,GAAG,KAAK,8DAAU,CAAC;IAE3B,oBAAoB;IACpB,IAAI,GAAG,KAAK,0DAAsC,CAAC;IAEnD,WAAW,CAAC,OAAsB;QAChC,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC;YACvD,IAAI,CAAC,gBAAgB,CAAC,OAAwB,CAAC,OAAO,CACrD,OAAO,CAAC,MAAM,CAAC,CAAC,YAAY,CAC7B,CAAC;QACJ,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;YACzC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;gBAClC,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YACD,MAAM,OAAO,GAAwB,EAAE,CAAC;YACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACzB,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;YAC9B,CAAC;YACD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;YACtB,CAAC;YACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;YAC1D,IAAI,CAAC,UAAU,CAAC,UAAU,CACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAC7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CACjC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;uGAzCU,qBAAqB;2FAArB,qBAAqB;;2FAArB,qBAAqB;kBAHjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;iBACvB","sourcesContent":["import {\n  AfterContentInit,\n  Directive,\n  OnChanges,\n  SimpleChanges,\n  inject,\n  input,\n} from '@angular/core';\nimport { ScaleControl, type ScaleControlOptions } from 'mapbox-gl';\nimport { MapService } from '../map/map.service';\nimport { ControlComponent } from './control.component';\n\n@Directive({\n  selector: '[mglScale]',\n})\nexport class ScaleControlDirective implements AfterContentInit, OnChanges {\n  private mapService = inject(MapService);\n  private controlComponent = inject<ControlComponent<ScaleControl>>(\n    ControlComponent<ScaleControl>,\n    { host: true },\n  );\n\n  /* Init inputs */\n  maxWidth = input<number>();\n\n  /* Dynamic inputs */\n  unit = input<'imperial' | 'metric' | 'nautical'>();\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['unit'] && !changes['unit'].isFirstChange()) {\n      (this.controlComponent.control as ScaleControl).setUnit(\n        changes['unit'].currentValue,\n      );\n    }\n  }\n\n  ngAfterContentInit() {\n    this.mapService.mapCreated$.subscribe(() => {\n      if (this.controlComponent.control) {\n        throw new Error('Another control is already set for this control');\n      }\n      const options: ScaleControlOptions = {};\n      const maxWidth = this.maxWidth();\n      const unit = this.unit();\n      if (maxWidth !== undefined) {\n        options.maxWidth = maxWidth;\n      }\n      if (unit !== undefined) {\n        options.unit = unit;\n      }\n      this.controlComponent.control = new ScaleControl(options);\n      this.mapService.addControl(\n        this.controlComponent.control,\n        this.controlComponent.position(),\n      );\n    });\n  }\n}\n"]}

package/esm2022/lib/draggable/draggable.directive.js

@@ -0,0 +1,121 @@
+import { Directive, EventEmitter, NgZone, Output, inject, input, } from '@angular/core';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter, switchMap, take, takeUntil, tap } from 'rxjs/operators';
+import { MapService } from '../map/map.service';
+import { FeatureComponent } from '../source/geojson/feature.component';
+import * as i0 from "@angular/core";
+export class DraggableDirective {
+    mapService = inject(MapService);
+    ngZone = inject(NgZone);
+    featureComponent = inject(FeatureComponent, {
+        optional: true,
+        host: true,
+    });
+    layer = input(undefined, { ...(ngDevMode ? { debugName: "layer" } : {}), alias: 'mglDraggable' });
+    featureDragStart = new EventEmitter();
+    featureDragEnd = new EventEmitter();
+    featureDrag = new EventEmitter();
+    sub = new Subscription();
+    ngOnInit() {
+        let enter$;
+        let leave$;
+        let updateCoords;
+        const layer = this.layer();
+        if (this.featureComponent && layer) {
+            enter$ = layer.layerMouseEnter;
+            leave$ = layer.layerMouseLeave;
+            updateCoords = this.featureComponent.updateCoordinates.bind(this.featureComponent);
+            if (this.featureComponent.geometry().type !== 'Point') {
+                throw new Error('mglDraggable only support point feature');
+            }
+        }
+        else {
+            throw new Error('mglDraggable can only be used on Feature (with a layer as input) or Marker');
+        }
+        this.handleDraggable(enter$, leave$, updateCoords);
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    handleDraggable(enter$, leave$, updateCoords) {
+        let moving = false;
+        let inside = false;
+        this.mapService.mapCreated$.subscribe(() => {
+            const mouseUp$ = fromEvent(this.mapService.mapInstance, 'mouseup');
+            const dragStart$ = enter$.pipe(filter(() => !moving), filter((evt) => this.filterFeature(evt)), tap(() => {
+                inside = true;
+                this.mapService.changeCanvasCursor('move');
+                this.mapService.updateDragPan(false);
+            }), switchMap(() => fromEvent(this.mapService.mapInstance, 'mousedown').pipe(takeUntil(leave$))));
+            const dragging$ = dragStart$.pipe(switchMap(() => fromEvent(this.mapService.mapInstance, 'mousemove').pipe(takeUntil(mouseUp$))));
+            const dragEnd$ = dragStart$.pipe(switchMap(() => mouseUp$.pipe(take(1))));
+            this.sub.add(dragStart$.subscribe((evt) => {
+                moving = true;
+                if (this.featureDragStart.observed) {
+                    this.ngZone.run(() => {
+                        this.featureDragStart.emit(evt);
+                    });
+                }
+            }));
+            this.sub.add(dragging$.subscribe((evt) => {
+                updateCoords([evt.lngLat.lng, evt.lngLat.lat]);
+                if (this.featureDrag.observed) {
+                    this.ngZone.run(() => {
+                        this.featureDrag.emit(evt);
+                    });
+                }
+            }));
+            this.sub.add(dragEnd$.subscribe((evt) => {
+                moving = false;
+                if (this.featureDragEnd.observed) {
+                    this.ngZone.run(() => {
+                        this.featureDragEnd.emit(evt);
+                    });
+                }
+                if (!inside) {
+                    // It's possible to dragEnd outside the target (small input lag)
+                    this.mapService.changeCanvasCursor('');
+                    this.mapService.updateDragPan(true);
+                }
+            }));
+            this.sub.add(leave$
+                .pipe(tap(() => (inside = false)), filter(() => !moving))
+                .subscribe(() => {
+                this.mapService.changeCanvasCursor('');
+                this.mapService.updateDragPan(true);
+            }));
+        });
+    }
+    filterFeature(evt) {
+        const layer = this.layer();
+        if (this.featureComponent && layer) {
+            const feature = this.mapService.queryRenderedFeatures(evt.point, {
+                layers: [layer.id()],
+                filter: [
+                    'all',
+                    ['==', '$type', 'Point'],
+                    ['==', '$id', this.featureComponent.id()],
+                ],
+            })[0];
+            if (!feature) {
+                return false;
+            }
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DraggableDirective, isStandalone: true, selector: "[mglDraggable]", inputs: { layer: { classPropertyName: "layer", publicName: "mglDraggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { featureDragStart: "featureDragStart", featureDragEnd: "featureDragEnd", featureDrag: "featureDrag" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglDraggable]',
+                }]
+        }], propDecorators: { layer: [{ type: i0.Input, args: [{ isSignal: true, alias: "mglDraggable", required: false }] }], featureDragStart: [{
+                type: Output
+            }], featureDragEnd: [{
+                type: Output
+            }], featureDrag: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=draggable.directive.js.map

package/esm2022/lib/draggable/draggable.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.directive.js","sourceRoot":"","sources":["../../../../../../libs/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  EventEmitter,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Output,\n  inject,\n  input,\n} from '@angular/core';\nimport { MapMouseEvent } from 'mapbox-gl';\nimport { fromEvent, Observable, Subscription } from 'rxjs';\nimport { filter, switchMap, take, takeUntil, tap } from 'rxjs/operators';\nimport { LayerComponent } from '../layer/layer.component';\nimport { MapService } from '../map/map.service';\nimport { FeatureComponent } from '../source/geojson/feature.component';\n\n@Directive({\n  selector: '[mglDraggable]',\n})\nexport class DraggableDirective implements OnInit, OnDestroy {\n  private mapService = inject(MapService);\n  private ngZone = inject(NgZone);\n  private featureComponent = inject(FeatureComponent, {\n    optional: true,\n    host: true,\n  });\n\n  layer = input<LayerComponent>(undefined, { alias: 'mglDraggable' });\n\n  @Output() featureDragStart = new EventEmitter<MapMouseEvent>();\n  @Output() featureDragEnd = new EventEmitter<MapMouseEvent>();\n  @Output() featureDrag = new EventEmitter<MapMouseEvent>();\n\n  private sub = new Subscription();\n\n  ngOnInit() {\n    let enter$;\n    let leave$;\n    let updateCoords;\n    const layer = this.layer();\n    if (this.featureComponent && layer) {\n      enter$ = layer.layerMouseEnter;\n      leave$ = layer.layerMouseLeave;\n      updateCoords = this.featureComponent.updateCoordinates.bind(\n        this.featureComponent,\n      );\n      if (this.featureComponent.geometry().type !== 'Point') {\n        throw new Error('mglDraggable only support point feature');\n      }\n    } else {\n      throw new Error(\n        'mglDraggable can only be used on Feature (with a layer as input) or Marker',\n      );\n    }\n\n    this.handleDraggable(enter$, leave$, updateCoords);\n  }\n\n  ngOnDestroy() {\n    this.sub.unsubscribe();\n  }\n\n  private handleDraggable(\n    enter$: Observable<MapMouseEvent>,\n    leave$: Observable<MapMouseEvent>,\n    updateCoords: (coord: number[]) => void,\n  ) {\n    let moving = false;\n    let inside = false;\n    this.mapService.mapCreated$.subscribe(() => {\n      const mouseUp$ = fromEvent<MapMouseEvent>(\n        this.mapService.mapInstance,\n        'mouseup',\n      );\n      const dragStart$ = enter$.pipe(\n        filter(() => !moving),\n        filter((evt) => this.filterFeature(evt)),\n        tap(() => {\n          inside = true;\n          this.mapService.changeCanvasCursor('move');\n          this.mapService.updateDragPan(false);\n        }),\n        switchMap(() =>\n          fromEvent<MapMouseEvent>(\n            this.mapService.mapInstance,\n            'mousedown',\n          ).pipe(takeUntil(leave$)),\n        ),\n      );\n      const dragging$ = dragStart$.pipe(\n        switchMap(() =>\n          fromEvent<MapMouseEvent>(\n            this.mapService.mapInstance,\n            'mousemove',\n          ).pipe(takeUntil(mouseUp$)),\n        ),\n      );\n      const dragEnd$ = dragStart$.pipe(switchMap(() => mouseUp$.pipe(take(1))));\n      this.sub.add(\n        dragStart$.subscribe((evt) => {\n          moving = true;\n          if (this.featureDragStart.observed) {\n            this.ngZone.run(() => {\n              this.featureDragStart.emit(evt);\n            });\n          }\n        }),\n      );\n      this.sub.add(\n        dragging$.subscribe((evt) => {\n          updateCoords([evt.lngLat.lng, evt.lngLat.lat]);\n          if (this.featureDrag.observed) {\n            this.ngZone.run(() => {\n              this.featureDrag.emit(evt);\n            });\n          }\n        }),\n      );\n      this.sub.add(\n        dragEnd$.subscribe((evt) => {\n          moving = false;\n          if (this.featureDragEnd.observed) {\n            this.ngZone.run(() => {\n              this.featureDragEnd.emit(evt);\n            });\n          }\n          if (!inside) {\n            // It's possible to dragEnd outside the target (small input lag)\n            this.mapService.changeCanvasCursor('');\n            this.mapService.updateDragPan(true);\n          }\n        }),\n      );\n      this.sub.add(\n        leave$\n          .pipe(\n            tap(() => (inside = false)),\n            filter(() => !moving),\n          )\n          .subscribe(() => {\n            this.mapService.changeCanvasCursor('');\n            this.mapService.updateDragPan(true);\n          }),\n      );\n    });\n  }\n\n  private filterFeature(evt: MapMouseEvent) {\n    const layer = this.layer();\n    if (this.featureComponent && layer) {\n      const feature: GeoJSON.Feature<GeoJSON.GeometryObject> =\n        this.mapService.queryRenderedFeatures(evt.point, {\n          layers: [layer.id()],\n          filter: [\n            'all',\n            ['==', '$type', 'Point'],\n            ['==', '$id', this.featureComponent.id()],\n          ],\n        })[0];\n      if (!feature) {\n        return false;\n      }\n    }\n    return true;\n  }\n}\n"]}

package/esm2022/lib/image/image.component.js

@@ -0,0 +1,79 @@
+import { Component, EventEmitter, NgZone, Output, inject, input, } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { filter, startWith, switchMap } from 'rxjs/operators';
+import { MapService } from '../map/map.service';
+import * as i0 from "@angular/core";
+export class ImageComponent {
+    mapService = inject(MapService);
+    zone = inject(NgZone);
+    /* Init inputs */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    /* Dynamic inputs */
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+    url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : []));
+    imageError = new EventEmitter();
+    imageLoaded = new EventEmitter();
+    isAdded = false;
+    isAdding = false;
+    sub;
+    ngOnInit() {
+        this.sub = this.mapService.mapLoaded$
+            .pipe(switchMap(() => fromEvent(this.mapService.mapInstance, 'styledata').pipe(startWith(undefined), filter(() => !this.isAdding &&
+            !this.mapService.mapInstance.hasImage(this.id())))))
+            .subscribe(() => this.init());
+    }
+    ngOnChanges(changes) {
+        if ((changes['data'] && !changes['data'].isFirstChange()) ||
+            (changes['options'] && !changes['options'].isFirstChange()) ||
+            (changes['url'] && !changes['url'].isFirstChange())) {
+            this.ngOnDestroy();
+            this.ngOnInit();
+        }
+    }
+    ngOnDestroy() {
+        if (this.isAdded) {
+            this.mapService.removeImage(this.id());
+        }
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+    }
+    async init() {
+        this.isAdding = true;
+        if (this.data()) {
+            this.mapService.addImage(this.id(), this.data(), this.options());
+            this.isAdded = true;
+            this.isAdding = false;
+        }
+        else if (this.url()) {
+            try {
+                await this.mapService.loadAndAddImage(this.id(), this.url(), this.options());
+                this.isAdded = true;
+                this.isAdding = false;
+                this.zone.run(() => {
+                    this.imageLoaded.emit();
+                });
+            }
+            catch (error) {
+                this.zone.run(() => {
+                    this.imageError.emit(error);
+                });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: ImageComponent, isStandalone: true, selector: "mgl-image", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageError: "imageError", imageLoaded: "imageLoaded" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mgl-image',
+                    template: '',
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], imageError: [{
+                type: Output
+            }], imageLoaded: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=image.component.js.map