@smartnet360/svelte-components 0.0.105 → 0.0.107

package/dist/core/CellTable/ColumnPicker.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	/**
+	 * ColumnPicker - Column visibility customization dropdown
+	 * 
+	 * Shows a dropdown panel with checkboxes to toggle individual column visibility.
+	 * Works alongside presets - user can customize which columns are visible.
+	 */
+
+	interface ColumnInfo {
+		field: string;
+		title: string;
+		group: string;
+	}
+
+	interface Props {
+		/** All available columns with their metadata */
+		columns: ColumnInfo[];
+		/** Currently visible column fields */
+		visibleColumns: string[];
+		/** Callback when column visibility changes */
+		onchange?: (field: string, visible: boolean) => void;
+		/** Callback to reset to preset defaults */
+		onreset?: () => void;
+		/** Current preset name for display */
+		presetName?: string;
+	}
+
+	let {
+		columns = [],
+		visibleColumns = [],
+		onchange,
+		onreset,
+		presetName = 'Default'
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let dropdownRef: HTMLDivElement;
+
+	// Group columns by category
+	const groupedColumns = $derived.by(() => {
+		const groups: Record<string, ColumnInfo[]> = {};
+		for (const col of columns) {
+			if (!groups[col.group]) {
+				groups[col.group] = [];
+			}
+			groups[col.group].push(col);
+		}
+		return groups;
+	});
+
+	const groupOrder = ['Core', 'Physical', 'Network', 'Atoll', 'Position', 'Planning'];
+
+	function toggleDropdown() {
+		isOpen = !isOpen;
+	}
+
+	function handleCheckboxChange(field: string, event: Event) {
+		const checked = (event.target as HTMLInputElement).checked;
+		onchange?.(field, checked);
+	}
+
+	function handleReset() {
+		onreset?.();
+	}
+
+	function handleSelectAll() {
+		columns.forEach(col => onchange?.(col.field, true));
+	}
+
+	function handleDeselectAll() {
+		// Keep at least core columns visible
+		columns.forEach(col => {
+			const isCore = col.group === 'Core';
+			onchange?.(col.field, isCore);
+		});
+	}
+
+	// Close dropdown when clicking outside
+	function handleClickOutside(event: MouseEvent) {
+		if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
+			isOpen = false;
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside);
+			return () => document.removeEventListener('click', handleClickOutside);
+		}
+	});
+</script>
+
+<div class="column-picker position-relative" bind:this={dropdownRef}>
+	<button
+		type="button"
+		class="btn btn-sm btn-outline-secondary"
+		onclick={toggleDropdown}
+		title="Customize columns"
+		aria-label="Customize columns"
+		aria-expanded={isOpen}
+	>
+		<i class="bi bi-pencil"></i>
+	</button>
+
+	{#if isOpen}
+		<div class="column-picker-dropdown position-absolute end-0 mt-1 bg-white border rounded shadow-sm" 
+			 style="z-index: 1050; width: 280px; max-height: 400px;">
+			
+			<!-- Header -->
+			<div class="d-flex align-items-center justify-content-between p-2 border-bottom bg-light">
+				<span class="small fw-medium">
+					<i class="bi bi-layout-three-columns text-primary"></i>
+					Customize "{presetName}"
+				</span>
+				<button
+					type="button"
+					class="btn-close btn-close-sm"
+					onclick={() => isOpen = false}
+					aria-label="Close"
+				></button>
+			</div>
+
+			<!-- Quick actions -->
+			<div class="d-flex gap-2 p-2 border-bottom">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-secondary flex-grow-1"
+					onclick={handleSelectAll}
+				>
+					Select All
+				</button>
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-secondary flex-grow-1"
+					onclick={handleDeselectAll}
+				>
+					Core Only
+				</button>
+			</div>
+
+			<!-- Scrollable column list -->
+			<div class="column-list overflow-auto" style="max-height: 280px;">
+				{#each groupOrder as groupName}
+					{#if groupedColumns[groupName]}
+						<div class="column-group">
+							<div class="px-2 py-1 bg-body-tertiary small fw-medium text-muted border-bottom">
+								{groupName}
+							</div>
+							{#each groupedColumns[groupName] as col}
+								<label class="d-flex align-items-center px-2 py-1 column-item">
+									<input
+										type="checkbox"
+										class="form-check-input me-2 mt-0"
+										checked={visibleColumns.includes(col.field)}
+										onchange={(e) => handleCheckboxChange(col.field, e)}
+									/>
+									<span class="small">{col.title}</span>
+									<code class="ms-auto small text-muted">{col.field}</code>
+								</label>
+							{/each}
+						</div>
+					{/if}
+				{/each}
+			</div>
+
+			<!-- Footer with reset -->
+			<div class="p-2 border-top bg-light">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-primary w-100"
+					onclick={handleReset}
+				>
+					<i class="bi bi-arrow-counterclockwise"></i>
+					Reset to "{presetName}" Default
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.column-picker-dropdown {
+		animation: fadeIn 0.15s ease-out;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.column-item {
+		cursor: pointer;
+		transition: background-color 0.1s;
+	}
+
+	.column-item:hover {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+	}
+
+	.form-check-input {
+		cursor: pointer;
+	}
+
+	.btn-close-sm {
+		font-size: 0.65rem;
+		padding: 0.25rem;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+/**
+ * ColumnPicker - Column visibility customization dropdown
+ *
+ * Shows a dropdown panel with checkboxes to toggle individual column visibility.
+ * Works alongside presets - user can customize which columns are visible.
+ */
+interface ColumnInfo {
+    field: string;
+    title: string;
+    group: string;
+}
+interface Props {
+    /** All available columns with their metadata */
+    columns: ColumnInfo[];
+    /** Currently visible column fields */
+    visibleColumns: string[];
+    /** Callback when column visibility changes */
+    onchange?: (field: string, visible: boolean) => void;
+    /** Callback to reset to preset defaults */
+    onreset?: () => void;
+    /** Current preset name for display */
+    presetName?: string;
+}
+declare const ColumnPicker: import("svelte").Component<Props, {}, "">;
+type ColumnPicker = ReturnType<typeof ColumnPicker>;
+export default ColumnPicker;

package/dist/core/CellTable/column-config.d.ts

@@ -61,3 +61,19 @@ export declare function getColumnsForPreset(preset: ColumnPreset, techColors?: T
  * Get group header formatter for a specific field
  */
 export declare function getGroupHeaderFormatter(groupField: string): (value: unknown, count: number) => string;
+/**
+ * Column metadata for the column picker
+ */
+export interface ColumnMeta {
+    field: string;
+    title: string;
+    group: string;
+}
+/**
+ * Get column metadata for the column picker UI
+ */
+export declare function getColumnMetadata(): ColumnMeta[];
+/**
+ * Get default visible columns for a preset
+ */
+export declare function getPresetVisibleFields(preset: ColumnPreset): string[];

package/dist/core/CellTable/column-config.js

@@ -463,3 +463,75 @@ export function getGroupHeaderFormatter(groupField) {
 			<span class="text-muted">(${count} cell${count !== 1 ? 's' : ''})</span>`;
     };
 }
+/**
+ * Get column metadata for the column picker UI
+ */
+export function getColumnMetadata() {
+    return [
+        // Core
+        { field: 'id', title: 'ID', group: 'Core' },
+        { field: 'cellName', title: 'Cell Name', group: 'Core' },
+        { field: 'siteId', title: 'Site ID', group: 'Core' },
+        { field: 'tech', title: 'Technology', group: 'Core' },
+        { field: 'fband', title: 'Band', group: 'Core' },
+        { field: 'frq', title: 'Frequency', group: 'Core' },
+        { field: 'status', title: 'Status', group: 'Core' },
+        { field: 'type', title: 'Type', group: 'Core' },
+        { field: 'onAirDate', title: 'On Air Date', group: 'Core' },
+        // Physical
+        { field: 'antenna', title: 'Antenna', group: 'Physical' },
+        { field: 'azimuth', title: 'Azimuth', group: 'Physical' },
+        { field: 'height', title: 'Height', group: 'Physical' },
+        { field: 'electricalTilt', title: 'E-Tilt', group: 'Physical' },
+        { field: 'beamwidth', title: 'Beamwidth', group: 'Physical' },
+        // Network
+        { field: 'dlEarfn', title: 'DL EARFCN', group: 'Network' },
+        { field: 'bcch', title: 'BCCH', group: 'Network' },
+        { field: 'pci', title: 'PCI', group: 'Network' },
+        { field: 'rru', title: 'RRU', group: 'Network' },
+        { field: 'cellID', title: 'Cell ID', group: 'Network' },
+        { field: 'cellId2G', title: 'Cell ID 2G', group: 'Network' },
+        { field: 'txId', title: 'TX ID', group: 'Network' },
+        { field: 'ctrlid', title: 'Ctrl ID', group: 'Network' },
+        { field: 'nwtET', title: 'NWT ET', group: 'Network' },
+        { field: 'nwtPW', title: 'NWT PW', group: 'Network' },
+        { field: 'nwtRS', title: 'NWT RS', group: 'Network' },
+        { field: 'nwtBW', title: 'NWT BW', group: 'Network' },
+        // Atoll
+        { field: 'atollET', title: 'Atoll ET', group: 'Atoll' },
+        { field: 'atollPW', title: 'Atoll PW', group: 'Atoll' },
+        { field: 'atollRS', title: 'Atoll RS', group: 'Atoll' },
+        { field: 'atollBW', title: 'Atoll BW', group: 'Atoll' },
+        // Position
+        { field: 'latitude', title: 'Latitude', group: 'Position' },
+        { field: 'longitude', title: 'Longitude', group: 'Position' },
+        { field: 'siteLatitude', title: 'Site Latitude', group: 'Position' },
+        { field: 'siteLongitude', title: 'Site Longitude', group: 'Position' },
+        { field: 'dx', title: 'DX', group: 'Position' },
+        { field: 'dy', title: 'DY', group: 'Position' },
+        // Planning
+        { field: 'planner', title: 'Planner', group: 'Planning' },
+        { field: 'comment', title: 'Comment', group: 'Planning' },
+        { field: 'customSubgroup', title: 'Subgroup', group: 'Planning' },
+    ];
+}
+/**
+ * Get default visible columns for a preset
+ */
+export function getPresetVisibleFields(preset) {
+    switch (preset) {
+        case 'compact':
+            return ['cellName', 'siteId', 'tech', 'fband', 'status'];
+        case 'full':
+            return getColumnMetadata().map(c => c.field);
+        case 'physical':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.physical];
+        case 'network':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.network];
+        case 'planning':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
+        case 'default':
+        default:
+            return ['id', 'cellName', 'siteId', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];
+    }
+}

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

@@ -7,6 +7,7 @@ export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
 export { default as CellTableDemo } from './CellTableDemo.svelte';
-export { demoCells } from './demo-data';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
+export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS, type CellGeneratorConfig, type GeneratorPreset } from '../../shared/demo';
 export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
-export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter, type ColumnMeta } from './column-config';

package/dist/core/CellTable/index.js

@@ -8,7 +8,10 @@ export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
 export { default as CellTableDemo } from './CellTableDemo.svelte';
-// Demo data
-export { demoCells } from './demo-data';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
+// Re-export shared demo data utilities for convenience
+// Note: Cell type is NOT re-exported here to avoid conflicts with map-v2
+// Import Cell from '$lib/shared/demo' or '@smartnet360/svelte-components' directly
+export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS } from '../../shared/demo';
 // Configuration utilities
-export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';

package/dist/core/CellTable/types.d.ts

@@ -4,56 +4,15 @@
  * Types for the Tabulator-based cell data table component
  */
 import type { ColumnDefinition, Options } from 'tabulator-tables';
+import type { Cell, CellGroupingField } from '../../shared/demo';
 /**
- * Cell data model - represents a radio cell/sector
- * Imported from map-v3 cells feature for consistency
+ * Cell data model - re-exported from shared for convenience
  */
-export interface CellData {
-    id: string;
-    txId: string;
-    cellID: string;
-    cellID2G: string;
-    cellName: string;
-    siteId: string;
-    tech: string;
-    fband: string;
-    frq: string;
-    type: string;
-    status: string;
-    onAirDate: string;
-    bcch: number;
-    ctrlid: string;
-    dlEarfn: number;
-    antenna: string;
-    azimuth: number;
-    height: number;
-    electricalTilt: string;
-    beamwidth: number;
-    latitude: number;
-    longitude: number;
-    dx: number;
-    dy: number;
-    siteLatitude: number;
-    siteLongitude: number;
-    comment: string;
-    planner: string;
-    atollETP: number;
-    atollPW: number;
-    atollRS: number;
-    atollBW: number;
-    cellId3: string;
-    nwtP1: number;
-    nwtP2: number;
-    pci1: number;
-    nwtRS: number;
-    nwtBW: number;
-    other?: Record<string, unknown>;
-    customSubgroup: string;
-}
+export type CellData = Cell;
 /**
- * Available grouping fields for the table
+ * Available grouping fields for the table - extends shared type with 'none' option
  */
-export type CellTableGroupField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' | 'none';
+export type CellTableGroupField = CellGroupingField | 'none';
 /**
  * Column preset configurations
  */

package/dist/core/CoverageMap/data/SiteStore.js

@@ -116,8 +116,8 @@ export class SiteStore {
                 availableTilts: ['0']
             };
         }
-        // Determine TX power (priority: atollPW > nwtP1 > default)
-        const txPower = cell.atollPW || cell.nwtP1 || 43; // Default to 43 dBm (20W)
+        // Determine TX power (priority: atollPW > nwtPW > default)
+        const txPower = cell.atollPW || cell.nwtPW || 43; // Default to 43 dBm (20W)
         // Determine frequency from band
         const frequency = antennaPattern.frequency || this.parseFrequency(cell.fband);
         // Get mechanical tilt (might need to parse from string)

package/dist/map-v3/demo/demo-cells.d.ts

@@ -1,14 +1,18 @@
 /**
- * Demo Cell Data
+ * Demo Cell Data - Map V3
  *
- * 100 sites across San Francisco Bay Area
- * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
- * Each sector has 12 cells (all tech-band combinations)
- * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
- */
-import type { Cell } from '../features/cells/types';
-/**
- * Generate demo cells with varied density patterns in circular distribution
- * Creates density zones radiating from center with random placement
+ * Uses the shared cell generator to create demo data.
+ * Default: 2000 sites, ~60k cells across Budapest area.
+ *
+ * Structure:
+ * - CellName format: 7-digit numeric (e.g., "1000141")
+ * - Format: SSSS (site) + S (sector 1-3) + BB (band 41-51)
+ * - Site ID range: 1000-2999
+ * - Example Site 1000:
+ *   - Sector 1 (0°):   1000141-1000151 (11 bands)
+ *   - Sector 2 (120°): 1000241-1000251 (11 bands)
+ *   - Sector 3 (240°): 1000341-1000351 (11 bands)
  */
+import { type Cell } from '../../shared/demo';
 export declare const demoCells: Cell[];
+export type { Cell } from '../../shared/demo';