@mcp-b/geo-leaflet 0.2.21 → 0.3.0

package/dist/components/choropleth/choropleth.js

@@ -1,6 +1,6 @@
 import { t as __decorate } from "../../decorate-DcF3lt7P.js";
-import "../../geojson-Dlvc_wAg.js";
-import "../../control-DvPCCR2e.js";
+import "../geojson/geojson.js";
+import "../control/control.js";
 import { css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createClassifyStyle } from "@mcp-b/geo-support/classification";

package/dist/components/circle/circle.js

@@ -1,2 +1,76 @@
-import { t as SigveloLeafletCircle } from "../../circle-BNPIzKH-.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/circle/circle.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+let SigveloLeafletCircle = class SigveloLeafletCircle extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.radius = 100;
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 3;
+		this._circle = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => this._addCircle());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._circle?.remove();
+		this._circle = null;
+	}
+	/** @internal */
+	_addCircle() {
+		if (!this._mapEl?.map) return;
+		this._circle = import_leaflet_src.circle([this.latitude, this.longitude], {
+			radius: this.radius,
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth
+		}).addTo(this._mapEl.map);
+	}
+	updated(changed) {
+		if (!this._circle) return;
+		if (changed.has("latitude") || changed.has("longitude")) this._circle.setLatLng([this.latitude, this.longitude]);
+		if (changed.has("radius")) this._circle.setRadius(this.radius);
+		if (changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth")) this._circle.setStyle({
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth
+		});
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ type: Number })], SigveloLeafletCircle.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloLeafletCircle.prototype, "longitude", void 0);
+__decorate([property({ type: Number })], SigveloLeafletCircle.prototype, "radius", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloLeafletCircle.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloLeafletCircle.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloLeafletCircle.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloLeafletCircle.prototype, "strokeWidth", void 0);
+SigveloLeafletCircle = __decorate([customElement("sigvelo-leaflet-circle")], SigveloLeafletCircle);
+//#endregion
 export { SigveloLeafletCircle };

package/dist/components/control/control.d.ts

@@ -1,4 +1,5 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
+import { ControlPosition } from "@mcp-b/geo-support/types";
 
 //#region src/components/control/control.d.ts
 /**
@@ -6,6 +7,8 @@ import { LitElement } from "lit";
  * and places it in one of Leaflet's four control corners, stacking properly
  * with zoom, attribution, and other controls.
  *
+ * @slot - Control content, retained in the control’s light DOM.
+ *
  * @tag sigvelo-leaflet-control
  *
  * @example
@@ -21,7 +24,8 @@ declare class SigveloLeafletControl extends LitElement {
   /** @internal */
   static styles: import("lit").CSSResult[];
   /** Position of the control on the map. */
-  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  position: ControlPosition;
+  private _stopPlacement;
   /** @internal */
   private _control;
   /** @internal */
