@aquera/ngx-smart-table 0.0.2-alpha

package/lib/renderer/components/st-table/st-table.component.d.ts

@@ -0,0 +1,349 @@
+import { EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges, ElementRef, AfterViewInit } from '@angular/core';
+import { ColumnConfig } from '../../../models/column-config.interface';
+import { Cell } from '../../models/cell.class';
+import { TableState } from '../../models/table-state.class';
+import { TableConfig } from '../../../models/table-config.interface';
+import { TableStateChangeEvent, ColumnResizeEvent, ColumnAddEvent, ColumnMoveEvent, DataChangeEvent } from '../../models/table-types';
+import { CellChangeEvent, CellSaveEvent, CellEditEvent, CellCancelEvent, EditMode, NavigationDirection } from '../../../models/cell-types';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { JsonSchemaValidatorService } from '../../../services/json-schema-validator.service';
+import { SchemaValidationError } from '../../../models/schema-validation.interface';
+import { ValidationLoggerService } from '../../../services/validation-logger.service';
+import { VirtualScrollService } from '../../../services/virtual-scroll.service';
+import { RowAction, RowActionContext, RowActionEvent } from '../../../models/row-action.interface';
+import { ColumnActionContext, ColumnActionEvent } from '../../../models/column-action.interface';
+import { TableZIndex } from '../../models/z-index.enum';
+import { TableValidationState } from '../../models/table-validation-state.interface';
+import * as i0 from "@angular/core";
+export declare class StTableComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
+    private schemaValidator;
+    private logger;
+    private virtualScrollService;
+    readonly ZIndex: typeof TableZIndex;
+    tableConfig: TableConfig;
+    data?: any[];
+    data$?: Observable<any[]> | BehaviorSubject<any[]>;
+    tableState?: TableState;
+    enableSorting: boolean;
+    enableFiltering: boolean;
+    stateChange: EventEmitter<TableStateChangeEvent>;
+    dataChange: EventEmitter<DataChangeEvent>;
+    cellEdit: EventEmitter<CellEditEvent<any>>;
+    cellSave: EventEmitter<CellSaveEvent<any>>;
+    cellCancel: EventEmitter<CellCancelEvent<any>>;
+    cellChange: EventEmitter<CellChangeEvent<any>>;
+    columnResized: EventEmitter<ColumnResizeEvent>;
+    columnMoved: EventEmitter<ColumnMoveEvent>;
+    configValidationErrors: EventEmitter<SchemaValidationError[]>;
+    columnAdded: EventEmitter<ColumnAddEvent>;
+    rowAction: EventEmitter<RowActionEvent>;
+    validationStateChange: EventEmitter<TableValidationState>;
+    validateConfig: boolean;
+    private internalTableState?;
+    private internalCellGrid?;
+    private stateSubscription?;
+    private focusSubscription?;
+    private validationSubscription?;
+    private dataSubscription?;
+    private internalData$;
+    private previousData;
+    mergedConfig: TableConfig;
+    showColumnModal: boolean;
+    visibleColumns: ColumnConfig<any>[];
+    visibleCellGrid: Cell<any>[][];
+    dropdownState: {
+        isOpen: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+        context: RowActionContext | null;
+    };
+    skeletonColumns?: number[];
+    skeletonRows?: number[];
+    columnMenuState: {
+        isOpen: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+        context: ColumnActionContext | null;
+    };
+    private scrollContainer?;
+    private scrollSubscription?;
+    private virtualScrollState$;
+    virtualScrollTotalHeight$: Observable<number>;
+    virtualScrollOffsetY$: Observable<number>;
+    virtualScrollOffsetYNeg$: Observable<number>;
+    visibleRows$: Observable<Cell<any>[][]>;
+    scrollViewport?: ElementRef<HTMLElement>;
+    constructor(schemaValidator: JsonSchemaValidatorService, logger: ValidationLoggerService, virtualScrollService: VirtualScrollService);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Create internal TableState from config
+     */
+    private createInternalTableState;
+    /**
+     * Subscribe to external TableState changes
+     */
+    private subscribeToExternalTableState;
+    /**
+     * Create cell grid from raw data
+     */
+    private createCellGridFromData;
+    /**
+     * Setup data source - either sync array or async Observable
+     * Handles initialization and subscription to data changes
+     */
+    private setupDataSource;
+    /**
+     * Subscribe to data changes (either from data$ input or internal BehaviorSubject)
+     */
+    private subscribeToDataChanges;
+    /**
+     * Handle data change from Observable emission
+     */
+    private handleDataChange;
+    /**
+     * Handle sync data change (from @Input() data changes)
+     */
+    private handleSyncDataChange;
+    /**
+     * Get active TableState (provided or internal)
+     */
+    getActiveTableState(): TableState;
+    /**
+     * Get active cell grid (provided or internal)
+     */
+    getActiveCellGrid(): Cell<any>[][];
+    /**
+     * Get visible cell grid (filtered to only include visible columns)
+     */
+    getVisibleCellGrid(): Cell<any>[][];
+    /**
+     * Update the visible cell grid based on current visibility and column order
+     * Called when data, visibility, or column order changes
+     *
+     * This method properly handles column reordering by mapping cells based on
+     * column keys rather than indices, ensuring cells follow their columns.
+     */
+    private updateVisibleCellGrid;
+    /**
+     * Update the visible columns based on current visibility
+     * Called only when visibility actually changes
+     */
+    private updateVisibleColumns;
+    /**
+     * Update both visible columns and cell grid
+     * Call this whenever data or visibility changes
+     */
+    private updateVisibleData;
+    /**
+     * Get active columns (from config or legacy input)
+     */
+    getActiveColumns(): ColumnConfig<any>[];
+    /**
+     * Get visible columns (filtered by visibility property)
+     * Also recalculates sticky offsets based on visible columns only
+     */
+    getVisibleColumns(): ColumnConfig<any>[];
+    /**
+     * Recalculate sticky offsets based on visible columns only
+     * This ensures correct positioning when columns are hidden
+     */
+    private recalculateVisibleStickyOffsets;
+    onCellChange(event: CellChangeEvent): void;
+    onColumnResized(event: ColumnResizeEvent): void;
+    onColumnMoved(event: {
+        columnKey: string;
+        direction: 'left' | 'right';
+    }): void;
+    /**
+     * Move column to position just before right sticky columns (used when pinning right)
+     */
+    private moveColumnToEnd;
+    /**
+     * Get cumulative left offset for a sticky column on the left side
+     */
+    getStickyLeftOffset(columnKey: string): number;
+    /**
+     * Get cumulative right offset for a sticky column on the right side
+     */
+    getStickyRightOffset(columnKey: string): number;
+    /**
+     * Check if top pagination should be shown
+     */
+    showTopPagination(): boolean;
+    /**
+     * Check if bottom pagination should be shown
+     */
+    showBottomPagination(): boolean;
+    /**
+     * Validate table configuration
+     * @param config Table configuration to validate
+     */
+    private validateConfiguration;
+    /**
+     * Handle add column button click
+     */
+    onAddColumnClick(): void;
+    /**
+     * Handle column created from modal
+     */
+    onColumnCreated(column: ColumnConfig): void;
+    /**
+     * Handle modal cancelled
+     */
+    onModalCancelled(): void;
+    /**
+     * Check if virtual scroll is enabled
+     */
+    isVirtualScrollEnabled(): boolean;
+    /**
+     * Check if column is the first sticky-right column (for shadow styling)
+     */
+    isFirstStickyRight(columnKey: string): boolean;
+    /**
+     * Get virtual scroll item size
+     */
+    getVirtualScrollItemSize(): number;
+    /**
+     * Get viewport height
+     */
+    getVirtualScrollViewportHeight(): number;
+    /**
+     * Get buffer size
+     */
+    getVirtualScrollBufferSize(): number;
+    /**
+     * Initialize virtual scroll state
+     */
+    private initializeVirtualScroll;
+    /**
+     * Setup scroll event listener
+     */
+    private setupVirtualScrollListener;
+    /**
+     * Handle virtual scroll event
+     */
+    private onVirtualScroll;
+    /**
+     * Get row index for tracking
+     */
+    getAbsoluteRowIndex(relativeIndex: number): number;
+    /**
+     * TrackBy function for better performance
+     */
+    trackByRowIndex: (index: number, row: Cell<any>[]) => number;
+    /**
+     * Scroll to specific row programmatically
+     */
+    scrollToRow(index: number): void;
+    /**
+     * Check if row actions are enabled
+     */
+    hasRowActions(): boolean;
+    /**
+     * Get row actions from config
+     */
+    getRowActions(): RowAction[];
+    /**
+     * Get row data from cell grid
+     */
+    getRowData(rowIndex: number): any;
+    /**
+     * Open row actions dropdown
+     */
+    openRowActionsDropdown(event: MouseEvent, rowData: any, rowIndex: number): void;
+    /**
+     * Close row actions dropdown
+     */
+    closeRowActionsDropdown(): void;
+    /**
+     * Handle row action clicked
+     */
+    onRowActionClicked(event: RowActionEvent): void;
+    /**
+     * Open column menu dropdown
+     */
+    openColumnMenu(event: MouseEvent, column: ColumnConfig<any>, columnIndex: number, isFirst: boolean, isLast: boolean): void;
+    /**
+     * Close column menu dropdown
+     */
+    closeColumnMenu(): void;
+    /**
+     * Handle column action clicked
+     */
+    onColumnActionClicked(event: ColumnActionEvent): void;
+    /**
+     * Get column actions (built-in + custom)
+     */
+    private getColumnActions;
+    /**
+     * Get built-in column actions (sort, filter, pin, move)
+     */
+    private getBuiltInColumnActions;
+    /**
+     * Get sort label based on column data type
+     */
+    private getSortLabel;
+    /**
+     * Initialize keyboard navigation
+     */
+    private initializeKeyboardNavigation;
+    /**
+     * Update focus state in all cells
+     */
+    private updateCellFocusStates;
+    /**
+     * Focus the TD element in the DOM
+     */
+    private focusTdElement;
+    /**
+     * Handle cell click
+     */
+    onCellClick(rowIndex: number, columnIndex: number): void;
+    /**
+     * Handle cell entering edit mode
+     */
+    onCellEdit(event: CellEditEvent): void;
+    /**
+     * Handle cell save
+     */
+    onCellSave(event: CellSaveEvent): void;
+    /**
+     * Handle cell cancel
+     */
+    onCellCancel(event: CellCancelEvent): void;
+    /**
+     * Handle cell save with navigation (Excel-like behavior)
+     */
+    onCellSaveAndNavigate(event: {
+        event: KeyboardEvent;
+        direction: NavigationDirection;
+    }): void;
+    /**
+     * Handle focus on table container - focus first cell if no cell is focused
+     */
+    onTableContainerFocus(event: FocusEvent): void;
+    /**
+     * Check if keyboard navigation is enabled
+     */
+    isKeyboardNavigationEnabled(): boolean;
+    /**
+     * Get EditMode enum value for cells
+     * For Excel-like tables with keyboard navigation, use ENTER mode
+     * which allows arrow key navigation without triggering edit.
+     * Double-click will still work to start editing.
+     */
+    getEditModeForCells(): EditMode;
+    /**
+     * Clear focus when clicking outside table
+     */
+    onDocumentClick(event: MouseEvent): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StTableComponent, "st-table", never, { "tableConfig": "tableConfig"; "data": "data"; "data$": "data$"; "tableState": "tableState"; "enableSorting": "enableSorting"; "enableFiltering": "enableFiltering"; "validateConfig": "validateConfig"; }, { "stateChange": "stateChange"; "dataChange": "dataChange"; "cellEdit": "cellEdit"; "cellSave": "cellSave"; "cellCancel": "cellCancel"; "cellChange": "cellChange"; "columnResized": "columnResized"; "columnMoved": "columnMoved"; "configValidationErrors": "configValidationErrors"; "columnAdded": "columnAdded"; "rowAction": "rowAction"; "validationStateChange": "validationStateChange"; }, never, never>;
+}

