@angular-helpers/openlayers 0.7.0 → 21.14.1

package/fesm2022/angular-helpers-openlayers-controls.mjs

@@ -6,8 +6,6 @@ import Attribution from 'ol/control/Attribution';
 import ScaleLine from 'ol/control/ScaleLine';
 import FullScreen from 'ol/control/FullScreen';
 import Rotate from 'ol/control/Rotate';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import Control from 'ol/control/Control';
 import Geolocation from 'ol/Geolocation';
 import Feature from 'ol/Feature';
@@ -383,11 +381,11 @@ class OlLayerSwitcherComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fffffff2;color:#333;border-radius:4px;border:none;box-shadow:0 1px 4px #0000004d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;min-width:36px;z-index:10;transition:all .2s ease}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:10em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 8px;background:transparent;color:#333;border:none;border-bottom:1px solid rgba(0,0,0,.08);border-radius:4px 4px 0 0;cursor:pointer;width:100%;font-size:13px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-layer-switcher.collapsed .ol-layer-switcher__toggle{border-bottom:none;border-radius:4px;padding:4px 6px;justify-content:center}.ol-layer-switcher__toggle:hover{background:#0000000d}.ol-layer-switcher__icon{font-size:14px;line-height:1}.ol-layer-switcher__title{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:6px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:12px;color:#6b7280;text-align:center;font-style:italic;font-size:12px}.ol-layer-switcher__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.ol-layer-switcher__item{padding:5px 8px;border-radius:3px;transition:background .15s ease}.ol-layer-switcher__item:hover{background:#0000000a}.ol-layer-switcher__label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}.ol-layer-switcher__checkbox{cursor:pointer;accent-color:#1a73e8}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333;font-size:12px}.ol-layer-switcher__type{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;background:#0000000f;color:#555;letter-spacing:.3px}.ol-layer-switcher__type--vector{background:#3b82f61f;color:#2563eb}.ol-layer-switcher__type--tile{background:#22c55e1f;color:#16a34a}.ol-layer-switcher__type--image{background:#f59e0b1f;color:#d97706}.ol-layer-switcher__opacity{width:100%;margin-top:4px;cursor:pointer;height:4px;accent-color:#1a73e8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fffffff2;color:#333;border-radius:4px;border:none;box-shadow:0 1px 4px #0000004d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;min-width:36px;z-index:10;transition:all .2s ease}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:10em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 8px;background:transparent;color:#333;border:none;border-bottom:1px solid rgba(0,0,0,.08);border-radius:4px 4px 0 0;cursor:pointer;width:100%;font-size:13px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-layer-switcher.collapsed .ol-layer-switcher__toggle{border-bottom:none;border-radius:4px;padding:4px 6px;justify-content:center}.ol-layer-switcher__toggle:hover{background:#0000000d}.ol-layer-switcher__icon{font-size:14px;line-height:1}.ol-layer-switcher__title{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:6px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:12px;color:#6b7280;text-align:center;font-style:italic;font-size:12px}.ol-layer-switcher__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.ol-layer-switcher__item{padding:5px 8px;border-radius:3px;transition:background .15s ease}.ol-layer-switcher__item:hover{background:#0000000a}.ol-layer-switcher__label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}.ol-layer-switcher__checkbox{cursor:pointer;accent-color:#1a73e8}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333;font-size:12px}.ol-layer-switcher__type{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;background:#0000000f;color:#555;letter-spacing:.3px}.ol-layer-switcher__type--vector{background:#3b82f61f;color:#2563eb}.ol-layer-switcher__type--tile{background:#22c55e1f;color:#16a34a}.ol-layer-switcher__type--image{background:#f59e0b1f;color:#d97706}.ol-layer-switcher__opacity{width:100%;margin-top:4px;cursor:pointer;height:4px;accent-color:#1a73e8}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-layer-switcher', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'ol-layer-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div
       class="ol-layer-switcher"
       [class.collapsed]="isCollapsed()"