@@ -30,6 +34,8 @@ declare class SigveloLeafletControl extends LitElement {
   private _toLeafletPosition;
   connectedCallback(): Promise<void>;
   disconnectedCallback(): void;
+  private _removeControl;
+  protected updated(changed: PropertyValues): void;
   /** @internal */
   private _addControl;
   render(): import("lit-html").TemplateResult<1>;

package/dist/components/control/control.js

@@ -1,2 +1,73 @@
-import { t as SigveloLeafletControl } from "../../control-DvPCCR2e.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import { placeControl } from "@mcp-b/geo-support/base/control-placement";
+import styles from "@mcp-b/geo-support/styles/control.styles";
+//#region src/components/control/control.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+let SigveloLeafletControl = class SigveloLeafletControl extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.position = "bottom-left";
+		this._stopPlacement = null;
+		this._control = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	/** @internal Map position names to Leaflet format. */
+	_toLeafletPosition() {
+		return {
+			"top-left": "topleft",
+			"top-right": "topright",
+			"bottom-left": "bottomleft",
+			"bottom-right": "bottomright"
+		}[this.position] ?? "bottomleft";
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => {
+			if (!this._control) this._addControl();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeControl();
+	}
+	_removeControl() {
+		this._stopPlacement?.();
+		this._stopPlacement = null;
+		this._control?.remove();
+		this._control = null;
+	}
+	updated(changed) {
+		if (changed.has("position") && this._control) {
+			this._removeControl();
+			this._addControl();
+		}
+	}
+	/** @internal */
+	_addControl() {
+		if (!this._mapEl?.map) return;
+		const CustomControl = import_leaflet_src.Control.extend({ onAdd: () => {
+			const container = import_leaflet_src.DomUtil.create("div", "sigvelo-leaflet-custom-control");
+			import_leaflet_src.DomEvent.disableClickPropagation(container);
+			import_leaflet_src.DomEvent.disableScrollPropagation(container);
+			return container;
+		} });
+		this._control = new CustomControl({ position: this._toLeafletPosition() });
+		this._control.addTo(this._mapEl.map);
+		this._stopPlacement = placeControl(this, this._control.getContainer(), this._mapEl);
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property()], SigveloLeafletControl.prototype, "position", void 0);
+SigveloLeafletControl = __decorate([customElement("sigvelo-leaflet-control")], SigveloLeafletControl);
+//#endregion
 export { SigveloLeafletControl };

package/dist/components/geojson/geojson.js

@@ -1,2 +1,180 @@
-import { t as SigveloLeafletGeojson } from "../../geojson-Dlvc_wAg.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import "../../default-icon.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { SigveloFeatureClickEvent } from "@mcp-b/geo-support/events";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import { subscribeClassify } from "@mcp-b/geo-support/classification";
+//#region src/components/geojson/geojson.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+function formatPopupProperty(value) {
+	if (typeof value === "string") return value;
+	if (typeof value === "number") return Number.isFinite(value) ? value.toLocaleString(void 0, { maximumSignificantDigits: 4 }) : void 0;
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+}
+let SigveloLeafletGeojson = class SigveloLeafletGeojson extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.data = null;
+		this.styleFunction = null;
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 3;
+		this.strokeOpacity = 1;
+		this.interactive = true;
+		this.popupTitleProperty = "";
+		this.popupValueProperty = "";
+		this.popupValueLabel = "";
+		this.fitBounds = false;
+		this.channel = "";
+		this._layer = null;
+		this._mapEl = null;
+		this._unsubscribeChannel = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	/** Access the underlying Leaflet GeoJSON layer. */
+	get layer() {
+		return this._layer;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._subscribeChannel();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => this._addLayer());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unsubscribeChannel?.();
+		this._unsubscribeChannel = null;
+		this._removeLayer();
+	}
+	/** @internal */
+	_subscribeChannel() {
+		this._unsubscribeChannel?.();
+		if (!this.channel) return;
+		this._unsubscribeChannel = subscribeClassify(this.channel, (detail) => {
+			this.styleFunction = detail.styleFunction;
+		});
+	}
+	/** @internal */
+	_toGeoJsonFeature(feature) {
+		return {
+			type: "Feature",
+			geometry: feature.geometry,
+			properties: feature.properties ?? null,
+			id: feature.id
+		};
+	}
+	/** @internal */
+	_getStyleForFeature(feature) {
+		if (this.styleFunction) {
+			const s = this.styleFunction(this._toGeoJsonFeature(feature));
+			if (s) return {
+				fillColor: s.fillColor ?? this.fillColor,
+				fillOpacity: s.fillOpacity ?? this.fillOpacity,
+				color: s.strokeColor ?? this.strokeColor,
+				weight: s.strokeWidth ?? this.strokeWidth,
+				opacity: s.strokeOpacity ?? this.strokeOpacity
+			};
+		}
+		return {
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth,
+			opacity: this.strokeOpacity
+		};
+	}
+	/** @internal */
+	_getPopupForFeature(feature) {
+		if (!this.popupTitleProperty) return;
+		const properties = feature.properties ?? {};
+		const title = formatPopupProperty(properties[this.popupTitleProperty]);
+		if (title === void 0) return;
+		const content = document.createElement("div");
+		const heading = document.createElement("strong");
+		heading.textContent = title;
+		content.appendChild(heading);
+		if (this.popupValueProperty) {
+			const value = formatPopupProperty(properties[this.popupValueProperty]);
+			if (value !== void 0) {
+				const detail = document.createElement("div");
+				detail.textContent = this.popupValueLabel ? `${this.popupValueLabel}: ${value}` : value;
+				content.appendChild(detail);
+			}
+		}
+		return content;
+	}
+	/** @internal */
+	_addLayer() {
+		this._removeLayer();
+		if (!this._mapEl?.map || !this.data) return;
+		this._layer = import_leaflet_src.geoJSON(this.data, {
+			style: (feature) => feature ? this._getStyleForFeature(feature) : {},
+			interactive: this.interactive,
+			onEachFeature: (feature, layer) => {
+				const popup = this._getPopupForFeature(feature);
+				if (popup) layer.bindPopup(popup);
+				if (this.interactive) layer.on("click", (e) => {
+					this.dispatchEvent(new SigveloFeatureClickEvent(this._toGeoJsonFeature(feature), {
+						lat: e.latlng.lat,
+						lng: e.latlng.lng
+					}));
+				});
+			}
+		}).addTo(this._mapEl.map);
+		if (this.fitBounds && this._layer.getLayers().length > 0) {
+			const bounds = this._layer.getBounds();
+			if (bounds.isValid()) this._mapEl.map.fitBounds(bounds, { padding: [12, 12] });
+		}
+	}
+	/** @internal */
+	_removeLayer() {
+		this._layer?.remove();
+		this._layer = null;
+	}
+	updated(changed) {
+		if (changed.has("data") || changed.has("interactive") || changed.has("popupTitleProperty") || changed.has("popupValueProperty") || changed.has("popupValueLabel")) this._addLayer();
+		else if (changed.has("styleFunction") || changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth") || changed.has("strokeOpacity")) this._layer?.setStyle((feature) => feature ? this._getStyleForFeature(feature) : {});
+		else if (changed.has("fitBounds") && this.fitBounds && this._layer && this._mapEl?.map) {
+			const bounds = this._layer.getBounds();
+			if (bounds.isValid()) this._mapEl.map.fitBounds(bounds, { padding: [12, 12] });
+		}
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloLeafletGeojson.prototype, "data", void 0);
+__decorate([property({ attribute: false })], SigveloLeafletGeojson.prototype, "styleFunction", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloLeafletGeojson.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloLeafletGeojson.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloLeafletGeojson.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloLeafletGeojson.prototype, "strokeWidth", void 0);
+__decorate([property({
+	attribute: "stroke-opacity",
+	type: Number
+})], SigveloLeafletGeojson.prototype, "strokeOpacity", void 0);
+__decorate([property({ type: Boolean })], SigveloLeafletGeojson.prototype, "interactive", void 0);
+__decorate([property({ attribute: "popup-title-property" })], SigveloLeafletGeojson.prototype, "popupTitleProperty", void 0);
+__decorate([property({ attribute: "popup-value-property" })], SigveloLeafletGeojson.prototype, "popupValueProperty", void 0);
+__decorate([property({ attribute: "popup-value-label" })], SigveloLeafletGeojson.prototype, "popupValueLabel", void 0);
+__decorate([property({
+	attribute: "fit-bounds",
+	type: Boolean
+})], SigveloLeafletGeojson.prototype, "fitBounds", void 0);
+__decorate([property()], SigveloLeafletGeojson.prototype, "channel", void 0);
+SigveloLeafletGeojson = __decorate([customElement("sigvelo-leaflet-geojson")], SigveloLeafletGeojson);
+//#endregion
 export { SigveloLeafletGeojson };

package/dist/components/map/map.js

@@ -1,2 +1,2 @@
-import { t as SigveloLeafletMap } from "../../map-DGu4FVda.js";
+import { t as SigveloLeafletMap } from "../../map-ChMH_5_A.js";
 export { SigveloLeafletMap };

package/dist/components/marker/marker.js

@@ -1,2 +1,103 @@
-import { t as SigveloLeafletMarker } from "../../marker-RT0-gpae.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import "../../default-icon.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+import { clonePopupContent } from "@mcp-b/geo-support/base/popup-content";
+//#region src/components/marker/marker.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+let SigveloLeafletMarker = class SigveloLeafletMarker extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.latitude = 0;
+		this.longitude = 0;
+		this.title = "";
+		this.draggable = false;
+		this.opacity = 1;
+		this.iconUrl = "";
+		this.iconWidth = 25;
+		this.iconHeight = 41;
+		this._marker = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	/** Access the underlying Leaflet marker instance. */
+	get marker() {
+		return this._marker;
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => this._addMarker());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeMarker();
+	}
+	/** @internal */
+	_addMarker() {
+		this._removeMarker();
+		if (!this._mapEl?.map) return;
+		const options = {
+			title: this.title,
+			draggable: this.draggable,
+			opacity: this.opacity
+		};
+		if (this.iconUrl) options.icon = import_leaflet_src.icon({
+			iconUrl: this.iconUrl,
+			iconSize: [this.iconWidth, this.iconHeight],
+			iconAnchor: [this.iconWidth / 2, this.iconHeight],
+			popupAnchor: [0, -this.iconHeight]
+		});
+		this._marker = import_leaflet_src.marker([this.latitude, this.longitude], options).addTo(this._mapEl.map);
+		this._bindChildPopup();
+		this._marker.on("dragend", () => {
+			if (!this._marker) return;
+			const pos = this._marker.getLatLng();
+			this.latitude = pos.lat;
+			this.longitude = pos.lng;
+		});
+	}
+	/** @internal */
+	_removeMarker() {
+		this._marker?.remove();
+		this._marker = null;
+	}
+	/** @internal */
+	_bindChildPopup() {
+		if (!this._marker) return;
+		const popupEl = this.querySelector("sigvelo-leaflet-popup");
+		if (popupEl) this._marker.bindPopup(clonePopupContent(popupEl));
+	}
+	updated() {
+		if (this._marker) {
+			this._marker.setLatLng([this.latitude, this.longitude]);
+			this._marker.setOpacity(this.opacity);
+			this._bindChildPopup();
+		}
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Number })], SigveloLeafletMarker.prototype, "latitude", void 0);
+__decorate([property({ type: Number })], SigveloLeafletMarker.prototype, "longitude", void 0);
+__decorate([property()], SigveloLeafletMarker.prototype, "title", void 0);
+__decorate([property({ type: Boolean })], SigveloLeafletMarker.prototype, "draggable", void 0);
+__decorate([property({ type: Number })], SigveloLeafletMarker.prototype, "opacity", void 0);
+__decorate([property({ attribute: "icon-url" })], SigveloLeafletMarker.prototype, "iconUrl", void 0);
+__decorate([property({
+	attribute: "icon-width",
+	type: Number
+})], SigveloLeafletMarker.prototype, "iconWidth", void 0);
+__decorate([property({
+	attribute: "icon-height",
+	type: Number
+})], SigveloLeafletMarker.prototype, "iconHeight", void 0);
+SigveloLeafletMarker = __decorate([customElement("sigvelo-leaflet-marker")], SigveloLeafletMarker);
+//#endregion
 export { SigveloLeafletMarker };