package/lib/renderer/components/st-table-actions/st-table-actions.component.d.ts

@@ -0,0 +1,77 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { TableState } from '../../models/table-state.class';
+import * as i0 from "@angular/core";
+declare type MenuView = 'main' | 'columns';
+export declare class StTableActionsComponent implements OnInit, OnDestroy {
+    tableState: TableState;
+    allowAddColumn: boolean;
+    addColumnClicked: EventEmitter<void>;
+    isOpen: boolean;
+    currentView: MenuView;
+    columnsVisibility: {
+        key: string;
+        header: string;
+        visible: boolean;
+        hideable: boolean;
+    }[];
+    /**
+     * Dropdown positioning style
+     */
+    dropdownStyle: any;
+    private stateSubscription?;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Update columns visibility list from current table state
+     */
+    private updateColumnsVisibility;
+    /**
+     * Subscribe to table state changes
+     */
+    private subscribeToStateChanges;
+    /**
+     * Toggle menu open/close
+     */
+    toggleMenu(event: Event): void;
+    /**
+     * Update dropdown position based on trigger button
+     */
+    private updateDropdownPosition;
+    /**
+     * Close menu
+     */
+    closeMenu(): void;
+    /**
+     * Handle add column action
+     */
+    onAddColumn(event: Event): void;
+    /**
+     * Open column visibility submenu
+     */
+    openColumnsSubmenu(event: Event): void;
+    /**
+     * Go back to main menu
+     */
+    backToMain(event: Event): void;
+    /**
+     * Toggle column visibility
+     */
+    onToggleColumn(columnKey: string, event: Event): void;
+    /**
+     * Check if column is visible
+     */
+    isColumnVisible(columnKey: string): boolean;
+    /**
+     * Check if column is hideable
+     */
+    isColumnHideable(column: {
+        key: string;
+        header: string;
+        visible: boolean;
+        hideable: boolean;
+    }): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StTableActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StTableActionsComponent, "st-table-actions", never, { "tableState": "tableState"; "allowAddColumn": "allowAddColumn"; }, { "addColumnClicked": "addColumnClicked"; }, never, never>;
+}
+export {};

