valtech-components 2.0.691 → 2.0.692

package/src/lib/components/organisms/data-table/data-table.component.ts

@@ -1,821 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnChanges,
-  SimpleChanges,
-  inject,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import {
-  IonButton,
-  IonIcon,
-  IonCheckbox,
-  IonSpinner,
-  IonSelect,
-  IonSelectOption,
-} from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import {
-  chevronUpOutline,
-  chevronDownOutline,
-  chevronBackOutline,
-  chevronForwardOutline,
-  documentOutline,
-} from 'ionicons/icons';
-import { I18nService } from '../../../services/i18n';
-import {
-  DataTableMetadata,
-  DataTableColumn,
-  DataTableSort,
-  DataTableRowClickEvent,
-  DataTableSelectionChangeEvent,
-  DataTableSortChangeEvent,
-  DataTablePageChangeEvent,
-  DataTableEmptyState,
-  DEFAULT_PAGE_SIZE_OPTIONS,
-} from './types';
-
-addIcons({
-  chevronUpOutline,
-  chevronDownOutline,
-  chevronBackOutline,
-  chevronForwardOutline,
-  documentOutline,
-});
-
-@Component({
-  selector: 'val-data-table',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonButton,
-    IonIcon,
-    IonCheckbox,
-    IonSpinner,
-    IonSelect,
-    IonSelectOption,
-  ],
-  template: `
-    <div
-      class="data-table-container"
-      [class]="props.cssClass"
-      [class.size-small]="props.size === 'small'"
-      [class.size-medium]="props.size === 'medium' || !props.size"
-      [class.size-large]="props.size === 'large'"
-      [class.bordered]="props.bordered"
-      [class.striped]="props.striped"
-      [class.hoverable]="props.hoverable !== false"
-      [class.sticky-header]="props.stickyHeader"
-      [class.responsive-cards]="props.responsiveMode === 'cards'"
-      [class.elevation-none]="props.elevation === 'none'"
-      [class.elevation-low]="props.elevation === 'low'"
-      [class.elevation-high]="props.elevation === 'high'"
-      [class.header-gradient]="props.headerGradient"
-      [class.checkbox-circular]="props.checkboxStyle === 'circular'"
-      [class.row-highlight-border]="props.rowHighlightStyle === 'border-left'"
-      [class.row-highlight-both]="props.rowHighlightStyle === 'both'"
-      [style.--max-height]="props.maxHeight"
-    >
-      <!-- Toolbar slot -->
-      <div class="table-toolbar" #toolbarContainer>
-        <ng-content select="[toolbar]"></ng-content>
-      </div>
-
-      <!-- Loading overlay -->
-      @if (props.loadingState?.loading) {
-        <div class="loading-overlay">
-          <ion-spinner name="crescent"></ion-spinner>
-          @if (props.loadingState?.message) {
-            <span class="loading-message">{{ props.loadingState.message }}</span>
-          }
-        </div>
-      }
-
-      <div class="table-wrapper" [class.is-loading]="props.loadingState?.loading">
-        <table
-          role="grid"
-          [attr.aria-label]="props.ariaLabel"
-        >
-          @if (props.caption) {
-            <caption class="sr-only">{{ props.caption }}</caption>
-          }
-
-          <thead>
-            <tr>
-              <!-- Selection column -->
-              @if (props.showSelectionColumn && props.selection?.mode === 'multiple') {
-                <th class="selection-cell">
-                  <ion-checkbox
-                    [checked]="isAllSelected"
-                    [indeterminate]="isIndeterminate"
-                    (ionChange)="toggleSelectAll($event)"
-                  ></ion-checkbox>
-                </th>
-              }
-              @if (props.showSelectionColumn && props.selection?.mode === 'single') {
-                <th class="selection-cell"></th>
-              }
-
-              <!-- Row number column -->
-              @if (props.showRowNumbers) {
-                <th class="row-number-cell">#</th>
-              }
-
-              <!-- Data columns -->
-              @for (column of visibleColumns; track column.key) {
-                <th
-                  [class]="getColumnClass(column)"
-                  [style.width]="column.width"
-                  [style.min-width]="column.minWidth"
-                  [style.max-width]="column.maxWidth"
-                  [class.sortable]="column.sortable"
-                  [class.sorted]="currentSort?.column === column.key"
-                  (click)="column.sortable ? onSort(column) : null"
-                  [attr.aria-sort]="getAriaSort(column)"
-                >
-                  @if (column.headerTemplate) {
-                    <ng-container *ngTemplateOutlet="column.headerTemplate; context: { column }"></ng-container>
-                  } @else {
-                    <span class="header-content">
-                      {{ column.label }}
-                      @if (column.sortable) {
-                        <span class="sort-icons">
-                          <ion-icon
-                            name="chevron-up-outline"
-                            [class.active]="currentSort?.column === column.key && currentSort?.direction === 'asc'"
-                          ></ion-icon>
-                          <ion-icon
-                            name="chevron-down-outline"
-                            [class.active]="currentSort?.column === column.key && currentSort?.direction === 'desc'"
-                          ></ion-icon>
-                        </span>
-                      }
-                    </span>
-                  }
-                </th>
-              }
-
-              <!-- Actions column -->
-              @if (props.actionsTemplate) {
-                <th class="actions-cell" [style.width]="props.actionsWidth || '100px'">
-                  {{ getActionsLabel() }}
-                </th>
-              }
-            </tr>
-          </thead>
-
-          <tbody>
-            @if (displayedData.length === 0 && !props.loadingState?.loading) {
-              <tr class="empty-row">
-                <td [attr.colspan]="totalColumns">
-                  <div class="empty-state">
-                    @if (emptyState.template) {
-                      <ng-container *ngTemplateOutlet="emptyState.template"></ng-container>
-                    } @else {
-                      @if (emptyState.icon) {
-                        <ion-icon [name]="emptyState.icon" class="empty-icon"></ion-icon>
-                      }
-                      @if (emptyState.title) {
-                        <h4 class="empty-title">{{ emptyState.title }}</h4>
-                      }
-                      @if (emptyState.description) {
-                        <p class="empty-description">{{ emptyState.description }}</p>
-                      }
-                    }
-                  </div>
-                </td>
-              </tr>
-            } @else {
-              @for (row of displayedData; track trackByFn(row); let i = $index) {
-                <tr
-                  [class.selected]="isRowSelected(row)"
-                  [class.clickable]="props.rowClickable"
-                  (click)="onRowClick(row, i, $event)"
-                >
-                  <!-- Selection cell -->
-                  @if (props.showSelectionColumn) {
-                    <td class="selection-cell">
-                      @if (props.selection?.mode === 'multiple') {
-                        <ion-checkbox
-                          [checked]="isRowSelected(row)"
-                          (ionChange)="toggleRowSelection(row, $event)"
-                          (click)="$event.stopPropagation()"
-                        ></ion-checkbox>
-                      } @else if (props.selection?.mode === 'single') {
-                        <input
-                          type="radio"
-                          [checked]="isRowSelected(row)"
-                          (click)="selectSingleRow(row); $event.stopPropagation()"
-                        />
-                      }
-                    </td>
-                  }
-
-                  <!-- Row number -->
-                  @if (props.showRowNumbers) {
-                    <td class="row-number-cell">{{ getRowNumber(i) }}</td>
-                  }
-
-                  <!-- Data cells -->
-                  @for (column of visibleColumns; track column.key) {
-                    <td
-                      [class]="getColumnClass(column)"
-                      [style.text-align]="column.align"
-                    >
-                      @if (column.cellTemplate) {
-                        <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
-                      } @else {
-                        {{ getFormattedValue(row, column) }}
-                      }
-                    </td>
-                  }
-
-                  <!-- Actions cell -->
-                  @if (props.actionsTemplate) {
-                    <td class="actions-cell">
-                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
-                    </td>
-                  }
-                </tr>
-              }
-            }
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Card view (responsive mobile) -->
-      @if (props.responsiveMode === 'cards') {
-        <div class="card-list">
-          @if (displayedData.length === 0 && !props.loadingState?.loading) {
-            <div class="empty-state">
-              @if (emptyState.icon) {
-                <ion-icon [name]="emptyState.icon" class="empty-icon"></ion-icon>
-              }
-              @if (emptyState.title) {
-                <h4 class="empty-title">{{ emptyState.title }}</h4>
-              }
-              @if (emptyState.description) {
-                <p class="empty-description">{{ emptyState.description }}</p>
-              }
-            </div>
-          } @else {
-            @for (row of displayedData; track trackByFn(row); let i = $index) {
-              @if (props.mobileCardTemplate) {
-                <ng-container *ngTemplateOutlet="props.mobileCardTemplate; context: { row, index: i, columns: visibleColumns }"></ng-container>
-              } @else {
-                <div
-                  class="data-card"
-                  [class.selected]="isRowSelected(row)"
-                  [class.clickable]="props.rowClickable"
-                  (click)="onRowClick(row, i, $event)"
-                >
-                  <!-- Card header with selection -->
-                  @if (props.showSelectionColumn) {
-                    <div class="card-header">
-                      <div class="card-selection">
-                        @if (props.selection?.mode === 'multiple') {
-                          <ion-checkbox
-                            [checked]="isRowSelected(row)"
-                            (ionChange)="toggleRowSelection(row, $event)"
-                            (click)="$event.stopPropagation()"
-                          ></ion-checkbox>
-                        } @else if (props.selection?.mode === 'single') {
-                          <input
-                            type="radio"
-                            [checked]="isRowSelected(row)"
-                            (click)="selectSingleRow(row); $event.stopPropagation()"
-                          />
-                        }
-                      </div>
-                      @if (props.showRowNumbers) {
-                        <span class="row-number">{{ getRowNumber(i) }}</span>
-                      }
-                    </div>
-                  }
-
-                  <!-- Card body with fields -->
-                  <div class="card-body">
-                    @for (column of visibleColumns; track column.key) {
-                      <div class="card-field">
-                        <span class="card-field__label">{{ column.label }}</span>
-                        <span class="card-field__value">
-                          @if (column.cellTemplate) {
-                            <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
-                          } @else {
-                            {{ getFormattedValue(row, column) }}
-                          }
-                        </span>
-                      </div>
-                    }
-                  </div>
-
-                  <!-- Card actions -->
-                  @if (props.actionsTemplate) {
-                    <div class="card-actions">
-                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
-                    </div>
-                  }
-                </div>
-              }
-            }
-          }
-        </div>
-      }
-
-      <!-- Pagination -->
-      @if (props.showPagination && props.pagination) {
-        <div class="pagination-container">
-          <div class="pagination-info">
-            <span>
-              {{ getPaginationInfoText() }}
-            </span>
-
-            @if (pageSizeOptions.length > 1) {
-              <ion-select
-                [value]="props.pagination.pageSize"
-                (ionChange)="onPageSizeChange($event)"
-                interface="popover"
-                class="page-size-select"
-              >
-                @for (size of pageSizeOptions; track size) {
-                  <ion-select-option [value]="size">{{ getPerPageText(size) }}</ion-select-option>
-                }
-              </ion-select>
-            }
-          </div>
-
-          <div class="pagination-controls">
-            <ion-button
-              fill="clear"
-              size="small"
-              [disabled]="props.pagination.page === 0"
-              (click)="goToPage(0)"
-              [attr.aria-label]="getFirstPageLabel()"
-            >
-              <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
-              <ion-icon slot="icon-only" name="chevron-back-outline" style="margin-left: -12px"></ion-icon>
-            </ion-button>
-
-            <ion-button
-              fill="clear"
-              size="small"
-              [disabled]="props.pagination.page === 0"
-              (click)="goToPage(props.pagination.page - 1)"
-              [attr.aria-label]="getPreviousPageLabel()"
-            >
-              <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
-            </ion-button>
-
-            <span class="page-indicator">
-              {{ props.pagination.page + 1 }} / {{ totalPages }}
-            </span>
-
-            <ion-button
-              fill="clear"
-              size="small"
-              [disabled]="props.pagination.page >= totalPages - 1"
-              (click)="goToPage(props.pagination.page + 1)"
-              [attr.aria-label]="getNextPageLabel()"
-            >
-              <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
-            </ion-button>
-
-            <ion-button
-              fill="clear"
-              size="small"
-              [disabled]="props.pagination.page >= totalPages - 1"
-              (click)="goToPage(totalPages - 1)"
-              [attr.aria-label]="getLastPageLabel()"
-            >
-              <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
-              <ion-icon slot="icon-only" name="chevron-forward-outline" style="margin-left: -12px"></ion-icon>
-            </ion-button>
-          </div>
-        </div>
-      }
-    </div>
-  `,
-  styleUrls: ['./data-table.component.scss'],
-})
-/**
- * val-data-table
- *
- * A flexible data table component for displaying tabular data with sorting,
- * pagination, and selection features.
- *
- * @example Basic usage
- * ```html
- * <val-data-table
- *   [props]="{
- *     columns: [
- *       { key: 'name', label: 'Nombre', sortable: true },
- *       { key: 'email', label: 'Email' },
- *       { key: 'status', label: 'Estado' }
- *     ],
- *     data: users
- *   }"
- * ></val-data-table>
- * ```
- *
- * @example With pagination and selection
- * ```html
- * <val-data-table
- *   [props]="{
- *     columns: columns,
- *     data: participants,
- *     showPagination: true,
- *     pagination: {
- *       page: 0,
- *       pageSize: 25,
- *       total: totalCount
- *     },
- *     selection: {
- *       mode: 'multiple',
- *       selected: selectedParticipants
- *     },
- *     showSelectionColumn: true
- *   }"
- *   (selectionChange)="onSelectionChange($event)"
- *   (pageChange)="onPageChange($event)"
- * ></val-data-table>
- * ```
- */
-export class DataTableComponent<T = any> implements OnInit, OnChanges {
-  @Input() props: DataTableMetadata<T>;
-
-  @Output() rowClick = new EventEmitter<DataTableRowClickEvent<T>>();
-  @Output() selectionChange = new EventEmitter<DataTableSelectionChangeEvent<T>>();
-  @Output() sortChange = new EventEmitter<DataTableSortChangeEvent>();
-  @Output() pageChange = new EventEmitter<DataTablePageChangeEvent>();
-
-  displayedData: T[] = [];
-  currentSort: DataTableSort | null = null;
-  selectedRows: Set<any> = new Set();
-
-  /** Cached visible columns for performance */
-  private _visibleColumns: DataTableColumn<T>[] = [];
-
-  private cdr = inject(ChangeDetectorRef);
-  private i18n = inject(I18nService);
-
-  ngOnInit(): void {
-    this.initializeState();
-    this.updateDisplayedData();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['props']) {
-      this.initializeState();
-      this.updateDisplayedData();
-    }
-  }
-
-  private initializeState(): void {
-    // Cache visible columns for performance
-    this._visibleColumns = this.props.columns.filter(c => c.visible !== false);
-
-    // Initialize sort
-    this.currentSort = this.props.sort || null;
-
-    // Initialize selection
-    if (this.props.selection?.selected) {
-      this.selectedRows = new Set(
-        this.props.selection.selected.map(row => this.getRowId(row))
-      );
-    }
-  }
-
-  private updateDisplayedData(): void {
-    let data = [...this.props.data];
-
-    // Apply client-side sorting
-    if (this.props.clientSort && this.currentSort) {
-      data = this.sortData(data);
-    }
-
-    // Apply client-side pagination
-    if (this.props.clientPagination && this.props.pagination) {
-      const start = this.props.pagination.page * this.props.pagination.pageSize;
-      const end = start + this.props.pagination.pageSize;
-      data = data.slice(start, end);
-    }
-
-    this.displayedData = data;
-    this.cdr.markForCheck();
-  }
-
-  private sortData(data: T[]): T[] {
-    if (!this.currentSort) return data;
-
-    const column = this.props.columns.find(c => c.key === this.currentSort?.column);
-    if (!column) return data;
-
-    return [...data].sort((a, b) => {
-      if (column.sortFn) {
-        const result = column.sortFn(a, b);
-        return this.currentSort?.direction === 'desc' ? -result : result;
-      }
-
-      const valueA = this.getCellValue(a, column);
-      const valueB = this.getCellValue(b, column);
-
-      let comparison = 0;
-      if (valueA == null && valueB == null) comparison = 0;
-      else if (valueA == null) comparison = 1;
-      else if (valueB == null) comparison = -1;
-      else if (typeof valueA === 'string' && typeof valueB === 'string') {
-        comparison = valueA.localeCompare(valueB);
-      } else {
-        comparison = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
-      }
-
-      return this.currentSort?.direction === 'desc' ? -comparison : comparison;
-    });
-  }
-
-  get visibleColumns(): DataTableColumn<T>[] {
-    return this._visibleColumns;
-  }
-
-  get totalColumns(): number {
-    let count = this.visibleColumns.length;
-    if (this.props.showSelectionColumn) count++;
-    if (this.props.showRowNumbers) count++;
-    if (this.props.actionsTemplate) count++;
-    return count;
-  }
-
-  get emptyState(): DataTableEmptyState {
-    const defaultEmptyState: DataTableEmptyState = {
-      icon: 'document-outline',
-      title: this.i18n.t('noData'),
-      description: this.i18n.t('noRecordsFound'),
-    };
-    return this.props.emptyState || defaultEmptyState;
-  }
-
-  /** Get actions column label */
-  getActionsLabel(): string {
-    return this.props.actionsLabel || this.i18n.t('actions');
-  }
-
-  /** Get pagination info text */
-  getPaginationInfoText(): string {
-    return `${this.i18n.t('showing')} ${this.paginationStart}-${this.paginationEnd} ${this.i18n.t('of')} ${this.props.pagination?.total}`;
-  }
-
-  /** Get per page text */
-  getPerPageText(size: number): string {
-    return `${size} ${this.i18n.t('perPage')}`;
-  }
-
-  /** Get first page aria label */
-  getFirstPageLabel(): string {
-    return this.i18n.t('firstPage');
-  }
-
-  /** Get previous page aria label */
-  getPreviousPageLabel(): string {
-    return this.i18n.t('previousPage');
-  }
-
-  /** Get next page aria label */
-  getNextPageLabel(): string {
-    return this.i18n.t('nextPage');
-  }
-
-  /** Get last page aria label */
-  getLastPageLabel(): string {
-    return this.i18n.t('lastPage');
-  }
-
-  get pageSizeOptions(): number[] {
-    return this.props.pagination?.pageSizeOptions || DEFAULT_PAGE_SIZE_OPTIONS;
-  }
-
-  get totalPages(): number {
-    if (!this.props.pagination) return 1;
-    return Math.ceil(this.props.pagination.total / this.props.pagination.pageSize);
-  }
-
-  get paginationStart(): number {
-    if (!this.props.pagination) return 1;
-    return this.props.pagination.page * this.props.pagination.pageSize + 1;
-  }
-
-  get paginationEnd(): number {
-    if (!this.props.pagination) return this.displayedData.length;
-    return Math.min(
-      (this.props.pagination.page + 1) * this.props.pagination.pageSize,
-      this.props.pagination.total
-    );
-  }
-
-  get isAllSelected(): boolean {
-    if (this.displayedData.length === 0) return false;
-    return this.displayedData.every(row => this.isRowSelected(row));
-  }
-
-  get isIndeterminate(): boolean {
-    const selectedCount = this.displayedData.filter(row => this.isRowSelected(row)).length;
-    return selectedCount > 0 && selectedCount < this.displayedData.length;
-  }
-
-  getCellValue(row: T, column: DataTableColumn<T>): any {
-    const field = column.field || column.key;
-    return field.split('.').reduce((obj: any, key) => obj?.[key], row);
-  }
-
-  getFormattedValue(row: T, column: DataTableColumn<T>): string {
-    const value = this.getCellValue(row, column);
-    if (column.format) {
-      return column.format(value, row);
-    }
-    return value ?? '';
-  }
-
-  getColumnClass(column: DataTableColumn<T>): string {
-    const classes = [column.cssClass || ''];
-    if (column.sticky) {
-      classes.push(`sticky-${column.sticky}`);
-    }
-    if (column.align) {
-      classes.push(`align-${column.align}`);
-    }
-    return classes.filter(Boolean).join(' ');
-  }
-
-  getAriaSort(column: DataTableColumn<T>): string | null {
-    if (!column.sortable) return null;
-    if (this.currentSort?.column !== column.key) return 'none';
-    return this.currentSort.direction === 'asc' ? 'ascending' : 'descending';
-  }
-
-  getRowNumber(index: number): number {
-    const start = this.props.rowNumberStart ?? 1;
-    if (this.props.pagination) {
-      return start + this.props.pagination.page * this.props.pagination.pageSize + index;
-    }
-    return start + index;
-  }
-
-  getRowId(row: T): any {
-    if (this.props.selection?.trackBy) {
-      return this.props.selection.trackBy(row);
-    }
-    return row;
-  }
-
-  trackByFn(row: T): any {
-    return this.getRowId(row);
-  }
-
-  isRowSelected(row: T): boolean {
-    return this.selectedRows.has(this.getRowId(row));
-  }
-
-  onSort(column: DataTableColumn<T>): void {
-    if (!column.sortable) return;
-
-    let direction: 'asc' | 'desc' | null = 'asc';
-
-    if (this.currentSort?.column === column.key) {
-      if (this.currentSort.direction === 'asc') {
-        direction = 'desc';
-      } else {
-        direction = null;
-      }
-    }
-
-    if (direction) {
-      this.currentSort = { column: column.key, direction };
-    } else {
-      this.currentSort = null;
-    }
-
-    this.sortChange.emit({
-      column: column.key,
-      direction,
-    });
-
-    if (this.props.clientSort) {
-      this.updateDisplayedData();
-    }
-  }
-
-  onRowClick(row: T, index: number, event: MouseEvent): void {
-    if (!this.props.rowClickable) return;
-
-    this.rowClick.emit({
-      row,
-      index,
-      event,
-    });
-  }
-
-  toggleSelectAll(event: CustomEvent): void {
-    const checked = event.detail.checked;
-
-    if (checked) {
-      this.displayedData.forEach(row => {
-        this.selectedRows.add(this.getRowId(row));
-      });
-    } else {
-      this.displayedData.forEach(row => {
-        this.selectedRows.delete(this.getRowId(row));
-      });
-    }
-
-    this.emitSelectionChange(checked ? 'selectAll' : 'deselectAll');
-  }
-
-  toggleRowSelection(row: T, event: CustomEvent): void {
-    const rowId = this.getRowId(row);
-    const checked = event.detail.checked;
-
-    if (checked) {
-      this.selectedRows.add(rowId);
-    } else {
-      this.selectedRows.delete(rowId);
-    }
-
-    this.emitSelectionChange(checked ? 'select' : 'deselect', row);
-  }
-
-  selectSingleRow(row: T): void {
-    const rowId = this.getRowId(row);
-    const wasSelected = this.selectedRows.has(rowId);
-
-    this.selectedRows.clear();
-
-    if (!wasSelected) {
-      this.selectedRows.add(rowId);
-      this.emitSelectionChange('select', row);
-    } else {
-      this.emitSelectionChange('deselect', row);
-    }
-  }
-
-  private emitSelectionChange(
-    action: 'select' | 'deselect' | 'selectAll' | 'deselectAll',
-    changedRow?: T
-  ): void {
-    const selected = this.props.data.filter(row => this.isRowSelected(row));
-
-    this.selectionChange.emit({
-      selected,
-      changedRow,
-      action,
-    });
-  }
-
-  goToPage(page: number): void {
-    if (!this.props.pagination) return;
-
-    const previousPage = this.props.pagination.page;
-    const maxPage = this.totalPages - 1;
-    const newPage = Math.max(0, Math.min(page, maxPage));
-
-    this.pageChange.emit({
-      page: newPage,
-      pageSize: this.props.pagination.pageSize,
-      previousPage,
-    });
-
-    if (this.props.clientPagination) {
-      this.props.pagination.page = newPage;
-      this.updateDisplayedData();
-    }
-  }
-
-  onPageSizeChange(event: CustomEvent): void {
-    if (!this.props.pagination) return;
-
-    const newPageSize = event.detail.value;
-    const previousPage = this.props.pagination.page;
-
-    // Recalculate page to keep first visible item
-    const firstItem = previousPage * this.props.pagination.pageSize;
-    const newPage = Math.floor(firstItem / newPageSize);
-
-    this.pageChange.emit({
-      page: newPage,
-      pageSize: newPageSize,
-      previousPage,
-    });
-
-    if (this.props.clientPagination) {
-      this.props.pagination.pageSize = newPageSize;
-      this.props.pagination.page = newPage;
-      this.updateDisplayedData();
-    }
-  }
-}