@smartnet360/svelte-components 0.0.134 → 0.0.136

package/dist/core/CellTableV2/composables/useScrollSpy.svelte.js

@@ -0,0 +1,91 @@
+/**
+ * useScrollSpy - ScrollSpy navigation composable
+ *
+ * Manages group-based scroll navigation for grouped tables.
+ * Uses Svelte 5 runes for reactive state.
+ */
+import { usePersistence } from './usePersistence.svelte';
+/**
+ * Create scrollspy navigation for a grouped table
+ */
+export function useScrollSpy(options) {
+    const { storageKey, initialEnabled = false, persistSettings = true } = options;
+    // Persistence utilities
+    const persistence = usePersistence({ storageKey, enabled: persistSettings });
+    // Load initial state
+    const savedEnabled = persistence.loadString('scrollSpyEnabled', String(initialEnabled)) === 'true';
+    // Reactive state
+    let _groups = $state([]);
+    let _enabled = $state(savedEnabled);
+    /**
+     * Toggle scrollspy on/off
+     */
+    function toggle() {
+        _enabled = !_enabled;
+        persistence.saveString('scrollSpyEnabled', String(_enabled));
+        if (!_enabled) {
+            _groups = [];
+        }
+    }
+    /**
+     * Enable scrollspy
+     */
+    function enable() {
+        _enabled = true;
+        persistence.saveString('scrollSpyEnabled', 'true');
+    }
+    /**
+     * Disable scrollspy
+     */
+    function disable() {
+        _enabled = false;
+        persistence.saveString('scrollSpyEnabled', 'false');
+        _groups = [];
+    }
+    /**
+     * Update groups from table data
+     */
+    function updateGroups(table) {
+        if (!table || !_enabled) {
+            _groups = [];
+            return;
+        }
+        try {
+            _groups = table.getGroups();
+        }
+        catch (e) {
+            console.warn('Failed to get groups:', e);
+            _groups = [];
+        }
+    }
+    /**
+     * Scroll to a specific group
+     */
+    function scrollToGroup(table, key) {
+        if (!table)
+            return;
+        try {
+            table.scrollToGroup(key);
+        }
+        catch (e) {
+            console.warn('Failed to scroll to group:', e);
+        }
+    }
+    /**
+     * Clear groups
+     */
+    function clearGroups() {
+        _groups = [];
+    }
+    // Return with getters for reactivity
+    return {
+        get groups() { return _groups; },
+        get enabled() { return _enabled; },
+        toggle,
+        enable,
+        disable,
+        updateGroups,
+        scrollToGroup,
+        clearGroups
+    };
+}

package/dist/core/CellTableV2/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CellTableV2 - Main Exports
+ *
+ * Composable-based cell table components with reusable logic hooks.
+ */
+export { default as CellTable } from './CellTable.svelte';
+export { default as CellTablePanel } from './CellTablePanel.svelte';
+export { default as CellTableToolbar } from './CellTableToolbar.svelte';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
+export * from './composables';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getColumnMetadata, getColumnsForPreset, getPresetVisibleFields, getAllColumns, } from './column-config';
+export type { CellData, CellTableColumn, CellTableGroupField, CellTableProps, ColumnPreset, GroupOption, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent, TechColorMap, StatusColorMap, } from './types';

package/dist/core/CellTableV2/index.js

@@ -0,0 +1,14 @@
+/**
+ * CellTableV2 - Main Exports
+ *
+ * Composable-based cell table components with reusable logic hooks.
+ */
+// Core components
+export { default as CellTable } from './CellTable.svelte';
+export { default as CellTablePanel } from './CellTablePanel.svelte';
+export { default as CellTableToolbar } from './CellTableToolbar.svelte';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
+// Composables
+export * from './composables';
+// Column configuration
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getColumnMetadata, getColumnsForPreset, getPresetVisibleFields, getAllColumns, } from './column-config';

package/dist/core/{CellTable → CellTableV2}/types.d.ts

@@ -15,8 +15,9 @@ export type CellData = Cell;
 export type CellTableGroupField = CellGroupingField | 'none';
 /**
  * Column preset configurations
+ * Note: 'history' and 'kpi' presets moved to separate modules (CellHistory, CellKPI)
  */
-export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare' | 'kpi' | 'history';
+export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare';
 /**
  * Column visibility configuration
  */
