draft: move to signal

projects/ngx-maplibre-gl/package.json

@@ -20,8 +20,8 @@
   },
   "homepage": "https://github.com/maplibre/ngx-maplibre-gl#readme",
   "peerDependencies": {
-    "@angular/common": ">= 17.0.0",
-    "@angular/core": ">= 17.0.0",
+    "@angular/common": ">= 17.1.0",
+    "@angular/core": ">= 17.1.0",
     "maplibre-gl": ">= 3.6.0",
     "rxjs": ">= 7.8.1"
   }

projects/ngx-maplibre-gl/src/lib/control/attribution-control.directive.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Directive, Host, Input } from '@angular/core';
+import { AfterContentInit, Directive, Host, input } from '@angular/core';
 import { AttributionControl } from 'maplibre-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
@@ -17,9 +17,9 @@ import { ControlComponent } from './control.component';
 })
 export class AttributionControlDirective implements AfterContentInit {
   /** Init input */
-  @Input() compact?: boolean;
+  compact = input<boolean>();
   /** Init input */
-  @Input() customAttribution?: string | string[];
+  customAttribution = input<string | string[]>();
 
   constructor(
     private mapService: MapService,
@@ -35,16 +35,16 @@ export class AttributionControlDirective implements AfterContentInit {
         compact?: boolean;
         customAttribution?: string | string[];
       } = {};
-      if (this.compact !== undefined) {
-        options.compact = this.compact;
+      if (this.compact() !== undefined) {
+        options.compact = this.compact();
       }
-      if (this.customAttribution !== undefined) {
-        options.customAttribution = this.customAttribution;
+      if (this.customAttribution() !== undefined) {
+        options.customAttribution = this.customAttribution();
       }
       this.controlComponent.control = new AttributionControl(options);
       this.mapService.addControl(
         this.controlComponent.control,
-        this.controlComponent.position
+        this.controlComponent.position()
       );
     });
   }

projects/ngx-maplibre-gl/src/lib/control/control.component.ts

@@ -2,10 +2,10 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
-  Input,
   OnDestroy,
   ViewChild,
-  afterNextRender
+  afterNextRender,
+  input
 } from '@angular/core';
 import { ControlPosition, IControl } from 'maplibre-gl';
 import { MapService } from '../map/map.service';
@@ -59,7 +59,7 @@ export class CustomControl implements IControl {
 })
 export class ControlComponent<T extends IControl> implements OnDestroy {
   /** Init input */
-  @Input() position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  position = input<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>();
   /** @hidden */
   @ViewChild('content', { static: true }) content: ElementRef;
 
@@ -70,7 +70,7 @@ export class ControlComponent<T extends IControl> implements OnDestroy {
       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.mapService.addControl(this.control!, this.position());
         });
       }
     });

projects/ngx-maplibre-gl/src/lib/control/fullscreen-control.directive.ts

@@ -3,7 +3,7 @@ import {
   Directive,
   Host,
   HostListener,
-  Input,
+  input
 } from '@angular/core';
 import { FullscreenControl } from 'maplibre-gl';
 import { MapService } from '../map/map.service';
@@ -20,7 +20,7 @@ import { ControlComponent } from './control.component';
 })
 export class FullscreenControlDirective implements AfterContentInit {
   /* Init inputs */
-  @Input() container?: HTMLElement;
+  container = input<HTMLElement>();
   @HostListener('window:webkitfullscreenchange', ['$event.target'])
   onFullscreen() {
     this.mapService.mapInstance.resize();
@@ -37,11 +37,11 @@ export class FullscreenControlDirective implements AfterContentInit {
         throw new Error('Another control is already set for this control');
       }
       this.controlComponent.control = new FullscreenControl({
-        container: this.container,
+        container: this.container(),
       });
       this.mapService.addControl(
         this.controlComponent.control,
-        this.controlComponent.position
+        this.controlComponent.position()
       );
     });
   }

projects/ngx-maplibre-gl/src/lib/control/geolocate-control.directive.ts

