npm - @bluehalo/ngx-leaflet - Versions diffs - 19.0.0 → 21.0.0 - Mend

@bluehalo/ngx-leaflet 19.0.0 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGES.md +9 -0
package/README.md +88 -64
package/fesm2022/bluehalo-ngx-leaflet.mjs +23 -28
package/fesm2022/bluehalo-ngx-leaflet.mjs.map +1 -1
package/package.json +7 -7
package/types/bluehalo-ngx-leaflet.d.ts +316 -0
package/index.d.ts +0 -5
package/lib/core/leaflet.directive.d.ts +0 -94
package/lib/core/leaflet.directive.wrapper.d.ts +0 -8
package/lib/core/leaflet.util.d.ts +0 -7
package/lib/layers/base/leaflet-baselayers.directive.d.ts +0 -45
package/lib/layers/control/leaflet-control-layers-changes.model.d.ts +0 -6
package/lib/layers/control/leaflet-control-layers-config.model.d.ts +0 -9
package/lib/layers/control/leaflet-control-layers.directive.d.ts +0 -35
package/lib/layers/control/leaflet-control-layers.wrapper.d.ts +0 -14
package/lib/layers/leaflet-layer.directive.d.ts +0 -30
package/lib/layers/leaflet-layers.directive.d.ts +0 -41
package/lib/layers/leaflet-tile-layer-definition.model.d.ts +0 -33
package/lib/leaflet.module.d.ts +0 -11
package/public-api.d.ts +0 -12

package/CHANGES.md CHANGED Viewed

@@ -1,5 +1,14 @@
 # Changelog