@@ -130,6 +131,7 @@ export interface CellTableColumn extends ColumnDefinition {
 }
 /**
  * Predefined column groups for presets
+ * Note: 'kpi' and 'history' groups moved to separate modules
  */
 export interface ColumnGroups {
     core: string[];
@@ -139,8 +141,6 @@ export interface ColumnGroups {
     atoll: string[];
     position: string[];
     compare: string[];
-    kpi: string[];
-    history: string[];
 }
 /**
  * Cell configuration history record

package/dist/core/index.d.ts

@@ -3,7 +3,8 @@ export * from './Charts/index.js';
 export * from './TreeView/index.js';
 export * from './Settings/index.js';
 export * from './logger/index.js';
-export * from './CellTable/index.js';
+export * from './CellTableV2/index.js';
+export * from './CellHistory/index.js';
 export * from './FeatureRegistry/index.js';
 export * from './Benchmark/index.js';
 export * from './Auth/index.js';

package/dist/core/index.js

@@ -11,7 +11,9 @@ export * from './Settings/index.js';
 // Logger utility for debugging and monitoring
 export * from './logger/index.js';
 // CellTable - Tabulator-based cell data table with Bootstrap theming
-export * from './CellTable/index.js';
+export * from './CellTableV2/index.js';
+// CellHistory - Cell configuration history feature (uses CellTable)
+export * from './CellHistory/index.js';
 // Map component - Mapbox GL + Deck.GL integration
 // TODO: Moved to top-level src/lib/map module
 // export * from './Map/index.js';

package/package.json

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

package/dist/core/CellTable/CellHistoryDemo.svelte

@@ -1,240 +0,0 @@
-<script lang="ts">
-	import CellTablePanel from './CellTablePanel.svelte';
-	import type { RowSelectionEvent, CellHistoryData } from './types';
-
-	/**
-	 * Table-ready history record after transformation
-	 */
-	interface HistoryTableRow {
-		id: string;
-		cellName: string;
-		frequency: number;
-		configDate: string;
-		// Current values
-		antenna: string;
-		electricalTilt: number;
-		mechanicalTilt: number;
-		power: number;
-		// Previous values for change comparison
-		prevAntenna: string;
-		prevElectricalTilt: number;
-		prevMechanicalTilt: number;
-		prevPower: number;
-		// Virtual fields for the change columns
-		antennaChange: string;
-		etiltChange: number;
-		mtiltChange: number;
-		powerChange: number;
-	}
-
-	/**
-	 * Transform API history data to table-friendly format
-	 * Maps UPPER_CASE API fields to camelCase and adds virtual fields for change detection
-	 */
-	function transformHistoryData(apiData: CellHistoryData[]): HistoryTableRow[] {
-		return apiData.map((record, index) => ({
-			id: `hist-${index}`,
-			cellName: record.CELLNAME,
-			frequency: record.FREQUENCY,
-			configDate: record.CONFIG_DATE,
-			// Current values
-			antenna: record.ANTENNA_TYPE,
-			electricalTilt: record.ELECTRONIC_TILT,
-			mechanicalTilt: record.MECHANIC_TILT,
-			power: record.ANTOUTPUTPWR,
-			// Previous values for change comparison
-			prevAntenna: record.PREV_ANTENNA_TYPE,
-			prevElectricalTilt: record.PREV_ELECTRONIC_TILT,
-			prevMechanicalTilt: record.PREV_MECHANIC_TILT,
-			prevPower: record.PREV_ANTOUTPUTPWR,
-			// Virtual fields for the change columns (needed for column filtering)
-			antennaChange: record.ANTENNA_TYPE,
-			etiltChange: record.ELECTRONIC_TILT,
-			mtiltChange: record.MECHANIC_TILT,
-			powerChange: record.ANTOUTPUTPWR,
-		}));
-	}
-
-	/**
-	 * Example API data for cell configuration history
-	 */
-	const EXAMPLE_HISTORY_DATA: CellHistoryData[] = [
-		{
-			CELLNAME: '1001141',
-			FREQUENCY: 1800,
-			CONFIG_DATE: '2025-12-03T23:00:00.000Z',
-			ANTENNA_TYPE: 'AQU4521R01v06',
-			PREV_ANTENNA_TYPE: 'AQU4521R01v06',
-			ANTOUTPUTPWR: 20,
-			PREV_ANTOUTPUTPWR: 20,
-			MECHANIC_TILT: 1,
-			PREV_MECHANIC_TILT: 1,
-			ELECTRONIC_TILT: 10,
-			PREV_ELECTRONIC_TILT: 9
-		},
-		{
-			CELLNAME: '1001141',
-			FREQUENCY: 1800,
-			CONFIG_DATE: '2025-09-11T22:00:00.000Z',
-			ANTENNA_TYPE: 'AQU4521R01v06',
-			PREV_ANTENNA_TYPE: 'ADU451602v01',
-			ANTOUTPUTPWR: 20,
-			PREV_ANTOUTPUTPWR: 20,
-			MECHANIC_TILT: 1,
-			PREV_MECHANIC_TILT: 0,
-			ELECTRONIC_TILT: 9,
-			PREV_ELECTRONIC_TILT: 10
-		},
-		{
-			CELLNAME: '1001141',
-			FREQUENCY: 1800,
-			CONFIG_DATE: '2021-02-15T23:00:00.000Z',
-			ANTENNA_TYPE: 'ADU451602v01',
-			PREV_ANTENNA_TYPE: 'ADU451602v01',
-			ANTOUTPUTPWR: 20,
-			PREV_ANTOUTPUTPWR: 20,
-			MECHANIC_TILT: 0,
-			PREV_MECHANIC_TILT: 2,
-			ELECTRONIC_TILT: 10,
-			PREV_ELECTRONIC_TILT: 10
-		}
-	];
-
-	let cellName = $state('1001141');
-	let rawHistoryData = $state<CellHistoryData[]>(EXAMPLE_HISTORY_DATA);
-	let historyData = $derived(transformHistoryData(rawHistoryData));
-	
-	function loadHistory() {
-		// TODO: Replace with actual API call
-		// For now, just reload the example data
-		console.log(`Loading history for cell: ${cellName}`);
-		rawHistoryData = EXAMPLE_HISTORY_DATA.filter(r => r.CELLNAME === cellName);
-	}
-
-	function handleSelectionChange(event: RowSelectionEvent) {
-		console.log('Selection changed:', event.ids);
-	}
-	
-	/**
-	 * Compare two selected history records
-	 */
-	function handleCompareTwoRecords(record1: HistoryTableRow, record2: HistoryTableRow) {
-		const params = new URLSearchParams();
-		
-		// Use antenna from both records
-		if (record1.antenna) params.set('ant1', record1.antenna);
-		if (record2.antenna) params.set('ant2', record2.antenna);
-		
-		// Use frequency (same for both records typically)
-		params.set('freq1', String(record1.frequency || 1800));
-		params.set('freq2', String(record2.frequency || 1800));
-		
-		// Use electrical tilt values
-		params.set('etilt1', String(record1.electricalTilt || 0));
-		params.set('etilt2', String(record2.electricalTilt || 0));
-		
-		// Use mechanical tilt values  
-		params.set('mtilt1', String(record1.mechanicalTilt || 0));
-		params.set('mtilt2', String(record2.mechanicalTilt || 0));
-		
-		// Add config date as labels
-		params.set('label1', `${record1.cellName} (${record1.configDate})`);
-		params.set('label2', `${record2.cellName} (${record2.configDate})`);
-		
-		const url = `/apps/antenna-compare?${params.toString()}`;
-		window.open(url, '_blank');
-	}
-</script>
-
-<div class="cell-history-page vh-100 d-flex flex-column">
-	<!-- Header -->
-	<div class="demo-controls bg-light border-bottom px-3 py-2 d-flex align-items-center gap-3 flex-wrap">
-		<div class="input-group input-group-sm" style="width: auto;">
-			<span class="input-group-text">Cell Name</span>
-			<input 
-				type="text" 
-				class="form-control" 
-				bind:value={cellName}
-				style="width: 120px;"
-			/>
-			<button class="btn btn-outline-primary" onclick={loadHistory}>
-				<i class="bi bi-arrow-clockwise"></i> Load History
-			</button>
-		</div>
-		<span class="badge bg-info">
-			{historyData.length} records
-		</span>
-		<span class="text-muted small">
-			Select 2 rows to compare antenna configurations
-		</span>
-	</div>
-
-	<!-- CellTablePanel with history preset -->
-	<div class="flex-grow-1 overflow-hidden">
-		<CellTablePanel
-			cells={historyData as unknown as import('./types').CellData[]}
-			groupBy="none"
-			storageKey="cell-history-table"
-			groupOptions={[
-				{ value: 'none', label: 'No Grouping' },
-				{ value: 'antenna', label: 'Antenna Type' },
-				{ value: 'cellname', label: 'Cell Name' },
-
-			]}
-			columnPreset="history"
-			showColumnPresets={false}
-			selectable={true}
-			multiSelect={true}
-			showToolbar={true}
-			showExport={true}
-			headerFilters={true}
-			showDetailsSidebar={false}
-			showScrollSpy={false}
-			title="Cell Configuration History"
-			onselectionchange={handleSelectionChange}
-		>
-			{#snippet footer({ selectedRows, selectedCount })}
-				<div class="d-flex align-items-center justify-content-between">
-					<span class="text-muted small">
-						{#if selectedCount > 0}
-							{selectedCount} record(s) selected
-						{:else}
-							Select rows to compare configurations
-						{/if}
-					</span>
-					<div class="btn-group">
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-success"
-							disabled={selectedCount !== 2}
-							title={selectedCount === 2 ? 'Compare antenna patterns for selected dates' : 'Select exactly 2 records to compare'}
-							onclick={() => handleCompareTwoRecords(selectedRows[0] as unknown as HistoryTableRow, selectedRows[1] as unknown as HistoryTableRow)}
-						>
-							<i class="bi bi-broadcast-pin"></i>
-							<span class="d-none d-sm-inline ms-1">Compare Antennas</span>
-						</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-secondary"
-							disabled={selectedCount === 0}
-							onclick={() => console.log('Export:', selectedRows.map(r => r.configDate))}
-						>
-							<i class="bi bi-download"></i>
-							<span class="d-none d-sm-inline ms-1">Export</span>
-						</button>
-					</div>
-				</div>
-			{/snippet}
-		</CellTablePanel>
-	</div>
-</div>
-
-<style>
-	.cell-history-page {
-		background: var(--bs-body-bg, #f8f9fa);
-	}
-
-	.demo-controls {
-		flex-shrink: 0;
-	}
-</style>

package/dist/core/CellTable/CellHistoryDemo.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const CellHistoryDemo: import("svelte").Component<Record<string, never>, {}, "">;
-type CellHistoryDemo = ReturnType<typeof CellHistoryDemo>;
-export default CellHistoryDemo;