@smartnet360/svelte-components 0.0.103 → 0.0.104

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

@@ -0,0 +1,49 @@
+import type { Snippet } from 'svelte';
+import type { CellData, CellTableGroupField, ColumnPreset, RowSelectionEvent, RowClickEvent, RowDblClickEvent, TechColorMap, StatusColorMap } from './types';
+interface Props {
+    /** Cell data array to display */
+    cells: CellData[];
+    /** Initial grouping field */
+    groupBy?: CellTableGroupField;
+    /** Initial column preset */
+    columnPreset?: ColumnPreset;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Enable multi-row selection */
+    multiSelect?: boolean;
+    /** Panel height (CSS value) */
+    height?: string;
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Show export buttons */
+    showExport?: boolean;
+    /** Technology color mapping */
+    techColors?: TechColorMap;
+    /** Status color mapping */
+    statusColors?: StatusColorMap;
+    /** Enable header filters */
+    headerFilters?: boolean;
+    /** Panel title */
+    title?: string;
+    /** 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 actions slot */
+    headerActions?: Snippet;
+    /** Custom footer slot */
+    footer?: Snippet<[{
+        selectedRows: CellData[];
+        selectedCount: number;
+    }]>;
+}
+declare const CellTablePanel: import("svelte").Component<Props, {
+    getSelectedRows: () => CellData[];
+    clearSelection: () => void;
+    scrollToRow: (id: string) => void;
+    redraw: () => void;
+}, "groupBy" | "columnPreset">;
+type CellTablePanel = ReturnType<typeof CellTablePanel>;
+export default CellTablePanel;

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import type { CellTableGroupField, ColumnPreset } from './types';
+
+	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 grouping dropdown */
+		showGrouping?: boolean;
+		/** 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;
+	}
+
+	let {
+		groupBy = 'none',
+		columnPreset = 'default',
+		totalCount = 0,
+		filteredCount = 0,
+		selectedCount = 0,
+		showExport = true,
+		showGrouping = true,
+		showPresets = true,
+		ongroupchange,
+		onpresetchange,
+		onexportcsv,
+		onexportjson,
+		onclearfilters
+	}: Props = $props();
+
+	const groupOptions: { value: CellTableGroupField; label: string }[] = [
+		{ 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' }
+	];
+
+	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' }
+	];
+
+	function handleGroupChange(e: Event) {
+		const value = (e.target as HTMLSelectElement).value as CellTableGroupField;
+		ongroupchange?.(value);
+	}
+
+	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>
+		</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>
+		</div>
+	{/if}
+
+	<div class="flex-grow-1"></div>
+
+	<!-- Actions -->
+	<div class="toolbar-actions d-flex align-items-center gap-2">
+		{#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>
+				<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>
+			</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/CellTable/CellTableToolbar.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { CellTableGroupField, ColumnPreset } from './types';
+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 grouping dropdown */
+    showGrouping?: boolean;
+    /** 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;
+}
+declare const CellTableToolbar: import("svelte").Component<Props, {}, "">;
+type CellTableToolbar = ReturnType<typeof CellTableToolbar>;
+export default CellTableToolbar;

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

@@ -0,0 +1,63 @@
+/**
+ * CellTable - Column Configuration
+ *
+ * Defines column definitions, presets, and formatters for the cell table
+ */
+import type { ColumnDefinition, CellComponent } from 'tabulator-tables';
+import type { CellTableColumn, ColumnPreset, TechColorMap, StatusColorMap, ColumnGroups } from './types';
+/**
+ * Default technology colors (Bootstrap-aligned)
+ */
+export declare const DEFAULT_TECH_COLORS: TechColorMap;
+/**
+ * Default status colors (Bootstrap-aligned)
+ */
+export declare const DEFAULT_STATUS_COLORS: StatusColorMap;
+/**
+ * Frequency band colors
+ */
+export declare const FBAND_COLORS: Record<string, string>;
+/**
+ * Column groups for different presets
+ */
+export declare const COLUMN_GROUPS: ColumnGroups;
+/**
+ * Create a technology badge formatter
+ */
+export declare function createTechFormatter(colors?: TechColorMap): (cell: CellComponent) => string;
+/**
+ * Create a status badge formatter
+ */
+export declare function createStatusFormatter(colors?: StatusColorMap): (cell: CellComponent) => string;
+/**
+ * Create an fband badge formatter
+ */
+export declare function createFbandFormatter(): (cell: CellComponent) => string;
+/**
+ * Number formatter with fixed decimals
+ */
+export declare function numberFormatter(decimals?: number): (cell: CellComponent) => string;
+/**
+ * Coordinate formatter (lat/lng)
+ */
+export declare function coordinateFormatter(cell: CellComponent): string;
+/**
+ * Azimuth formatter with degree symbol
+ */
+export declare function azimuthFormatter(cell: CellComponent): string;
+/**
+ * Height formatter with meter unit
+ */
+export declare function heightFormatter(cell: CellComponent): string;
+/**
+ * Get all column definitions
+ */
+export declare function getAllColumns(techColors?: TechColorMap, statusColors?: StatusColorMap, headerFilters?: boolean): CellTableColumn[];
+/**
+ * Get columns for a specific preset
+ */
+export declare function getColumnsForPreset(preset: ColumnPreset, techColors?: TechColorMap, statusColors?: StatusColorMap, headerFilters?: boolean): ColumnDefinition[];
+/**
+ * Get group header formatter for a specific field
+ */
+export declare function getGroupHeaderFormatter(groupField: string): (value: unknown, count: number) => string;