@symfony/ux-google-map 2.27.0 → 2.28.1

package/dist/map_controller.d.ts

@@ -1,13 +1,15 @@
-import type { LoaderOptions } from '@googlemaps/js-api-loader';
-import type { CircleDefinition, Icon, InfoWindowDefinition, MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, RectangleDefinition } from '@symfony/ux-map';
-import AbstractMapController from '@symfony/ux-map';
+import { LoaderOptions } from '@googlemaps/js-api-loader';
+import AbstractMapController, { MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, CircleDefinition, RectangleDefinition, InfoWindowDefinition, Icon } from '@symfony/ux-map';
+
 type MapOptions = Pick<google.maps.MapOptions, 'mapId' | 'gestureHandling' | 'backgroundColor' | 'disableDoubleClickZoom' | 'zoomControl' | 'zoomControlOptions' | 'mapTypeControl' | 'mapTypeControlOptions' | 'streetViewControl' | 'streetViewControlOptions' | 'fullscreenControl' | 'fullscreenControlOptions'>;
-export default class extends AbstractMapController<MapOptions, google.maps.MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon, google.maps.PolylineOptions, google.maps.Polyline, google.maps.CircleOptions, google.maps.Circle, google.maps.RectangleOptions, google.maps.Rectangle> {
+declare class export_default extends AbstractMapController<MapOptions, google.maps.MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon, google.maps.PolylineOptions, google.maps.Polyline, google.maps.CircleOptions, google.maps.Circle, google.maps.RectangleOptions, google.maps.Rectangle> {
     providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
     map: google.maps.Map;
     connect(): Promise<void>;
     centerValueChanged(): void;
     zoomValueChanged(): void;
+    minZoomValueChanged(): void;
+    maxZoomValueChanged(): void;
     protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
     protected doCreateMap({ definition }: {
         definition: MapDefinition<MapOptions, google.maps.MapOptions>;
@@ -44,4 +46,5 @@ export default class extends AbstractMapController<MapOptions, google.maps.MapOp
     }): void;
     private closeInfoWindowsExcept;
 }
-export {};
+
+export { export_default as default };

package/dist/map_controller.js

@@ -1,394 +1,428 @@
-import { Loader } from '@googlemaps/js-api-loader';
-import { Controller } from '@hotwired/stimulus';
+// src/map_controller.ts
+import { Loader } from "@googlemaps/js-api-loader";
 
-const IconTypes = {
-    Url: 'url',
-    Svg: 'svg',
-    UxIcon: 'ux-icon',
+// ../../../../assets/dist/abstract_map_controller.js
+import { Controller } from "@hotwired/stimulus";
+var IconTypes = {
+  Url: "url",
+  Svg: "svg",
+  UxIcon: "ux-icon"
 };
-class default_1 extends Controller {
-    constructor() {
-        super(...arguments);
-        this.markers = new Map();
-        this.polygons = new Map();
-        this.polylines = new Map();
-        this.circles = new Map();
-        this.rectangles = new Map();
-        this.infoWindows = [];
-        this.isConnected = false;
+var abstract_map_controller_default = class extends Controller {
+  constructor() {
+    super(...arguments);
+    this.markers = /* @__PURE__ */ new Map();
+    this.polygons = /* @__PURE__ */ new Map();
+    this.polylines = /* @__PURE__ */ new Map();
+    this.circles = /* @__PURE__ */ new Map();
+    this.rectangles = /* @__PURE__ */ new Map();
+    this.infoWindows = [];
+    this.isConnected = false;
+  }
+  connect() {
+    const extra = this.hasExtraValue ? this.extraValue : {};
+    const mapDefinition = {
+      center: this.hasCenterValue ? this.centerValue : null,
+      zoom: this.hasZoomValue ? this.zoomValue : null,
+      minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
+      maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
+      options: this.optionsValue,
+      extra
+    };
+    this.dispatchEvent("pre-connect", mapDefinition);
+    this.createMarker = this.createDrawingFactory("marker", this.markers, this.doCreateMarker.bind(this));
+    this.createPolygon = this.createDrawingFactory("polygon", this.polygons, this.doCreatePolygon.bind(this));
+    this.createPolyline = this.createDrawingFactory("polyline", this.polylines, this.doCreatePolyline.bind(this));
+    this.createCircle = this.createDrawingFactory("circle", this.circles, this.doCreateCircle.bind(this));
+    this.createRectangle = this.createDrawingFactory("rectangle", this.rectangles, this.doCreateRectangle.bind(this));
+    this.map = this.doCreateMap({ definition: mapDefinition });
+    this.markersValue.forEach((definition) => this.createMarker({ definition }));
+    this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
+    this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
+    this.circlesValue.forEach((definition) => this.createCircle({ definition }));
+    this.rectanglesValue.forEach((definition) => this.createRectangle({ definition }));
+    if (this.fitBoundsToMarkersValue) {
+      this.doFitBoundsToMarkers();
     }
-    connect() {
-        const extra = this.hasExtraValue ? this.extraValue : {};
-        const mapDefinition = {
-            center: this.hasCenterValue ? this.centerValue : null,
-            zoom: this.hasZoomValue ? this.zoomValue : null,
-            options: this.optionsValue,
-            extra,
-        };
-        this.dispatchEvent('pre-connect', mapDefinition);
-        this.createMarker = this.createDrawingFactory('marker', this.markers, this.doCreateMarker.bind(this));
-        this.createPolygon = this.createDrawingFactory('polygon', this.polygons, this.doCreatePolygon.bind(this));
-        this.createPolyline = this.createDrawingFactory('polyline', this.polylines, this.doCreatePolyline.bind(this));
-        this.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this));
-        this.createRectangle = this.createDrawingFactory('rectangle', this.rectangles, this.doCreateRectangle.bind(this));
-        this.map = this.doCreateMap({ definition: mapDefinition });
-        this.markersValue.forEach((definition) => this.createMarker({ definition }));
-        this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
-        this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
-        this.circlesValue.forEach((definition) => this.createCircle({ definition }));
-        this.rectanglesValue.forEach((definition) => this.createRectangle({ definition }));
-        if (this.fitBoundsToMarkersValue) {
-            this.doFitBoundsToMarkers();
-        }
-        this.dispatchEvent('connect', {
-            map: this.map,
-            markers: [...this.markers.values()],
-            polygons: [...this.polygons.values()],
-            polylines: [...this.polylines.values()],
-            circles: [...this.circles.values()],
-            rectangles: [...this.rectangles.values()],
-            infoWindows: this.infoWindows,
-            extra,
-        });
-        this.isConnected = true;
+    this.dispatchEvent("connect", {
+      map: this.map,
+      markers: [...this.markers.values()],
+      polygons: [...this.polygons.values()],
+      polylines: [...this.polylines.values()],
+      circles: [...this.circles.values()],
+      rectangles: [...this.rectangles.values()],
+      infoWindows: this.infoWindows,
+      extra
+    });
+    this.isConnected = true;
+  }
+  //region Public API
+  createInfoWindow({
+    definition,
+    element
+  }) {
+    this.dispatchEvent("info-window:before-create", { definition, element });
+    const infoWindow = this.doCreateInfoWindow({ definition, element });
+    this.dispatchEvent("info-window:after-create", { infoWindow, definition, element });
+    this.infoWindows.push(infoWindow);
+    return infoWindow;
+  }
+  markersValueChanged() {
+    if (!this.isConnected) {
+      return;
     }
-    createInfoWindow({ definition, element, }) {
-        this.dispatchEvent('info-window:before-create', { definition, element });
-        const infoWindow = this.doCreateInfoWindow({ definition, element });
-        this.dispatchEvent('info-window:after-create', { infoWindow, definition, element });
-        this.infoWindows.push(infoWindow);
-        return infoWindow;
+    this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker);
+    if (this.fitBoundsToMarkersValue) {
+      this.doFitBoundsToMarkers();
     }
-    markersValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker);
-        if (this.fitBoundsToMarkersValue) {
-            this.doFitBoundsToMarkers();
-        }
+  }
+  polygonsValueChanged() {
+    if (!this.isConnected) {
+      return;
     }
-    polygonsValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon);
+    this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon);
+  }
+  polylinesValueChanged() {
+    if (!this.isConnected) {
+      return;
     }
-    polylinesValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
+    this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
+  }
+  circlesValueChanged() {
+    if (!this.isConnected) {
+      return;
     }
-    circlesValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle);
+    this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle);
+  }
+  rectanglesValueChanged() {
+    if (!this.isConnected) {
+      return;
     }
-    rectanglesValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle);
-    }
-    createDrawingFactory(type, draws, factory) {
-        const eventBefore = `${type}:before-create`;
-        const eventAfter = `${type}:after-create`;
-        return ({ definition }) => {
-            this.dispatchEvent(eventBefore, { definition });
-            if (typeof definition.rawOptions !== 'undefined') {
-                console.warn(`[Symfony UX Map] The event "${eventBefore}" added a deprecated "rawOptions" property to the definition, it will be removed in a next major version, replace it with "bridgeOptions" instead.`, definition);
-            }
-            const drawing = factory({ definition });
-            this.dispatchEvent(eventAfter, { [type]: drawing, definition });
-            draws.set(definition['@id'], drawing);
-            return drawing;
-        };
-    }
-    onDrawChanged(draws, newDrawDefinitions, factory, remover) {
-        const idsToRemove = new Set(draws.keys());
-        newDrawDefinitions.forEach((definition) => {
-            idsToRemove.delete(definition['@id']);
-        });
-        idsToRemove.forEach((id) => {
-            const draw = draws.get(id);
-            remover(draw);
-            draws.delete(id);
-        });
-        newDrawDefinitions.forEach((definition) => {
-            if (!draws.has(definition['@id'])) {
-                factory({ definition });
-            }
-        });
-    }
-}
-default_1.values = {
-    providerOptions: Object,
-    center: Object,
-    zoom: Number,
-    fitBoundsToMarkers: Boolean,
-    markers: Array,
-    polygons: Array,
-    polylines: Array,
-    circles: Array,
-    rectangles: Array,
-    options: Object,
-    extra: Object,
+    this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle);
+  }
+  createDrawingFactory(type, draws, factory) {
+    const eventBefore = `${type}:before-create`;
+    const eventAfter = `${type}:after-create`;
+    return ({ definition }) => {
+      this.dispatchEvent(eventBefore, { definition });
+      if (typeof definition.rawOptions !== "undefined") {
+        console.warn(
+          `[Symfony UX Map] The event "${eventBefore}" added a deprecated "rawOptions" property to the definition, it will be removed in a next major version, replace it with "bridgeOptions" instead.`,
+          definition
+        );
+      }
+      const drawing = factory({ definition });
+      this.dispatchEvent(eventAfter, { [type]: drawing, definition });
+      draws.set(definition["@id"], drawing);
+      return drawing;
+    };
+  }
+  onDrawChanged(draws, newDrawDefinitions, factory, remover) {
+    const idsToRemove = new Set(draws.keys());
+    newDrawDefinitions.forEach((definition) => {
+      idsToRemove.delete(definition["@id"]);
+    });
+    idsToRemove.forEach((id) => {
+      const draw = draws.get(id);
+      remover(draw);
+      draws.delete(id);
+    });
+    newDrawDefinitions.forEach((definition) => {
+      if (!draws.has(definition["@id"])) {
+        factory({ definition });
+      }
+    });
+  }
+  //endregion
+};
+abstract_map_controller_default.values = {
+  providerOptions: Object,
+  center: Object,
+  zoom: Number,
+  minZoom: Number,
+  maxZoom: Number,
+  fitBoundsToMarkers: Boolean,
+  markers: Array,
+  polygons: Array,
+  polylines: Array,
+  circles: Array,
+  rectangles: Array,
+  options: Object,
+  extra: Object
 };
 
