crdx-components 1.0.0

package/src/lib/components/shared-table/shared-table.component.css

@@ -0,0 +1,223 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+}
+
+.shared-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+/* Paginador en el flujo (como en el ejemplo de Material): el scroll termina justo donde empieza el paginador */
+.shared-table .mat-mdc-paginator {
+  flex-shrink: 0;
+}
+
+/* Selector de número de páginas: contenedor al tamaño del contenido para que el gap sea 2.12rem */
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select {
+  width: fit-content !important;
+  min-width: 0;
+  max-width: fit-content !important;
+  /* No crecer en el flex del paginador */
+  flex: 0 0 auto !important;
+  --mat-paginator-page-size-select-width: 100%;
+  --mat-paginator-page-size-select-touch-target-height: 100%;
+}
+
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field {
+  position: relative;
+  width: fit-content !important;
+  min-width: 0;
+  max-width: fit-content !important;
+}
+
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-subscript-wrapper,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value {
+  border: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+/* Solo selector de número de páginas: padding 0 en wrappers del text-field (Material) */
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-text-field-wrapper,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field--outlined {
+  padding: 0 !important;
+}
+
+/* Contenedor del trigger como contexto de posicionamiento para que el touch target = mismo tamaño */
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex {
+  position: relative;
+  width: fit-content !important;
+  min-width: 0;
+  max-width: fit-content !important;
+}
+
+/* Evitar ancho fijo 180px del infix (Material) */
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix {
+  width: auto !important;
+  min-width: 0 !important;
+  flex: 0 0 auto !important;
+}
+
+/* Touch target solo del tamaño del selector (evitar 180px): topes máximos */
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-paginator-touch-target {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 5rem !important;
+  max-height: 1.625rem !important;
+  box-sizing: border-box !important;
+}
+
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value {
+  margin-right: 0 !important;
+}
+
+/* Trigger: min 2.0625rem x 1.625rem, se ensancha si el número es más largo */
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger {
+  display: flex !important;
+  min-width: 2.0625rem !important;
+  width: max-content !important;
+  height: 1.625rem !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  flex-shrink: 0;
+  gap: 0 !important;
+  border: none !important;
+  border-bottom: 0.0625rem solid var(--pallete-scheme-surface-outline-variant, #C3C7C9) !important;
+  box-shadow: none !important;
+  align-self: stretch;
+}
+
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-arrow-wrapper {
+  margin-left: 0 !important;
+}
+
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__leading,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__notch,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__trailing,
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline .mat-mdc-notch-piece {
+  border: none !important;
+  border-width: 0 !important;
+}
+
+:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-line-ripple {
+  display: none !important;
+}
+
+/* Tabla: ancho por contenido para que aparezca scroll horizontal con muchas columnas o pantalla estrecha */
+.shared-table__mat-table {
+  width: max-content;
+  min-width: 100%;
+  table-layout: auto;
+}
+
+.shared-table__caption {
+  margin-bottom: 16px;
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+
+.shared-table__empty {
+  text-align: center;
+  padding: 24px 16px;
+  color: #6b7280;
+}
+
+/* Contenedor: solo esquinas superiores redondeadas, sin borde inferior */
+.shared-table__container {
+  --border-color: #E9E9E9;
+  --table-radius: 0.25rem;
+  flex: 1 1 0;
+  flex-grow: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--table-radius) var(--table-radius) 0 0;
+}
+
+/* Sin paginador: cerrar "card" de tabla con borde y radio inferior */
+.shared-table__container.shared-table__container--no-paginator {
+  border-radius: var(--table-radius) !important;
+  border-bottom: 1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9) !important;
+}
+
+.shared-table__container.shared-table__container--no-paginator .shared-table__body-wrap {
+  border-radius: 0 0 var(--table-radius) var(--table-radius);
+}
+
+/* Header: esquinas superiores redondeadas */
+.shared-table__header-wrap {
+  flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  border-radius: var(--table-radius) var(--table-radius) 0 0;
+}
+
+.shared-table__header-wrap::-webkit-scrollbar {
+  display: none;
+}
+
+/* Cuerpo: sin radio en esquinas inferiores */
+.shared-table__body-wrap {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: auto;
+  position: relative;
+}
+
+.shared-table__loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.92);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+::ng-deep .shared-table__loading-spinner,
+::ng-deep .shared-table__loading-spinner .mat-mdc-circular-progress,
+::ng-deep .shared-table__loading-spinner .mdc-circular-progress,
+::ng-deep .shared-table__loading-spinner circle {
+  position: relative;
+  z-index: 10000;
+  color: #d32f2f !important;
+  stroke: #d32f2f !important;
+  stroke-opacity: 1 !important;
+  opacity: 1 !important;
+}
+
+::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indicator,
+::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-outer-circle,
+::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-inner-circle {
+  stroke: #d32f2f !important;
+  stroke-width: 6 !important;
+}
+
+::ng-deep .shared-table__loading-spinner {
+  --mdc-circular-progress-active-indicator-color: #d32f2f !important;
+  --mdc-circular-progress-track-color: rgba(0, 0, 0, 0.1) !important;
+}

