valtech-components 2.0.795 → 2.0.797

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

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

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

@@ -1,53 +0,0 @@
-@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);
-}