-let _google;
-let _loading = false;
-let _loaded = false;
-let _onLoadedCallbacks = [];
-const parser = new DOMParser();
-class map_controller extends default_1 {
-    async connect() {
-        const onLoaded = () => super.connect();
-        if (_loaded) {
-            onLoaded();
-            return;
-        }
-        if (_loading) {
-            _onLoadedCallbacks.push(onLoaded);
-            return;
-        }
-        _loading = true;
-        _google = { maps: {} };
-        let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
-        const loader = new Loader(loaderOptions);
-        libraries = ['core', ...libraries.filter((library) => library !== 'core')];
-        const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
-        librariesImplementations.map((libraryImplementation, index) => {
-            if (typeof libraryImplementation !== 'object' || libraryImplementation === null) {
-                return;
-            }
-            const library = libraries[index];
-            if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
-                _google.maps[library] = libraryImplementation;
-            }
-            else {
-                _google.maps = { ..._google.maps, ...libraryImplementation };
-            }
-        });
-        _loading = false;
-        _loaded = true;
-        onLoaded();
-        _onLoadedCallbacks.forEach((callback) => callback());
-        _onLoadedCallbacks = [];
+// src/map_controller.ts
+var _google;
+var _loading = false;
+var _loaded = false;
+var _onLoadedCallbacks = [];
+var parser = new DOMParser();
+var map_controller_default = class extends abstract_map_controller_default {
+  async connect() {
+    const onLoaded = () => super.connect();
+    if (_loaded) {
+      onLoaded();
+      return;
     }
-    centerValueChanged() {
-        if (this.map && this.hasCenterValue && this.centerValue) {
-            this.map.setCenter(this.centerValue);
-        }
+    if (_loading) {
+      _onLoadedCallbacks.push(onLoaded);
+      return;
     }
-    zoomValueChanged() {
-        if (this.map && this.hasZoomValue && this.zoomValue) {
-            this.map.setZoom(this.zoomValue);
-        }
+    _loading = true;
+    _google = { maps: {} };
+    let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
+    const loader = new Loader(loaderOptions);
+    libraries = ["core", ...libraries.filter((library) => library !== "core")];
+    const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
+    librariesImplementations.map((libraryImplementation, index) => {
+      if (typeof libraryImplementation !== "object" || libraryImplementation === null) {
+        return;
+      }
+      const library = libraries[index];
+      if (["marker", "places", "geometry", "journeySharing", "drawing", "visualization"].includes(library)) {
+        _google.maps[library] = libraryImplementation;
+      } else {
+        _google.maps = { ..._google.maps, ...libraryImplementation };
+      }
+    });
+    _loading = false;
+    _loaded = true;
+    onLoaded();
+    _onLoadedCallbacks.forEach((callback) => callback());
+    _onLoadedCallbacks = [];
+  }
+  centerValueChanged() {
+    if (this.map && this.hasCenterValue && this.centerValue) {
+      this.map.setCenter(this.centerValue);
     }
-    dispatchEvent(name, payload = {}) {
-        payload.google = _google;
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: payload,
-        });
+  }
+  zoomValueChanged() {
+    if (this.map && this.hasZoomValue && this.zoomValue) {
+      this.map.setZoom(this.zoomValue);
     }
-    doCreateMap({ definition }) {
-        const { center, zoom, options, bridgeOptions = {} } = definition;
-        options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
-        options.mapTypeControl = typeof options.mapTypeControlOptions !== 'undefined';
-        options.streetViewControl = typeof options.streetViewControlOptions !== 'undefined';
-        options.fullscreenControl = typeof options.fullscreenControlOptions !== 'undefined';
-        return new _google.maps.Map(this.element, {
-            center,
-            zoom,
-            ...options,
-            ...bridgeOptions,
-        });
+  }
+  minZoomValueChanged() {
+    if (this.map && this.hasMinZoomValue && this.minZoomValue) {
+      this.map.setOptions({ minZoom: this.minZoomValue });
     }
-    doCreateMarker({ definition, }) {
-        const { '@id': _id, position, title, infoWindow, icon, rawOptions = {}, bridgeOptions = {} } = definition;
-        const marker = new _google.maps.marker.AdvancedMarkerElement({
-            position,
-            title,
-            map: this.map,
-            ...rawOptions,
-            ...bridgeOptions,
-        });
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: marker });
-        }
-        if (icon) {
-            this.doCreateIcon({ definition: icon, element: marker });
-        }
-        return marker;
+  }
+  maxZoomValueChanged() {
+    if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
+      this.map.setOptions({ maxZoom: this.maxZoomValue });
     }
-    doRemoveMarker(marker) {
-        marker.map = null;
+  }
+  dispatchEvent(name, payload = {}) {
+    payload.google = _google;
+    this.dispatch(name, {
+      prefix: "ux:map",
+      detail: payload
+    });
+  }
+  doCreateMap({ definition }) {
+    const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
+    options.zoomControl = typeof options.zoomControlOptions !== "undefined";
+    options.mapTypeControl = typeof options.mapTypeControlOptions !== "undefined";
+    options.streetViewControl = typeof options.streetViewControlOptions !== "undefined";
+    options.fullscreenControl = typeof options.fullscreenControlOptions !== "undefined";
+    return new _google.maps.Map(this.element, {
+      center,
+      zoom,
+      minZoom,
+      maxZoom,
+      ...options,
+      ...bridgeOptions
+    });
+  }
+  doCreateMarker({
+    definition
+  }) {
+    const { "@id": _id, position, title, infoWindow, icon, rawOptions = {}, bridgeOptions = {} } = definition;
+    const marker = new _google.maps.marker.AdvancedMarkerElement({
+      position,
+      title,
+      map: this.map,
+      ...rawOptions,
+      ...bridgeOptions
+    });
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: marker });
     }
