@smartnet360/svelte-components 0.0.133 → 0.0.135

package/dist/core/CellTableV2/CellTablePanel.svelte.d.ts

@@ -0,0 +1,98 @@
+/**
+     * CellTablePanel V2 - Composable-based Cell Table Panel
+     *
+     * Uses composables for reusable logic:
+     * - usePersistence: localStorage read/write
+     * - useColumnVisibility: column preset and visibility management
+     * - useScrollSpy: group navigation
+     */
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition } from 'tabulator-tables';
+import type { ColumnMetadataOptions } from './column-config';
+import type { CellData, CellTableGroupField, ColumnPreset, RowSelectionEvent, RowClickEvent, RowDblClickEvent, TechColorMap, StatusColorMap, GroupOption } from './types';
+interface Props {
+    /** Cell data array to display */
+    cells: CellData[];
+    /** Initial grouping field */
+    groupBy?: CellTableGroupField;
+    /** Custom grouping options (overrides default tech/fband/status options) */
+    groupOptions?: GroupOption[];
+    /** Initial column preset */
+    columnPreset?: ColumnPreset;
+    /** Custom column definitions (overrides columnPreset when provided) */
+    customColumns?: ColumnDefinition[];
+    /** Column metadata filter options */
+    columnMetadataOptions?: ColumnMetadataOptions;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Enable multi-row selection */
+    multiSelect?: boolean;
+    /** Panel height (CSS value) */
+    height?: string;
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Show column presets dropdown and column picker (set false for simple tables) */
+    showColumnPresets?: boolean;
+    /** Show export buttons */
+    showExport?: boolean;
+    /** Show JSON export button (requires showExport=true) */
+    showJsonExport?: boolean;
+    /** Technology color mapping */
+    techColors?: TechColorMap;
+    /** Status color mapping */
+    statusColors?: StatusColorMap;
+    /** Enable header filters */
+    headerFilters?: boolean;
+    /** Panel title */
+    title?: string;
+    /** Show details sidebar */
+    showDetailsSidebar?: boolean;
+    /** Sidebar width in pixels */
+    sidebarWidth?: number;
+    /** Persist settings to localStorage */
+    persistSettings?: boolean;
+    /** Storage key prefix for persisted settings */
+    storageKey?: string;
+    /** Enable Tabulator persistence for column widths, order, visibility */
+    persistLayout?: boolean;
+    /** Show scrollspy navigation bar for quick group navigation */
+    showScrollSpy?: boolean;
+    /** Bindable reference to table methods */
+    tableRef?: {
+        redraw: () => void;
+    } | null;
+    /** Row selection change event */
+    onselectionchange?: (event: RowSelectionEvent) => void;
+    /** Row click event */
+    onrowclick?: (event: RowClickEvent) => void;
+    /** Row double-click event */
+    onrowdblclick?: (event: RowDblClickEvent) => void;
+    /** Custom header search slot (appears next to title) */
+    headerSearch?: Snippet;
+    /** Custom header actions slot */
+    headerActions?: Snippet;
+    /** Custom footer slot */
+    footer?: Snippet<[{
+        selectedRows: CellData[];
+        selectedCount: number;
+    }]>;
+    /** Custom details sidebar content */
+    detailsContent?: Snippet<[{
+        cell: CellData | null;
+        closeSidebar: () => void;
+    }]>;
+    /** Custom context menu content (right-click on row) */
+    contextMenu?: Snippet<[{
+        row: CellData;
+        closeMenu: () => void;
+    }]>;
+}
+declare const CellTablePanel: import("svelte").Component<Props, {
+    getSelectedRows: () => CellData[];
+    clearSelection: () => void;
+    scrollToRow: (id: string) => void;
+    redraw: () => void;
+    openSidebar: () => void;
+}, "groupBy" | "tableRef">;
+type CellTablePanel = ReturnType<typeof CellTablePanel>;
+export default CellTablePanel;