@@ -3,13 +3,13 @@ import {
   Directive,
   EventEmitter,
   Host,
-  Input,
+  input,
   Output,
 } from '@angular/core';
 import { FitBoundsOptions, GeolocateControl } from 'maplibre-gl';
 import { MapService } from '../map/map.service';
-import { ControlComponent } from './control.component';
 import { Position } from '../map/map.types';
+import { ControlComponent } from './control.component';
 
 /**
  * `mglGeolocate` - a geolocate control directive
@@ -25,10 +25,10 @@ import { Position } from '../map/map.types';
 })
 export class GeolocateControlDirective implements AfterContentInit {
   /* Init inputs */
-  @Input() positionOptions?: PositionOptions;
-  @Input() fitBoundsOptions?: FitBoundsOptions;
-  @Input() trackUserLocation?: boolean;
-  @Input() showUserLocation?: boolean;
+  positionOptions = input<PositionOptions>();
+  fitBoundsOptions = input<FitBoundsOptions>();
+  trackUserLocation = input<boolean>();
+  showUserLocation = input<boolean>();
 
   @Output()
   geolocate: EventEmitter<Position> = new EventEmitter<Position>();
@@ -44,10 +44,10 @@ export class GeolocateControlDirective implements AfterContentInit {
         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,
+        positionOptions: this.positionOptions(),
+        fitBoundsOptions: this.fitBoundsOptions(),
+        trackUserLocation: this.trackUserLocation(),
+        showUserLocation: this.showUserLocation(),
       };
 
       Object.keys(options).forEach((key: string) => {
@@ -62,7 +62,7 @@ export class GeolocateControlDirective implements AfterContentInit {
       });
       this.mapService.addControl(
         this.controlComponent.control,
-        this.controlComponent.position
+        this.controlComponent.position()
       );
     });
   }

projects/ngx-maplibre-gl/src/lib/control/navigation-control.directive.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Directive, Host, Input } from '@angular/core';
+import { AfterContentInit, Directive, Host, input } from '@angular/core';
 import { NavigationControl } from 'maplibre-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
@@ -17,9 +17,9 @@ import { ControlComponent } from './control.component';
 })
 export class NavigationControlDirective implements AfterContentInit {
   /* Init inputs */
-  @Input() showCompass?: boolean;
-  @Input() showZoom?: boolean;
-  @Input() visualizePitch?: boolean;
+  showCompass = input<boolean>();
+  showZoom = input<boolean>();
+  visualizePitch = input<boolean>();
 
   constructor(
     private mapService: MapService,
@@ -38,22 +38,22 @@ export class NavigationControlDirective implements AfterContentInit {
         visualizePitch?: boolean;
       } = {};
 
-      if (this.showCompass !== undefined) {
-        options.showCompass = this.showCompass;
+      if (this.showCompass() !== undefined) {
+        options.showCompass = this.showCompass();
       }
 
-      if (this.showZoom !== undefined) {
-        options.showZoom = this.showZoom;
+      if (this.showZoom() !== undefined) {
+        options.showZoom = this.showZoom();
       }
 
-      if (this.visualizePitch != undefined) {
-        options.visualizePitch = this.visualizePitch;
+      if (this.visualizePitch() !== undefined) {
+        options.visualizePitch = this.visualizePitch();
       }
 
       this.controlComponent.control = new NavigationControl(options);
       this.mapService.addControl(
         this.controlComponent.control,
-        this.controlComponent.position
+        this.controlComponent.position()
       );
     });
   }

projects/ngx-maplibre-gl/src/lib/control/scale-control.directive.ts

@@ -2,7 +2,7 @@ import {
   AfterContentInit,
   Directive,
   Host,
-  Input,
+  input,
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
@@ -24,10 +24,10 @@ import { ControlComponent } from './control.component';
 })
 export class ScaleControlDirective implements AfterContentInit, OnChanges {
   /* Init inputs */
-  @Input() maxWidth?: number;
+  maxWidth = input<number>();
 
   /* Dynamic inputs */
-  @Input() unit?: 'imperial' | 'metric' | 'nautical';
+  unit = input<'imperial' | 'metric' | 'nautical'>();
 
   constructor(
     private mapService: MapService,
@@ -48,16 +48,16 @@ export class ScaleControlDirective implements AfterContentInit, OnChanges {
         throw new Error('Another control is already set for this control');
       }
       const options: ScaleControlOptions = {};
-      if (this.maxWidth !== undefined) {
-        options.maxWidth = this.maxWidth;
+      if (this.maxWidth() !== undefined) {
+        options.maxWidth = this.maxWidth();
       }
-      if (this.unit !== undefined) {
-        options.unit = this.unit;
+      if (this.unit() !== undefined) {
+        options.unit = this.unit();
       }
       this.controlComponent.control = new ScaleControl(options);
       this.mapService.addControl(
         this.controlComponent.control,
-        this.controlComponent.position
+        this.controlComponent.position()
       );
     });
   }

projects/ngx-maplibre-gl/src/lib/control/terrain-control.directive.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Directive, Host, Input } from '@angular/core';
+import { AfterContentInit, Directive, Host, input } from '@angular/core';
 import { TerrainControl, TerrainSpecification } from 'maplibre-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
@@ -17,8 +17,8 @@ import { ControlComponent } from './control.component';
 })
 export class TerrainControlDirective implements AfterContentInit {
   /* Init inputs */
-  @Input() source: string;
-  @Input() exaggeration?: number;
+  source = input.required<string>();
+  exaggeration = input<number>();
 
   constructor(
     private mapService: MapService,
@@ -32,15 +32,15 @@ export class TerrainControlDirective implements AfterContentInit {
       }
 
       const options: TerrainSpecification = {
-        source: this.source,
-        exaggeration: this.exaggeration ?? 1,
+        source: this.source(),
+        exaggeration: this.exaggeration() ?? 1,
       };
 
       this.controlComponent.control = new TerrainControl(options);
 
       this.mapService.addControl(
         this.controlComponent.control,
-        this.controlComponent.position
+        this.controlComponent.position()
       );
     });
   }

