mertani-web-toolkit 0.1.62 → 0.1.64

package/dist/components/inputs/SelectInput/SelectInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount, onDestroy, tick, getContext } from 'svelte';
 	import type { IFieldOption } from './SelectInput.js';
-	import { Icon } from 'mertani-web-toolkit';
+	import { Icon } from '../../../index.js';
 	import './SelectInput.css';
 
 	interface Props {

package/dist/components/map/Map.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/map/Map.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/map/Map.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import type { Map as LMap, LatLngTuple, LatLngBounds, TileLayer, Marker, Layer } from 'leaflet';
+	import 'leaflet/dist/leaflet.css';
+	import { createMapContext } from '../../utils/mapContext.js';
+	import './map.css';
+	import Icon from '../Icon/Icon.svelte';
+
+	type LeafletNamespace = typeof import('leaflet');
+
+	interface Props {
+		center?: LatLngTuple;
+		zoom?: number;
+		minZoom?: number;
+		maxZoom?: number;
+		tileUrl?: string;
+		tileAttribution?: string;
+		scrollWheelZoom?: boolean;
+		zoomControl?: boolean;
+		autoZoom?: boolean;
+		class?: string;
+	}
+
+	let {
+		center,
+		zoom = 5,
+		minZoom,
+		maxZoom,
+		tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		tileAttribution = '©2025 Developed by <b>Mertani</b>',
+		scrollWheelZoom = true,
+		autoZoom = true,
+		class: className = ''
+	}: Props = $props();
+
+	let el: HTMLDivElement | null = $state(null);
+	let map: LMap | null = null;
+	let tile: TileLayer | null = null;
+	let L: LeafletNamespace | null = null;
+	const mapStore = createMapContext();
+
+	function calculateBounds(): LatLngBounds | null {
+		if (!map || !L) return null;
+
+		const bounds = L.latLngBounds([]);
+		let hasBounds = false;
+
+		map.eachLayer((layer: Layer) => {
+			if (!L) return;
+
+			// Skip tile layers
+			if (layer instanceof L.TileLayer) return;
+
+			// Handle MarkerClusterGroup - get all child markers
+			if (
+				(layer as any).getAllChildMarkers &&
+				typeof (layer as any).getAllChildMarkers === 'function'
+			) {
+				const clusterGroup = layer as any;
+				const markers = clusterGroup.getAllChildMarkers() as Marker[];
+				markers.forEach((marker: Marker) => {
+					const latlng = marker.getLatLng();
+					if (latlng) {
+						bounds.extend(latlng);
+						hasBounds = true;
+					}
+				});
+			}
+			// Handle individual markers
+			else if ('getLatLng' in layer && typeof layer.getLatLng === 'function') {
+				const latlng = (layer as Marker).getLatLng();
+				if (latlng) {
+					bounds.extend(latlng);
+					hasBounds = true;
+				}
+			}
+			// Handle layers with bounds (GeoJSON, TopoJSON, etc.)
+			else if ('getBounds' in layer && typeof layer.getBounds === 'function') {
+				const layerBounds = layer.getBounds() as LatLngBounds;
+				if (layerBounds && layerBounds.isValid()) {
+					bounds.extend(layerBounds);
+					hasBounds = true;
+				}
+			}
+		});
+
+		return hasBounds && bounds.isValid() ? bounds : null;
+	}
+
+	function autoZoomToMarkers() {
+		if (!map || !L || !autoZoom) return;
+
+		setTimeout(() => {
+			if (!map || !L) return;
+
+			const bounds = calculateBounds();
+			if (bounds) {
+				map.fitBounds(bounds, { padding: [30, 30] });
+			} else if (center) {
+				map.setView(center, zoom);
+			} else {
+				map.setView([-2.5489, 118.0149] as LatLngTuple, zoom);
+			}
+		}, 100);
+	}
+
+	async function init() {
+		if (!el) return;
+
+		const leafletMod = await import('leaflet');
+		L = (leafletMod as any).default ?? leafletMod;
+
+		if (!L) return;
+
+		map = L.map(el, {
+			zoomControl: false,
+			zoomAnimation: true,
+			fadeAnimation: true,
+			markerZoomAnimation: true,
+			scrollWheelZoom,
+			minZoom,
+			maxZoom
+		});
+
+		L.control.zoom({ position: 'bottomright' }).addTo(map);
+		tile = L.tileLayer(tileUrl, { attribution: tileAttribution });
+		tile.addTo(map);
+
+		if (center) {
+			map.setView(center, zoom);
+		} else {
+			map.setView([-2.5489, 118.0149] as LatLngTuple, zoom);
+		}
+
+		mapStore.set(map as any);
+
+		requestAnimationFrame(() => map?.invalidateSize());
+		setTimeout(() => map?.invalidateSize(), 50);
+
+		if (autoZoom) {
+			setTimeout(() => autoZoomToMarkers(), 200);
+		}
+	}
+
+	function updateTileLayer() {
+		if (!map || !L) return;
+
+		if (tile) {
+			map.removeLayer(tile);
+		}
+
+		tile = L.tileLayer(tileUrl, { attribution: tileAttribution });
+		tile.addTo(map);
+	}
+
+	$effect(() => {
+		if (autoZoom && map && L) {
+			autoZoomToMarkers();
+		}
+	});
+
+	export function zoomToAll() {
+		if (!map || !L) return;
+
+		setTimeout(() => {
+			if (!map || !L) return;
+
+			const bounds = calculateBounds();
+
+			if (bounds && bounds.isValid()) {
+				map.flyToBounds(bounds, {
+					padding: [50, 50],
+					maxZoom: 18
+				});
+			} else if (center) {
+				map.flyTo(center, zoom);
+			} else {
+				map.flyTo([-2.5489, 118.0149] as LatLngTuple, zoom);
+			}
+		}, 100);
+	}
+
+	$effect(() => {
+		if (!map || autoZoom) return;
+		if (center) {
+			map.setView(center, zoom, { animate: false });
+		}
+	});
+
+	$effect(() => {
+		tileUrl;
+		tileAttribution;
+		updateTileLayer();
+	});
+
+	$effect(() => {
+		if (!map || !L) return;
+		updateTileLayer();
+	});
+
+	onMount(() => {
+		init();
+	});
+
+	onDestroy(() => {
+		try {
+			mapStore.set(null);
+			tile?.remove?.();
+			map?.remove?.();
+		} finally {
+			tile = null;
+			map = null;
+		}
+	});
+</script>
+
+<div class={`mertani-map ${className}`} bind:this={el} role="application" aria-label="Map">
+	<slot />
+	<button class="crosshair-btn" onclick={zoomToAll} type="button" aria-label="Zoom to all">
+		<div class="info-icon">
+			<Icon name="bs-crosshair" />
+		</div>
+	</button>
+</div>
+
+<style>
+	.mertani-map {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		min-height: 280px;
+	}
+
+	.crosshair-btn {
+		position: absolute;
+		bottom: 24px;
+		left: 24px;
+		z-index: 1001;
+		background-color: color-mix(in srgb, var(--color-bg-surface), transparent 20%) !important;
+		backdrop-filter: blur(2px);
+		padding: 4px;
+		border-radius: 8px;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.2s;
+	}
+
+	.crosshair-btn:hover {
+		background-color: color-mix(in srgb, var(--color-bg-surface), transparent 5%) !important;
+		backdrop-filter: blur(2px);
+	}
+
+	.crosshair-btn .info-icon {
+		padding: 8px;
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-bg-act-primary);
+	}
+
+	.crosshair-btn .info-icon :global(svg) {
+		width: 24px;
+		height: 24px;
+	}
+
+	@media (max-width: 768px) {
+		.crosshair-btn {
+			bottom: 12px;
+			left: 12px;
+			padding: 3px;
+			border-radius: 6px;
+		}
+
+		.crosshair-btn .info-icon {
+			padding: 6px;
+		}
+
+		.crosshair-btn :global(svg) {
+			width: 20px !important;
+			height: 20px !important;
+		}
+	}
+</style>

