@smartnet360/svelte-components 0.0.79 → 0.0.80

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

@@ -33,6 +33,10 @@
 		actionButtonLabel?: string;
 		/** Feature icon (default: geo-alt-fill) */
 		featureIcon?: string;
+		/** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
+		idPropertyOptions?: string[];
+		/** Default property to use as ID (default: 'id') */
+		defaultIdProperty?: string;
 	}
 	
 	let {
@@ -42,7 +46,9 @@
 		iconOnlyWhenCollapsed = true,
 		onAction,
 		actionButtonLabel = 'Process',
-		featureIcon = 'geo-alt-fill'
+		featureIcon = 'geo-alt-fill',
+		idPropertyOptions = ['siteId', 'cellName','id'],
+		defaultIdProperty = 'siteId'
 	}: Props = $props();
 	
 	// Get map from context
@@ -53,6 +59,9 @@
 	const store = createFeatureSelectionStore();
 	console.log('[FeatureSelectionControl] Store created:', store);
 	
+	// Set the ID property to use
+	store.setIdProperty(defaultIdProperty);
+	
 	let selectedFeatures = $derived(store.getSelectedFeatures());
 	let selectionCount = $derived(store.count);
 	let hasSelection = $derived(selectionCount > 0);
@@ -86,6 +95,12 @@
 		store.toggleSelectionMode();
 	}
 	
+	function handleIdPropertyChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		store.setIdProperty(target.value);
+		console.log('[FeatureSelectionControl] ID property changed to:', target.value);
+	}
+	
 	function handleRemoveFeature(featureId: string) {
 		store.removeFeatureSelection(featureId);
 	}
@@ -138,6 +153,21 @@
 			{/if}
 		</div>
 		
+		<!-- ID Property Selector -->
+		<div class="mb-3">
+			<label for="id-property-select" class="form-label small">Select By</label>
+			<select
+				id="id-property-select"
+				class="form-select form-select-sm"
+				value={store.idProperty}
+				onchange={handleIdPropertyChange}
+			>
+				{#each idPropertyOptions as option}
+					<option value={option}>{option}</option>
+				{/each}
+			</select>
+		</div>
+		
 		<!-- Selection Stats -->
 		<div class="selection-stats mb-2">
 			<strong>{selectionCount}</strong> 

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

@@ -13,6 +13,10 @@ interface Props {
     actionButtonLabel?: string;
     /** Feature icon (default: geo-alt-fill) */
     featureIcon?: string;
+    /** Available property names to use as ID (default: ['id', 'siteId', 'cellName']) */
+    idPropertyOptions?: string[];
+    /** Default property to use as ID (default: 'id') */
+    defaultIdProperty?: string;
 }
 declare const FeatureSelectionControl: import("svelte").Component<Props, {}, "">;
 type FeatureSelectionControl = ReturnType<typeof FeatureSelectionControl>;

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

@@ -16,12 +16,17 @@ export declare class FeatureSelectionStore {
     private selectedFeatures;
     private map;
     selectionMode: boolean;
+    idProperty: string;
     private clickHandler;
     constructor();
     /**
      * Initialize the store with a map instance
      */
     setMap(mapInstance: MapboxMap): void;
+    /**
+     * Set which property to use as the ID
+     */
+    setIdProperty(property: string): void;
     /**
      * Setup global click handler for any feature
      */

package/dist/map-v2/shared/controls/featureSelectionStore.svelte.js

@@ -8,6 +8,7 @@ export class FeatureSelectionStore {
     selectedFeatures = $state([]);
     map = $state(null);
     selectionMode = $state(false);
+    idProperty = $state('siteId'); // Default property to use as ID
     clickHandler = null;
     constructor() { }
     /**
@@ -18,6 +19,13 @@ export class FeatureSelectionStore {
         this.map = mapInstance;
         this.setupClickHandler();
     }
+    /**
+     * Set which property to use as the ID
+     */
+    setIdProperty(property) {
+        this.idProperty = property;
+        console.log('[FeatureSelection] ID property set to:', property);
+    }
     /**
      * Setup global click handler for any feature
      */
@@ -39,16 +47,17 @@ export class FeatureSelectionStore {
                         properties: feature.properties,
                         id: feature.id
                     });
-                    const featureId = feature.properties?.id || feature.id;
+                    // Use the configured property as the ID
+                    const featureId = feature.properties?.[this.idProperty] || feature.id;
                     const siteId = feature.properties?.siteId;
                     const cellName = feature.properties?.cellName;
                     if (featureId) {
-                        console.log('[FeatureSelection] Found feature with ID:', featureId, 'siteId:', siteId, 'cellName:', cellName);
+                        console.log('[FeatureSelection] Found feature with ID (using', this.idProperty + '):', featureId, 'siteId:', siteId, 'cellName:', cellName);
                         this.toggleFeatureSelection(String(featureId), feature.layer?.id, feature.properties || undefined, siteId, cellName);
                         break; // Only select the topmost feature
                     }
                     else {
-                        console.log('[FeatureSelection] Feature has no id property');
+                        console.log('[FeatureSelection] Feature has no', this.idProperty, 'property');
                     }
                 }
             }

package/package.json

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