package/src/lib/components/shared-table/shared-table.component.html

@@ -0,0 +1,96 @@
+<figure class="shared-table">
+  <div
+    class="shared-table__container mdc-data-table"
+    [class.shared-table__container--no-paginator]="!shouldRenderPaginator()"
+  >
+    <!-- Header: scroll sincronizado con el cuerpo, sin barra visible -->
+    <div class="shared-table__header-wrap" #headerWrap>
+      <table
+        mat-table
+        [dataSource]="dataSource"
+        class="shared-table__mat-table shared-table__mat-table--header"
+      >
+        @for (column of columns(); track columnTrackBy($index, column)) {
+          <ng-container [matColumnDef]="columnId(column)">
+            <th
+              mat-header-cell
+              *matHeaderCellDef
+              [style.text-align]="resolveTextAlign(column)"
+              [style.width]="resolveWidth(column)"
+            >
+              {{ column.header }}
+            </th>
+          </ng-container>
+        }
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      </table>
+    </div>
+    <!-- Cuerpo: scroll horizontal aquí (barra debajo del header) -->
+    <div
+      class="shared-table__body-wrap"
+      [class.shared-table__body-wrap--loading]="loading()"
+      #bodyWrap
+    >
+      <table
+        mat-table
+        [dataSource]="dataSource"
+        class="shared-table__mat-table shared-table__mat-table--body"
+      >
+        @for (column of columns(); track columnTrackBy($index, column)) {
+          <ng-container [matColumnDef]="columnId(column)">
+            <td
+              mat-cell
+              *matCellDef="let row; let i = index"
+              [style.text-align]="resolveTextAlign(column)"
+              [style.width]="resolveWidth(column)"
+            >
+              @if (cellTemplates[column.key]) {
+                <ng-container
+                  [ngTemplateOutlet]="cellTemplates[column.key]"
+                  [ngTemplateOutletContext]="{
+                    $implicit: row,
+                    index: i,
+                    column: column,
+                  }"
+                ></ng-container>
+              } @else {
+                {{ getCellValue(column, row, i) }}
+              }
+            </td>
+          </ng-container>
+        }
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        <tr mat-no-data-row>
+          <td
+            class="shared-table__empty"
+            [attr.colspan]="displayedColumns.length || 1"
+          >
+
+          <span>loading: {{ loading() }}</span>
+            @if (!loading()) {
+              {{ emptyState() }}
+            }
+          </td>
+        </tr>
+      </table>
+      @if (loading()) {
+        <div class="shared-table__loading-overlay">
+          <mat-spinner
+            class="shared-table__loading-spinner"
+            [diameter]="48"
+            [strokeWidth]="4"
+          ></mat-spinner>
+        </div>
+      }
+    </div>
+  </div>
+
+  @if (shouldRenderPaginator()) {
+    <mat-paginator
+      class="shared-table__paginator"
+      [length]="totalElements() ?? data().length"
+      [pageSize]="pageSize()"
+      [pageSizeOptions]="pageSizeOptions()"
+    ></mat-paginator>
+  }
+</figure>

package/src/lib/components/shared-table/shared-table.component.ts