package/dist/components/map/Map.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { LatLngTuple } from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import './map.css';
+interface Props {
+    center?: LatLngTuple;
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    tileUrl?: string;
+    tileAttribution?: string;
+    scrollWheelZoom?: boolean;
+    zoomControl?: boolean;
+    autoZoom?: boolean;
+    class?: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Map: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    zoomToAll: () => void;
+}, "">;
+type Map = InstanceType<typeof Map>;
+export default Map;

package/dist/components/map/MapGeoJSON.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { useMapContext } from '../../utils/mapContext.js';
+
+	let {
+		data,
+		style,
+		onEachFeature
+	}: {
+		data: any; // GeoJSON Feature/FeatureCollection
+		style?: any;
+		onEachFeature?: (feature: any, layer: any) => void;
+	} = $props();
+
+	const mapStore = useMapContext();
+	let map: any = null;
+	let layer: any = null;
+	let unsub: (() => void) | null = null;
+
+	async function rebuild() {
+		if (!map) return;
+		if (layer) {
+			layer.remove?.();
+			layer = null;
+		}
+		if (!data) return;
+
+		const leafletMod = await import('leaflet');
+		const L = (leafletMod as any).default ?? leafletMod;
+
+		layer = L.geoJSON(data, { style, onEachFeature });
+		layer.addTo(map);
+	}
+
+	$effect(() => {
+		data;
+		style;
+		onEachFeature;
+		rebuild();
+	});
+
+	unsub = (mapStore as any).subscribe((m: any) => {
+		map = m;
+		if (!map && layer) {
+			layer.remove?.();
+			layer = null;
+		}
+		if (map) rebuild();
+	});
+
+	onDestroy(() => {
+		try {
+			unsub?.();
+		} finally {
+			unsub = null;
+			layer?.remove?.();
+			layer = null;
+		}
+	});
+</script>

package/dist/components/map/MapGeoJSON.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    data: any;
+    style?: any;
+    onEachFeature?: (feature: any, layer: any) => void;
+};
+declare const MapGeoJSON: import("svelte").Component<$$ComponentProps, {}, "">;
+type MapGeoJSON = ReturnType<typeof MapGeoJSON>;
+export default MapGeoJSON;