package/lib/renderer/components/st-workbook/st-workbook.component.d.ts

@@ -0,0 +1,235 @@
+import { EventEmitter, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { WorkbookConfig, WorkbookSheetConfig } from '../../../models/workbook-config.interface';
+import { WorkbookAction, WorkbookActionEvent, SheetTabActionEvent } from '../../../models/workbook-action.interface';
+import { WorkbookState } from '../../models/workbook-state.class';
+import { TableState } from '../../models/table-state.class';
+import { TableConfig } from '../../../models/table-config.interface';
+import { CellChangeEvent } from '../../../models/cell-types';
+import { TableStateChangeEvent } from '../../models/table-types';
+import { AutosaveService } from '../../../services/autosave.service';
+import * as i0 from "@angular/core";
+export declare class StWorkbookComponent implements OnInit, OnChanges, OnDestroy {
+    private autosaveService;
+    /**
+     * Workbook configuration
+     */
+    config: WorkbookConfig;
+    /**
+     * Map of sheet ID to data array
+     */
+    sheetsData: BehaviorSubject<Map<string, any[]>>;
+    /**
+     * Optional external state management
+     */
+    state?: WorkbookState;
+    /**
+     * Emitted when active sheet changes
+     */
+    sheetChanged: EventEmitter<number>;
+    /**
+     * Emitted when add sheet button is clicked
+     */
+    addSheet: EventEmitter<void>;
+    /**
+     * Emitted when a sheet tab action is clicked
+     */
+    sheetTabAction: EventEmitter<SheetTabActionEvent>;
+    /**
+     * Emitted when a workbook action is clicked
+     */
+    workbookAction: EventEmitter<WorkbookActionEvent>;
+    /**
+     * Emitted when cell value changes
+     */
+    cellChange: EventEmitter<CellChangeEvent<any>>;
+    /**
+     * Emitted when cell is saved
+     */
+    cellSave: EventEmitter<any>;
+    /**
+     * Emitted when table state changes
+     */
+    tableStateChange: EventEmitter<TableStateChangeEvent>;
+    /**
+     * Emitted when fullscreen is toggled
+     */
+    fullscreenToggle: EventEmitter<boolean>;
+    /**
+     * Array of sheets
+     */
+    sheets: WorkbookSheetConfig[];
+    /**
+     * Active sheet index
+     */
+    activeSheetIndex: number;
+    /**
+     * Current table config (for active sheet)
+     */
+    currentTableConfig: TableConfig | null;
+    /**
+     * Current table data (for active sheet)
+     */
+    currentTableData: any[];
+    /**
+     * Current table state (for active sheet)
+     */
+    currentTableState: TableState | null;
+    /**
+     * Unique key for table component (changes on sheet switch to force reinitialization)
+     */
+    tableComponentKey: string;
+    /**
+     * Internal state instance
+     */
+    internalState?: WorkbookState;
+    /**
+     * Fullscreen state observable
+     */
+    isFullscreen$: BehaviorSubject<boolean>;
+    /**
+     * Tab actions dropdown state
+     */
+    tabActionsOpen: boolean;
+    selectedSheet: WorkbookSheetConfig | null;
+    selectedSheetIndex: number;
+    tabActionsPosition: any;
+    /**
+     * Workbook actions dropdown state
+     */
+    workbookActionsOpen: boolean;
+    workbookActionsPosition: any;
+    /**
+     * Visible workbook actions (filtered by hidden)
+     */
+    visibleWorkbookActions: WorkbookAction[];
+    /**
+     * Destroy subject for cleanup
+     */
+    private destroy$;
+    /**
+     * Autosave enabled flag
+     */
+    autosaveEnabled: boolean;
+    /**
+     * Autosave strategy
+     */
+    private autosaveStrategy;
+    /**
+     * Last save timestamp
+     */
+    lastSaveTime: Date | null;
+    /**
+     * Saving indicator
+     */
+    isSaving: boolean;
+    /**
+     * Beforeunload handler reference
+     */
+    private beforeUnloadHandler;
+    constructor(autosaveService: AutosaveService);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Initialize component state
+     */
+    private initializeComponent;
+    /**
+     * Get active state (external or internal)
+     */
+    get activeState(): WorkbookState;
+    /**
+     * Handle tab change event from nile-tab-group
+     */
+    onTabChange(event: any): void;
+    /**
+     * Update active sheet data (triggers table re-initialization with new config/state)
+     */
+    private updateActiveSheet;
+    /**
+     * Add new sheet
+     */
+    onAddSheet(): void;
+    /**
+     * Check if can add more sheets
+     */
+    get canAddSheet(): boolean;
+    /**
+     * Get minimum sheets required
+     */
+    get minSheets(): number;
+    /**
+     * Open tab actions dropdown
+     */
+    openTabActions(event: MouseEvent, sheet: WorkbookSheetConfig, index: number): void;
+    /**
+     * Close tab actions dropdown
+     */
+    closeTabActions(): void;
+    /**
+     * Check if sheet has tab actions
+     */
+    hasTabActions(sheet: WorkbookSheetConfig): boolean;
+    /**
+     * Handle tab action click
+     */
+    onTabActionClick(action: any, event: Event): void;
+    /**
+     * Toggle workbook actions dropdown
+     */
+    toggleWorkbookActions(event: MouseEvent): void;
+    /**
+     * Close workbook actions dropdown
+     */
+    closeWorkbookActions(): void;
+    /**
+     * Update visible workbook actions
+     */
+    private updateVisibleWorkbookActions;
+    /**
+     * Check if workbook action is disabled
+     */
+    isActionDisabled(action: WorkbookAction): boolean;
+    /**
+     * Handle workbook action click
+     */
+    onWorkbookActionClick(action: WorkbookAction, event: Event): void;
+    /**
+     * Toggle fullscreen mode
+     */
+    toggleFullscreen(): void;
+    /**
+     * Handle cell change from table - update internal data and pass through to parent
+     */
+    onCellChange(event: CellChangeEvent): void;
+    /**
+     * Handle cell save from table - update internal data and pass through to parent
+     */
+    onCellSave(event: any): void;
+    /**
+     * Handle table state change - pass through to parent
+     */
+    onTableStateChange(event: TableStateChangeEvent): void;
+    /**
+     * Component cleanup
+     */
+    ngOnDestroy(): void;
+    /**
+     * Initialize autosave subscription
+     */
+    private initializeAutosave;
+    /**
+     * Perform autosave operation
+     */
+    private performAutosave;
+    /**
+     * Setup auto-restore from autosave
+     */
+    private setupAutoRestore;
+    /**
+     * Setup beforeunload warning for unsaved changes
+     */
+    private setupBeforeUnloadWarning;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StWorkbookComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StWorkbookComponent, "st-workbook", never, { "config": "config"; "sheetsData": "sheetsData"; "state": "state"; }, { "sheetChanged": "sheetChanged"; "addSheet": "addSheet"; "sheetTabAction": "sheetTabAction"; "workbookAction": "workbookAction"; "cellChange": "cellChange"; "cellSave": "cellSave"; "tableStateChange": "tableStateChange"; "fullscreenToggle": "fullscreenToggle"; }, never, never>;
+}

package/lib/renderer/directives/click-outside.directive.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ClickOutsideDirective {
+    private el;
+    clickOutside: EventEmitter<void>;
+    constructor(el: ElementRef);
+    onClick(target: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClickOutsideDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClickOutsideDirective, "[clickOutside]", never, {}, { "clickOutside": "clickOutside"; }, never>;
+}