crdx-components 1.0.0 → 1.0.1

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

@@ -1,223 +0,0 @@
-: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

@@ -1,96 +0,0 @@
-<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

@@ -1,172 +0,0 @@
-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';