@@ -578,11 +576,11 @@ class OlBasemapSwitcherComponent {
         </span>
       </button>
     </div>
-  `, isInline: true, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:#333;z-index:10}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#fffffff2;color:#333;border:none;border-radius:4px;box-shadow:0 1px 4px #0000004d;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-basemap-switcher__toggle:hover{background:#fff}.ol-basemap-switcher__toggle-icon{font-size:14px;line-height:1}.ol-basemap-switcher__toggle-text{font-weight:600;font-size:12px}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 6px);left:0;background:#fffffff2;border:none;color:#333;border-radius:4px;box-shadow:0 1px 4px #0000004d;padding:4px;min-width:160px;display:flex;flex-direction:column;gap:2px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 6px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:3px;cursor:pointer;text-align:left;font-size:12px;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#0000000d}.ol-basemap-switcher__item--active{background:#1a73e81f;color:#1a73e8;font-weight:600}.ol-basemap-switcher__item--active:hover{background:#1a73e82e}.ol-basemap-switcher__icon{font-size:14px}.ol-basemap-switcher__name{font-weight:500;color:#333;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:#333;z-index:10}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#fffffff2;color:#333;border:none;border-radius:4px;box-shadow:0 1px 4px #0000004d;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-basemap-switcher__toggle:hover{background:#fff}.ol-basemap-switcher__toggle-icon{font-size:14px;line-height:1}.ol-basemap-switcher__toggle-text{font-weight:600;font-size:12px}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 6px);left:0;background:#fffffff2;border:none;color:#333;border-radius:4px;box-shadow:0 1px 4px #0000004d;padding:4px;min-width:160px;display:flex;flex-direction:column;gap:2px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 6px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:3px;cursor:pointer;text-align:left;font-size:12px;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#0000000d}.ol-basemap-switcher__item--active{background:#1a73e81f;color:#1a73e8;font-weight:600}.ol-basemap-switcher__item--active:hover{background:#1a73e82e}.ol-basemap-switcher__icon{font-size:14px}.ol-basemap-switcher__name{font-weight:500;color:#333;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlBasemapSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-basemap-switcher', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'ol-basemap-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div
       class="ol-basemap-switcher"
       [class.ol-basemap-switcher--top-left]="position() === 'top-left'"
@@ -753,7 +751,7 @@ class OlGeolocationControlComponent {
     <div
       #controlElement
       class="ol-geolocation-control ol-unselectable ol-control"
-      [ngClass]="position()"
+      [class]="position()"
     >
       <button
         type="button"
@@ -780,15 +778,15 @@ class OlGeolocationControlComponent {
         </svg>
       </button>
     </div>
-  `, isInline: true, styles: [".ol-geolocation-control{position:absolute}.ol-geolocation-control.top-left{top:4.5em;left:.5em}.ol-geolocation-control.top-right{top:4.5em;right:.5em}.ol-geolocation-control.bottom-left{bottom:.5em;left:.5em}.ol-geolocation-control.bottom-right{bottom:.5em;right:.5em}button{display:flex;align-items:center;justify-content:center;width:1.375em;height:1.375em;padding:0;background-color:#fff6;border:none;cursor:pointer;border-radius:2px;color:#333;transition:all .2s}button:hover{background-color:#fffc}button.active{color:#3b82f6;background-color:#ffffffe6}.geolocation-icon{width:1em;height:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".ol-geolocation-control{position:absolute}.ol-geolocation-control.top-left{top:4.5em;left:.5em}.ol-geolocation-control.top-right{top:4.5em;right:.5em}.ol-geolocation-control.bottom-left{bottom:.5em;left:.5em}.ol-geolocation-control.bottom-right{bottom:.5em;right:.5em}button{display:flex;align-items:center;justify-content:center;width:1.375em;height:1.375em;padding:0;background-color:#fff6;border:none;cursor:pointer;border-radius:2px;color:#333;transition:all .2s}button:hover{background-color:#fffc}button.active{color:#3b82f6;background-color:#ffffffe6}.geolocation-icon{width:1em;height:1em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlGeolocationControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-geolocation-control', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'ol-geolocation-control', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div
       #controlElement
       class="ol-geolocation-control ol-unselectable ol-control"
-      [ngClass]="position()"
+      [class]="position()"
     >
       <button
         type="button"
@@ -1020,7 +1018,7 @@ class OlTimelineComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-timeline', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'ol-timeline', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div
       class="ol-timeline"
       [class.ol-timeline--top-left]="position() === 'top-left'"

package/fesm2022/angular-helpers-openlayers-interactions.mjs

@@ -887,7 +887,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             type: Component,
             args: [{
                     selector: 'ol-draw-interaction',
-                    standalone: true,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -928,7 +927,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             type: Component,
             args: [{
                     selector: 'ol-modify-interaction',
-                    standalone: true,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -973,7 +971,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             type: Component,
             args: [{
                     selector: 'ol-select-interaction',
-                    standalone: true,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]

package/fesm2022/angular-helpers-openlayers-layers.mjs

@@ -161,7 +161,7 @@ function buildVectorLayer(config, source) {
         visible: config.visible ?? true,
         opacity: config.opacity ?? 1,
         zIndex: config.zIndex,
-        style: clusterCfg?.enabled ? clusterStyleFn : styleFn,
+        style: (clusterCfg?.enabled ? clusterStyleFn : styleFn),
     });
     layer.set('id', config.id);
     layer.set('cluster-config', clusterCfg);
@@ -377,22 +377,25 @@ class OlLayerService {
             }
         }
     }
+    createVectorSource(config, map) {
+        const sourceOptions = {};
+        if (config.url && config.format) {
+            sourceOptions.url = config.url;
+            if (config.format === 'geojson')
+                sourceOptions.format = new GeoJSON();
+            else if (config.format === 'topojson')
+                sourceOptions.format = new TopoJSON();
+            else if (config.format === 'kml')
+                sourceOptions.format = new KML();
+        }
+        return new VectorSource(sourceOptions);
+    }
     createLayer(config, map) {
         let layer;
         switch (config.type) {
             case 'vector': {
                 const vConfig = config;
-                const sourceOptions = {};
-                if (vConfig.url && vConfig.format) {
-                    sourceOptions.url = vConfig.url;
-                    if (vConfig.format === 'geojson')
-                        sourceOptions.format = new GeoJSON();
-                    else if (vConfig.format === 'topojson')
-                        sourceOptions.format = new TopoJSON();
-                    else if (vConfig.format === 'kml')
-                        sourceOptions.format = new KML();
-                }
-                const vectorSource = new VectorSource(sourceOptions);
+                const vectorSource = this.createVectorSource(vConfig, map);
                 const targetProj = (typeof map.getView === 'function'
                     ? map.getView()?.getProjection()?.getCode()
                     : undefined) ?? 'EPSG:3857';
@@ -497,6 +500,41 @@ class OlLayerService {
             this.updateLayerState();
         }
     }
+    updateVectorLayerConfig(id, config) {
+        const layer = this.layerCache.get(id);
+        if (!(layer instanceof VectorLayer))
+            return;
+        const map = this.mapService.getMap();
+        const nextConfig = {
+            ...(layer.get('cluster-config') ? { cluster: layer.get('cluster-config') } : {}),
+            ...(layer.get('style-fn') !== undefined ? { style: layer.get('style-fn') } : {}),
+            ...config,
+        };
+        const nextSource = this.createVectorSource(nextConfig, map ?? {});
+        const clusterCfg = nextConfig.cluster;
+        if (clusterCfg?.enabled) {
+            const clusterSource = new ClusterSource({
+                source: nextSource,
+                distance: clusterCfg.distance ?? 40,
+                minDistance: clusterCfg.minDistance ?? 20,
+                geometryFunction: (feature) => {
+                    const geometry = feature.getGeometry();
+                    if (!geometry)
+                        return null;
+                    if (geometry.getType() === 'Point')
+                        return geometry;
+                    return new Point(getCenter(geometry.getExtent()));
+                },
+            });
+            layer.setSource(clusterSource);
+        }
+        else {
+            layer.setSource(nextSource);
+        }
+        layer.set('coordinate-projection', nextConfig.coordinateProjection ?? 'EPSG:4326');
+        this.updateFeatures(id, nextConfig.features ?? []);
+        this.updateLayerState();
+    }
     setVisibility(id, visible) {
         const layer = this.layerCache.get(id);
         if (layer) {
@@ -746,11 +784,19 @@ class OlVectorLayerComponent {
         // Effect to sync features when input changes
         effect(() => {
             const currentFeatures = this.features();
-            // Only update if layer already exists (afterNextRender already created it)
             if (this.layerService.getLayer(this.id())) {
                 this.layerService.updateFeatures(this.id(), currentFeatures);
             }
         });
+        effect(() => {
+            if (this.layerService.getLayer(this.id())) {
+                this.layerService.updateVectorLayerConfig(this.id(), {
+                    url: this.url(),
+                    format: this.format(),
+                    coordinateProjection: this.coordinateProjection(),
+                });
+            }
+        });
         effect(() => {
             this.layerService.setOpacity(this.id(), this.opacity());
         });

package/fesm2022/angular-helpers-openlayers-testing.mjs

@@ -0,0 +1,15 @@
+import { MockComponent } from '@angular-helpers/testing';
+
+// This provides a pre-configured mock for the complex OlMapComponent,
+// avoiding the need to mock openlayers library internals or deal with ResizeObservers.
+const MockOlMapComponent = MockComponent({
+    selector: 'ol-map',
+    inputs: ['center', 'zoom', 'rotation', 'projection', 'coordinateProjection'],
+    outputs: ['viewChange', 'mapClick', 'mapDblClick'],
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MockOlMapComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-helpers/openlayers",
-  "version": "0.7.0",
+  "version": "21.14.1",
   "description": "Modern Angular wrapper for OpenLayers with modular architecture, standalone components, and hybrid template/programmatic API",
   "homepage": "https://gaspar1992.github.io/angular-helpers/docs/openlayers",
   "repository": {
@@ -30,6 +30,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@angular-helpers/testing": "^21.14.0",
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "milsymbol": "^3.0.0",
@@ -76,6 +77,10 @@
     "./overlays": {
       "types": "./types/angular-helpers-openlayers-overlays.d.ts",
       "default": "./fesm2022/angular-helpers-openlayers-overlays.mjs"
+    },
+    "./testing": {
+      "types": "./types/angular-helpers-openlayers-testing.d.ts",
+      "default": "./fesm2022/angular-helpers-openlayers-testing.mjs"
     }
   },
   "type": "module",

package/types/angular-helpers-openlayers-controls.d.ts

@@ -40,7 +40,7 @@ declare class OlScaleLineControlComponent {
 declare class OlFullscreenControlComponent {
     private mapService;
     private zoneHelper;
-    source: _angular_core.InputSignal<HTMLElement>;
+    source: _angular_core.InputSignal<HTMLElement | undefined>;
     label: _angular_core.InputSignal<string>;
     labelActive: _angular_core.InputSignal<string>;
     tipLabel: _angular_core.InputSignal<string>;

package/types/angular-helpers-openlayers-core.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, Signal, Resource, Provider, EnvironmentProviders } from '@angular/core';
+import { ElementRef, Signal, ResourceRef, Provider, EnvironmentProviders } from '@angular/core';
 import OLMap from 'ol/Map';
 import { View, Feature as Feature$1 } from 'ol';
 
@@ -380,7 +380,7 @@ interface VectorResourceOptions {
  * @param options Additional vector resource options
  * @returns An Angular Resource containing an array of parsed Features
  */
-declare function createVectorResource(url: Signal<string | undefined>, options?: VectorResourceOptions): Resource<Feature[]>;
+declare function createVectorResource(url: Signal<string | undefined>, options?: VectorResourceOptions): ResourceRef<Feature[] | undefined>;
 
 interface ProjectionOptions {
     sourceProjection?: string;

package/types/angular-helpers-openlayers-interactions.d.ts

@@ -87,7 +87,7 @@ declare class OlInteractionService {
     private drawService;
     private modifyService;
     readonly selectedFeatures: _angular_core.Signal<Feature[]>;
-    readonly hoveredFeature: _angular_core.Signal<Feature>;
+    readonly hoveredFeature: _angular_core.Signal<Feature | null>;
     readonly selectionCount: _angular_core.Signal<number>;
     readonly hasSelection: _angular_core.Signal<boolean>;
     readonly activeInteractions: _angular_core.Signal<_angular_helpers_openlayers_interactions.ManagedInteraction[]>;
@@ -183,7 +183,7 @@ declare class InteractionStateService {
     private modifySubject;
     private selectSubject;
     readonly selectedFeatures: _angular_core.Signal<Feature[]>;
-    readonly hoveredFeature: _angular_core.Signal<Feature>;
+    readonly hoveredFeature: _angular_core.Signal<Feature | null>;
     readonly selectionCount: _angular_core.Signal<number>;
     readonly hasSelection: _angular_core.Signal<boolean>;
     readonly activeInteractions: _angular_core.Signal<ManagedInteraction[]>;
@@ -354,9 +354,9 @@ declare class OlDrawInteractionComponent {
     private destroyRef;
     id: _angular_core.InputSignal<string>;
     type: _angular_core.InputSignal<"Point" | "LineString" | "Polygon" | "Circle">;
-    source: _angular_core.InputSignal<string>;
-    freehand: _angular_core.InputSignal<boolean>;
-    snapTolerance: _angular_core.InputSignal<number>;
+    source: _angular_core.InputSignal<string | undefined>;
+    freehand: _angular_core.InputSignal<boolean | undefined>;
+    snapTolerance: _angular_core.InputSignal<number | undefined>;
     active: _angular_core.InputSignal<boolean>;
     private drawStartFiltered$;
     private drawEndFiltered$;
@@ -374,8 +374,8 @@ declare class OlModifyInteractionComponent {
     private interactionService;
     private destroyRef;
     id: _angular_core.InputSignal<string>;
-    source: _angular_core.InputSignal<string>;
-    snapTolerance: _angular_core.InputSignal<number>;
+    source: _angular_core.InputSignal<string | undefined>;
+    snapTolerance: _angular_core.InputSignal<number | undefined>;
     active: _angular_core.InputSignal<boolean>;
     private modifyFiltered$;
     modifyEvent: _angular_core.OutputRef<_angular_helpers_openlayers_interactions.ModifyEvent>;
@@ -391,10 +391,10 @@ declare class OlSelectInteractionComponent {
     private interactionService;
     private destroyRef;
     id: _angular_core.InputSignal<string>;
-    layers: _angular_core.InputSignal<string[]>;
-    multi: _angular_core.InputSignal<boolean>;
-    hitTolerance: _angular_core.InputSignal<number>;
-    condition: _angular_core.InputSignal<"click" | "pointerMove">;
+    layers: _angular_core.InputSignal<string[] | undefined>;
+    multi: _angular_core.InputSignal<boolean | undefined>;
+    hitTolerance: _angular_core.InputSignal<number | undefined>;
+    condition: _angular_core.InputSignal<"click" | "pointerMove" | undefined>;
     active: _angular_core.InputSignal<boolean>;
     private selectFiltered$;
     selectEvent: _angular_core.OutputRef<_angular_helpers_openlayers_interactions.SelectEvent>;

package/types/angular-helpers-openlayers-layers.d.ts

@@ -68,7 +68,7 @@ declare class OlClusterComponent {
     distance: _angular_core.InputSignal<number>;
     minDistance: _angular_core.InputSignal<number>;
     showCount: _angular_core.InputSignal<boolean>;
-    featureStyle: _angular_core.InputSignal<Style>;
+    featureStyle: _angular_core.InputSignal<Style | undefined>;
     spiderfyOnSelect: _angular_core.InputSignal<boolean>;
     spiderfyClick: _angular_core.OutputEmitterRef<Feature>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlClusterComponent, never>;
@@ -80,14 +80,14 @@ declare class OlVectorLayerComponent {
     private destroyRef;
     id: _angular_core.InputSignal<string>;
     features: _angular_core.InputSignal<Feature[]>;
-    url: _angular_core.InputSignal<string>;
-    format: _angular_core.InputSignal<"geojson" | "topojson" | "kml">;
+    url: _angular_core.InputSignal<string | undefined>;
+    format: _angular_core.InputSignal<"geojson" | "topojson" | "kml" | undefined>;
     zIndex: _angular_core.InputSignal<number>;
     opacity: _angular_core.InputSignal<number>;
     visible: _angular_core.InputSignal<boolean>;
     style: _angular_core.InputSignal<any>;
-    cluster: _angular_core.InputSignal<ClusterConfig>;
-    clusterComponent: _angular_core.Signal<OlClusterComponent>;
+    cluster: _angular_core.InputSignal<ClusterConfig | undefined>;
+    clusterComponent: _angular_core.Signal<OlClusterComponent | undefined>;
     coordinateProjection: _angular_core.InputSignal<string>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlVectorLayerComponent, never>;
@@ -99,9 +99,9 @@ declare class OlTileLayerComponent {
     private destroyRef;
     id: _angular_core.InputSignal<string>;
     source: _angular_core.InputSignal<"osm" | "xyz" | "wms">;
-    url: _angular_core.InputSignal<string>;
-    attributions: _angular_core.InputSignal<string | string[]>;
-    params: _angular_core.InputSignal<Record<string, unknown>>;
+    url: _angular_core.InputSignal<string | undefined>;
+    attributions: _angular_core.InputSignal<string | string[] | undefined>;
+    params: _angular_core.InputSignal<Record<string, unknown> | undefined>;
     zIndex: _angular_core.InputSignal<number>;
     opacity: _angular_core.InputSignal<number>;
     visible: _angular_core.InputSignal<boolean>;
@@ -116,8 +116,8 @@ declare class OlImageLayerComponent {
     id: _angular_core.InputSignal<string>;
     sourceType: _angular_core.InputSignal<"wms" | "static">;
     url: _angular_core.InputSignal<string>;
-    params: _angular_core.InputSignal<Record<string, unknown>>;
-    imageExtent: _angular_core.InputSignal<[number, number, number, number]>;
+    params: _angular_core.InputSignal<Record<string, unknown> | undefined>;
+    imageExtent: _angular_core.InputSignal<[number, number, number, number] | undefined>;
     zIndex: _angular_core.InputSignal<number>;
     opacity: _angular_core.InputSignal<number>;
     visible: _angular_core.InputSignal<boolean>;
@@ -139,7 +139,7 @@ declare class OlHeatmapLayerComponent {
     radius: _angular_core.InputSignal<number>;
     /** Unit for radius and blur: 'pixels' (default) or 'meters' */
     radiusUnit: _angular_core.InputSignal<"pixels" | "meters">;
-    weight: _angular_core.InputSignal<string | ((feature: Feature) => number)>;
+    weight: _angular_core.InputSignal<string | ((feature: Feature) => number) | undefined>;
     /** Computed radius in pixels based on current resolution if unit is 'meters' */
     private scaledRadius;
     /** Computed blur in pixels based on current resolution if unit is 'meters' */
@@ -189,7 +189,7 @@ declare class OlWebGLVectorLayerComponent {
     /** Disable hit detection for better performance (default: true) */
     disableHitDetection: _angular_core.InputSignal<boolean>;
     /** Style variables for dynamic expressions (e.g. `['var', 'threshold']`) */
-    variables: _angular_core.InputSignal<Record<string, string | number | boolean | number[]>>;
+    variables: _angular_core.InputSignal<Record<string, string | number | boolean | number[]> | undefined>;
     private layer;
     private vectorSource;
     constructor();
@@ -228,11 +228,11 @@ declare class OlWebGLTileLayerComponent {
     /** Tile source type */
     source: _angular_core.InputSignal<"osm" | "xyz" | "mvt">;
     /** Tile URL template (required for 'xyz' and 'mvt') */
-    url: _angular_core.InputSignal<string>;
+    url: _angular_core.InputSignal<string | undefined>;
     /** Attribution text */
-    attributions: _angular_core.InputSignal<string | string[]>;
+    attributions: _angular_core.InputSignal<string | string[] | undefined>;
     /** WebGL tile style (raster expressions) or flat style (MVT) */
-    tileStyle: _angular_core.InputSignal<FlatStyleLike | Style$1>;
+    tileStyle: _angular_core.InputSignal<FlatStyleLike | Style$1 | undefined>;
     /** Z-index for layer ordering */
     zIndex: _angular_core.InputSignal<number>;
     /** Opacity (0–1) */
@@ -268,10 +268,12 @@ declare class OlLayerService {
         id: string;
     };
     private flushPending;
+    private createVectorSource;
     private createLayer;
     getLayer(id: string): BaseLayer | undefined;
     hasLayer(id: string): boolean;
     removeLayer(id: string): void;
+    updateVectorLayerConfig(id: string, config: Partial<VectorLayerConfig>): void;
     setVisibility(id: string, visible: boolean): void;
     toggleVisibility(id: string): boolean;
     setOpacity(id: string, opacity: number): void;

package/types/angular-helpers-openlayers-overlays.d.ts

@@ -99,7 +99,7 @@ declare class OlPopupComponent {
     private readonly mapService;
     private readonly zoneHelper;
     /** Map coordinate where the popup is anchored. `null` hides the popup. */
-    readonly position: _angular_core.InputSignal<Coordinate>;
+    readonly position: _angular_core.InputSignal<Coordinate | null>;
     /** Pixel offset relative to `position`. */
     readonly offset: _angular_core.InputSignal<[number, number]>;
     /** Anchor of the popup element relative to `position`. */
@@ -146,7 +146,7 @@ declare class OlTooltipDirective {
     /** Property key to read from the hovered feature. */
     readonly olTooltip: _angular_core.InputSignal<string>;
     /** Optional layer id; when set, only features on that layer trigger the tooltip. */
-    readonly olTooltipLayer: _angular_core.InputSignal<string>;
+    readonly olTooltipLayer: _angular_core.InputSignal<string | null>;
     private element;
     private listener;
     private currentMap;

package/types/angular-helpers-openlayers-testing.d.ts

@@ -0,0 +1,5 @@
+import * as _angular_core from '@angular/core';
+
+declare const MockOlMapComponent: _angular_core.Type<any>;
+
+export { MockOlMapComponent };