+## 21.0
+Support for Angular.io 21.
+One note for v21 - Angular moved to Zoneless detection by default (https://angular.dev/guide/zoneless). This has implications, particularly for this library. For example, events are emitted outside of the change detection zone.
+You may need to make some changes to your application if you rely on the events generated by the maps. See the migration guide for details (https://angular.dev/update-guide?v=20.0-21.0&l=1).
+## 20.0
+Support for Angular.io 20.
 ## 19.0
 Support for Angular.io 19.

package/README.md CHANGED Viewed

@@ -43,9 +43,10 @@ Generally, the steps are:
 * Install Leaflet, this library, and potentially the Leaflet typings (see above).
 * Import the Leaflet stylesheet
-* Import the ```LeafletModule``` into your Angular project
+* Import the `LeafletDirective` etc. into your Module or standalone Component
 * Create and configure a map (see docs below and/or demo)
+Alternatively, you can use the `LeafletModule` to import the module into your application.
 ### Import the Leaflet Stylesheet
 For leaflet to work, you need to have the leaflet stylesheets loaded into your application.
@@ -55,7 +56,7 @@ How you include the stylesheet will depend on your specific setup. Here are a fe
 #### Direct Import from HTML
 If you are just building a webpage and not using a bundler for your css, you'll want to directly import the css file in your HTML page.
-```html
+```angular181html
 <head>
 	...
 	<link rel="stylesheet" type="text/css" href="./node_modules/leaflet/dist/leaflet.css">
@@ -102,7 +103,7 @@ The demo contained in this project demonstrates how to get around this problem.
 1. Configure Leaflet to use the asset URLs as custom marker images.
-```js
+```typescript
 let layer = marker([ 46.879966, -121.726909 ], {
 	icon: icon({
 		...Icon.Default.prototype.options,
@@ -114,21 +115,31 @@ let layer = marker([ 46.879966, -121.726909 ], {
 ```
-### Import LeafletModule
+### Import LeafletDirective
 Before you can use the Leaflet components in your Angular.io app, you'll need to import it in your application.
 Depending on if you're using standalone mode or not, you will import it into your modules and/or components.
-```js
-import { LeafletModule } from '@bluehalo/ngx-leaflet';
-...
-imports: [
-       ...
-       LeafletModule
-]
-...
+```typescript
+import { LeafletDirective } from '@bluehalo/ngx-leaflet';
+@Component({
+    imports: [
+        LeafletDirective // Import the LeafletDirective here
+        // import other directives as needed
+    ],
+})
+```
+Alternatively:
+```typescript
+import { LeafletModule } from '@bluehalo/ngx-leaflet';
+@NgModule({
+    imports: [
+        LeafletModule // Import the LeafletModule here
+    ],
+})
 ```
 ### Create and Configure a Map
@@ -139,7 +150,7 @@ To get a basic map to work, you have to:
 * Provide an initial zoom/center and set of layers either via ```leafletOptions``` or by binding to ```leafletZoom```, ```leafletCenter```, and ```leafletLayers```.
 Template:
-```html
+```angular181html
 <div style="height: 300px;"
      leaflet
      [leafletOptions]="options">
@@ -147,7 +158,7 @@ Template:
 ```
 Example leafletOptions object:
-```js
+```typescript
 options = {
 	layers: [
 		tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
@@ -160,7 +171,7 @@ options = {
 Changes to leafletOptions are ignored after they are initially set.
 This is because these options are passed into the map constructor, so they can't be changed anyways.
 So, make sure the object exists before the map is created.
-You'll want to create the object in ```ngOnInit``` or hide the map DOM element with ```*ngIf``` until you can create the options object.
+You'll want to create the object in ```ngOnInit``` or hide the map DOM element with ```@if``` until you can create the options object.
 ### Add a Layers Control
@@ -168,7 +179,7 @@ The ```[leafletLayersControl]``` input bindings give you the ability to add the
 The layers control lets the user toggle layers and overlays on and off.
 Template:
-```html
+```angular181html
 <div style="height: 300px;"
      leaflet
      [leafletOptions]="options"
@@ -176,17 +187,27 @@ Template:
 </div>
 ```
-Example layersControl object:
-```js
-layersControl = {
-	baseLayers: {
-		'Open Street Map': tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
-		'Open Cycle Map': tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
-	},
-	overlays: {
-		'Big Circle': circle([ 46.95, -122 ], { radius: 5000 }),
-		'Big Square': polygon([[ 46.8, -121.55 ], [ 46.9, -121.55 ], [ 46.9, -121.7 ], [ 46.8, -121.7 ]])
-	}
+Component with example layersControl object:
+```typescript
+import { LeafletDirective, LeafletLayersControlDirective } from '@bluehalo/ngx-leaflet';
+@Component({
+    imports: [
+        LeafletDirective,
+        LeafletLayersControlDirective,
+    ],
+})
+export class MyComponent {
+    protected readonly layersControl = {
+        baseLayers: {
+            'Open Street Map': tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
+            'Open Cycle Map': tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
+        },
+        overlays: {
+            'Big Circle': circle([ 46.95, -122 ], { radius: 5000 }),
+            'Big Square': polygon([[ 46.8, -121.55 ], [ 46.9, -121.55 ], [ 46.9, -121.7 ], [ 46.8, -121.7 ]])
+        }
+    }
 }
 ```
@@ -199,7 +220,7 @@ There are several different ways to add layers to the map.
 You can add layers (baselayers, markers, or custom layers) to the map without showing them in the layer control using the ```[leafletLayers]``` directive.
 Template:
-```html
+```angular181html
 <div style="height: 300px;"
      leaflet
      [leafletOptions]="options"
@@ -208,7 +229,7 @@ Template:
 ```
 Layers array:
-```js
+```typescript
 layers = [
 	circle([ 46.95, -122 ], { radius: 5000 }),
 	polygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]),
@@ -217,19 +238,22 @@ layers = [
 ```
 You can also add an individual layer to the map using the ```[leafletLayer]``` directive.
-Using this approach allows you to use ```*ngFor``` and ```*ngIf``` to control whether individual layers are added to or removed from the map.
+Using this approach allows you to use ```@for``` and ```@if``` to control whether individual layers are added to or removed from the map.
 Template:
-```html
+```angular181html
 <div style="height: 300px;"
      leaflet
      [leafletOptions]="options">
-     <div *ngIf="showLayer" [leafletLayer]="layer"></div>
+    @if (showLayer) {
+        <div [leafletLayer]="layer"></div>
+    }
 </div>
 ```
 Layer:
-```js
+```typescript
 layer = circle([ 46.95, -122 ], { radius: 5000 });
 ```
@@ -268,7 +292,7 @@ This section includes more detailed documentation of the functionality of the di
 ### Advanced Map Configuration
 There are several input bindings available for configuring the map.
-```html
+```angular181html
 <div leaflet style="height: 300px;"
      [leafletOptions]="options"
      [leafletPanOptions]="panOptions"
@@ -295,7 +319,7 @@ Input binding for FitBounds options (see [Leaflet's](https://leafletjs.com/Slava
 ### Dynamically changing zoom level, center, fitBounds, etc.
-```html
+```angular181html
 <div leaflet style="height: 300px;"
      [leafletOptions]="options"
      [(leafletZoom)]="zoom"
@@ -336,7 +360,7 @@ If you plan to show more than just baselayers, you should use the more advanced
 For an example of the basic map setup, you should check out the *Simple Base Layers* demo.
-```html
+```angular181html
 <div leaflet style="height: 300px;"
      [leafletOptions]="options"
      [leafletBaseLayers]="baseLayers"
@@ -347,7 +371,7 @@ For an example of the basic map setup, you should check out the *Simple Base Lay
 #### [leafletBaseLayers]: Control.LayersObject
 Input bind an ```Control.LayersObject``` to be synced to the map.
-```js
+```typescript
 baseLayers: {
 	'layer1': Layer,
 	'layer2': Layer
@@ -383,7 +407,7 @@ And, use ```[leafletLayersControl]``` to allow users to optionally turn layers/o
 For an example of using the layers controls, you should check out the *Layers and Layer Controls* demo.
-```html
+```angular181html
 <div leaflet style="height: 300px;"
      [leafletOptions]="options"
      [leafletLayers]="layers"
@@ -404,7 +428,7 @@ As a result of how the map is synced, the order of layers is not guaranteed to b
 #### [leafletLayersControl]: Control.Layers
 Input bind a Control.Layers specification. The object contains properties for each of the two constructor arguments for the Control.Layers constructor.
-```js
+```typescript
 layersControl: {
 	baseLayers: {
 		'layerName': Layer
@@ -420,16 +444,20 @@ Input binding for Control.Layers options (see [Leaflet's](https://leafletjs.com/
 These options are passed into the constructor on creation.
-### Advanced Layer Management: Individual Layers and *ngFor / *ngIf
+### Advanced Layer Management: Individual Layers and @for / @if
 The ```[leafletLayer]``` input bindings gives you the ability to add a single layer to the map.
 While this may seem limiting, you can nest elements inside the map element, each with a ```[leafletLayer]``` input.
 The result of this is that each layer will be added to the map.
-If you add a structural directive - ```*ngFor``` or ```*ngIf``` - you can get some added flexibility when controlling layers.
+If you add a structural directive - ```@for``` or ```@if``` - you can get some added flexibility when controlling layers.
-```html
+```angular181html
 <div leaflet style="height: 300px;"
      [leafletOptions]="options">
-	<div *ngFor="let l of layers" [leafletLayer]="l"></div>
+    @for (layer of layers; track layer.id) {
+        <div [leafletLayer]="layer"></div>
+    }
 </div>
 ```
@@ -488,14 +516,14 @@ With a reference to the directive, you can invoke the ```getMap()``` function to
 This output is emitted when once when the map is initially created inside of the Leaflet directive.
 The event will only fire when the map exists and is ready for manipulation.
-```html
+```angular181html
 <div leaflet
      [leafletOptions]="options"
      (leafletMapReady)="onMapReady($event)">
 </div>
 ```
-```js
+```typescript
 onMapReady(map: Map) {
 	// Do stuff with map
 }
@@ -515,33 +543,29 @@ This means that you can create your own component or directive and inject the ``
 This will only work if your custom component/directive exists on the same DOM element and is ordered after the injected LeafletDirective, or if it is on a child DOM element.
-```html
+```angular181html
 <!-- On the same DOM element -->
-<div leaflet myCustomDirective>
-</div>
+<div leaflet myCustomDirective></div>
 <!-- On a child DOM element -->
 <div leaflet>
-	<div myCustomDirective></div>
+    <div myCustomDirective></div>
 </div>
 ```
-```js
+```typescript
 @Directive({
-	selector: '[myCustomDirective]'
+    selector: '[myCustomDirective]'
 })
 export class MyCustomDirective {
-	leafletDirective: LeafletDirective;
+    readonly #leafletDirective = inject(LeafletDirective);
-	constructor(leafletDirective: LeafletDirective) {
-		this.leafletDirective = leafletDirective;
-	}
-	someFunction() {
-		if (null != this.leafletDirective.getMap()) {
-			// Do stuff with the map
-		}
-	}
+    someFunction() {
+        if (null !== this.#leafletDirective.getMap()) {
+            // Do stuff with the map
+        }
+    }
 }
 ```
@@ -567,7 +591,7 @@ Leaflet event handlers run outside of Angular's zone, where changes to input bou
 To ensure your changes are detected and applied, you need to make those changed inside of Angular's zone.
 Fortunately, this is extremely easy.
-```js
+```typescript
 fitBounds: any = null;
 circle = circle([ 46.95, -122 ], { radius: 5000 });
@@ -594,7 +618,7 @@ Another option is to manually tell the change detector to detect changes.
 The drawback to this option is that it is less precise.
 This will trigger change detection for this component and all of its children.
-```js
+```typescript
 fitBounds: any = null;
 circle = circle([ 46.95, -122 ], { radius: 5000 });

package/fesm2022/bluehalo-ngx-leaflet.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, Directive, NgModule } from '@angular/core';
 import { latLng, map, control, tileLayer } from 'leaflet';
 class LeafletUtil {
@@ -89,7 +89,7 @@ class LeafletDirective {
         /*
          * The following code is to address an issue with our (basic) implementation of
          * zooming and panning. From our testing, it seems that a pan operation followed
-         * by a zoom operation in the same thread will interfere with eachother. The zoom
+         * by a zoom operation in the same thread will interfere with each other. The zoom
          * operation interrupts/cancels the pan, resulting in a final center point that is
          * inaccurate. The solution seems to be to either separate them with a timeout or
           * to collapse them into a setView call.
@@ -254,14 +254,13 @@ class LeafletDirective {
             this.map.setMaxZoom(zoom);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: LeafletDirective, isStandalone: false, selector: "[leaflet]", inputs: { fitBoundsOptions: ["leafletFitBoundsOptions", "fitBoundsOptions"], panOptions: ["leafletPanOptions", "panOptions"], zoomOptions: ["leafletZoomOptions", "zoomOptions"], zoomPanOptions: ["leafletZoomPanOptions", "zoomPanOptions"], options: ["leafletOptions", "options"], zoom: ["leafletZoom", "zoom"], center: ["leafletCenter", "center"], fitBounds: ["leafletFitBounds", "fitBounds"], maxBounds: ["leafletMaxBounds", "maxBounds"], minZoom: ["leafletMinZoom", "minZoom"], maxZoom: ["leafletMaxZoom", "maxZoom"] }, outputs: { mapReady: "leafletMapReady", zoomChange: "leafletZoomChange", centerChange: "leafletCenterChange", onClick: "leafletClick", onDoubleClick: "leafletDoubleClick", onMouseDown: "leafletMouseDown", onMouseUp: "leafletMouseUp", onMouseMove: "leafletMouseMove", onMouseOver: "leafletMouseOver", onMouseOut: "leafletMouseOut", onMapMove: "leafletMapMove", onMapMoveStart: "leafletMapMoveStart", onMapMoveEnd: "leafletMapMoveEnd", onMapZoom: "leafletMapZoom", onMapZoomStart: "leafletMapZoomStart", onMapZoomEnd: "leafletMapZoomEnd" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletDirective, isStandalone: true, selector: "[leaflet]", inputs: { fitBoundsOptions: ["leafletFitBoundsOptions", "fitBoundsOptions"], panOptions: ["leafletPanOptions", "panOptions"], zoomOptions: ["leafletZoomOptions", "zoomOptions"], zoomPanOptions: ["leafletZoomPanOptions", "zoomPanOptions"], options: ["leafletOptions", "options"], zoom: ["leafletZoom", "zoom"], center: ["leafletCenter", "center"], fitBounds: ["leafletFitBounds", "fitBounds"], maxBounds: ["leafletMaxBounds", "maxBounds"], minZoom: ["leafletMinZoom", "minZoom"], maxZoom: ["leafletMaxZoom", "maxZoom"] }, outputs: { mapReady: "leafletMapReady", zoomChange: "leafletZoomChange", centerChange: "leafletCenterChange", onClick: "leafletClick", onDoubleClick: "leafletDoubleClick", onMouseDown: "leafletMouseDown", onMouseUp: "leafletMouseUp", onMouseMove: "leafletMouseMove", onMouseOver: "leafletMouseOver", onMouseOut: "leafletMouseOut", onMapMove: "leafletMapMove", onMapMoveStart: "leafletMapMoveStart", onMapMoveEnd: "leafletMapMoveEnd", onMapZoom: "leafletMapZoom", onMapZoomStart: "leafletMapZoomStart", onMapZoomEnd: "leafletMapZoomEnd" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leaflet]',
-                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { fitBoundsOptions: [{
                 type: Input,
@@ -415,14 +414,13 @@ class LeafletLayerDirective {
         l.off('add', this.onAddLayerHandler);
         l.off('remove', this.onRemoveLayerHandler);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletLayerDirective, deps: [{ token: LeafletDirective }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: LeafletLayerDirective, isStandalone: false, selector: "[leafletLayer]", inputs: { layer: ["leafletLayer", "layer"] }, outputs: { onAdd: "leafletLayerAdd", onRemove: "leafletLayerRemove" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayerDirective, deps: [{ token: LeafletDirective }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletLayerDirective, isStandalone: true, selector: "[leafletLayer]", inputs: { layer: ["leafletLayer", "layer"] }, outputs: { onAdd: "leafletLayerAdd", onRemove: "leafletLayerRemove" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletLayerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletLayer]',
-                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: LeafletDirective }, { type: i0.NgZone }], propDecorators: { layer: [{
                 type: Input,
@@ -501,14 +499,13 @@ class LeafletLayersDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.IterableDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: LeafletLayersDirective, isStandalone: false, selector: "[leafletLayers]", inputs: { layers: ["leafletLayers", "layers"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.IterableDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletLayersDirective, isStandalone: true, selector: "[leafletLayers]", inputs: { layers: ["leafletLayers", "layers"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletLayersDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletLayers]',
-                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: LeafletDirective }, { type: i0.IterableDiffers }, { type: i0.NgZone }], propDecorators: { layers: [{
                 type: Input,
@@ -664,14 +661,13 @@ class LeafletLayersControlDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletLayersControlDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: LeafletLayersControlDirective, isStandalone: false, selector: "[leafletLayersControl]", inputs: { layersControlConfig: ["leafletLayersControl", "layersControlConfig"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersControlDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletLayersControlDirective, isStandalone: true, selector: "[leafletLayersControl]", inputs: { layersControlConfig: ["leafletLayersControl", "layersControlConfig"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletLayersControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletLayersControl]',
-                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: LeafletDirective }, { type: i0.KeyValueDiffers }, { type: i0.NgZone }], propDecorators: { layersControlConfig: [{
                 type: Input,
@@ -772,14 +768,13 @@ class LeafletBaseLayersDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletBaseLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: LeafletBaseLayersDirective, isStandalone: false, selector: "[leafletBaseLayers]", inputs: { baseLayers: ["leafletBaseLayers", "baseLayers"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletBaseLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletBaseLayersDirective, isStandalone: true, selector: "[leafletBaseLayers]", inputs: { baseLayers: ["leafletBaseLayers", "baseLayers"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletBaseLayersDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletBaseLayersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletBaseLayers]',
-                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: LeafletDirective }, { type: i0.KeyValueDiffers }, { type: i0.NgZone }], propDecorators: { baseLayers: [{
                 type: Input,
@@ -793,8 +788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
             }] } });
 class LeafletModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: LeafletModule, declarations: [LeafletDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule, imports: [LeafletDirective,
             LeafletLayerDirective,
             LeafletLayersDirective,
             LeafletLayersControlDirective,
@@ -803,19 +798,19 @@ class LeafletModule {
             LeafletLayersDirective,
             LeafletLayersControlDirective,
             LeafletBaseLayersDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LeafletModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [
+                    imports: [
                         LeafletDirective,
                         LeafletLayerDirective,
                         LeafletLayersDirective,
                         LeafletLayersControlDirective,
                         LeafletBaseLayersDirective
                     ],
-                    declarations: [
+                    exports: [
                         LeafletDirective,
                         LeafletLayerDirective,
                         LeafletLayersDirective,