valtech-components 2.0.787 → 2.0.795

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

@@ -0,0 +1,399 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { InfiniteListComponent } from './infinite-list.component';
+import { I18nService } from '../../../services/i18n';
+import { SkeletonService } from '../../../services/skeleton/skeleton.service';
+import { LoadParams, LoadResult } from './types';
+
+// ---------------------------------------------------------------------------
+// Mock factories
+// ---------------------------------------------------------------------------
+
+function createMockI18nService() {
+  const langSignal = signal<'es' | 'en'>('es');
+  return {
+    lang: langSignal.asReadonly(),
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        loadMore: 'Cargar más',
+        noMoreItems: 'No hay más elementos',
+        loading: 'Cargando...',
+        loadingItems: 'Cargando elementos...',
+        allItemsLoaded: 'Todos los elementos cargados',
+        error: 'Error',
+        errorOccurred: 'Ocurrió un error',
+        retry: 'Reintentar',
+      };
+      return map[key] ?? key;
+    },
+  };
+}
+
+function createMockSkeletonService() {
+  return {
+    getTemplate: () => null,
+    registerTemplate: () => {},
+    getTemplateNames: () => [],
+  };
+}
+
+const withMockedServices = applicationConfig({
+  providers: [
+    { provide: I18nService, useFactory: createMockI18nService },
+    { provide: SkeletonService, useFactory: createMockSkeletonService },
+  ],
+});
+
+// ---------------------------------------------------------------------------
+// Sample data helpers
+// ---------------------------------------------------------------------------
+
+interface SampleUser {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  avatar: string;
+}
+
+const SAMPLE_USERS: SampleUser[] = Array.from({ length: 15 }, (_, i) => ({
+  id: i + 1,
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: i % 3 === 0 ? 'Admin' : i % 3 === 1 ? 'Editor' : 'Viewer',
+  avatar: `https://i.pravatar.cc/40?img=${i + 1}`,
+}));
+
+function makeLoadFn(allItems: SampleUser[], delay = 800) {
+  return (params: LoadParams): Promise<LoadResult<SampleUser>> =>
+    new Promise(resolve => {
+      setTimeout(() => {
+        const start = params.page * params.pageSize;
+        const end = start + params.pageSize;
+        const items = allItems.slice(start, end);
+        resolve({ items, hasMore: end < allItems.length });
+      }, delay);
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Shared item template component (inline template for Storybook render)
+// ---------------------------------------------------------------------------
+
+@Component({
+  selector: 'story-user-item',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0;"
+    >
+      <img
+        [src]="user.avatar"
+        [alt]="user.name"
+        style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;"
+      />
+      <div style="flex: 1;">
+        <div style="font-weight: 600; font-size: 14px; color: #1a1a1a;">{{ user.name }}</div>
+        <div style="font-size: 12px; color: #888;">{{ user.email }}</div>
+      </div>
+      <span
+        style="font-size: 11px; padding: 2px 8px; border-radius: 12px; background: #f0f4ff; color: #3880ff;"
+        >{{ user.role }}</span
+      >
+    </div>
+  `,
+})
+class StoryUserItemComponent {
+  user: SampleUser = { id: 0, name: '', email: '', role: '', avatar: '' };
+}
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta<InfiniteListComponent> = {
+  title: 'Organisms/InfiniteList',
+  component: InfiniteListComponent,
+  decorators: [
+    withMockedServices,
+    moduleMetadata({
+      imports: [InfiniteListComponent, CommonModule, StoryUserItemComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'InfiniteList configuration object (InfiniteListMetadata)',
+      control: 'object',
+    },
+    loadMore: { action: 'loadMore', description: 'Emitted when more items are requested' },
+    refresh: { action: 'refresh', description: 'Emitted on pull-to-refresh' },
+    stateChange: { action: 'stateChange', description: 'Emitted when loading state changes' },
+    itemsChange: { action: 'itemsChange', description: 'Emitted when the item list changes' },
+    errorOccurred: { action: 'errorOccurred', description: 'Emitted when an error occurs' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-infinite-list
+
+A generic wrapper for lists with infinite scroll. Handles loading, empty, error
+and skeleton states automatically. Supports both Observable and Promise data sources,
+pull-to-refresh, "load more" button mode, and bidirectional scrolling.
+
+### Usage
+
+\`\`\`html
+<val-infinite-list
+  [props]="{
+    dataSource: { loadFn: loadUsers, trackBy: trackByUserId },
+    itemTemplate: userTemplate,
+    pageSize: 20
+  }"
+></val-infinite-list>
+
+<ng-template #userTemplate let-user>
+  <div>{{ user.name }}</div>
+</ng-template>
+\`\`\`
+
+### Features
+
+- Automatic initial load via \`autoLoad: true\`
+- Pull-to-refresh integration via \`enableRefresh\`
+- Skeleton loading states (built-in \`list\` and \`card\` templates)
+- Empty and error states with optional custom templates
+- "Load more" button alternative to auto-scroll trigger
+- Bidirectional load (\`direction: 'both'\`) for chat-style lists
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<InfiniteListComponent>;
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/**
+ * List with static pre-loaded items — no loadFn required.
+ */
+export const Default: Story = {
+  render: () => ({
+    template: `
+      <div style="max-width: 480px; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
+        <val-infinite-list [props]="listProps">
+          <ng-template #itemTpl let-user>
+            <div style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f5f5f5;">
+              <img [src]="user.avatar" [alt]="user.name" style="width: 40px; height: 40px; border-radius: 50%;" />
+              <div>
+                <div style="font-weight: 600; font-size: 14px;">{{ user.name }}</div>
+                <div style="font-size: 12px; color: #888;">{{ user.email }}</div>
+              </div>
+            </div>
+          </ng-template>
+        </val-infinite-list>
+      </div>
+    `,
+    props: {
+      listProps: {
+        dataSource: {
+          items: SAMPLE_USERS.slice(0, 8),
+          trackBy: (_: number, u: SampleUser) => u.id,
+        },
+        itemTemplate: null as any,
+        autoLoad: false,
+        enableRefresh: false,
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays a pre-loaded list of items passed directly via `dataSource.items`.',
+      },
+    },
+  },
+};
+
+/**
+ * List that fetches data via a `loadFn` with simulated async delay.
+ */
+export const WithAsyncLoadFn: Story = {
+  render: () => ({
+    template: `
+      <div style="max-width: 480px; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
+        <p style="padding: 12px 16px; margin: 0; font-size: 13px; color: #666; background: #f9f9f9; border-bottom: 1px solid #eee;">
+          Scroll down to load more (simulated 800 ms delay)
+        </p>
+        <val-infinite-list [props]="listProps">
+          <ng-template #itemTpl let-user>
+            <div style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f5f5f5;">
+              <img [src]="user.avatar" [alt]="user.name" style="width: 40px; height: 40px; border-radius: 50%;" />
+              <div style="flex: 1;">
+                <div style="font-weight: 600; font-size: 14px;">{{ user.name }}</div>
+                <div style="font-size: 12px; color: #888;">{{ user.email }}</div>
+              </div>
+              <span style="font-size: 11px; padding: 2px 8px; border-radius: 12px; background: #f0f4ff; color: #3880ff;">{{ user.role }}</span>
+            </div>
+          </ng-template>
+        </val-infinite-list>
+      </div>
+    `,
+    props: {
+      listProps: {
+        dataSource: {
+          loadFn: makeLoadFn(SAMPLE_USERS),
+          trackBy: (_: number, u: SampleUser) => u.id,
+        },
+        itemTemplate: null as any,
+        pageSize: 5,
+        autoLoad: true,
+        enableRefresh: false,
+        maxHeight: '400px',
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uses a `loadFn` that returns a Promise. Loads 5 items per page with auto-scroll trigger.',
+      },
+    },
+  },
+};
+
+/**
+ * "Load more" button mode — replaces the auto-scroll trigger with an explicit button.
+ */
+export const LoadMoreButton: Story = {
+  render: () => ({
+    template: `
+      <div style="max-width: 480px; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
+        <val-infinite-list [props]="listProps">
+          <ng-template #itemTpl let-user>
+            <div style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f5f5f5;">
+              <img [src]="user.avatar" [alt]="user.name" style="width: 40px; height: 40px; border-radius: 50%;" />
+              <div>
+                <div style="font-weight: 600; font-size: 14px;">{{ user.name }}</div>
+                <div style="font-size: 12px; color: #888;">{{ user.email }}</div>
+              </div>
+            </div>
+          </ng-template>
+        </val-infinite-list>
+      </div>
+    `,
+    props: {
+      listProps: {
+        dataSource: {
+          loadFn: makeLoadFn(SAMPLE_USERS, 600),
+          trackBy: (_: number, u: SampleUser) => u.id,
+        },
+        itemTemplate: null as any,
+        pageSize: 4,
+        autoLoad: true,
+        useLoadMoreButton: true,
+        loadMoreText: 'Cargar más usuarios',
+        noMoreText: 'No hay más usuarios',
+        enableRefresh: false,
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Setting `useLoadMoreButton: true` replaces the infinite-scroll trigger with an explicit button.',
+      },
+    },
+  },
+};
+
+/**
+ * Empty state — data source returns no items.
+ */
+export const EmptyState: Story = {
+  render: () => ({
+    template: `
+      <div style="max-width: 480px; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
+        <val-infinite-list [props]="listProps">
+          <ng-template #itemTpl let-item>
+            <div style="padding: 12px 16px;">{{ item }}</div>
+          </ng-template>
+        </val-infinite-list>
+      </div>
+    `,
+    props: {
+      listProps: {
+        dataSource: {
+          items: [],
+          trackBy: (i: number) => i,
+        },
+        itemTemplate: null as any,
+        autoLoad: false,
+        emptyState: {
+          icon: 'people-outline',
+          title: 'Sin usuarios',
+          message: 'No hay usuarios que mostrar en este momento.',
+        },
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'When `dataSource.items` is empty, the `emptyState` config is rendered.',
+      },
+    },
+  },
+};
+
+/**
+ * Error state — simulates a failed loadFn.
+ */
+export const ErrorState: Story = {
+  render: () => ({
+    template: `
+      <div style="max-width: 480px; border: 1px solid #eee; border-radius: 8px; overflow: hidden;">
+        <val-infinite-list [props]="listProps">
+          <ng-template #itemTpl let-item>
+            <div>{{ item }}</div>
+          </ng-template>
+        </val-infinite-list>
+      </div>
+    `,
+    props: {
+      listProps: {
+        dataSource: {
+          loadFn: () => Promise.reject(new Error('Failed to load data from server')),
+          trackBy: (i: number) => i,
+        },
+        itemTemplate: null as any,
+        autoLoad: true,
+        errorState: {
+          icon: 'cloud-offline-outline',
+          title: 'Error de conexión',
+          message: 'No se pudieron cargar los datos.',
+          showRetry: true,
+          retryText: 'Intentar de nuevo',
+        },
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'When `loadFn` rejects, the `errorState` is shown with an optional retry button.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,235 @@
+import { TemplateRef } from '@angular/core';
+import { Color } from '@ionic/core';
+import { Observable } from 'rxjs';
+import { SkeletonTemplateName, SkeletonTemplateConfig } from '../../../services/skeleton/types';
+import { RefresherMetadata } from '../../molecules/refresher/types';
+
+/**
+ * Direccion de carga de mas items.
+ */
+export type LoadDirection = 'bottom' | 'top' | 'both';
+
+/**
+ * Estado de la lista infinita.
+ */
+export type InfiniteListState = 'idle' | 'loading' | 'error' | 'complete';
+
+/**
+ * Parametros pasados a la funcion de carga.
+ */
+export interface LoadParams {
+  /** Direccion de carga */
+  direction: 'bottom' | 'top';
+  /** Pagina actual (para paginacion basada en offset) */
+  page: number;
+  /** Items por pagina */
+  pageSize: number;
+  /** Ultimo item (para paginacion basada en cursor) */
+  lastItem?: unknown;
+  /** Primer item (para carga top con cursor) */
+  firstItem?: unknown;
+  /** Cursor personalizado (del LoadResult anterior) */
+  cursor?: unknown;
+}
+
+/**
+ * Resultado de la funcion de carga.
+ */
+export interface LoadResult<T> {
+  /** Items cargados */
+  items: T[];
+  /** Si hay mas items disponibles */
+  hasMore: boolean;
+  /** Cursor personalizado para proxima carga (opcional) */
+  cursor?: unknown;
+  /** Actualizacion de conteo total (opcional) */
+  totalCount?: number;
+}
+
+/**
+ * Configuracion del data source.
+ */
+export interface InfiniteListDataSource<T> {
+  /** Items iniciales (opcional si usa loadFn) */
+  items?: T[];
+  /** Funcion para cargar mas items */
+  loadFn?: (params: LoadParams) => Observable<LoadResult<T>> | Promise<LoadResult<T>>;
+  /** Funcion track para ngFor (default: index) */
+  trackBy?: (index: number, item: T) => unknown;
+  /** Conteo total si se conoce (habilita indicador de progreso) */
+  totalCount?: number;
+}
+
+/**
+ * Evento emitido al cargar mas items.
+ */
+export interface LoadMoreEvent {
+  /** Parametros de carga */
+  params: LoadParams;
+  /** Llamar cuando la carga completa */
+  complete: (result: LoadResult<unknown>) => void;
+  /** Llamar cuando la carga falla */
+  error: (error: Error) => void;
+}
+
+/**
+ * Configuracion de estado vacio.
+ */
+export interface InfiniteListEmptyState {
+  /** Nombre del icono */
+  icon?: string;
+  /** Texto del titulo */
+  title?: string;
+  /** Texto del mensaje */
+  message?: string;
+  /** Template personalizado */
+  template?: TemplateRef<void>;
+  // Soporte i18n
+  titleKey?: string;
+  messageKey?: string;
+  contentClass?: string;
+}
+
+/**
+ * Configuracion de estado de error.
+ */
+export interface InfiniteListErrorState {
+  /** Icono de error */
+  icon?: string;
+  /** Titulo del error */
+  title?: string;
+  /** Mensaje del error */
+  message?: string;
+  /** Mostrar boton de reintentar */
+  showRetry?: boolean;
+  /** Texto del boton de reintentar */
+  retryText?: string;
+  /** Template personalizado */
+  template?: TemplateRef<{ error: Error; retry: () => void }>;
+  // Soporte i18n
+  titleKey?: string;
+  messageKey?: string;
+  retryTextKey?: string;
+  contentClass?: string;
+}
+
+/**
+ * Configuracion de skeleton para carga.
+ */
+export interface InfiniteListSkeletonConfig {
+  /** Template de skeleton a usar */
+  template?: SkeletonTemplateName | string;
+  /** Numero de items skeleton a mostrar */
+  count?: number;
+  /** Template personalizado */
+  customTemplate?: TemplateRef<void>;
+  /** Configuracion adicional */
+  config?: SkeletonTemplateConfig;
+}
+
+/**
+ * Contexto para el template de items.
+ */
+export interface InfiniteListItemContext<T> {
+  /** El item actual */
+  $implicit: T;
+  /** Indice del item */
+  index: number;
+  /** Si es el primer item */
+  first: boolean;
+  /** Si es el ultimo item */
+  last: boolean;
+  /** Items totales */
+  count: number;
+}
+
+/**
+ * Metadata para el componente val-infinite-list.
+ */
+export interface InfiniteListMetadata<T = unknown> {
+  /** Configuracion del data source */
+  dataSource: InfiniteListDataSource<T>;
+
+  // === Comportamiento de carga ===
+  /** Direccion de carga */
+  direction?: LoadDirection;
+  /** Items por pagina (default: 20) */
+  pageSize?: number;
+  /** Distancia del borde para activar carga (default: '100px') */
+  threshold?: string;
+  /** Tiempo de debounce para eventos de carga en ms (default: 300) */
+  debounceTime?: number;
+  /** Cargar primera pagina automaticamente al inicializar (default: true) */
+  autoLoad?: boolean;
+
+  // === Content projection ===
+  /** Template para renderizar cada item (requerido) */
+  itemTemplate: TemplateRef<InfiniteListItemContext<T>>;
+  /** Template para el indicador de carga en bottom */
+  loadingTemplate?: TemplateRef<void>;
+  /** Template para el indicador de carga en top */
+  topLoadingTemplate?: TemplateRef<void>;
+
+  // === Estados ===
+  /** Configuracion de estado vacio */
+  emptyState?: InfiniteListEmptyState;
+  /** Configuracion de estado de error */
+  errorState?: InfiniteListErrorState;
+  /** Configuracion de skeleton para carga inicial */
+  skeleton?: InfiniteListSkeletonConfig;
+
+  // === Indicadores de carga ===
+  /** Tipo de spinner */
+  spinnerType?: 'circular' | 'crescent' | 'dots' | 'lines-sharp';
+  /** Color del spinner */
+  color?: Color;
+  /** Usar boton "Cargar mas" en lugar de auto-carga */
+  useLoadMoreButton?: boolean;
+  /** Texto del boton "Cargar mas" */
+  loadMoreText?: string;
+  /** Texto cuando no hay mas items */
+  noMoreText?: string;
+
+  // === Integracion con pull to refresh ===
+  /** Habilitar pull-to-refresh */
+  enableRefresh?: boolean;
+  /** Configuracion del refresher */
+  refreshConfig?: RefresherMetadata;
+
+  // === Estilos ===
+  /** Clase CSS para el contenedor */
+  cssClass?: string;
+  /** Altura maxima (habilita scroll interno) */
+  maxHeight?: string;
+  /** Mostrar divisores entre items */
+  showDividers?: boolean;
+
+  // === Accesibilidad ===
+  /** ARIA label para la lista */
+  ariaLabel?: string;
+  /** ARIA description */
+  ariaDescription?: string;
+
+  /** Identificador unico */
+  token?: string;
+
+  // Soporte i18n
+  loadMoreTextKey?: string;
+  noMoreTextKey?: string;
+  contentClass?: string;
+}
+
+/**
+ * Valores por defecto para infinite list.
+ */
+export const DEFAULT_INFINITE_LIST_METADATA: Partial<InfiniteListMetadata> = {
+  direction: 'bottom',
+  pageSize: 20,
+  threshold: '100px',
+  debounceTime: 300,
+  autoLoad: true,
+  spinnerType: 'crescent',
+  useLoadMoreButton: false,
+  showDividers: false,
+  enableRefresh: false,
+};

package/src/lib/components/organisms/item-list/item-list.component.scss

@@ -0,0 +1,53 @@
+@import '../../styles/mixins.scss';
+
+ion-list {
+  margin: 0 !important;
+  border-radius: pxToRem(24) !important;
+  padding: pxToRem(4) pxToRem(0);
+}
+
+ion-list-header {
+  ion-label {
+    margin-top: pxToRem(16);
+  }
+}
+
+ion-label {
+  font-family: var(--ion-default-font), Arial, sans-serif;
+}
+
+ion-note {
+  font-family: var(--ion-default-font), Arial, sans-serif;
+  font-weight: 400;
+}
+
+ion-button {
+  font-family: var(--ion-default-font), Arial, sans-serif;
+}
+
+.shadowed {
+  @include box-shadow-medium;
+}
+
+.bordered {
+  border: 1px solid;
+}
+
+.unread-indicator {
+  background: var(--ion-color-primary);
+
+  width: pxToRem(10);
+  height: pxToRem(10);
+
+  border-radius: 100%;
+
+  position: absolute;
+
+  inset-inline-start: pxToRem(12);
+  top: pxToRem(12);
+}
+
+.action-spinner {
+  width: pxToRem(50);
+  height: pxToRem(16);
+}