-    doCreatePolygon({ definition, }) {
-        const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
-        const polygon = new _google.maps.Polygon({
-            paths: points,
-            map: this.map,
-            ...rawOptions,
-            ...bridgeOptions,
-        });
-        if (title) {
-            polygon.set('title', title);
-        }
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: polygon });
-        }
-        return polygon;
+    if (icon) {
+      this.doCreateIcon({ definition: icon, element: marker });
     }
-    doRemovePolygon(polygon) {
-        polygon.setMap(null);
+    return marker;
+  }
+  doRemoveMarker(marker) {
+    marker.map = null;
+  }
+  doCreatePolygon({
+    definition
+  }) {
+    const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const polygon = new _google.maps.Polygon({
+      paths: points,
+      map: this.map,
+      ...rawOptions,
+      ...bridgeOptions
+    });
+    if (title) {
+      polygon.set("title", title);
     }
-    doCreatePolyline({ definition, }) {
-        const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
-        const polyline = new _google.maps.Polyline({
-            path: points,
-            map: this.map,
-            ...rawOptions,
-            ...bridgeOptions,
-        });
-        if (title) {
-            polyline.set('title', title);
-        }
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: polyline });
-        }
-        return polyline;
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: polygon });
     }
-    doRemovePolyline(polyline) {
-        polyline.setMap(null);
+    return polygon;
+  }
+  doRemovePolygon(polygon) {
+    polygon.setMap(null);
+  }
+  doCreatePolyline({
+    definition
+  }) {
+    const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const polyline = new _google.maps.Polyline({
+      path: points,
+      map: this.map,
+      ...rawOptions,
+      ...bridgeOptions
+    });
+    if (title) {
+      polyline.set("title", title);
     }
-    doCreateCircle({ definition }) {
-        const { '@id': _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
-        const circle = new _google.maps.Circle({
-            center,
-            radius,
-            map: this.map,
-            ...rawOptions,
-            ...bridgeOptions,
-        });
-        if (title) {
-            circle.set('title', title);
-        }
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: circle });
-        }
-        return circle;
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: polyline });
     }
