@nlabtech/nlabs-grid 1.1.0

package/types/nlabtech-nlabs-grid.d.ts

@@ -0,0 +1,444 @@
+import { Observable } from 'rxjs';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, TemplateRef, OnInit, OnChanges, AfterContentInit, AfterViewInit, ElementRef, EventEmitter, QueryList, SimpleChanges } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+/**
+ * Grid Configuration Models
+ */
+interface GridColumn<T = any> {
+    field: keyof T | string;
+    header: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterType?: 'text' | 'number' | 'date' | 'boolean';
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    type?: 'text' | 'number' | 'date' | 'boolean' | 'custom';
+    format?: (value: any) => string;
+    cellTemplate?: any;
+    visible?: boolean;
+    frozen?: boolean;
+    resizable?: boolean;
+}
+interface GridConfig {
+    columns: GridColumn[];
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    sortable?: boolean;
+    filterable?: boolean;
+    selectable?: boolean;
+    multiSelect?: boolean;
+    resizable?: boolean;
+    reorderable?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    rowHeight?: string;
+    showActions?: boolean;
+    actionsHeader?: string;
+    actionsWidth?: string;
+    showCheckboxColumn?: boolean;
+    checkboxColumnWidth?: string;
+}
+interface GridState {
+    page: number;
+    pageSize: number;
+    sortField?: string;
+    sortOrder?: 'asc' | 'desc';
+    filters?: Map<string, any>;
+    selectedRows?: any[];
+}
+interface GridDataResult<T = any> {
+    data: T[];
+    total: number;
+}
+interface GridRequest {
+    skip: number;
+    top: number;
+    orderBy?: string;
+    filter?: string;
+    select?: string[];
+    expand?: string[];
+    globalSearch?: string;
+}
+interface FilterMetadata {
+    field: string;
+    operator: FilterOperator;
+    value: any;
+    matchMode?: 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'lt' | 'lte' | 'gt' | 'gte' | 'isEmpty' | 'isNotEmpty';
+}
+type FilterOperator = 'and' | 'or';
+interface SortMetadata {
+    field: string;
+    order: 'asc' | 'desc';
+}
+interface PaginationMetadata {
+    page: number;
+    pageSize: number;
+    totalRecords: number;
+    totalPages: number;
+}
+
+/**
+ * Interface for data adapters
+ * Allows flexibility to work with different backend types (OData, REST, etc.)
+ */
+interface IDataAdapter<T = any> {
+    /**
+     * Fetch data from the data source
+     * @param request Grid request parameters
+     * @returns Observable with data and total count
+     */
+    getData(request: GridRequest): Observable<GridDataResult<T>>;
+    /**
+     * Build query string based on the request
+     * @param request Grid request parameters
+     * @returns Query string
+     */
+    buildQuery(request: GridRequest): string;
+}
+
+declare const ODATA_BASE_URL: InjectionToken<string>;
+/**
+ * OData v4 Adapter
+ * Implements IDataAdapter for OData protocol
+ */
+declare class ODataAdapter<T = any> implements IDataAdapter<T> {
+    private http;
+    private baseUrl;
+    constructor(http: HttpClient, baseUrl: string);
+    getData(request: GridRequest): Observable<GridDataResult<T>>;
+    buildQuery(request: GridRequest): string;
+}
+
+/**
+ * REST API Adapter
+ * Implements IDataAdapter for standard REST endpoints
+ *
+ * @example
+ * ```typescript
+ * const adapter = new RestAdapter(http, 'https://api.example.com/users', {
+ *   dataKey: 'items',
+ *   totalKey: 'totalCount',
+ *   usePagination: 'page'
+ * });
+ * ```
+ */
+declare class RestAdapter<T = any> implements IDataAdapter<T> {
+    private http;
+    private baseUrl;
+    private config?;
+    constructor(http: HttpClient, baseUrl: string, config?: RestAdapterConfig | undefined);
+    getData(request: GridRequest): Observable<GridDataResult<T>>;
+    buildQuery(request: GridRequest): string;
+    private mapResponse;
+    private getNestedValue;
+}
+interface RestAdapterConfig {
+    /** Pagination style: 'page' (page/pageSize) or 'skip' (skip/take). Default: 'skip' */
+    usePagination?: 'page' | 'skip';
+    /** Query param name for page number. Default: 'page' */
+    pageParam?: string;
+    /** Query param name for page size. Default: 'pageSize' */
+    pageSizeParam?: string;
+    /** Query param name for skip count. Default: 'skip' */
+    skipParam?: string;
+    /** Query param name for sorting. Default: 'sort' */
+    sortParam?: string;
+    /** Query param name for filtering. Default: 'filter' */
+    filterParam?: string;
+    /** Query param name for field selection. Default: 'fields' */
+    selectParam?: string;
+    /** Response property containing data array. Supports nested paths like 'result.items'. Default: 'data' */
+    dataKey?: string;
+    /** Response property containing total count. Supports nested paths. Default: 'total' */
+    totalKey?: string;
+    /** Custom response mapper function for complex response structures */
+    responseMapper?: <T>(response: any) => {
+        data: T[];
+        total: number;
+    };
+    /** Additional custom query parameters to append to every request */
+    extraParams?: Record<string, string | number | boolean | undefined>;
+    /** Query param name for global search. Default: 'search' */
+    searchParam?: string;
+}
+
+/**
+ * Grid Data Service
+ * Central service for managing grid data operations
+ */
+declare class GridDataService<T = any> {
+    private adapter?;
+    setAdapter(adapter: IDataAdapter<T>): void;
+    getData(request: GridRequest): Observable<GridDataResult<T>>;
+    buildFilterString(filters: FilterMetadata[]): string;
+    buildSortString(sorts: SortMetadata[]): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridDataService<any>, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GridDataService<any>>;
+}
+
+type Theme = 'light' | 'dark' | 'auto';
+declare class ThemeService {
+    private readonly THEME_KEY;
+    theme: _angular_core.WritableSignal<Theme>;
+    effectiveTheme: _angular_core.WritableSignal<"light" | "dark">;
+    constructor();
+    private getInitialTheme;
+    private resolveTheme;
+    private applyTheme;
+    private saveTheme;
+    setTheme(theme: Theme): void;
+    toggleTheme(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+declare class GridColumnCommandTemplateDirective {
+    templateRef: TemplateRef<any>;
+    name: string;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnCommandTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridColumnCommandTemplateDirective, "[nlabsGridColumnCommandTemplate]", never, { "name": { "alias": "nlabsGridColumnCommandTemplate"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+type TextAlignType = 'left' | 'center' | 'right';
+type FilterType = 'text' | 'date' | 'number' | 'boolean' | 'select';
+type CurrencyFormatType = 'c' | 'n';
+declare class GridColumnComponent {
+    readonly field: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly header: _angular_core.InputSignal<string>;
+    readonly sortable: _angular_core.InputSignal<boolean>;
+    readonly filterable: _angular_core.InputSignal<boolean>;
+    readonly visible: _angular_core.InputSignal<boolean>;
+    readonly resizable: _angular_core.InputSignal<boolean>;
+    readonly frozen: _angular_core.InputSignal<boolean>;
+    readonly locked: _angular_core.InputSignal<boolean>;
+    readonly width: _angular_core.InputSignal<string>;
+    readonly minWidth: _angular_core.InputSignal<string>;
+    readonly maxWidth: _angular_core.InputSignal<string>;
+    readonly textAlign: _angular_core.InputSignal<TextAlignType>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly hideOverflow: _angular_core.InputSignal<boolean>;
+    readonly filterType: _angular_core.InputSignal<FilterType>;
+    readonly filterData: _angular_core.InputSignal<any[]>;
+    readonly filterValue: _angular_core.InputSignal<any>;
+    readonly filterOperator: _angular_core.WritableSignal<string>;
+    readonly format: _angular_core.InputSignal<string | null>;
+    readonly symbol: _angular_core.InputSignal<string>;
+    readonly fraction: _angular_core.InputSignal<number>;
+    readonly showSymbolInFront: _angular_core.InputSignal<boolean>;
+    readonly showCheckbox: _angular_core.InputSignal<boolean>;
+    readonly booleanData: _angular_core.InputSignal<string[]>;
+    readonly visibleSignal: _angular_core.WritableSignal<boolean>;
+    readonly widthSignal: _angular_core.WritableSignal<string>;
+    readonly filterValueSignal: _angular_core.WritableSignal<any>;
+    cellTemplate?: TemplateRef<any>;
+    headerTemplate?: TemplateRef<any>;
+    footerTemplate?: TemplateRef<any>;
+    readonly timestamp: _angular_core.WritableSignal<string>;
+    getDisplayTitle(): string;
+    private capitalizeFirstLetter;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridColumnComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridColumnComponent, "nlabs-grid-column", never, { "field": { "alias": "field"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "frozen": { "alias": "frozen"; "required": false; "isSignal": true; }; "locked": { "alias": "locked"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "textAlign": { "alias": "textAlign"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "hideOverflow": { "alias": "hideOverflow"; "required": false; "isSignal": true; }; "filterType": { "alias": "filterType"; "required": false; "isSignal": true; }; "filterData": { "alias": "filterData"; "required": false; "isSignal": true; }; "filterValue": { "alias": "filterValue"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "symbol": { "alias": "symbol"; "required": false; "isSignal": true; }; "fraction": { "alias": "fraction"; "required": false; "isSignal": true; }; "showSymbolInFront": { "alias": "showSymbolInFront"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; "isSignal": true; }; "booleanData": { "alias": "booleanData"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class DataGridComponent<T = any> implements OnInit, OnChanges, AfterContentInit, AfterViewInit {
+    private gridDataService;
+    themeService: ThemeService;
+    config?: GridConfig;
+    adapter: IDataAdapter<T>;
+    autoLoad: boolean;
+    lazy: boolean;
+    data?: T[];
+    totalRecords?: number;
+    gridHeader?: ElementRef;
+    gridBody?: ElementRef;
+    readonly theme: _angular_core.InputSignal<"light" | "dark" | "auto">;
+    readonly showThemeSelector: _angular_core.InputSignal<boolean>;
+    readonly showColumnChooser: _angular_core.InputSignal<boolean>;
+    readonly showGlobalSearch: _angular_core.InputSignal<boolean>;
+    readonly showAddButton: _angular_core.InputSignal<boolean>;
+    readonly addButtonText: _angular_core.InputSignal<string>;
+    readonly addButtonUrl: _angular_core.InputSignal<string | undefined>;
+    readonly showExport: _angular_core.InputSignal<boolean>;
+    readonly exportFileName: _angular_core.InputSignal<string>;
+    readonly showFooter: _angular_core.InputSignal<boolean>;
+    addClick: EventEmitter<void>;
+    excelExport: EventEmitter<T[]>;
+    pdfExport: EventEmitter<T[]>;
+    onRefresh: EventEmitter<void>;
+    columnComponents: QueryList<GridColumnComponent>;
+    columnCommandTemplates: QueryList<GridColumnCommandTemplateDirective>;
+    captionCommandTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    actionsTemplate?: TemplateRef<any>;
+    checkboxTemplate?: TemplateRef<any>;
+    dataLoad: EventEmitter<GridDataResult<T>>;
+    rowSelect: EventEmitter<T>;
+    rowUnselect: EventEmitter<T>;
+    stateChange: EventEmitter<GridState>;
+    gridData: T[];
+    loading: boolean;
+    Math: Math;
+    globalSearchTerm: string;
+    state: GridState;
+    pagination: PaginationMetadata;
+    selectedRows: Set<T>;
+    sortMetadata: SortMetadata[];
+    filterMetadata: FilterMetadata[];
+    displayedColumns: GridColumn[];
+    draggedColumn?: GridColumn;
+    dropTargetIndex?: number;
+    resizingColumn?: GridColumn;
+    resizeStartX: number;
+    resizeStartWidth: number;
+    showColumnChooserModal: boolean;
+    showFilterModal: boolean;
+    currentFilterColumn: GridColumn | null;
+    currentFilterOperator: 'contains' | 'notContains' | 'equals' | 'notEquals' | 'startsWith' | 'endsWith' | 'lt' | 'lte' | 'gt' | 'gte' | 'isEmpty' | 'isNotEmpty';
+    filterValue: string;
+    constructor(gridDataService: GridDataService<T>, themeService: ThemeService);
+    ngAfterContentInit(): void;
+    private processTemplates;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    private initializeGrid;
+    private processColumnComponents;
+    loadData(): void;
+    onPageChange(page: number): void;
+    onPageSizeChange(pageSize: number): void;
+    onSort(column: GridColumn): void;
+    onFilter(column: GridColumn, value: any): void;
+    onRowSelect(row: T, event?: Event): void;
+    toggleSelectAll(event: Event): void;
+    isAllSelected(): boolean;
+    isSomeSelected(): boolean;
+    isRowSelected(row: T): boolean;
+    private buildOrderBy;
+    private buildFilter;
+    private sortLocal;
+    private filterLocal;
+    private updatePagination;
+    private emitStateChange;
+    trackByRow(index: number, row: any): any;
+    getCellValue(row: any, column: GridColumn): any;
+    getSortIcon(column: GridColumn): string;
+    getFilterValue(column: GridColumn): string;
+    openFilterModal(column: GridColumn, event: Event): void;
+    closeFilterModal(): void;
+    applyFilterModal(): void;
+    clearFilterModal(): void;
+    isFilterActive(column: GridColumn): boolean;
+    getPageNumbers(): number[];
+    toggleColumnVisibility(column: GridColumn): void;
+    getVisibleColumns(): GridColumn[];
+    onDragStart(event: DragEvent, column: GridColumn, index: number): void;
+    onColumnDragOver(event: DragEvent, index: number): void;
+    onColumnDrop(event: DragEvent, targetIndex: number): void;
+    onColumnDragEnd(): void;
+    onResizeStart(event: MouseEvent, column: GridColumn): void;
+    private onResize;
+    private onResizeEnd;
+    onGlobalSearch(term: string): void;
+    onAddButtonClick(): void;
+    onRefreshClick(): void;
+    exportToExcel(): void;
+    private generateExcelFile;
+    private formatCellValue;
+    private escapeXml;
+    exportToPDF(): void;
+    private generatePrintablePDF;
+    private escapeHtml;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataGridComponent<any>, "nlabs-data-grid", never, { "config": { "alias": "config"; "required": false; }; "adapter": { "alias": "adapter"; "required": false; }; "autoLoad": { "alias": "autoLoad"; "required": false; }; "lazy": { "alias": "lazy"; "required": false; }; "data": { "alias": "data"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "showThemeSelector": { "alias": "showThemeSelector"; "required": false; "isSignal": true; }; "showColumnChooser": { "alias": "showColumnChooser"; "required": false; "isSignal": true; }; "showGlobalSearch": { "alias": "showGlobalSearch"; "required": false; "isSignal": true; }; "showAddButton": { "alias": "showAddButton"; "required": false; "isSignal": true; }; "addButtonText": { "alias": "addButtonText"; "required": false; "isSignal": true; }; "addButtonUrl": { "alias": "addButtonUrl"; "required": false; "isSignal": true; }; "showExport": { "alias": "showExport"; "required": false; "isSignal": true; }; "exportFileName": { "alias": "exportFileName"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; }, { "addClick": "addClick"; "excelExport": "excelExport"; "pdfExport": "pdfExport"; "onRefresh": "onRefresh"; "dataLoad": "dataLoad"; "rowSelect": "rowSelect"; "rowUnselect": "rowUnselect"; "stateChange": "stateChange"; }, ["captionCommandTemplate", "footerTemplate", "columnComponents", "columnCommandTemplates"], never, true, never>;
+}
+
+declare class ThemeSelectorComponent {
+    showSelector: _angular_core.InputSignal<boolean>;
+    themeService: ThemeService;
+    setTheme(theme: Theme): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeSelectorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeSelectorComponent, "theme-selector", never, { "showSelector": { "alias": "showSelector"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class GridCaptionCommandTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCaptionCommandTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCaptionCommandTemplateDirective, "[nlabsGridCaptionCommandTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class GridCellTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCellTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCellTemplateDirective, "[nlabsGridCellTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class GridFooterTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridFooterTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridFooterTemplateDirective, "[nlabsGridFooterTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class GridHeaderTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridHeaderTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridHeaderTemplateDirective, "[nlabsGridHeaderTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    age: number;
+    salary: number;
+    department: string;
+    city: string;
+    country: string;
+    phone: string;
+    address: string;
+    zipCode: string;
+    jobTitle: string;
+    manager: string;
+    active: boolean;
+    startDate: Date;
+    registeredDate: Date;
+    lastLogin: Date;
+    notes: string;
+}
+interface Product {
+    id: number;
+    name: string;
+    category: string;
+    price: number;
+    stock: number;
+    description: string;
+}
+
+/**
+ * Mock data adapter for demo purposes
+ * Simulates backend API with mock data
+ */
+declare class MockDataAdapter implements IDataAdapter<User> {
+    private mockUsers;
+    getData(request: GridRequest): Observable<GridDataResult<User>>;
+    buildQuery(request: GridRequest): string;
+    private processRequest;
+    private applyFilter;
+    private applySort;
+    private generateMockUsers;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MockDataAdapter, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MockDataAdapter>;
+}
+
+export { DataGridComponent, GridCaptionCommandTemplateDirective, GridCellTemplateDirective, GridColumnCommandTemplateDirective, GridColumnComponent, GridDataService, GridFooterTemplateDirective, GridHeaderTemplateDirective, MockDataAdapter, ODATA_BASE_URL, ODataAdapter, RestAdapter, ThemeSelectorComponent, ThemeService };
+export type { CurrencyFormatType, FilterMetadata, FilterOperator, FilterType, GridColumn, GridConfig, GridDataResult, GridRequest, GridState, IDataAdapter, PaginationMetadata, Product, RestAdapterConfig, SortMetadata, TextAlignType, Theme, User };