valtech-components 2.0.691 → 2.0.692

package/src/lib/components/organisms/infinite-list/infinite-list.component.ts

@@ -1,602 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  signal,
-  computed,
-  OnInit,
-  OnDestroy,
-  ViewChild,
-  inject,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { I18nService } from '../../../services/i18n';
-import {
-  IonInfiniteScroll,
-  IonInfiniteScrollContent,
-  IonButton,
-  IonSpinner,
-  IonIcon,
-  IonText,
-  IonList,
-  IonItem,
-} from '@ionic/angular/standalone';
-import { firstValueFrom, isObservable } from 'rxjs';
-import {
-  InfiniteListMetadata,
-  InfiniteListState,
-  LoadMoreEvent,
-  LoadParams,
-  LoadResult,
-  DEFAULT_INFINITE_LIST_METADATA,
-} from './types';
-import { RefreshEvent, RefresherMetadata } from '../../molecules/refresher/types';
-import { RefresherComponent } from '../../molecules/refresher/refresher.component';
-import { SkeletonService } from '../../../services/skeleton/skeleton.service';
-import { SkeletonTemplateComponent } from '../../../services/skeleton/types';
-
-/**
- * Componente wrapper para listas con infinite scroll.
- *
- * @example
- * <!-- Uso basico con data source -->
- * <val-infinite-list
- *   [props]="{
- *     dataSource: { loadFn: loadUsers, trackBy: trackByUserId },
- *     itemTemplate: userTemplate,
- *     pageSize: 20,
- *     threshold: '150px'
- *   }"
- * ></val-infinite-list>
- *
- * <ng-template #userTemplate let-user let-index="index">
- *   <val-card [props]="{ title: user.name, subtitle: user.email }">
- *     <p>{{ user.bio }}</p>
- *   </val-card>
- * </ng-template>
- *
- * @example
- * <!-- Con pull-to-refresh y estado vacio personalizado -->
- * <val-infinite-list
- *   [props]="{
- *     dataSource: { loadFn: loadMessages },
- *     itemTemplate: messageTemplate,
- *     direction: 'both',
- *     enableRefresh: true,
- *     emptyState: {
- *       icon: 'chatbubbles-outline',
- *       title: 'Sin mensajes',
- *       message: 'Inicia una conversacion'
- *     },
- *     skeleton: { template: 'list', count: 5 }
- *   }"
- *   (refresh)="onRefresh($event)"
- * ></val-infinite-list>
- */
-@Component({
-  selector: 'val-infinite-list',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonInfiniteScroll,
-    IonInfiniteScrollContent,
-    IonButton,
-    IonSpinner,
-    IonIcon,
-    IonText,
-    IonList,
-    IonItem,
-    RefresherComponent,
-  ],
-  template: `
-    <!-- Pull to refresh wrapper -->
-    @if (mergedProps.enableRefresh) {
-      <val-refresher [props]="refresherConfig" (refresh)="onRefreshTriggered($event)">
-        <ng-container *ngTemplateOutlet="listContent"></ng-container>
-      </val-refresher>
-    } @else {
-      <ng-container *ngTemplateOutlet="listContent"></ng-container>
-    }
-
-    <!-- Main list content template -->
-    <ng-template #listContent>
-      <div
-        class="infinite-list-container"
-        [class]="mergedProps.cssClass"
-        [style.max-height]="mergedProps.maxHeight"
-        [style.overflow-y]="mergedProps.maxHeight ? 'auto' : 'visible'"
-        role="feed"
-        [attr.aria-busy]="state() === 'loading'"
-        [attr.aria-label]="mergedProps.ariaLabel"
-        [attr.aria-description]="mergedProps.ariaDescription"
-      >
-        <!-- Loading state (initial) -->
-        @if (state() === 'loading' && items().length === 0) {
-          <div class="infinite-list-skeleton">
-            @if (mergedProps.skeleton?.customTemplate) {
-              <ng-container *ngTemplateOutlet="mergedProps.skeleton.customTemplate"></ng-container>
-            } @else {
-              <ng-container *ngComponentOutlet="skeletonComponent; inputs: skeletonInputs"></ng-container>
-            }
-          </div>
-        }
-
-        <!-- Empty state -->
-        @if (state() === 'idle' && items().length === 0 && !isInitialLoad()) {
-          <div class="infinite-list-empty">
-            @if (mergedProps.emptyState?.template) {
-              <ng-container *ngTemplateOutlet="mergedProps.emptyState.template"></ng-container>
-            } @else {
-              @if (mergedProps.emptyState?.icon) {
-                <ion-icon [name]="mergedProps.emptyState.icon" size="large"></ion-icon>
-              }
-              @if (mergedProps.emptyState?.title) {
-                <h3>{{ mergedProps.emptyState.title }}</h3>
-              }
-              @if (mergedProps.emptyState?.message) {
-                <p>{{ mergedProps.emptyState.message }}</p>
-              }
-            }
-          </div>
-        }
-
-        <!-- Error state -->
-        @if (state() === 'error') {
-          <div class="infinite-list-error">
-            @if (mergedProps.errorState?.template) {
-              <ng-container
-                *ngTemplateOutlet="mergedProps.errorState.template; context: { error: error(), retry: retry.bind(this) }"
-              ></ng-container>
-            } @else {
-              @if (mergedProps.errorState?.icon) {
-                <ion-icon [name]="mergedProps.errorState.icon" color="danger" size="large"></ion-icon>
-              } @else {
-                <ion-icon name="alert-circle-outline" color="danger" size="large"></ion-icon>
-              }
-              <h3>{{ mergedProps.errorState?.title || i18n.t('error') }}</h3>
-              <p>{{ mergedProps.errorState?.message || error()?.message || i18n.t('errorOccurred') }}</p>
-              @if (mergedProps.errorState?.showRetry !== false) {
-                <ion-button fill="outline" (click)="retry()">
-                  {{ mergedProps.errorState?.retryText || i18n.t('retry') }}
-                </ion-button>
-              }
-            }
-          </div>
-        }
-
-        <!-- Items list -->
-        @if (items().length > 0) {
-          <div class="infinite-list-items" [class.with-dividers]="mergedProps.showDividers">
-            @for (item of items(); track trackByFn($index, item); let i = $index; let first = $first; let last = $last) {
-              <article
-                class="infinite-list-item"
-                [attr.aria-setsize]="mergedProps.dataSource.totalCount || null"
-                [attr.aria-posinset]="i + 1"
-              >
-                <ng-container
-                  *ngTemplateOutlet="
-                    mergedProps.itemTemplate;
-                    context: { $implicit: item, index: i, first: first, last: last, count: items().length }
-                  "
-                ></ng-container>
-              </article>
-            }
-          </div>
-        }
-
-        <!-- Bottom infinite scroll -->
-        @if (shouldShowBottomScroll()) {
-          @if (mergedProps.useLoadMoreButton) {
-            <div class="infinite-list-load-more">
-              @if (hasMoreBottom()) {
-                <ion-button
-                  fill="outline"
-                  [color]="mergedProps.color"
-                  [disabled]="state() === 'loading'"
-                  (click)="loadBottom()"
-                >
-                  @if (state() === 'loading') {
-                    <ion-spinner [name]="mergedProps.spinnerType" slot="start"></ion-spinner>
-                  }
-                  {{ mergedProps.loadMoreText || i18n.t('loadMore') }}
-                </ion-button>
-              } @else {
-                <ion-text color="medium">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
-              }
-            </div>
-          } @else {
-            <ion-infinite-scroll
-              [threshold]="mergedProps.threshold"
-              [disabled]="!hasMoreBottom()"
-              (ionInfinite)="onInfiniteScroll($event)"
-            >
-              <ion-infinite-scroll-content
-                [loadingSpinner]="mergedProps.spinnerType"
-                [loadingText]="state() === 'loading' ? i18n.t('loading') : ''"
-              ></ion-infinite-scroll-content>
-            </ion-infinite-scroll>
-          }
-        }
-
-        <!-- No more items indicator -->
-        @if (!hasMoreBottom() && items().length > 0 && !mergedProps.useLoadMoreButton) {
-          <div class="infinite-list-end">
-            <ion-text color="medium">{{ mergedProps.noMoreText || i18n.t('noMoreItems') }}</ion-text>
-          </div>
-        }
-      </div>
-    </ng-template>
-
-    <!-- Live region for accessibility announcements -->
-    <div class="sr-only" role="status" aria-live="polite" [attr.aria-atomic]="true">
-      {{ statusAnnouncement() }}
-    </div>
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-
-      .infinite-list-container {
-        width: 100%;
-      }
-
-      .infinite-list-skeleton,
-      .infinite-list-empty,
-      .infinite-list-error {
-        padding: 24px 16px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        gap: 12px;
-      }
-
-      .infinite-list-empty ion-icon,
-      .infinite-list-error ion-icon {
-        font-size: 48px;
-        opacity: 0.6;
-      }
-
-      .infinite-list-empty h3,
-      .infinite-list-error h3 {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
-      }
-
-      .infinite-list-empty p,
-      .infinite-list-error p {
-        margin: 0;
-        color: var(--ion-color-medium);
-        font-size: 14px;
-      }
-
-      .infinite-list-items {
-        &.with-dividers .infinite-list-item:not(:last-child) {
-          border-bottom: 1px solid var(--ion-color-light-shade, #d7d8da);
-        }
-      }
-
-      .infinite-list-load-more {
-        display: flex;
-        justify-content: center;
-        padding: 16px;
-      }
-
-      .infinite-list-end {
-        display: flex;
-        justify-content: center;
-        padding: 16px;
-        font-size: 14px;
-      }
-
-      .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
-      }
-    `,
-  ],
-})
-export class InfiniteListComponent<T = unknown> implements OnInit, OnDestroy {
-  private readonly skeletonService = inject(SkeletonService);
-  private readonly cdr = inject(ChangeDetectorRef);
-  protected readonly i18n = inject(I18nService);
-
-  @ViewChild(IonInfiniteScroll) infiniteScroll?: IonInfiniteScroll;
-
-  /** Configuracion del componente */
-  @Input() props!: InfiniteListMetadata<T>;
-
-  // === Events ===
-  @Output() loadMore = new EventEmitter<LoadMoreEvent>();
-  @Output() refresh = new EventEmitter<RefreshEvent>();
-  @Output() stateChange = new EventEmitter<InfiniteListState>();
-  @Output() itemsChange = new EventEmitter<T[]>();
-  @Output() errorOccurred = new EventEmitter<Error>();
-
-  // === Reactive State ===
-  readonly items = signal<T[]>([]);
-  readonly state = signal<InfiniteListState>('idle');
-  readonly hasMoreBottom = signal<boolean>(true);
-  readonly hasMoreTop = signal<boolean>(false);
-  readonly error = signal<Error | null>(null);
-  readonly isInitialLoad = signal<boolean>(true);
-
-  private currentPage = 0;
-  private currentCursor: unknown = null;
-
-  /** Progreso de carga (0-1 si totalCount conocido) */
-  readonly loadProgress = computed(() => {
-    if (!this.props?.dataSource?.totalCount) return null;
-    return this.items().length / this.props.dataSource.totalCount;
-  });
-
-  /** Props combinados con defaults */
-  get mergedProps(): InfiniteListMetadata<T> {
-    return { ...DEFAULT_INFINITE_LIST_METADATA, ...this.props } as InfiniteListMetadata<T>;
-  }
-
-  /** Config del refresher */
-  get refresherConfig(): RefresherMetadata {
-    return this.mergedProps.refreshConfig ?? {};
-  }
-
-  /** Componente de skeleton a usar */
-  get skeletonComponent() {
-    const templateName = this.mergedProps.skeleton?.template || 'list';
-    const template = this.skeletonService.getTemplate(templateName);
-    return template?.component ?? null;
-  }
-
-  /** Inputs para el skeleton */
-  get skeletonInputs(): { config: unknown } {
-    return {
-      config: {
-        count: this.mergedProps.skeleton?.count ?? 3,
-        animated: true,
-        ...this.mergedProps.skeleton?.config,
-      },
-    };
-  }
-
-  /** Anuncio de estado para lectores de pantalla */
-  readonly statusAnnouncement = computed(() => {
-    switch (this.state()) {
-      case 'loading':
-        return this.i18n.t('loadingItems');
-      case 'error':
-        return `${this.i18n.t('error')}: ${this.error()?.message || this.i18n.t('errorOccurred')}`;
-      case 'complete':
-        return this.i18n.t('allItemsLoaded');
-      default:
-        return '';
-    }
-  });
-
-  ngOnInit(): void {
-    // Cargar items iniciales del dataSource si existen
-    if (this.props.dataSource.items?.length) {
-      this.items.set([...this.props.dataSource.items]);
-      this.isInitialLoad.set(false);
-    }
-
-    // Auto-cargar si esta habilitado
-    if (this.mergedProps.autoLoad && !this.items().length) {
-      this.loadInitial();
-    }
-  }
-
-  ngOnDestroy(): void {
-    // Cleanup
-  }
-
-  /** Funcion de tracking para ngFor */
-  trackByFn(index: number, item: T): unknown {
-    if (this.props.dataSource.trackBy) {
-      return this.props.dataSource.trackBy(index, item);
-    }
-    return index;
-  }
-
-  /** Si debe mostrar el scroll inferior */
-  shouldShowBottomScroll(): boolean {
-    const dir = this.mergedProps.direction;
-    return (dir === 'bottom' || dir === 'both') && this.items().length > 0;
-  }
-
-  /** Carga inicial de datos */
-  async loadInitial(): Promise<void> {
-    if (!this.props.dataSource.loadFn) return;
-
-    this.state.set('loading');
-    this.stateChange.emit('loading');
-    this.error.set(null);
-
-    try {
-      const params: LoadParams = {
-        direction: 'bottom',
-        page: 0,
-        pageSize: this.mergedProps.pageSize ?? 20,
-      };
-
-      const result = await this.executeLoad(params);
-
-      this.items.set(result.items as T[]);
-      this.hasMoreBottom.set(result.hasMore);
-      this.currentPage = 1;
-      this.currentCursor = result.cursor;
-      this.isInitialLoad.set(false);
-
-      this.state.set('idle');
-      this.stateChange.emit('idle');
-      this.itemsChange.emit(this.items());
-    } catch (err) {
-      this.handleError(err as Error);
-    }
-  }
-
-  /** Cargar mas items en la parte inferior */
-  async loadBottom(): Promise<void> {
-    if (!this.hasMoreBottom() || this.state() === 'loading') return;
-    if (!this.props.dataSource.loadFn) return;
-
-    this.state.set('loading');
-    this.stateChange.emit('loading');
-
-    try {
-      const params: LoadParams = {
-        direction: 'bottom',
-        page: this.currentPage,
-        pageSize: this.mergedProps.pageSize ?? 20,
-        cursor: this.currentCursor,
-        lastItem: this.items()[this.items().length - 1],
-      };
-
-      const result = await this.executeLoad(params);
-
-      this.items.update((current) => [...current, ...(result.items as T[])]);
-      this.hasMoreBottom.set(result.hasMore);
-      this.currentPage++;
-      this.currentCursor = result.cursor;
-
-      this.state.set(result.hasMore ? 'idle' : 'complete');
-      this.stateChange.emit(result.hasMore ? 'idle' : 'complete');
-      this.itemsChange.emit(this.items());
-    } catch (err) {
-      this.handleError(err as Error);
-    }
-  }
-
-  /** Cargar mas items en la parte superior */
-  async loadTop(): Promise<void> {
-    if (!this.hasMoreTop() || this.state() === 'loading') return;
-    if (!this.props.dataSource.loadFn) return;
-
-    this.state.set('loading');
-
-    try {
-      const params: LoadParams = {
-        direction: 'top',
-        page: 0,
-        pageSize: this.mergedProps.pageSize ?? 20,
-        firstItem: this.items()[0],
-      };
-
-      const result = await this.executeLoad(params);
-
-      this.items.update((current) => [...(result.items as T[]), ...current]);
-      this.hasMoreTop.set(result.hasMore);
-
-      this.state.set('idle');
-      this.itemsChange.emit(this.items());
-    } catch (err) {
-      this.handleError(err as Error);
-    }
-  }
-
-  /** Refresh - recargar desde cero */
-  async refreshList(): Promise<void> {
-    this.currentPage = 0;
-    this.currentCursor = null;
-    this.hasMoreBottom.set(true);
-    this.items.set([]);
-    await this.loadInitial();
-  }
-
-  /** Reintentar despues de error */
-  async retry(): Promise<void> {
-    this.error.set(null);
-    if (this.items().length === 0) {
-      await this.loadInitial();
-    } else {
-      await this.loadBottom();
-    }
-  }
-
-  /** Reset completo */
-  async reset(): Promise<void> {
-    this.items.set([]);
-    this.currentPage = 0;
-    this.currentCursor = null;
-    this.hasMoreBottom.set(true);
-    this.hasMoreTop.set(false);
-    this.error.set(null);
-    this.isInitialLoad.set(true);
-    this.state.set('idle');
-
-    if (this.mergedProps.autoLoad) {
-      await this.loadInitial();
-    }
-  }
-
-  /** Agregar items al inicio */
-  prependItems(newItems: T[]): void {
-    this.items.update((current) => [...newItems, ...current]);
-    this.itemsChange.emit(this.items());
-  }
-
-  /** Agregar items al final */
-  appendItems(newItems: T[]): void {
-    this.items.update((current) => [...current, ...newItems]);
-    this.itemsChange.emit(this.items());
-  }
-
-  /** Actualizar un item por indice */
-  updateItem(index: number, item: T): void {
-    this.items.update((current) => {
-      const updated = [...current];
-      updated[index] = item;
-      return updated;
-    });
-    this.itemsChange.emit(this.items());
-  }
-
-  /** Remover un item por indice */
-  removeItem(index: number): void {
-    this.items.update((current) => current.filter((_, i) => i !== index));
-    this.itemsChange.emit(this.items());
-  }
-
-  /** Handler para evento de infinite scroll */
-  async onInfiniteScroll(event: CustomEvent): Promise<void> {
-    await this.loadBottom();
-    (event.target as HTMLIonInfiniteScrollElement).complete();
-  }
-
-  /** Handler para evento de refresh */
-  async onRefreshTriggered(event: RefreshEvent): Promise<void> {
-    this.refresh.emit(event);
-    await this.refreshList();
-    event.complete();
-  }
-
-  private async executeLoad(params: LoadParams): Promise<LoadResult<unknown>> {
-    const loadFn = this.props.dataSource.loadFn!;
-    const result = loadFn(params);
-
-    if (isObservable(result)) {
-      return await firstValueFrom(result);
-    }
-    return await result;
-  }
-
-  private handleError(err: Error): void {
-    this.error.set(err);
-    this.state.set('error');
-    this.stateChange.emit('error');
-    this.errorOccurred.emit(err);
-    console.error('[InfiniteList] Error loading items:', err);
-  }
-}