package/dist/core/CellTableV2/CellTableToolbar.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+	import type { CellTableGroupField, ColumnPreset, GroupOption } from './types';
+	import type { ColumnMeta } from './column-config';
+	import ColumnPicker from './ColumnPicker.svelte';
+
+	interface Props {
+		/** Current grouping field */
+		groupBy?: CellTableGroupField;
+		/** Current column preset */
+		columnPreset?: ColumnPreset;
+		/** Total row count */
+		totalCount?: number;
+		/** Filtered row count */
+		filteredCount?: number;
+		/** Selected row count */
+		selectedCount?: number;
+		/** Show export buttons */
+		showExport?: boolean;
+		/** Show JSON export button (requires showExport=true) */
+		showJsonExport?: boolean;
+		/** Show grouping dropdown */
+		showGrouping?: boolean;
+		/** Custom grouping options (overrides default options) */
+		groupOptions?: GroupOption[];
+		/** Show preset dropdown */
+		showPresets?: boolean;
+		/** Group change event */
+		ongroupchange?: (group: CellTableGroupField) => void;
+		/** Preset change event */
+		onpresetchange?: (preset: ColumnPreset) => void;
+		/** Export CSV event */
+		onexportcsv?: () => void;
+		/** Export JSON event */
+		onexportjson?: () => void;
+		/** Clear filters event */
+		onclearfilters?: () => void;
+		/** Collapse all groups event */
+		oncollapseall?: () => void;
+		/** Expand all groups event */
+		onexpandall?: () => void;
+		/** Whether header filters are visible */
+		filtersVisible?: boolean;
+		/** Toggle filters event */
+		ontogglefilters?: () => void;
+		/** All available columns metadata */
+		columnMeta?: ColumnMeta[];
+		/** Currently visible column fields */
+		visibleColumns?: string[];
+		/** Column visibility change event */
+		oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
+		/** Reset columns to preset default */
+		onresetcolumns?: () => void;
+		/** Whether scrollspy is enabled */
+		scrollSpyEnabled?: boolean;
+		/** Show scrollspy toggle button */
+		showScrollSpyToggle?: boolean;
+		/** Toggle scrollspy event */
+		ontogglescrollspy?: () => void;
+	}
+
+	let {
+		groupBy = 'none',
+		columnPreset = 'default',
+		totalCount = 0,
+		filteredCount = 0,
+		selectedCount = 0,
+		showExport = true,
+		showJsonExport = false,
+		showGrouping = true,
+		groupOptions: customGroupOptions,
+		showPresets = true,
+		ongroupchange,
+		onpresetchange,
+		onexportcsv,
+		onexportjson,
+		onclearfilters,
+		oncollapseall,
+		onexpandall,
+		filtersVisible = true,
+		ontogglefilters,
+		columnMeta = [],
+		visibleColumns = [],
+		oncolumnvisibilitychange,
+		onresetcolumns,
+		scrollSpyEnabled = false,
+		showScrollSpyToggle = false,
+		ontogglescrollspy
+	}: Props = $props();
+
+	const defaultGroupOptions: GroupOption[] = [
+		{ value: 'none', label: 'No Grouping' },
+		{ value: 'tech', label: 'Technology' },
+		{ value: 'fband', label: 'Frequency Band' },
+		{ value: 'frq', label: 'Frequency' },
+		{ value: 'status', label: 'Status' },
+		{ value: 'siteId', label: 'Site ID' }
+	];
+
+	// Use custom options if provided, otherwise use defaults
+	const groupOptions = customGroupOptions ?? defaultGroupOptions;
+
+	const presetOptions: { value: ColumnPreset; label: string }[] = [
+		{ value: 'default', label: 'Default' },
+		{ value: 'compact', label: 'Compact' },
+		{ value: 'full', label: 'All Columns' },
+		{ value: 'physical', label: 'Physical' },
+		{ value: 'network', label: 'Network' },
+		{ value: 'planning', label: 'Planning' },
+		{ value: 'compare', label: 'Compare (Atoll/NW)' },
+	];
+
+	function handleGroupChange(e: Event) {
+		const value = (e.target as HTMLSelectElement).value;
+		ongroupchange?.(value as CellTableGroupField);
+	}
+
+	function handlePresetChange(e: Event) {
+		const value = (e.target as HTMLSelectElement).value as ColumnPreset;
+		onpresetchange?.(value);
+	}
+</script>
+
+<div class="cell-table-toolbar d-flex align-items-center gap-3 p-2 bg-body-tertiary border-bottom">
+	<!-- Stats -->
+	<div class="toolbar-stats d-flex align-items-center gap-2">
+		<span class="badge bg-secondary">
+			{filteredCount} / {totalCount} cells
+		</span>
+		{#if selectedCount > 0}
+			<span class="badge bg-primary">
+				{selectedCount} selected
+			</span>
+		{/if}
+	</div>
+
+	<div class="vr"></div>
+
+	<!-- Grouping -->
+	{#if showGrouping}
+		<div class="toolbar-group d-flex align-items-center gap-2">
+			<label for="group-select" class="form-label mb-0 text-muted small">
+				<i class="bi bi-collection"></i> Group:
+			</label>
+			<select
+				id="group-select"
+				class="form-select form-select-sm"
+				style="width: auto;"
+				value={groupBy}
+				onchange={handleGroupChange}
+			>
+				{#each groupOptions as option}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+			{#if groupBy !== 'none'}
+				<div class="btn-group ms-2">
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={oncollapseall}
+						title="Collapse all groups"
+						aria-label="Collapse all groups"
+					>
+						<i class="bi bi-chevron-contract"></i>
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={onexpandall}
+						title="Expand all groups"
+						aria-label="Expand all groups"
+					>
+						<i class="bi bi-chevron-expand"></i>
+					</button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Presets -->
+	{#if showPresets}
+		<div class="toolbar-preset d-flex align-items-center gap-2">
+			<label for="preset-select" class="form-label mb-0 text-muted small">
+				<i class="bi bi-layout-three-columns"></i> Columns:
+			</label>
+			<select
+				id="preset-select"
+				class="form-select form-select-sm"
+				style="width: auto;"
+				value={columnPreset}
+				onchange={handlePresetChange}
+			>
+				{#each presetOptions as option}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+			{#if columnMeta.length > 0}
+				<ColumnPicker
+					columns={columnMeta}
+					{visibleColumns}
+					presetName={presetOptions.find(p => p.value === columnPreset)?.label ?? 'Default'}
+					onchange={oncolumnvisibilitychange}
+					onreset={onresetcolumns}
+				/>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="flex-grow-1"></div>
+
+	<!-- Actions -->
+	<div class="toolbar-actions d-flex align-items-center gap-2">
+		{#if showScrollSpyToggle}
+			<button
+				type="button"
+				class="btn btn-sm"
+				class:btn-outline-secondary={!scrollSpyEnabled}
+				class:btn-secondary={scrollSpyEnabled}
+				onclick={ontogglescrollspy}
+				title={scrollSpyEnabled ? 'Hide quick navigation' : 'Show quick navigation'}
+				aria-label={scrollSpyEnabled ? 'Hide quick navigation' : 'Show quick navigation'}
+			>
+				<i class="bi bi-signpost-split"></i>
+			</button>
+		{/if}
+		{#if ontogglefilters}
+			<button
+				type="button"
+				class="btn btn-sm"
+				class:btn-outline-secondary={!filtersVisible}
+				class:btn-secondary={filtersVisible}
+				onclick={ontogglefilters}
+				title={filtersVisible ? 'Hide filters' : 'Show filters'}
+				aria-label={filtersVisible ? 'Hide filters' : 'Show filters'}
+			>
+				<i class="bi bi-funnel"></i>
+			</button>
+		{/if}
+		{#if onclearfilters}
+			<button
+				type="button"
+				class="btn btn-sm btn-outline-secondary"
+				onclick={onclearfilters}
+				title="Clear all filters"
+			>
+				<i class="bi bi-x-circle"></i>
+				<span class="d-none d-md-inline ms-1">Clear Filters</span>
+			</button>
+		{/if}
+
+		{#if showExport}
+			<div class="btn-group">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-primary"
+					onclick={onexportcsv}
+					title="Export to CSV"
+				>
+					<i class="bi bi-filetype-csv"></i>
+					<span class="d-none d-md-inline ms-1">CSV</span>
+				</button>
+				{#if showJsonExport}
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-primary"
+						onclick={onexportjson}
+						title="Export to JSON"
+					>
+						<i class="bi bi-filetype-json"></i>
+						<span class="d-none d-md-inline ms-1">JSON</span>
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.cell-table-toolbar {
+		min-height: 48px;
+		flex-wrap: wrap;
+	}
+
+	.toolbar-stats .badge {
+		font-size: 0.75rem;
+		font-weight: 500;
+	}
+
+	.form-select-sm {
+		padding-top: 0.25rem;
+		padding-bottom: 0.25rem;
+		font-size: 0.8125rem;
+	}
+
+	.btn-sm {
+		padding: 0.25rem 0.5rem;
+		font-size: 0.8125rem;
+	}
+
+	@media (max-width: 768px) {
+		.cell-table-toolbar {
+			flex-direction: column;
+			align-items: stretch !important;
+			gap: 0.5rem !important;
+		}
+
+		.toolbar-stats,
+		.toolbar-group,
+		.toolbar-preset,
+		.toolbar-actions {
+			justify-content: space-between;
+		}
+
+		.vr {
+			display: none;
+		}
+
+		.flex-grow-1 {
+			display: none;
+		}
+	}
+</style>

package/dist/core/CellTableV2/CellTableToolbar.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { CellTableGroupField, ColumnPreset, GroupOption } from './types';
+import type { ColumnMeta } from './column-config';
+interface Props {
+    /** Current grouping field */
+    groupBy?: CellTableGroupField;
+    /** Current column preset */
+    columnPreset?: ColumnPreset;
+    /** Total row count */
+    totalCount?: number;
+    /** Filtered row count */
+    filteredCount?: number;
+    /** Selected row count */
+    selectedCount?: number;
+    /** Show export buttons */
+    showExport?: boolean;
+    /** Show JSON export button (requires showExport=true) */
+    showJsonExport?: boolean;
+    /** Show grouping dropdown */
+    showGrouping?: boolean;
+    /** Custom grouping options (overrides default options) */
+    groupOptions?: GroupOption[];
+    /** Show preset dropdown */
+    showPresets?: boolean;
+    /** Group change event */
+    ongroupchange?: (group: CellTableGroupField) => void;
+    /** Preset change event */
+    onpresetchange?: (preset: ColumnPreset) => void;
+    /** Export CSV event */
+    onexportcsv?: () => void;
+    /** Export JSON event */
+    onexportjson?: () => void;
+    /** Clear filters event */
+    onclearfilters?: () => void;
+    /** Collapse all groups event */
+    oncollapseall?: () => void;
+    /** Expand all groups event */
+    onexpandall?: () => void;
+    /** Whether header filters are visible */
+    filtersVisible?: boolean;
+    /** Toggle filters event */
+    ontogglefilters?: () => void;
+    /** All available columns metadata */
+    columnMeta?: ColumnMeta[];
+    /** Currently visible column fields */
+    visibleColumns?: string[];
+    /** Column visibility change event */
+    oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
+    /** Reset columns to preset default */
+    onresetcolumns?: () => void;
+    /** Whether scrollspy is enabled */
+    scrollSpyEnabled?: boolean;
+    /** Show scrollspy toggle button */
+    showScrollSpyToggle?: boolean;
+    /** Toggle scrollspy event */
+    ontogglescrollspy?: () => void;
+}
+declare const CellTableToolbar: import("svelte").Component<Props, {}, "">;
+type CellTableToolbar = ReturnType<typeof CellTableToolbar>;
+export default CellTableToolbar;

package/dist/core/CellTableV2/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>