@smartnet360/svelte-components 0.0.40 → 0.0.42

package/dist/apps/antenna-pattern/components/AntennaDiagrams.svelte

@@ -139,11 +139,6 @@
         ant1MechanicalTilt = 0;
         ant2ElectricalTilt = 0;
         ant2MechanicalTilt = 0;
-        
-        // Update chart if initialized
-        if (chartInitialized) {
-          await updateChart();
-        }
       }
       
       console.log('Data refreshed from settings modal');

package/dist/apps/antenna-pattern/components/DbNotification.svelte

@@ -6,7 +6,7 @@
   let visible = false;
   let message = '';
   let type: 'success' | 'error' | 'info' = 'info';
-  let timer: number;
+  let timer: ReturnType<typeof setTimeout> | undefined;
   
   const unsubscribe = dataOperationStatus.subscribe(status => {
     if (!status.operation) return;

package/dist/apps/antenna-pattern/components/chart-engines/PolarBarChart.svelte

@@ -15,6 +15,7 @@
     selectedAntenna2?: Antenna | null;
     viewMode?: 'single' | 'compare';
     patternType?: 'horizontal' | 'vertical';
+    patternDisplayMode?: 'normalized' | 'gain-adjusted';
     ant1ElectricalTilt?: number;
     ant1MechanicalTilt?: number;
     ant2ElectricalTilt?: number;
@@ -27,6 +28,7 @@
     selectedAntenna2 = null,
     viewMode = 'single',
     patternType = 'vertical',
+    patternDisplayMode = 'normalized',
     ant1ElectricalTilt = 0,
     ant1MechanicalTilt = 0,
     ant2ElectricalTilt = 0,

package/dist/apps/antenna-pattern/components/chart-engines/PolarBarChart.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     selectedAntenna2?: Antenna | null;
     viewMode?: 'single' | 'compare';
     patternType?: 'horizontal' | 'vertical';
+    patternDisplayMode?: 'normalized' | 'gain-adjusted';
     ant1ElectricalTilt?: number;
     ant1MechanicalTilt?: number;
     ant2ElectricalTilt?: number;

package/dist/apps/site-check/helper.js

@@ -21,6 +21,9 @@ export function expandLayoutForCells(baseLayout, data, stylingConfig) {
     // Deep clone the layout structure and expand KPIs
     const expandedLayout = {
         layoutName: baseLayout.layoutName,
+        hoverMode: baseLayout.hoverMode, // Preserve hover mode from base layout
+        coloredHover: baseLayout.coloredHover, // Preserve colored hover setting
+        movingAverage: baseLayout.movingAverage, // Preserve moving average config
         sections: baseLayout.sections.map((section) => ({
             ...section,
             charts: section.charts.map((chart) => ({

package/dist/core/Charts/ChartCard.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { onMount, createEventDispatcher } from 'svelte';
+	import { onMount } from 'svelte';
 	import Plotly from 'plotly.js-dist-min';
 	import type { Chart as ChartModel, ChartMarker, MovingAverageConfig, HoverMode } from './charts.model.js';
 	import { createTimeSeriesTraceWithMA, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
@@ -9,15 +9,6 @@
 	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
 	import { log } from '../logger';
 
-	const dispatch = createEventDispatcher<{
-		chartcontextmenu: {
-			chart: ChartModel;
-			sectionId?: string;
-			clientX: number;
-			clientY: number;
-		};
-	}>();
-
 	interface Props {
 		chart: ChartModel;
 		processedData: ProcessedChartData; // Pre-processed KPI values and timestamps
@@ -33,9 +24,15 @@
 		runtimeShowOriginal?: boolean; // Runtime control for showing original lines
 		runtimeShowMarkers?: boolean; // Runtime control for showing markers (default: true)
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
+		onchartcontextmenu?: (detail: {
+			chart: ChartModel;
+			sectionId?: string;
+			clientX: number;
+			clientY: number;
+		}) => void;
 	}
 
-	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true, onchartcontextmenu }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -44,7 +41,7 @@
 
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
-		dispatch('chartcontextmenu', {
+		onchartcontextmenu?.({
 			chart,
 			sectionId,
 			clientX: event.clientX,

package/dist/core/Charts/ChartCard.svelte.d.ts

@@ -15,29 +15,13 @@ interface Props {
     runtimeShowOriginal?: boolean;
     runtimeShowMarkers?: boolean;
     runtimeShowLegend?: boolean;
-}
-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;
-}
-declare const ChartCard: $$__sveltets_2_IsomorphicComponent<Props, {
-    chartcontextmenu: CustomEvent<{
+    onchartcontextmenu?: (detail: {
         chart: ChartModel;
         sectionId?: string;
         clientX: number;
         clientY: number;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ChartCard = InstanceType<typeof ChartCard>;
+    }) => void;
+}
+declare const ChartCard: import("svelte").Component<Props, {}, "">;
+type ChartCard = ReturnType<typeof ChartCard>;
 export default ChartCard;

package/dist/core/Charts/ChartComponent.svelte

@@ -333,7 +333,7 @@
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
 					runtimeShowMarkers={globalControls.markers?.enabled}
 					runtimeShowLegend={globalControls.legend?.enabled}
-					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, section)}
+					onchartcontextmenu={(detail) => handleChartContextMenu(detail, section)}
 				/>
 			</div>
 		{/each}
@@ -475,7 +475,7 @@
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
 					runtimeShowMarkers={globalControls.markers?.enabled}
 					runtimeShowLegend={globalControls.legend?.enabled}
-					on:chartcontextmenu={(event) => handleChartContextMenu(event.detail, activeZoom.section)}
+					onchartcontextmenu={(detail) => handleChartContextMenu(detail, activeZoom.section)}
 				/>
 			</div>
 		</div>

package/dist/core/Charts/editor/ChartLayoutEditor.svelte

@@ -73,18 +73,18 @@
 		input.click();
 	}
 
-	function handleOpenKPIPicker(event: CustomEvent<{ sectionId: string; chartIndex: number; side: 'yLeft' | 'yRight' }>) {
-		kpiPickerContext = event.detail;
+	function handleOpenKPIPicker(detail: { sectionId: string; chartIndex: number; side: 'yLeft' | 'yRight' }) {
+		kpiPickerContext = detail;
 		showKPIPicker = true;
 	}
 
-	function handleKPISelected(event: CustomEvent<any>) {
+	function handleKPISelected(kpi: KPI) {
 		if (kpiPickerContext) {
 			editorStore.addKPI(
 				kpiPickerContext.sectionId,
 				kpiPickerContext.chartIndex,
 				kpiPickerContext.side,
-				event.detail
+				kpi
 			);
 		}
 		showKPIPicker = false;
@@ -172,12 +172,12 @@
 
 			<!-- Center Panel: Grid Preview -->
 			<div class="panel-center flex-grow-1 bg-light overflow-auto">
-				<GridPreview on:openkpipicker={handleOpenKPIPicker} />
+				<GridPreview />
 			</div>
 
 			<!-- Right Panel: Properties -->
 			<div class="panel-right border-start bg-white overflow-auto" style="width: 320px; min-width: 320px;">
-				<PropertiesPanel on:openkpipicker={handleOpenKPIPicker} />
+				<PropertiesPanel onopenkpipicker={handleOpenKPIPicker} />
 			</div>
 		</div>
 	{/if}
@@ -188,8 +188,8 @@
 	<KPIPicker 
 		show={showKPIPicker}
 		{availableKPIs}
-		on:select={handleKPISelected}
-		on:close={() => { showKPIPicker = false; kpiPickerContext = null; }}
+		onselect={handleKPISelected}
+		onclose={() => { showKPIPicker = false; kpiPickerContext = null; }}
 	/>
 {/if}
 

package/dist/core/Charts/editor/GridPreview.svelte

@@ -1,12 +1,9 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import { editorStore, currentLayout, selection } from './editorState.js';
 	import type { ChartGrid } from '../charts.model.js';
 
-	const dispatch = createEventDispatcher();
-
 	function getGridDimensions(grid: ChartGrid): { rows: number; cols: number } {
 		const map: Record<ChartGrid, { rows: number; cols: number }> = {
 			'2x2': { rows: 2, cols: 2 },

package/dist/core/Charts/editor/KPIPicker.svelte

@@ -1,17 +1,16 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import type { KPI } from '../charts.model.js';
 
 	interface Props {
 		show: boolean;
 		availableKPIs: KPI[];
+		onselect?: (kpi: KPI) => void;
+		onclose?: () => void;
 	}
 
-	let { show, availableKPIs }: Props = $props();
-
-	const dispatch = createEventDispatcher();
+	let { show, availableKPIs, onselect, onclose }: Props = $props();
 
 	let searchQuery = $state('');
 	let selectedKPI = $state<KPI | null>(null);
@@ -36,7 +35,7 @@
 
 	function handleConfirm() {
 		if (selectedKPI) {
-			dispatch('select', selectedKPI);
+			onselect?.(selectedKPI);
 			handleClose();
 		}
 	}
@@ -44,7 +43,7 @@
 	function handleClose() {
 		searchQuery = '';
 		selectedKPI = null;
-		dispatch('close');
+		onclose?.();
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
@@ -56,7 +55,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 {#if show}
 	<!-- Bootstrap Modal -->

package/dist/core/Charts/editor/KPIPicker.svelte.d.ts

@@ -2,25 +2,9 @@ import type { KPI } from '../charts.model.js';
 interface Props {
     show: boolean;
     availableKPIs: KPI[];
+    onselect?: (kpi: KPI) => void;
+    onclose?: () => void;
 }
-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;
-}
-declare const KpiPicker: $$__sveltets_2_IsomorphicComponent<Props, {
-    select: CustomEvent<any>;
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type KpiPicker = InstanceType<typeof KpiPicker>;
+declare const KpiPicker: import("svelte").Component<Props, {}, "">;
+type KpiPicker = ReturnType<typeof KpiPicker>;
 export default KpiPicker;

package/dist/core/Charts/editor/PropertiesPanel.svelte

@@ -1,17 +1,20 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import { editorStore, currentLayout, selection, selectedItem } from './editorState.js';
 	import type { ChartGrid, Section, Chart } from '../charts.model.js';
 
-	const dispatch = createEventDispatcher();
+	interface Props {
+		onopenkpipicker?: (detail: { sectionId: string; chartIndex: number; side: 'yLeft' | 'yRight' }) => void;
+	}
+
+	let { onopenkpipicker }: Props = $props();
 
 	const gridOptions: ChartGrid[] = ['2x2', '3x3', '4x4', '1x2', '1x4', '1x8'];
 
 	function handleOpenKPIPicker(side: 'yLeft' | 'yRight') {
 		if ($selection.type === 'chart' && $selection.sectionId && $selection.chartIndex !== undefined) {
-			dispatch('openkpipicker', {
+			onopenkpipicker?.({
 				sectionId: $selection.sectionId,
 				chartIndex: $selection.chartIndex,
 				side

package/dist/core/Charts/editor/PropertiesPanel.svelte.d.ts

@@ -1,20 +1,10 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    onopenkpipicker?: (detail: {
+        sectionId: string;
+        chartIndex: number;
+        side: 'yLeft' | 'yRight';
+    }) => void;
 }
-declare const PropertiesPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    openkpipicker: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type PropertiesPanel = InstanceType<typeof PropertiesPanel>;
+declare const PropertiesPanel: import("svelte").Component<Props, {}, "">;
+type PropertiesPanel = ReturnType<typeof PropertiesPanel>;
 export default PropertiesPanel;

package/dist/core/Map/Map.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import { MapboxOverlay } from '@deck.gl/mapbox';
+	import type { Layer } from '@deck.gl/core';
+	import { createMapStore, type MapStore } from './mapStore';
+	import { createSettingsStore } from '../Settings/store';
+	import { mapSettingsSchema } from './mapSettings';
+	import { MAP_STYLES, DEFAULT_MAP_OPTIONS, type MapOptions } from './types';
+	
+	interface Props {
+		accessToken: string;
+		initialOptions?: Partial<MapOptions>;
+		namespace?: string;
+		layers?: Layer[];
+		mapStore?: MapStore;
+		onMapLoaded?: (map: mapboxgl.Map) => void;
+	}
+	
+	let {
+		accessToken,
+		initialOptions = {},
+		namespace = 'map',
+		layers = [],
+		mapStore = $bindable(),
+		onMapLoaded
+	}: Props = $props();
+	
+	// Container element
+	let container = $state<HTMLDivElement>();
+	let map = $state<mapboxgl.Map>();
+	let overlay = $state<MapboxOverlay>();
+	let styleLoaded = $state(false);
+	
+	// Create stores if not provided
+	if (!mapStore) {
+		mapStore = createMapStore();
+	}
+	
+	// Create settings store
+	const settings = createSettingsStore(mapSettingsSchema, namespace);
+	
+	// Reactive: Update layers when prop changes
+	$effect(() => {
+		if (mapStore && layers.length > 0) {
+			mapStore.setLayers(layers);
+		}
+	});
+	
+	// Reactive: Update map style when settings change
+	$effect(() => {
+		if (!map || !styleLoaded || !$settings.appearance.style) return;
+		
+		const styleUrl = MAP_STYLES[$settings.appearance.style as keyof typeof MAP_STYLES];
+		if (styleUrl && map.getStyle()?.name !== styleUrl) {
+			styleLoaded = false; // Mark as not loaded during transition
+			map.setStyle(styleUrl);
+		}
+	});
+	
+	// Reactive: Update interaction handlers
+	$effect(() => {
+		const currentMap = map;
+		if (!currentMap) return;
+		
+		const handlers = [
+			{ name: 'dragRotate', value: $settings.interaction.dragRotate },
+			{ name: 'touchZoomRotate', value: $settings.interaction.touchZoomRotate },
+			{ name: 'scrollZoom', value: $settings.interaction.scrollZoom },
+			{ name: 'doubleClickZoom', value: $settings.interaction.doubleClickZoom },
+			{ name: 'dragPan', value: $settings.interaction.dragPan }
+		];
+		
+		handlers.forEach(({ name, value }) => {
+			const handler = currentMap[name as keyof mapboxgl.Map] as any;
+			if (handler) {
+				value ? handler.enable() : handler.disable();
+			}
+		});
+	});
+	
+	// Reactive: Update pitch and bearing
+	$effect(() => {
+		if (!map || !styleLoaded) return;
+		
+		map.setPitch($settings.view.pitch as number);
+		map.setBearing($settings.view.bearing as number);
+	});
+	
+	// Reactive: Toggle 3D buildings
+	$effect(() => {
+		if (!map || !styleLoaded) return;
+		
+		if ($settings.appearance.show3dBuildings) {
+			add3dBuildings();
+		} else if (map.getLayer('3d-buildings')) {
+			map.removeLayer('3d-buildings');
+		}
+	});
+	
+	// Reactive: Toggle terrain
+	$effect(() => {
+		if (!map || !styleLoaded) return;
+		
+		if ($settings.appearance.showTerrain) {
+			addTerrain();
+		} else if (map.getTerrain()) {
+			map.setTerrain(null);
+		}
+	});
+	
+	// One-time initialization using onMount (recommended for async/DOM-dependent setup)
+	onMount(() => {
+		if (!container) return;
+		
+		// Set Mapbox access token
+		mapboxgl.accessToken = accessToken;
+		
+		// Merge default options with initial options and settings
+		const options: MapOptions = {
+			...DEFAULT_MAP_OPTIONS,
+			...initialOptions,
+			accessToken
+		};
+		
+		// Initialize Mapbox map
+		map = new mapboxgl.Map({
+			container,
+			style: MAP_STYLES[$settings.appearance.style as keyof typeof MAP_STYLES] || options.style,
+			center: options.center,
+			zoom: options.zoom,
+			pitch: $settings.view.pitch as number,
+			bearing: $settings.view.bearing as number,
+			minZoom: $settings.view.minZoom as number,
+			maxZoom: $settings.view.maxZoom as number,
+			antialias: $settings.performance.antialias as boolean,
+			maxTileCacheSize: $settings.performance.maxTileCacheSize as number,
+			fadeDuration: $settings.performance.fadeDuration as number
+		});
+		
+		// Add controls based on settings
+		if ($settings.controls.showNavigationControls) {
+			map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+		}
+		
+		if ($settings.controls.showScaleControl) {
+			map.addControl(new mapboxgl.ScaleControl(), 'bottom-left');
+		}
+		
+		if ($settings.controls.showFullscreenControl) {
+			map.addControl(new mapboxgl.FullscreenControl(), 'top-right');
+		}
+		
+		if ($settings.controls.showGeolocateControl) {
+			map.addControl(
+				new mapboxgl.GeolocateControl({
+					positionOptions: { enableHighAccuracy: true },
+					trackUserLocation: true,
+					showUserHeading: true
+				}),
+				'top-right'
+			);
+		}
+		
+		// Initialize Deck.GL overlay
+		overlay = new MapboxOverlay({
+			interleaved: true,
+			layers: layers
+		});
+		
+		map.addControl(overlay as any);
+		
+		// Store map and overlay instances
+		if (mapStore) {
+			mapStore.setMap(map);
+			mapStore.setOverlay(overlay);
+			mapStore.setLayers(layers);
+		}
+		
+		// Map load event
+		map.on('load', () => {
+			if (!map) return;
+			
+			styleLoaded = true;
+			
+			if (mapStore) {
+				mapStore.setLoaded(true);
+			}
+			
+			// Add 3D buildings if enabled
+			if ($settings.appearance.show3dBuildings) {
+				add3dBuildings();
+			}
+			
+			// Add terrain if enabled
+			if ($settings.appearance.showTerrain) {
+				addTerrain();
+			}
+			
+			// Call user callback
+			if (onMapLoaded) {
+				onMapLoaded(map);
+			}
+		});
+		
+		// Track style loading for dynamic style changes
+		map.on('style.load', () => {
+			styleLoaded = true;
+		});
+		
+		// Track view state changes
+		map.on('move', () => {
+			if (!map || !mapStore) return;
+			
+			mapStore.updateViewState({
+				center: map.getCenter().toArray() as [number, number],
+				zoom: map.getZoom(),
+				pitch: map.getPitch(),
+				bearing: map.getBearing()
+			});
+		});
+		
+		// Cleanup on destroy
+		return () => {
+			if (map) {
+				map.remove();
+			}
+		};
+	});
+	
+	function add3dBuildings() {
+		if (!map) return;
+		if (!map.getLayer('3d-buildings')) {
+			const mapLayers = map.getStyle().layers;
+			const labelLayerId = mapLayers?.find(
+				(layer) => layer.type === 'symbol' && layer.layout?.['text-field']
+			)?.id;
+			
+			map.addLayer(
+				{
+					id: '3d-buildings',
+					source: 'composite',
+					'source-layer': 'building',
+					filter: ['==', 'extrude', 'true'],
+					type: 'fill-extrusion',
+					minzoom: 15,
+					paint: {
+						'fill-extrusion-color': '#aaa',
+						'fill-extrusion-height': [
+							'interpolate',
+							['linear'],
+							['zoom'],
+							15,
+							0,
+							15.05,
+							['get', 'height']
+						],
+						'fill-extrusion-base': [
+							'interpolate',
+							['linear'],
+							['zoom'],
+							15,
+							0,
+							15.05,
+							['get', 'min_height']
+						],
+						'fill-extrusion-opacity': 0.6
+					}
+				},
+				labelLayerId
+			);
+		}
+	}
+	
+	function addTerrain() {
+		if (!map) return;
+		if (!map.getSource('mapbox-dem')) {
+			map.addSource('mapbox-dem', {
+				type: 'raster-dem',
+				url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+				tileSize: 512,
+				maxzoom: 14
+			});
+			
+			map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
+		}
+	}
+	
+	// Export settings store for external access
+	export { settings };
+</script>
+
+
+
+<div class="map-container">
+	<div bind:this={container} class="map"></div>
+</div>
+
+<style>
+	.map-container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	
+	.map {
+		width: 100%;
+		height: 100%;
+	}
+	
+	/* Import Mapbox CSS - This should be in your app's global CSS */
+</style>