projects/ngx-maplibre-gl/src/lib/draggable/draggable.directive.ts

@@ -2,15 +2,15 @@ import {
   Directive,
   EventEmitter,
   Host,
-  Input,
   NgZone,
   OnDestroy,
   OnInit,
   Optional,
   Output,
+  input
 } from '@angular/core';
 import { MapMouseEvent } from 'maplibre-gl';
-import { fromEvent, Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, fromEvent } from 'rxjs';
 import { filter, switchMap, take, takeUntil, tap } from 'rxjs/operators';
 import { LayerComponent } from '../layer/layer.component';
 import { MapService } from '../map/map.service';
@@ -29,7 +29,7 @@ import { FeatureComponent } from '../source/geojson/feature.component';
 })
 export class DraggableDirective implements OnInit, OnDestroy {
   // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('mglDraggable') layer?: LayerComponent;
+  layer = input<LayerComponent | undefined>(undefined, { alias: 'mglDraggable' });
 
   @Output() featureDragStart = new EventEmitter<MapMouseEvent>();
   @Output() featureDragEnd = new EventEmitter<MapMouseEvent>();
@@ -47,9 +47,9 @@ export class DraggableDirective implements OnInit, OnDestroy {
     let enter$;
     let leave$;
     let updateCoords;
-    if (this.featureComponent && this.layer) {
-      enter$ = this.layer.layerMouseEnter;
-      leave$ = this.layer.layerMouseLeave;
+    if (this.featureComponent && this.layer()) {
+      enter$ = this.layer()!.layerMouseEnter;
+      leave$ = this.layer()!.layerMouseLeave;
       updateCoords = this.featureComponent.updateCoordinates.bind(
         this.featureComponent
       );
@@ -155,11 +155,11 @@ export class DraggableDirective implements OnInit, OnDestroy {
   }
 
   private filterFeature(evt: MapMouseEvent) {
-    if (this.featureComponent && this.layer) {
+    if (this.featureComponent && this.layer()) {
       const feature: GeoJSON.Feature = this.mapService.queryRenderedFeatures(
         evt.point,
         {
-          layers: [this.layer.id],
+          layers: [this.layer()!.id()],
           filter: [
             'all',
             ['==', '$type', 'Point'],