package/dist/components/polygon/polygon.js

@@ -1,2 +1,70 @@
-import { t as SigveloLeafletPolygon } from "../../polygon-DtiZDmnC.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/polygon/polygon.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+let SigveloLeafletPolygon = class SigveloLeafletPolygon extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.positions = [];
+		this.fillColor = "#3388ff";
+		this.fillOpacity = .2;
+		this.strokeColor = "#3388ff";
+		this.strokeWidth = 3;
+		this._polygon = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => this._addPolygon());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._polygon?.remove();
+		this._polygon = null;
+	}
+	/** @internal */
+	_addPolygon() {
+		if (!this._mapEl?.map) return;
+		this._polygon = import_leaflet_src.polygon(this.positions, {
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth
+		}).addTo(this._mapEl.map);
+	}
+	updated(changed) {
+		if (!this._polygon) return;
+		if (changed.has("positions")) this._polygon.setLatLngs(this.positions);
+		if (changed.has("fillColor") || changed.has("fillOpacity") || changed.has("strokeColor") || changed.has("strokeWidth")) this._polygon.setStyle({
+			fillColor: this.fillColor,
+			fillOpacity: this.fillOpacity,
+			color: this.strokeColor,
+			weight: this.strokeWidth
+		});
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloLeafletPolygon.prototype, "positions", void 0);
+__decorate([property({ attribute: "fill-color" })], SigveloLeafletPolygon.prototype, "fillColor", void 0);
+__decorate([property({
+	attribute: "fill-opacity",
+	type: Number
+})], SigveloLeafletPolygon.prototype, "fillOpacity", void 0);
+__decorate([property({ attribute: "stroke-color" })], SigveloLeafletPolygon.prototype, "strokeColor", void 0);
+__decorate([property({
+	attribute: "stroke-width",
+	type: Number
+})], SigveloLeafletPolygon.prototype, "strokeWidth", void 0);
+SigveloLeafletPolygon = __decorate([customElement("sigvelo-leaflet-polygon")], SigveloLeafletPolygon);
+//#endregion
 export { SigveloLeafletPolygon };

