mertani-web-toolkit 0.1.63 → 0.1.65

package/dist/components/inputs/SelectInput/SelectInput.css

@@ -59,35 +59,56 @@
     box-shadow 0.2s;
 }
 
-.select-trigger:not(:disabled) {
+.select-trigger:not(.disabled) {
   background: var(--color-bg-surface);
   cursor: pointer;
 }
 
-.select-trigger:not(:disabled):hover {
+.select-trigger:not(.disabled):hover {
   border-color: var(--color-border-form);
 }
 
-.select-trigger:not(:disabled):focus {
+.select-trigger:not(.disabled):focus {
   outline: none;
   border-color: var(--color-bg-act-primary);
   box-shadow: 0 0 0 2px var(--color-bg-act-primary) 40;
 }
 
-.select-trigger:disabled {
+.select-trigger.disabled {
   cursor: not-allowed;
   background: var(--color-bg-disabled);
 }
 
-.select-trigger.error:not(:disabled) {
+.select-trigger.error:not(.disabled) {
   border-color: var(--color-text-error-ti);
 }
 
-.select-trigger.error:not(:disabled):focus {
+.select-trigger.error:not(.disabled):focus {
   border-color: var(--color-text-error-ti);
   box-shadow: 0 0 0 2px var(--color-text-error-ti) 40;
 }
 
+.select-clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--color-text-tertiary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    color 0.2s,
+    background-color 0.2s;
+  line-height: 0;
+}
+
+.select-clear-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-disabled);
+}
+
 .select-menu {
   position: absolute;
   right: 0;

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 {
@@ -41,6 +41,7 @@
 		onOpen?: () => void;
 		/** Dipanggil saat teks search berubah (debounce 300ms), hanya jika remoteSearch. */
 		onSearchQueryChange?: (query: string) => void;
+		onClear?: () => void;
 
 		// Validation
 		isMandatory?: boolean;
@@ -56,6 +57,7 @@
 		class?: string;
 		style?: string;
 		isShowChevron?: boolean;
+		isClearable?: boolean;
 	}
 
 	const {
@@ -92,6 +94,7 @@
 		onSelect,
 		onOpen,
 		onSearchQueryChange,
+		onClear,
 
 		// Validation
 		isMandatory = false,
@@ -105,7 +108,8 @@
 
 		class: className = '',
 		style: customStyle = '',
-		isShowChevron = true
+		isShowChevron = true,
+		isClearable = false
 	}: Props = $props();
 
 	// ===== Constants =====
@@ -123,7 +127,7 @@
 	let open = $state(false);
 	let search = $state('');
 	let placement: 'bottom' | 'top' = $state('bottom');
-	let triggerEl: HTMLButtonElement | null = $state(null);
+	let triggerEl: HTMLDivElement | null = $state(null);
 	let menuEl: HTMLDivElement | null = $state(null);
 	let resizeObs: ResizeObserver | null = $state(null);
 	let unregisterDropdown: (() => void) | null = $state(null);
@@ -306,6 +310,13 @@
 		close();
 	}
 
+	function handleClear(e: MouseEvent) {
+		e.stopPropagation();
+		onSelect?.('');
+		onClear?.();
+		error = validateInput('');
+	}
+
 	function validateInput(val: string): string {
 		if (customValidation) {
 			const customError = customValidation(val);
@@ -403,28 +414,42 @@
 			</label>
 		{/if}
 		<div class="relative flex-1">
-			<button
+			<div
 				bind:this={triggerEl}
-				type="button"
-				class="select-trigger {className} {error ? 'error' : ''}"
-				style={triggerStyles()}
+				role="combobox"
+				tabindex="0"
 				aria-haspopup="listbox"
 				aria-expanded={open}
+				aria-controls={open ? 'select-menu' : undefined}
+				class="select-trigger {className} {error ? 'error' : ''}"
+				style={triggerStyles()}
 				onclick={toggle}
 				onkeydown={handleKeydown}
 				onfocus={handleFocus}
 				onblur={handleBlur}
-				disabled={disabled || isLoading}
 				title={tooltip || ''}
+				class:disabled={disabled || isLoading}
 			>
 				<span class="truncate">{labelOf(value) || placeholder}</span>
-				{#if isShowChevron}
-					<Icon
-						name="bs-chevron-down"
-						style="transform-origin: center; transition: transform 0.25s; transform: rotate({chevronRotation});"
-					/>
-				{/if}
-			</button>
+				<div class="flex items-center gap-1">
+					{#if isClearable && value && !disabled && !isLoading}
+						<button
+							type="button"
+							class="select-clear-button"
+							onclick={handleClear}
+							aria-label="Clear selection"
+						>
+							<Icon name="bs-x-lg" />
+						</button>
+					{/if}
+					{#if isShowChevron}
+						<Icon
+							name="bs-chevron-down"
+							style="transform-origin: center; transition: transform 0.25s; transform: rotate({chevronRotation});"
+						/>
+					{/if}
+				</div>
+			</div>
 
 			{#if open}
 				<div

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

@@ -28,6 +28,7 @@ interface Props {
     onOpen?: () => void;
     /** Dipanggil saat teks search berubah (debounce 300ms), hanya jika remoteSearch. */
     onSearchQueryChange?: (query: string) => void;
+    onClear?: () => void;
     isMandatory?: boolean;
     customValidation?: (value: string) => string | null;
     isLoading?: boolean;
@@ -37,6 +38,7 @@ interface Props {
     class?: string;
     style?: string;
     isShowChevron?: boolean;
+    isClearable?: boolean;
 }
 declare const SelectInput: import("svelte").Component<Props, {}, "">;
 type SelectInput = ReturnType<typeof SelectInput>;

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;