-    doRemoveCircle(circle) {
-        circle.setMap(null);
+    return polyline;
+  }
+  doRemovePolyline(polyline) {
+    polyline.setMap(null);
+  }
+  doCreateCircle({ definition }) {
+    const { "@id": _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const circle = new _google.maps.Circle({
+      center,
+      radius,
+      map: this.map,
+      ...rawOptions,
+      ...bridgeOptions
+    });
+    if (title) {
+      circle.set("title", title);
     }
-    doCreateRectangle({ definition, }) {
-        const { northEast, southWest, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
-        const rectangle = new _google.maps.Rectangle({
-            bounds: new _google.maps.LatLngBounds(southWest, northEast),
-            map: this.map,
-            ...rawOptions,
-            ...bridgeOptions,
-        });
-        if (title) {
-            rectangle.set('title', title);
-        }
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: rectangle });
-        }
-        return rectangle;
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: circle });
     }
-    doRemoveRectangle(rectangle) {
-        rectangle.setMap(null);
+    return circle;
+  }
+  doRemoveCircle(circle) {
+    circle.setMap(null);
+  }
+  doCreateRectangle({
+    definition
+  }) {
+    const { northEast, southWest, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const rectangle = new _google.maps.Rectangle({
+      bounds: new _google.maps.LatLngBounds(southWest, northEast),
+      map: this.map,
+      ...rawOptions,
+      ...bridgeOptions
+    });
+    if (title) {
+      rectangle.set("title", title);
     }
-    doCreateInfoWindow({ definition, element, }) {
-        const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
-        let position = null;
-        if (element instanceof google.maps.Circle) {
-            position = element.getCenter();
-        }
-        else if (element instanceof google.maps.Rectangle) {
-            position = element.getBounds()?.getCenter() || null;
-        }
-        else if (element instanceof google.maps.Polygon || element instanceof google.maps.Polyline) ;
-        const infoWindowOptions = {
-            headerContent: this.createTextOrElement(headerContent),
-            content: this.createTextOrElement(content),
-            position,
-            ...rawOptions,
-            ...bridgeOptions,
-        };
-        const infoWindow = new _google.maps.InfoWindow(infoWindowOptions);
-        element.addListener('click', (event) => {
-            if (autoClose) {
-                this.closeInfoWindowsExcept(infoWindow);
-            }
-            if (infoWindowOptions.position === null) {
-                infoWindow.setPosition(event.latLng);
-            }
-            infoWindow.open({ map: this.map, anchor: element });
-        });
-        if (opened) {
-            if (autoClose) {
-                this.closeInfoWindowsExcept(infoWindow);
-            }
-            infoWindow.open({ map: this.map, anchor: element });
-        }
-        return infoWindow;
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: rectangle });
     }