package/dist/components/polyline/polyline.js

@@ -1,2 +1,64 @@
-import { t as SigveloLeafletPolyline } from "../../polyline-C3VgapkC.js";
+import { n as __toESM, t as require_leaflet_src } from "../../leaflet-src-DkjKLRUt.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { findMapElement } from "@mcp-b/geo-support/base/find-map-element";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/polyline/polyline.ts
+var import_leaflet_src = /* @__PURE__ */ __toESM(require_leaflet_src(), 1);
+let SigveloLeafletPolyline = class SigveloLeafletPolyline extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.positions = [];
+		this.color = "#3388ff";
+		this.weight = 3;
+		this.opacity = 1;
+		this.dashArray = "";
+		this._polyline = null;
+		this._mapEl = null;
+	}
+	static {
+		this.styles = [styles];
+	}
+	async connectedCallback() {
+		super.connectedCallback();
+		this._mapEl = findMapElement(this, "sigvelo-leaflet-map");
+		await this._mapEl?.whenMapReady(this, () => this._addPolyline());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._polyline?.remove();
+		this._polyline = null;
+	}
+	/** @internal */
+	_addPolyline() {
+		if (!this._mapEl?.map) return;
+		this._polyline = import_leaflet_src.polyline(this.positions, {
+			color: this.color,
+			weight: this.weight,
+			opacity: this.opacity,
+			dashArray: this.dashArray || void 0
+		}).addTo(this._mapEl.map);
+	}
+	updated(changed) {
+		if (!this._polyline) return;
+		if (changed.has("positions")) this._polyline.setLatLngs(this.positions);
+		if (changed.has("color") || changed.has("weight") || changed.has("opacity") || changed.has("dashArray")) this._polyline.setStyle({
+			color: this.color,
+			weight: this.weight,
+			opacity: this.opacity,
+			dashArray: this.dashArray || void 0
+		});
+	}
+	render() {
+		return html``;
+	}
+};
+__decorate([property({ attribute: false })], SigveloLeafletPolyline.prototype, "positions", void 0);
+__decorate([property()], SigveloLeafletPolyline.prototype, "color", void 0);
+__decorate([property({ type: Number })], SigveloLeafletPolyline.prototype, "weight", void 0);
+__decorate([property({ type: Number })], SigveloLeafletPolyline.prototype, "opacity", void 0);
+__decorate([property({ attribute: "dash-array" })], SigveloLeafletPolyline.prototype, "dashArray", void 0);
+SigveloLeafletPolyline = __decorate([customElement("sigvelo-leaflet-polyline")], SigveloLeafletPolyline);
+//#endregion
 export { SigveloLeafletPolyline };

package/dist/components/popup/popup.js

@@ -1,2 +1,29 @@
-import { t as SigveloLeafletPopup } from "../../popup-BDNUUZWQ.js";
+import { t as __decorate } from "../../decorate-DcF3lt7P.js";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import styles from "@mcp-b/geo-support/styles/map-child.styles";
+//#region src/components/popup/popup.ts
+let SigveloLeafletPopup = class SigveloLeafletPopup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.maxWidth = 300;
+		this.minWidth = 50;
+	}
+	static {
+		this.styles = [styles];
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({
+	attribute: "max-width",
+	type: Number
+})], SigveloLeafletPopup.prototype, "maxWidth", void 0);
+__decorate([property({
+	attribute: "min-width",
+	type: Number
+})], SigveloLeafletPopup.prototype, "minWidth", void 0);
+SigveloLeafletPopup = __decorate([customElement("sigvelo-leaflet-popup")], SigveloLeafletPopup);
+//#endregion
 export { SigveloLeafletPopup };