@smartnet360/svelte-components 0.0.80 → 0.0.81

package/dist/map-v2/demo/DemoMap.svelte

@@ -232,11 +232,11 @@
 		<!-- Generic feature selection control - works with any layer -->
 		<FeatureSelectionControl
 			position="bottom-left"
-			title="Any Feature"
-			icon="cursor-fill"
+			title="Cluster Tool"
+			icon="speedometer2"
 			iconOnlyWhenCollapsed={useIconHeaders}
 			onAction={handleProcessFeatures}
-			actionButtonLabel="Process Features"
+			actionButtonLabel="Process Cluster"
 			featureIcon="pin-map-fill"
 		/>
 

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte

@@ -41,11 +41,11 @@
 	
 	let {
 		position = 'top-left',
-		title = 'Feature Selection',
-		icon = 'check2-square',
+		title = 'Cluster Tool',
+		icon = 'speedometer2',
 		iconOnlyWhenCollapsed = true,
 		onAction,
-		actionButtonLabel = 'Process',
+		actionButtonLabel = 'Process Cluster',
 		featureIcon = 'geo-alt-fill',
 		idPropertyOptions = ['siteId', 'cellName','id'],
 		defaultIdProperty = 'siteId'
@@ -66,6 +66,9 @@
 	let selectionCount = $derived(store.count);
 	let hasSelection = $derived(selectionCount > 0);
 	
+	// Track collapsed state
+	let isCollapsed = $state(false);
+	
 	// Subscribe to map store and initialize when map becomes available
 	let unsubscribe: (() => void) | null = null;
 	
@@ -78,6 +81,8 @@
 			if (map && !store['map']) {
 				console.log('[FeatureSelectionControl] Setting map on selection store');
 				store.setMap(map);
+				// Enable selection mode on mount (control starts collapsed=false by default)
+				store.enableSelectionMode();
 			}
 		});
 	});
@@ -91,8 +96,15 @@
 		store.destroy();
 	});
 	
-	function handleToggleMode() {
-		store.toggleSelectionMode();
+	function handleCollapseToggle(collapsed: boolean) {
+		isCollapsed = collapsed;
+		// When control is expanded, enable selection mode
+		// When control is collapsed, disable selection mode
+		if (collapsed) {
+			store.disableSelectionMode();
+		} else {
+			store.enableSelectionMode();
+		}
 	}
 	
 	function handleIdPropertyChange(event: Event) {
@@ -127,32 +139,8 @@
 	}
 </script>
 
-<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true}>
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} onCollapseToggle={handleCollapseToggle}>
 	<div class="feature-selection-control">
-		<!-- Selection Mode Toggle -->
-		<div class="selection-mode-toggle mb-3">
-			<div class="form-check form-switch">
-				<input
-					type="checkbox"
-					class="form-check-input"
-					id="feature-selection-mode-toggle"
-					checked={store.selectionMode}
-					onchange={handleToggleMode}
-				/>
-				<label class="form-check-label" for="feature-selection-mode-toggle">
-					Selection Mode
-					<span class="badge ms-2" class:bg-success={store.selectionMode} class:bg-secondary={!store.selectionMode}>
-						{store.selectionMode ? 'ON' : 'OFF'}
-					</span>
-				</label>
-			</div>
-			{#if store.selectionMode}
-				<small class="text-muted d-block mt-1">
-					Click any feature on the map to select
-				</small>
-			{/if}
-		</div>
-		
 		<!-- ID Property Selector -->
 		<div class="mb-3">
 			<label for="id-property-select" class="form-label small">Select By</label>
@@ -171,7 +159,7 @@
 		<!-- Selection Stats -->
 		<div class="selection-stats mb-2">
 			<strong>{selectionCount}</strong> 
-			{selectionCount === 1 ? 'feature' : 'features'} selected
+			{selectionCount === 1 ? 'item' : 'items'} selected
 		</div>
 		
 		<!-- Action Buttons -->
@@ -225,7 +213,8 @@
 		{:else}
 			<div class="text-muted small text-center py-2">
 				<i class="bi bi-inbox"></i>
-				<div class="mt-1">No features selected</div>
+				<div class="mt-1">No items selected</div>
+				<div class="mt-1">Click on cells or sites</div>
 			</div>
 		{/if}
 		

package/dist/map-v2/shared/controls/MapControl.svelte

@@ -27,6 +27,8 @@
 		collapsible?: boolean;
 		/** Initial collapsed state */
 		initiallyCollapsed?: boolean;
+		/** Optional callback when collapse state changes */
+		onCollapseToggle?: (collapsed: boolean) => void;
 		/** Custom CSS class for the container */
 		className?: string;
 		/** Child content */
@@ -44,13 +46,12 @@
 		iconOnlyWhenCollapsed = true,
 		collapsible = true,
 		initiallyCollapsed = true,
+		onCollapseToggle,
 		className = '',
 		children,
 		edgeOffset = '12px',
 		controlWidth = '420px'
 	}: Props = $props();
-
-
 	const mapStore = tryUseMapbox();
 	
 	if (!mapStore) {
@@ -113,6 +114,10 @@
 
 	function toggleCollapse() {
 		collapsed = !collapsed;
+		// Call the callback if provided
+		if (onCollapseToggle) {
+			onCollapseToggle(collapsed);
+		}
 	}
 </script>
 

package/dist/map-v2/shared/controls/MapControl.svelte.d.ts

@@ -11,6 +11,8 @@ interface Props {
     collapsible?: boolean;
     /** Initial collapsed state */
     initiallyCollapsed?: boolean;
+    /** Optional callback when collapse state changes */
+    onCollapseToggle?: (collapsed: boolean) => void;
     /** Custom CSS class for the container */
     className?: string;
     /** Child content */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.80",
+	"version": "0.0.81",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",