-    doFitBoundsToMarkers() {
-        if (this.markers.size === 0) {
-            return;
-        }
-        const bounds = new google.maps.LatLngBounds();
-        this.markers.forEach((marker) => {
-            if (!marker.position) {
-                return;
-            }
-            bounds.extend(marker.position);
-        });
-        this.map.fitBounds(bounds);
+    return rectangle;
+  }
+  doRemoveRectangle(rectangle) {
+    rectangle.setMap(null);
+  }
+  doCreateInfoWindow({
+    definition,
+    element
+  }) {
+    const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
+    let position = null;
+    if (element instanceof google.maps.Circle) {
+      position = element.getCenter();
+    } else if (element instanceof google.maps.Rectangle) {
+      position = element.getBounds()?.getCenter() || null;
+    } else if (element instanceof google.maps.Polygon || element instanceof google.maps.Polyline) {
     }
-    createTextOrElement(content) {
-        if (!content) {
-            return null;
-        }
-        if (content.includes('<')) {
-            const div = document.createElement('div');
-            div.innerHTML = content;
-            return div;
-        }
-        return content;
+    const infoWindowOptions = {
+      headerContent: this.createTextOrElement(headerContent),
+      content: this.createTextOrElement(content),
+      position,
+      ...rawOptions,
+      ...bridgeOptions
+    };
+    const infoWindow = new _google.maps.InfoWindow(infoWindowOptions);
+    element.addListener("click", (event) => {
+      if (autoClose) {
+        this.closeInfoWindowsExcept(infoWindow);
+      }
+      if (infoWindowOptions.position === null) {
+        infoWindow.setPosition(event.latLng);
+      }
+      infoWindow.open({ map: this.map, anchor: element });
+    });
+    if (opened) {
+      if (autoClose) {
+        this.closeInfoWindowsExcept(infoWindow);
+      }
+      infoWindow.open({ map: this.map, anchor: element });
     }
-    doCreateIcon({ definition, element }) {
-        const { type, width, height } = definition;
-        if (type === IconTypes.Svg) {
-            element.content = parser.parseFromString(definition.html, 'image/svg+xml').documentElement;
-        }
-        else if (type === IconTypes.UxIcon) {
-            element.content = parser.parseFromString(definition._generated_html, 'image/svg+xml').documentElement;
-        }
-        else if (type === IconTypes.Url) {
-            const icon = document.createElement('img');
-            icon.width = width;
-            icon.height = height;
-            icon.src = definition.url;
-            element.content = icon;
-        }
-        else {
-            throw new Error(`Unsupported icon type: ${type}.`);
-        }
+    return infoWindow;
+  }
+  doFitBoundsToMarkers() {
+    if (this.markers.size === 0) {
+      return;
     }
-    closeInfoWindowsExcept(infoWindow) {
-        this.infoWindows.forEach((otherInfoWindow) => {
-            if (otherInfoWindow !== infoWindow) {
-                otherInfoWindow.close();
-            }
-        });
+    const bounds = new google.maps.LatLngBounds();
+    this.markers.forEach((marker) => {
+      if (!marker.position) {
+        return;
+      }
+      bounds.extend(marker.position);
+    });
+    this.map.fitBounds(bounds);
+  }
+  createTextOrElement(content) {
+    if (!content) {
+      return null;
     }
-}
-
-export { map_controller as default };
+    if (content.includes("<")) {
+      const div = document.createElement("div");
+      div.innerHTML = content;
+      return div;
+    }
+    return content;
+  }
+  doCreateIcon({ definition, element }) {
+    const { type, width, height } = definition;
+    if (type === IconTypes.Svg) {
+      element.content = parser.parseFromString(definition.html, "image/svg+xml").documentElement;
+    } else if (type === IconTypes.UxIcon) {
+      element.content = parser.parseFromString(definition._generated_html, "image/svg+xml").documentElement;
+    } else if (type === IconTypes.Url) {
+      const icon = document.createElement("img");
+      icon.width = width;
+      icon.height = height;
+      icon.src = definition.url;
+      element.content = icon;
+    } else {
+      throw new Error(`Unsupported icon type: ${type}.`);
+    }
+  }
+  closeInfoWindowsExcept(infoWindow) {
+    this.infoWindows.forEach((otherInfoWindow) => {
+      if (otherInfoWindow !== infoWindow) {
+        otherInfoWindow.close();
+      }
+    });
+  }
+};
+export {
+  map_controller_default as default
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symfony/ux-google-map",
   "description": "GoogleMaps bridge for Symfony UX Map, integrate interactive maps in your Symfony applications",
   "license": "MIT",
-  "version": "2.27.0",
+  "version": "2.28.1",
   "keywords": [
     "symfony-ux",
     "google-maps",
@@ -16,13 +16,6 @@
   ],
   "main": "dist/map_controller.js",
   "types": "dist/map_controller.d.ts",
-  "scripts": {
-    "build": "node ../../../../../../bin/build_package.js .",
-    "watch": "node ../../../../../../bin/build_package.js . --watch",
-    "test": "../../../../../../bin/test_package.sh .",
-    "check": "biome check",
-    "ci": "biome ci"
-  },
   "symfony": {
     "controllers": {
       "map": {
@@ -50,7 +43,23 @@
   "devDependencies": {
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hotwired/stimulus": "^3.0.0",
-    "@symfony/ux-map": "2.27.0",
-    "@types/google.maps": "^3.55.9"
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/google.maps": "^3.55.9",
+    "@vitest/browser": "^3.2.4",
+    "jsdom": "^26.1.0",
+    "tslib": "^2.8.1",
+    "tsx": "^4.20.3",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "@symfony/ux-map": "2.28.1"
+  },
+  "scripts": {
+    "build": "tsx ../../../../../../bin/build_package.ts .",
+    "watch": "tsx ../../../../../../bin/build_package.ts . --watch",
+    "test": "../../../../../../bin/test_package.sh .",
+    "check": "biome check",
+    "ci": "biome ci"
   }
 }