@@ -0,0 +1,172 @@
+import { CommonModule } from '@angular/common';
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  DestroyRef,
+  ElementRef,
+  EventEmitter,
+  effect,
+  input,
+  OnDestroy,
+  Output,
+  QueryList,
+  ViewChild,
+  inject,
+} from '@angular/core';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SharedTableCellTemplateDirective } from './shared-table-cell-template.directive';
+
+export interface TablePageEvent {
+  pageIndex: number;
+  pageSize: number;
+}
+
+export interface SharedTableColumn<T extends Record<string, unknown> = Record<string, unknown>> {
+  key:  string;
+  header: string;
+  align?: 'start' | 'center' | 'end';
+  width?: string;
+  cell?: (row: T, index: number) => unknown;
+}
+
+@Component({
+  selector: 'lib-shared-table, shared-table',
+  standalone: true,
+  imports: [CommonModule, MatTableModule, MatPaginatorModule, MatProgressSpinnerModule],
+  templateUrl: './shared-table.component.html',
+  styleUrl: './shared-table.component.css'
+})
+export class SharedTableComponent<T extends Record<string, unknown> = Record<string, unknown>>
+  implements AfterContentInit, AfterViewInit, OnDestroy {
+  readonly columns = input.required<ReadonlyArray<SharedTableColumn<T>>>();
+  readonly data = input.required<ReadonlyArray<T>>();
+  readonly caption = input<string | undefined>();
+  readonly emptyState = input('Sin registros disponibles');
+  readonly loading = input(false);
+  readonly showPaginator = input(true);
+  readonly pageSize = input(10);
+  readonly pageSizeOptions = input<ReadonlyArray<number>>([5, 10, 20]);
+  readonly enableRowClick = input(false);
+  readonly totalElements = input<number | undefined>();
+  @Output() rowClick = new EventEmitter<T>();
+  @Output() pageChange = new EventEmitter<TablePageEvent>();
+  @ContentChildren(SharedTableCellTemplateDirective, { descendants: true })
+  cellTemplatesQuery!: QueryList<SharedTableCellTemplateDirective>;
+  cellTemplates: Record<string, SharedTableCellTemplateDirective['template']> = {};
+  private removeScrollSync: (() => void) | null = null;
+  private _paginator?: MatPaginator;
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly dataSource = new MatTableDataSource<T>();
+  displayedColumns: string[] = [];
+
+  constructor() {
+    effect(() => {
+      const columns = this.columns();
+      this.displayedColumns = columns.map((column) => String(column.key));
+    });
+
+    effect(() => {
+      const rows = this.data();
+      this.dataSource.data = rows.slice();
+    });
+  }
+
+  @ViewChild(MatPaginator) set paginator(paginator: MatPaginator | undefined) {
+    this._paginator = paginator;
+    // En modo server-side (totalElements definido) NO conectamos al dataSource
+    // para que Material no intente paginar los datos localmente
+    if (this.totalElements() === undefined) {
+      this.dataSource.paginator = paginator ?? null;
+    }
+  }
+
+  @ViewChild('headerWrap') headerWrapRef?: ElementRef<HTMLDivElement>;
+  @ViewChild('bodyWrap') bodyWrapRef?: ElementRef<HTMLDivElement>;
+
+  ngAfterViewInit(): void {
+    const header = this.headerWrapRef?.nativeElement;
+    const body = this.bodyWrapRef?.nativeElement;
+    if (header && body) {
+      const onScroll = () => { header.scrollLeft = body.scrollLeft; };
+      body.addEventListener('scroll', onScroll);
+      this.removeScrollSync = () => body.removeEventListener('scroll', onScroll);
+    }
+
+    // Modo server-side: escuchar eventos del paginator y emitirlos hacia arriba
+    if (this._paginator && this.totalElements() !== undefined) {
+      this._paginator.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event: PageEvent) => {
+        this.pageChange.emit({ pageIndex: event.pageIndex, pageSize: event.pageSize });
+      });
+    }
+  }
+
+  ngAfterContentInit(): void {
+    const rebuildTemplateMap = () => {
+      const map: Record<string, SharedTableCellTemplateDirective['template']> = {};
+      this.cellTemplatesQuery.forEach((entry) => {
+        if (entry.key) {
+          map[entry.key] = entry.template;
+        }
+      });
+      this.cellTemplates = map;
+    };
+
+    rebuildTemplateMap();
+    this.cellTemplatesQuery.changes
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => rebuildTemplateMap());
+  }
+
+  ngOnDestroy(): void {
+    this.removeScrollSync?.();
+    this.removeScrollSync = null;
+  }
+
+  getCellValue(column: SharedTableColumn<T>, row: T, index: number): unknown {
+    if (column.cell) {
+      return column.cell(row, index);
+    }
+
+    const key = column.key as keyof T;
+    const fallbackKey = column.key as keyof typeof row;
+    return (row?.[key] ?? row?.[fallbackKey]) ?? '';
+  }
+
+  columnId(column: SharedTableColumn<T>): string {
+    return String(column.key);
+  }
+
+  columnTrackBy = (_: number, column: SharedTableColumn<T>) => column.key;
+
+  resolveTextAlign(column: SharedTableColumn<T>): 'start' | 'center' | 'end' {
+    return column.align ?? 'start';
+  }
+
+  resolveWidth(column: SharedTableColumn<T>): string | null {
+    return column.width ?? null;
+  }
+
+  shouldRenderPaginator(): boolean {
+    return this.showPaginator();
+  }
+
+  onRowClick(event: MouseEvent, row: T): void {
+    if (!this.enableRowClick()) return;
+
+    const el = event.target as HTMLElement | null;
+    // Evita abrir el side modal si el click fue sobre un elemento interactivo (acciones dentro de la fila)
+    if (el?.closest('button, a, input, textarea, select, [role="button"], mat-icon, mat-slide-toggle, mat-checkbox')) {
+      return;
+    }
+
+    this.rowClick.emit(row);
+  }
+}
+
+export { SharedTableCellTemplateDirective } from './shared-table-cell-template.directive';