commons-shared-web-ui 0.0.53 → 0.0.54

package/src/lib/modules/smart-table/components/smart-table/smart-table.component.ts

@@ -1,1128 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output, OnChanges, SimpleChanges, AfterViewInit, OnDestroy, ViewChildren, QueryList, ElementRef, ChangeDetectorRef, NgZone, inject, LOCALE_ID, HostListener } from '@angular/core';
-import { TableConfig, TableColumn, TableAction, TableFilter, TableDataChangeEvent, TableRowSaveEvent } from '../../models/table-config.model';
-import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-import { formatDate } from '@angular/common';
-import { Router } from '@angular/router';
-import { catchError, finalize, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { of, forkJoin, Subject } from 'rxjs';
-
-@Component({
-  selector: 'lib-smart-table',
-  templateUrl: './smart-table.component.html',
-  styleUrls: ['./smart-table.component.scss'],
-  standalone: false
-})
-export class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
-  @Input() config!: TableConfig;
-
-  /**
-   * External data mode: pass table rows directly from the parent.
-   * When this input is provided, the component will NOT make any internal API calls.
-   * Instead, it emits sortChange / pageChange / searchChange / filterChange events
-   * so the parent can fetch and supply updated data.
-   */
-  @Input() tableData?: any[];
-
-  /**
-   * Total number of items — used by the pagination component when operating in
-   * external-data mode. Must be kept in sync by the parent.
-   */
-  @Input() totalItemsCount?: number;
-
-  @Output() action = new EventEmitter<{ action: TableAction, row: any }>();
-  @Output() topAction = new EventEmitter<TableAction>(); // For top bar buttons
-  @Output() filterChange = new EventEmitter<{ key: string, value: any }>();
-  @Output() rowSelect = new EventEmitter<any[]>();
-  @Output() columnClick = new EventEmitter<{ row: any, column: string }>();
-
-  /**
-   * Pre-selected row objects. These are tracked across pages.
-   * Matching incoming data rows (via rowIdField) will be checked automatically.
-   */
-  @Input() selectedRows: any[] = [];
-
-  /** Emitted in external-data mode when the user changes the sort column/direction. */
-  @Output() sortChange = new EventEmitter<TableDataChangeEvent>();
-  /** Emitted in external-data mode when the user changes the page or page size. */
-  @Output() pageChange = new EventEmitter<TableDataChangeEvent>();
-  /** Emitted in external-data mode when the user types in the search box. */
-  @Output() searchChange = new EventEmitter<TableDataChangeEvent>();
-  /** Emitted when an inline-edited or inline-added row is saved. */
-  @Output() rowSave = new EventEmitter<TableRowSaveEvent>();
-
-  data: any[] = [];
-  totalItems: number = 0;
-  currentPage: number = 1;
-  loading: boolean = false;
-  originalRowsCache = new Map<any, any>();
-  
-  // State
-  activeSort: { key: string, direction: 'ASC' | 'DESC' } = { key: '', direction: 'ASC' };
-  private isSortActive: boolean = false; // true only when orderBy is explicitly configured or user has sorted
-  activeFilters: { [key: string]: any } = {};
-  searchTerm: string = '';
-  stickyColumnStyles: { [key: string]: any } = {};
-  hasStickyColumns: boolean = false;
-  openDropdownId: string | null = null;
-  /** Viewport-relative position used to render the dropdown as position:fixed. */
-  dropdownPosition: { top: number; right: number } = { top: 0, right: 0 };
-  /** Items and row for the currently open dropdown — rendered in a portal outside the table. */
-  activeDropdownItems: any[] | null = null;
-  activeDropdownRow: any = null;
-
-  // --- Filter dropdown state ---
-  openFilterKey: string | null = null;
-  activeFilterLabels: { [key: string]: string } = {};
-  /** Viewport-relative position used to render the filter panel as position:fixed. */
-  filterPosition: { top: number; left: number } = { top: 0, left: 0 };
-  /** The filter config for the currently open filter panel. */
-  activeFilterData: any | null = null;
-
-  // --- Delete confirmation modal state ---
-  deleteModalOpen = false;
-  deleteModalConfig: any = {};
-  private pendingDeleteAction: { item: any; row: any } | null = null;
-
-  searchSubject = new Subject<string>();
-
-  @ViewChildren('stickyHeader') stickyHeaders!: QueryList<ElementRef>;
-  private resizeObserver: ResizeObserver | null = null;
-  private locale = inject(LOCALE_ID);
-
-  constructor(
-      private http: HttpClient, 
-      private router: Router,
-      private cdr: ChangeDetectorRef,
-      private ngZone: NgZone
-  ) { 
-      // Debounce search input
-      this.searchSubject.pipe(
-          debounceTime(this.config?.searchConfig?.debounceTime || 300),
-          distinctUntilChanged()
-      ).subscribe(term => {
-          const minChars = this.config?.searchConfig?.minimumCharacter ?? 3;
-          // Stay idle for partial input below the threshold; clearing the box always re-triggers.
-          if (term.length > 0 && term.length < minChars) {
-              return;
-          }
-          this.searchTerm = term;
-          this.currentPage = 1;
-          if (this.tableData !== undefined) {
-              // External-data mode: delegate to parent via event
-              this.searchChange.emit(this.buildChangeEvent());
-          } else {
-              this.loadData();
-          }
-      });
-  }
-
-  ngOnInit(): void {
-    if (this.config) {
-      this.applyPaginationDefaults();
-      if (this.config.sortBy) {
-        this.activeSort.key = this.config.sortBy;
-      }
-      if (this.config.orderBy) {
-        this.activeSort.direction = this.config.orderBy;
-        this.isSortActive = true;
-      }
-      this.loadFilterOptions();
-
-      if (this.tableData !== undefined) {
-        // External-data mode: sync incoming data, skip internal API call
-        this.data = this.tableData;
-        if (this.totalItemsCount !== undefined) {
-          this.totalItems = this.totalItemsCount;
-        }
-      } else {
-        this.loadData();
-      }
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-      // External data changed — sync directly without an API call
-      if (changes['tableData']) {
-          this.data = this.tableData || [];
-      }
-      // Total count updated from parent
-      if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
-          this.totalItems = this.totalItemsCount;
-      }
-      // Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
-      if (changes['config'] && !changes['config'].firstChange) {
-          this.applyPaginationDefaults();
-          this.loadFilterOptions();
-          if (this.tableData === undefined) {
-              this.loadData();
-          }
-          setTimeout(() => this.calculateStickyPositions());
-      }
-      if (changes['selectedRows']) {
-          this.syncSelection();
-      }
-  }
-
-  ngAfterViewInit(): void {
-      this.setupResizeObserver();
-  }
-
-  ngOnDestroy(): void {
-      if (this.resizeObserver) {
-          this.resizeObserver.disconnect();
-      }
-  }
-
-  private setupResizeObserver(): void {
-      if (this.resizeObserver) {
-          this.resizeObserver.disconnect();
-      }
-      
-      this.resizeObserver = new ResizeObserver(() => {
-          this.ngZone.run(() => {
-              this.calculateStickyPositions();
-          });
-      });
-
-      if (this.stickyHeaders) {
-          this.stickyHeaders.changes.subscribe(() => {
-              this.observeHeaders();
-              // Also recalculate immediately
-              setTimeout(() => this.calculateStickyPositions());
-          });
-          this.observeHeaders();
-      }
-  }
-
-  private observeHeaders(): void {
-      if (!this.resizeObserver || !this.stickyHeaders) return;
-      this.stickyHeaders.forEach(header => {
-          this.resizeObserver!.observe(header.nativeElement);
-      });
-  }
-  
-  loadData(): void {
-    if (!this.config?.apiUrl) return;
-    
-    this.loading = true;
-    let params: HttpParams;
-
-    // --- Query Params Construction ---
-    if (this.config.queryParamsConfig) {
-      const qpConfig = this.config.queryParamsConfig;
-      const pageKey = qpConfig.pageKey || 'page';
-      const sizeKey = qpConfig.sizeKey || 'pageSize';
-      const pageIndex = this.currentPage + (qpConfig.pageIndexOffset || 0);
-
-      let paramsObj: any = {
-        [pageKey]: pageIndex.toString(),
-        [sizeKey]: (this.config.pagination?.pageSize || 10).toString()
-      };
-
-      if (this.activeSort.key) paramsObj['sortBy'] = this.activeSort.key;
-      // Only include orderBy if explicitly configured or user has sorted a column
-      if (this.isSortActive && this.activeSort.direction) paramsObj['orderBy'] = this.activeSort.direction;
-      
-      // Search Handling
-      if (this.searchTerm) {
-          const searchConfig = this.config.searchConfig;
-          const searchKey = searchConfig?.searchKey || 'search';
-          
-          if (searchConfig?.handling === 'nested_string' && qpConfig.nestedStringConfig) {
-             // Will be handled in nested string construction below
-          } else {
-             paramsObj[searchKey] = this.searchTerm;
-          }
-      }
-
-      // Filter Handling (and Search if nested)
-      if (qpConfig.filterHandling === 'nested_string' && qpConfig.nestedStringConfig) {
-        const { paramName, baseValue, separator, assignment } = qpConfig.nestedStringConfig;
-        let nestedString = baseValue || '';
-        const assign = assignment || '=';
-
-        // Add Filters
-        Object.keys(this.activeFilters).forEach(key => {
-          if (this.activeFilters[key]) {
-            const prefix = nestedString ? separator : '';
-            nestedString += `${prefix}${key}${assign}${this.activeFilters[key]}`;
-          }
-        });
-        
-        // Add Search if nested
-        if (this.searchTerm && this.config.searchConfig?.handling === 'nested_string') {
-             const searchKey = this.config.searchConfig.searchKey || 'SEARCH_TERM';
-             const prefix = nestedString ? separator : '';
-             nestedString += `${prefix}${searchKey}${assign}${this.searchTerm}`;
-        }
-
-        paramsObj[paramName] = nestedString;
-      } else {
-        // Standard handling
-        Object.keys(this.activeFilters).forEach(key => {
-          if (this.activeFilters[key]) paramsObj[key] = this.activeFilters[key];
-        });
-      }
-      params = new HttpParams({ fromObject: paramsObj });
-
-    } else {
-      // --- Default Behavior (Backward Compatibility) ---
-      let paramsObj: any = {};
-      
-      if (this.config.pagination?.enabled) {
-        paramsObj['page'] = this.currentPage;
-        paramsObj['pageSize'] = this.config.pagination.pageSize;
-      }
-
-      if (this.activeSort.key) {
-        paramsObj['sortBy'] = this.activeSort.key;
-        // Only include orderBy if explicitly configured or user has sorted a column
-        if (this.isSortActive) paramsObj['orderBy'] = this.activeSort.direction;
-      }
-
-      if (this.searchTerm) {
-        const searchKey = this.config.searchConfig?.searchKey || 'search';
-        paramsObj[searchKey] = this.searchTerm;
-      }
-
-      Object.keys(this.activeFilters).forEach(key => {
-          if (this.activeFilters[key]) {
-               paramsObj[key] = this.activeFilters[key];
-          }
-      });
-
-      // Custom Request Params Mapper (if provided)
-      if (this.config.requestParams) {
-         const customParams = this.config.requestParams(
-             this.currentPage, 
-             this.config.pagination?.pageSize || 10, 
-             this.activeSort.key, 
-             this.activeSort.direction, 
-             this.searchTerm, 
-             this.activeFilters
-         );
-         if (customParams instanceof HttpParams) {
-             // If function returns HttpParams, use it directly (caveat: might lose previous params if not careful in mapper)
-             params = customParams;
-         } else {
-             paramsObj = { ...paramsObj, ...customParams };
-             params = new HttpParams({ fromObject: paramsObj });
-         }
-      } else {
-         params = new HttpParams({ fromObject: paramsObj });
-      }
-    }
-
-    // --- Data Fetching ---
-    
-    // Check for separate count API
-    const totalCountConfig = this.config.pagination?.totalCountConfig;
-    let request$: any; // Observable
-
-    if (totalCountConfig?.source === 'separate' && totalCountConfig.apiUrl) {
-         const headers = this.getHeaders();
-         const method = this.config.apiMethod || 'GET';
-         const body = this.config.apiPayload || {};
-
-         const dataRequest$ = method === 'POST' ? this.http.post<any>(this.config.apiUrl, body, { params, headers }) : this.http.get<any>(this.config.apiUrl, { params, headers });
-         const countRequest$ = method === 'POST' ? this.http.post<any>(totalCountConfig.apiUrl, body, { params, headers }) : this.http.get<any>(totalCountConfig.apiUrl, { params, headers });
-
-         request$ = forkJoin({
-            data: dataRequest$,
-            count: countRequest$
-        }).pipe(
-            map(({ data, count }) => {
-                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
-                return {
-                    data: this.getValueByPath(data, dataPath),
-                    total: this.getValueByPath(count, totalCountConfig.responsePath || '')
-                };
-            })
-        );
-    } else {
-    
-    const headers = this.getHeaders();
-    const method = this.config.apiMethod || 'GET';
-    const body = this.config.apiPayload || {};
-    
-    const baseRequest$ = method === 'POST' ? this.http.post<any>(this.config.apiUrl, body, { params, headers }) : this.http.get<any>(this.config.apiUrl, { params, headers });
-
-    request$ = baseRequest$.pipe(
-        map(response => {
-                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
-                const totalPath = totalCountConfig?.responsePath || '';
-                return {
-                    data: this.getValueByPath(response, dataPath),
-                    // If source is 'same', try to get total from response, else default 0
-                    total: totalCountConfig ? this.getValueByPath(response, totalPath) : 0
-                };
-            })
-        );
-    }
-
-    request$.pipe(
-        finalize(() => this.loading = false),
-        catchError(err => {
-          console.error('Table Data Fetch Error', err);
-          return of({ data: [], total: 0 }); 
-        })
-      )
-      .subscribe((result: any) => {
-          this.data = result.data || [];
-          if (this.config.pagination) {
-               this.totalItems = result.total || 0;
-          }
-          if (!this.config.columns || this.config.columns.length === 0) {
-                    if (this.data && this.data.length > 0) {
-                        this.config.columns = Object.keys(this.data[0]).map(key => ({
-                            key: key,
-                            label: this.toTitleCase(key),
-                            type: 'text',
-                            sortable: false,
-                            editable: false
-                        }));
-                    }
-                }
-          this.syncSelection();
-      });
-  }
-
-  /**
-   * Syncs the locally loaded data set with the externally provided selectedRows.
-   * Marks 'selected' property on row objects to reflect checkbox state.
-   */
-  private syncSelection(): void {
-    if (!this.data || !this.data.length || !this.config) return;
-
-    const idField = (this.config as any).rowIdField || 'id';
-    const selectedIds = new Set((this.selectedRows || []).map(r => r[idField]));
-
-    this.data.forEach(row => {
-      row.selected = selectedIds.has(row[idField]);
-    });
-  }
-
-  // --- Actions ---
-
-  onPageChange(page: number): void {
-    this.currentPage = page;
-    if (this.tableData !== undefined) {
-      this.pageChange.emit(this.buildChangeEvent());
-    } else {
-      this.loadData();
-    }
-  }
-
-  onPageSizeChange(size: number): void {
-    if (this.config.pagination) {
-        this.config.pagination.pageSize = size;
-        this.currentPage = 1; // Reset to first page
-        if (this.tableData !== undefined) {
-            this.pageChange.emit(this.buildChangeEvent());
-        } else {
-            this.loadData();
-        }
-    }
-  }
-
-  onSort(col: TableColumn): void {
-    if (!col.sortable) return;
-
-    if (this.activeSort.key === col.key) {
-      this.activeSort.direction = this.activeSort.direction === 'ASC' ? 'DESC' : 'ASC';
-    } else {
-      this.activeSort.key = col.key;
-      this.activeSort.direction = 'ASC';
-    }
-    this.isSortActive = true; // User has actively sorted, include orderBy in API call
-
-    if (this.tableData !== undefined) {
-      // External-data mode: let the parent handle the API call
-      this.sortChange.emit(this.buildChangeEvent());
-    } else {
-      this.loadData();
-    }
-  }
-
-  onSearch(event: Event): void {
-     const value = (event.target as HTMLInputElement).value;
-     this.searchSubject.next(value);
-  }
-
-  onFilterChange(key: string, event: Event): void {
-      const value = (event.target as HTMLSelectElement).value;
-      this.applyFilter(key, value);
-  }
-
-  private applyFilter(key: string, value: any): void {
-      this.activeFilters[key] = value;
-      this.currentPage = 1;
-      this.filterChange.emit({ key, value });
-      if (this.tableData === undefined) {
-          this.loadData();
-      }
-  }
-
-  toggleFilter(key: string, event: Event): void {
-      event.stopPropagation();
-      if (this.openFilterKey === key) {
-          this.openFilterKey = null;
-          this.activeFilterData = null;
-          return;
-      }
-      const trigger = event.currentTarget as HTMLElement;
-      const rect = trigger.getBoundingClientRect();
-      this.filterPosition = { top: rect.bottom + 6, left: rect.left };
-      this.openFilterKey = key;
-      this.activeFilterData = this.config.filters?.find(f => f.key === key) || null;
-  }
-
-  selectFilterOption(filter: any, opt: { label: string; value: any } | null): void {
-      const value = opt ? opt.value : '';
-      this.activeFilterLabels[filter.key] = opt ? opt.label : '';
-      this.applyFilter(filter.key, value);
-      this.openFilterKey = null;
-  }
-
-  getFilterDisplay(filter: any): string {
-      return this.activeFilterLabels[filter.key] || filter.label;
-  }
-
-  getValidFilterOptions(filter: any): any[] {
-      return (filter?.options || []).filter((opt: any) => opt.label != null && opt.label !== '');
-  }
-
-  isFilterActive(filter: any): boolean {
-      return !!this.activeFilterLabels[filter.key];
-  }
-
-  // --- Private helpers ---
-
-  /**
-   * Assembles the current table state into a `TableDataChangeEvent` object.
-   * Emitted to the parent in external-data mode so it can fetch and supply new data.
-   */
-  private buildChangeEvent(): TableDataChangeEvent {
-      return {
-          page: this.currentPage,
-          pageSize: this.config.pagination?.pageSize || 10,
-          sortBy: this.activeSort.key || undefined,
-          orderBy: this.isSortActive ? this.activeSort.direction : undefined,
-          searchTerm: this.searchTerm || undefined,
-          filters: { ...this.activeFilters }
-      };
-  }
-  
-  onAction(action: TableAction, row: any): void {
-      if (action.type === 'edit-row' as any) {
-          const idField = (this.config as any).rowIdField || 'id';
-          this.originalRowsCache.set(row[idField], JSON.parse(JSON.stringify(row)));
-          this.prepareDateFieldsForEdit(row);
-          row.isEditing = true;
-          this.action.emit({ action, row });
-          return;
-      }
-
-      if (action.type === 'callback' && action.callback) {
-          action.callback(row);
-      }
-      
-      if (action.type === 'route' && action.route) {
-          const url = this.replaceParams(action.route, row);
-          this.router.navigateByUrl(url);
-          return;
-      }
-
-      if (action.type === 'api') {
-          if (action.confirmationNeeded) {
-              const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
-              if (!confirm(message)) return;
-          }
-          if (action.apiUrl) {
-              this.executeApiAction(action, row);
-          } else {
-             this.action.emit({ action, row });
-          }
-      } else {
-        this.action.emit({ action, row });
-      }
-  }
-
-  onActionItemClick(item: any, row: any, event: Event): void {
-      event.stopPropagation();
-      
-      if (item.type === 'edit-row') {
-          const idField = (this.config as any).rowIdField || 'id';
-          this.originalRowsCache.set(row[idField], JSON.parse(JSON.stringify(row)));
-          this.prepareDateFieldsForEdit(row);
-          row.isEditing = true;
-          this.action.emit({ action: item as TableAction, row });
-          this.closeDropdown();
-          return;
-      }
-
-      if (item.type === 'delete') {
-          this.openDeleteConfirmModal(item, row);
-          return;
-      }
-
-      if (item.type === 'callback' && item.callback) {
-          item.callback(row);
-      }
-      
-      if (item.type === 'route' && item.route) {
-          const url = this.replaceParams(item.route, row);
-          this.router.navigateByUrl(url);
-          return;
-      }
-
-      if (item.type === 'api') {
-          if (item.confirmationNeeded) {
-              const message = item.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
-              if (!confirm(message)) return;
-          }
-          if (item.apiUrl) {
-              this.executeApiAction(item as TableAction, row);
-          } else {
-              this.action.emit({ action: item as TableAction, row });
-          }
-      } else {
-          this.action.emit({ action: item as TableAction, row });
-      }
-  }
-
-  private openDeleteConfirmModal(item: any, row: any): void {
-      const cfg = item.deleteConfig || {};
-      this.deleteModalConfig = {
-          title: cfg.modalTitle || 'Confirm Delete',
-          size: 'sm' as const,
-          headerTheme: 'dark' as const,
-          confirmButton: {
-              label: cfg.confirmLabel || 'Delete',
-              type: 'danger' as const
-          },
-          cancelButton: {
-              label: cfg.cancelLabel || 'Cancel',
-              show: true
-          }
-      };
-      this.deleteModalMessage = cfg.modalMessage || 'Are you sure you want to delete this item?';
-      this.pendingDeleteAction = { item, row };
-      this.deleteModalOpen = true;
-  }
-
-  deleteModalMessage = '';
-
-  onDeleteConfirm(): void {
-      this.deleteModalOpen = false;
-      if (!this.pendingDeleteAction) return;
-      const { item, row } = this.pendingDeleteAction;
-      const cfg = item.deleteConfig || {};
-      const idField = cfg.idField || 'id';
-      const url = cfg.apiUrl.replace(`:${idField}`, row[idField]);
-      this.pendingDeleteAction = null;
-
-      this.loading = true;
-      this.http.delete(url, { headers: this.getHeaders() }).pipe(
-          finalize(() => this.loading = false)
-      ).subscribe({
-          next: () => {
-              if (this.data.length === 1 && this.currentPage > 1) {
-                  this.currentPage--;
-              }
-              this.loadData();
-              this.action.emit({ action: item as TableAction, row });
-          },
-          error: (err) => console.error('[SmartTable] Delete API Error', err)
-      });
-  }
-
-  onDeleteCancel(): void {
-      this.deleteModalOpen = false;
-      this.pendingDeleteAction = null;
-  }
-
-  onTopAction(action: TableAction): void {
-      if (action.type === 'add-row' as any) {
-          const idField = (this.config as any).rowIdField || 'id';
-          const newRow: any = {
-              [idField]: 0,
-              isNew: true,
-              isEditing: true
-          };
-          if (this.config.columns) {
-              this.config.columns.forEach(col => {
-                  if (col.editConfig && col.editConfig.defaultValue !== undefined) {
-                      newRow[col.key] = col.dataType === 'date'
-                          ? this.toDateObject(col.editConfig.defaultValue)
-                          : col.editConfig.defaultValue;
-                  } else {
-                      newRow[col.key] = col.dataType === 'date' ? null : '';
-                  }
-                  if (col.subFields) {
-                      col.subFields.forEach(sub => {
-                          if (sub.editConfig && sub.editConfig.defaultValue !== undefined) {
-                              newRow[sub.key] = sub.dataType === 'date'
-                                  ? this.toDateObject(sub.editConfig.defaultValue)
-                                  : sub.editConfig.defaultValue;
-                          } else {
-                              newRow[sub.key] = sub.dataType === 'date' ? null : '';
-                          }
-                      });
-                  }
-              });
-          }
-          this.data = [newRow, ...this.data];
-          setTimeout(() => this.calculateStickyPositions());
-          this.topAction.emit(action);
-          return;
-      }
-
-      if (action.type === 'callback' && action.callback) {
-          action.callback(null); // No row for top action
-      }
-      
-      if (action.type === 'route' && action.route) {
-          // Since it's a top action, replaceParams with an empty object or handle statically 
-          const url = this.replaceParams(action.route, {});
-          this.router.navigateByUrl(url);
-          return;
-      }
-
-      if (action.type === 'api') {
-          if (action.confirmationNeeded) {
-              const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
-              if (!confirm(message)) return;
-          }
-          if (action.apiUrl) {
-             this.executeApiAction(action, null);
-          } else {
-             this.topAction.emit(action);
-          }
-      } else {
-          this.topAction.emit(action);
-      }
-  }
-
-  private executeApiAction(action: TableAction, row: any): void {
-      if (!action.apiUrl) return;
-      
-      const url = row ? this.replaceParams(action.apiUrl, row) : action.apiUrl;
-      const method = action.apiMethod || 'POST';
-      const headers = this.getHeaders();
-      const body = row ? row : {};
-      
-      this.loading = true;
-      this.http.request(method, url, { body, headers }).pipe(
-          finalize(() => this.loading = false)
-      ).subscribe({
-          next: () => {
-              this.loadData(); // reload on success
-              if (row) {
-                 this.action.emit({ action, row });
-              } else {
-                 this.topAction.emit(action);
-              }
-          },
-          error: (err) => {
-              console.error('API Action Error', err);
-          }
-      });
-  }
-
-  // --- Selection ---
-
-  onSelectAll(event: Event): void {
-      const checked = (event.target as HTMLInputElement).checked;
-      this.data.forEach(row => row.selected = checked);
-      this.updateSelectedRows();
-  }
-  
-  onRowSelect(row: any): void {
-      this.updateSelectedRows();
-  }
-  
-  updateSelectedRows(): void {
-      const idField = (this.config as any).rowIdField || 'id';
-      
-      // 1. Identify rows from the global selection that are NOT on the current page
-      const currentPageIds = new Set(this.data.map(r => r[idField]));
-      const otherPagesSelected = (this.selectedRows || []).filter(r => !currentPageIds.has(r[idField]));
-      
-      // 2. Identify currently selected rows on the current page
-      const currentPageSelected = this.data.filter(row => row.selected);
-      
-      // 3. Merge them to form the new global selection
-      this.selectedRows = [...otherPagesSelected, ...currentPageSelected];
-      
-      this.rowSelect.emit(this.selectedRows);
-  }
-
-  // --- Helpers ---
-
-  getCellValue(row: any, col: TableColumn): any {
-    // Support nested properties via labelPath or key
-    const path = col.labelPath || col.key;
-    let val = this.getValueByPath(row, path);
-
-    // Formatting (Date, etc.)
-    if (col.type === 'date' && val) {
-        if (col.dateFormat) {
-            try {
-                return formatDate(val, col.dateFormat, this.locale);
-            } catch (e) {
-                console.warn('Invalid date format or value', val, col.dateFormat);
-                return val;
-            }
-        }
-        return new Date(val).toLocaleDateString();
-    }
-
-    if (val === null || val === undefined || val === '') {
-        return col.emptyValue ?? this.config.emptyValue ?? '-';
-    }
-    return val;
-  }
-
-  getBadgeClass(row: any, col: TableColumn): string {
-      const val = this.getCellValue(row, col);
-      const strVal = String(val);
-      
-      // Config approach
-      if (col.badgeConfig && col.badgeConfig[strVal]) {
-          return `badge-${col.badgeConfig[strVal]}`;
-      }
-
-      // Default Logic
-      const status = strVal.toLowerCase();
-      
-      if (['active', 'completed', 'success', 'approved'].includes(status)) return 'badge-success';
-      if (['pending', 'in progress', 'waiting'].includes(status)) return 'badge-warning';
-      if (['rejected', 'failed', 'error', 'deleted'].includes(status)) return 'badge-danger';
-      if (['draft', 'inactive'].includes(status)) return 'badge-neutral';
-      
-      return 'badge-info'; // default
-  }
-  
-  getAscOpacity(key: string): number {
-    if (this.activeSort.key !== key) return 0.45;
-    return this.activeSort.direction === 'ASC' ? 1 : 0.2;
-  }
-
-  getDescOpacity(key: string): number {
-    if (this.activeSort.key !== key) return 0.45;
-    return this.activeSort.direction === 'DESC' ? 1 : 0.2;
-  }
-
-  private replaceParams(template: string, row: any): string {
-      return template.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => row[key] || '');
-  }
-  
-  private loadFilterOptions(): void {
-    if (!this.config.filters) return;
-
-    this.config.filters.forEach(filter => {
-      if (filter.apiUrl && !filter.options) {
-        const headers = this.getHeaders();
-        let params = new HttpParams();
-
-        if (filter.handling === 'nested_string' && filter.nestedStringConfig) {
-          const { paramName, baseValue } = filter.nestedStringConfig;
-          if (baseValue) {
-            params = params.set(paramName, baseValue);
-          }
-        }
-
-        const method = filter.apiMethod || 'GET';
-        const body = filter.apiPayload || {};
-        
-        const request$ = method === 'POST' 
-            ? this.http.post<any>(filter.apiUrl, body, { headers, params }) 
-            : this.http.get<any>(filter.apiUrl, { headers, params });
-
-        request$.subscribe({
-          next: (response) => {
-            const data = filter.dataPath ? this.getValueByPath(response, filter.dataPath) : response;
-            if (!Array.isArray(data)) {
-              console.error(`Filter data for ${filter.key} is not an array`, data);
-              return;
-            }
-            filter.options = data.map((item: any) => {
-              const label = filter.labelPath ? this.getValueByPath(item, filter.labelPath) :
-                (filter.labelKey ? item[filter.labelKey] : item.label || item.name);
-              const value = filter.valuePath ? this.getValueByPath(item, filter.valuePath) :
-                (filter.valueKey ? item[filter.valueKey] : item.value || item.code);
-              return { label, value };
-            });
-
-            // Auto-populate matching column options
-            if (this.config.columns) {
-              const matchingColumn = this.config.columns.find(col => col.key === filter.key);
-              if (matchingColumn && matchingColumn.dataType === 'select' && !matchingColumn.options) {
-                matchingColumn.options = filter.options;
-              }
-            }
-          },
-          error: (err) => console.error(`Failed to load filter options for ${filter.key}:`, err)
-        });
-      }
-    });
-  }
-
-  private getValueByPath(obj: any, path: string): any {
-      if (!path || path === '') return obj;
-      return path.split('.').reduce((acc, part) => {
-          const match = part.match(/(\w+)\[(\d+)\]/);
-          if (match) {
-              return acc?.[match[1]]?.[parseInt(match[2])];
-          }
-          return acc?.[part];
-      }, obj);
-  }
-
-  private calculateStickyPositions(): void {
-      // We calculate positions based on rendered widths
-      if (!this.stickyHeaders || this.stickyHeaders.length === 0) return;
-
-      this.stickyColumnStyles = {};
-      let leftOffset = 0;
-      this.hasStickyColumns = false;
-
-      // Default: only the first data column is sticky
-      const stickyCount = this.config.stickyColumnCount !== undefined ? this.config.stickyColumnCount : 1;
-
-      // Checkbox width handling
-      if (this.config.selectable) {
-         const firstSticky = this.config.columns.find((c, i) => i < stickyCount || c.sticky);
-         if (firstSticky) {
-             // We can try to measure checkbox col if needed, but usually fixed 40px
-             // Or better, if we have a checkbox col ref, assume 40px for now as it is fixed in CSS
-             leftOffset = 40; 
-         }
-      }
-
-      const headerElements = this.stickyHeaders.toArray();
-
-      this.config.columns.forEach((col, index) => {
-          if (col.sticky || index < stickyCount) {
-              col.sticky = true;
-              this.hasStickyColumns = false; // Reset to true only after we set styles? No, wait. 
-              // Actually property is used in template to add class 'sticky-col'
-              // but we need to update Styles based on previous cols widths
-              
-              // Find corresponding header element
-              // Note: headerElements corresponds to columns indices
-              const headerEl = headerElements[index]?.nativeElement;
-              
-              if (headerEl) {
-                  // Set style for current column
-                  this.stickyColumnStyles[col.key] = { 
-                      left: `${leftOffset}px`
-                      // We DO NOT set width here, allowing it to be dynamic/auto
-                  };
-                  
-                  // Add THIS column's width to offset for the NEXT column
-                  // use getBoundingClientRect or offsetWidth
-                  leftOffset += headerEl.offsetWidth;
-              }
-              this.hasStickyColumns = true;
-          }
-      });
-      
-      this.cdr.detectChanges();
-  }
-
-  private toTitleCase(str: string): string {
-      return str
-          .replace(/([A-Z])/g, ' $1') // insert space before capital letters
-          .replace(/^./, (str) => str.toUpperCase()) // capitalize the first letter
-          .trim(); // remove any leading/trailing whitespace
-  }
-  
-  get columnCount(): number {
-      return this.config.columns.length;
-  }
-
-  /** Filters out actions/action-items explicitly disabled via `isEnabled: false`. */
-  getVisibleActions<T extends { isEnabled?: boolean }>(actions?: T[] | null): T[] {
-      return (actions || []).filter(a => a.isEnabled !== false);
-  }
-
-  get showPagination(): boolean {
-      if (!this.config?.pagination?.enabled) return false;
-      const pageSize = this.config.pagination.pageSize;
-      const effectiveTotal = this.totalItems > 0 ? this.totalItems : this.data.length;
-      return effectiveTotal > 10;
-  }
-
-  private applyPaginationDefaults(): void {
-      if (this.config?.pagination?.enabled) {
-          if (!this.config.pagination.pageSize) {
-              this.config.pagination.pageSize = 10;
-          }
-          if (!this.config.pagination.pageSizeOptions || this.config.pagination.pageSizeOptions.length === 0) {
-              this.config.pagination.pageSizeOptions = [5, 10, 20, 50, 100];
-          }
-      }
-  }
-
-  onColumnClick(row: any, col: TableColumn): void {
-      if (col.clickAction === 'callback') {
-          this.columnClick.emit({ row, column: col.key });
-      } else if (col.clickAction === 'route' && col.clickRoute) {
-          const url = this.replaceParams(col.clickRoute, row);
-          this.router.navigateByUrl(url);
-      }
-  }
-
-  private getHeaders(): HttpHeaders {
-      let headers = new HttpHeaders();
-      if (this.config.token) {
-          const headerName = this.config.tokenHeader || 'Authorization';
-          headers = headers.set(headerName, this.config.token);
-      }
-      return headers;
-  }
-
-  toggleDropdown(id: string, event: Event, items: any[], row: any): void {
-      event.stopPropagation();
-      if (this.openDropdownId === id) {
-        this.openDropdownId = null;
-        this.activeDropdownItems = null;
-        this.activeDropdownRow = null;
-        return;
-      }
-      const btn = event.currentTarget as HTMLElement;
-      const rect = btn.getBoundingClientRect();
-      const estimatedHeight = (items?.length || 1) * 44 + 8;
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const top = spaceBelow < estimatedHeight + 4
-        ? Math.max(4, rect.top - estimatedHeight - 4)
-        : rect.bottom + 4;
-      this.dropdownPosition = {
-        top,
-        right: window.innerWidth - rect.right
-      };
-      this.openDropdownId = id;
-      this.activeDropdownItems = items || [];
-      this.activeDropdownRow = row;
-  }
-
-  @HostListener('document:click')
-  closeDropdown(): void {
-      this.openDropdownId = null;
-      this.activeDropdownItems = null;
-      this.activeDropdownRow = null;
-      this.openFilterKey = null;
-      this.activeFilterData = null;
-  }
-
-  onCancelRow(row: any, index: number): void {
-      if (row.isNew) {
-          this.data.splice(index, 1);
-      } else {
-          const idField = (this.config as any).rowIdField || 'id';
-          const original = this.originalRowsCache.get(row[idField]);
-          if (original) {
-              Object.assign(row, original);
-              this.originalRowsCache.delete(row[idField]);
-          }
-          row.isEditing = false;
-      }
-  }
-
-  onSaveRow(row: any): void {
-      const { isNew, isEditing, selected, ...payload } = row;
-      this.normalizeDateFieldsForSave(payload);
-      const idField = (this.config as any).rowIdField || 'id';
-
-      if (this.tableData !== undefined) {
-          this.rowSave.emit({ row: payload, isNew: !!isNew });
-          row.isEditing = false;
-          row.isNew = false;
-      } else {
-          this.loading = true;
-          const headers = this.getHeaders();
-          
-          if (isNew) {
-              const url = this.config.apiUrl || '';
-              this.http.post(url, payload, { headers }).pipe(
-                  finalize(() => this.loading = false)
-              ).subscribe({
-                  next: () => {
-                      row.isEditing = false;
-                      row.isNew = false;
-                      this.loadData();
-                  },
-                  error: (err) => {
-                      console.error('[SmartTable] Save Row Error', err);
-                  }
-              });
-          } else {
-              let url = this.config.apiUrl || '';
-              if (url) {
-                  if (url.includes(':id') || url.includes(':' + idField)) {
-                      url = this.replaceParams(url, row);
-                  } else {
-                      url = url.endsWith('/') ? `${url}${row[idField]}` : `${url}/${row[idField]}`;
-                  }
-              }
-              const method = this.config.apiMethod === 'POST' ? 'POST' : 'PUT';
-              this.http.request(method, url, { body: payload, headers }).pipe(
-                  finalize(() => this.loading = false)
-              ).subscribe({
-                  next: () => {
-                      row.isEditing = false;
-                      this.originalRowsCache.delete(row[idField]);
-                      this.loadData();
-                  },
-                  error: (err) => {
-                      console.error('[SmartTable] Update Row Error', err);
-                  }
-              });
-          }
-      }
-  }
-
-  // ── Date field helpers ─────────────────────────────────────────────────
-
-  /** Convert any parseable date value to a native Date object for mat-datepicker binding. */
-  private toDateObject(val: any): Date | null {
-      if (!val) return null;
-      if (val instanceof Date) return val;
-      const d = new Date(val);
-      return isNaN(d.getTime()) ? null : d;
-  }
-
-  /** Pre-process all date columns on a row before entering edit mode. */
-  private prepareDateFieldsForEdit(row: any): void {
-      this.config.columns.forEach(col => {
-          if (col.dataType === 'date' && row[col.key]) {
-              row[col.key] = this.toDateObject(row[col.key]);
-          }
-          if (col.subFields) {
-              col.subFields.forEach(sub => {
-                  if (sub.dataType === 'date' && row[sub.key]) {
-                      row[sub.key] = this.toDateObject(row[sub.key]);
-                  }
-              });
-          }
-      });
-  }
-
-  /** Normalize Date objects back to ISO strings before sending payloads. */
-  private normalizeDateFieldsForSave(payload: any): void {
-      this.config.columns.forEach(col => {
-          if (col.dataType === 'date' && payload[col.key] instanceof Date) {
-              payload[col.key] = payload[col.key].toISOString();
-          }
-          if (col.subFields) {
-              col.subFields.forEach(sub => {
-                  if (sub.dataType === 'date' && payload[sub.key] instanceof Date) {
-                      payload[sub.key] = payload[sub.key].toISOString();
-                  }
-              });
-          }
-      });
-  }
-}