valtech-components 2.0.691 → 2.0.692

package/src/lib/services/navigation/navigation.service.ts

@@ -1,255 +0,0 @@
-import { Location } from '@angular/common';
-import { Injectable, computed, inject, signal } from '@angular/core';
-import { NavigationExtras, Router } from '@angular/router';
-import { InAppBrowserService } from '../in-app-browser.service';
-import { I18nService } from '../i18n/i18n.service';
-import {
-  HeaderConfig,
-  BackHeaderConfig,
-  HomeHeaderConfig,
-  CustomHeaderConfig,
-  DEFAULT_HOME_HEADER,
-} from './types';
-import { ToolbarAction } from '../../components/types';
-
-/**
- * NavigationService
- *
- * Servicio centralizado para navegacion y configuracion de headers.
- * Permite a las paginas declarar su tipo de header de forma simple.
- *
- * @example
- * // En una pagina con header de tipo "back"
- * export class ProfilePage {
- *   private nav = inject(NavigationService);
- *
- *   constructor() {
- *     this.nav.setBackHeader('pageTitle', 'Settings.Profile');
- *   }
- * }
- *
- * @example
- * // En el layout principal (tabs.page.ts)
- * export class TabsPage {
- *   private nav = inject(NavigationService);
- *
- *   headerConfig = this.nav.headerConfig;
- *   headerTitle = this.nav.headerTitle;
- * }
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class NavigationService {
-  private i18n = inject(I18nService);
-
-  // ============================================
-  // Header State (Signals)
-  // ============================================
-
-  private readonly _headerConfig = signal<HeaderConfig>(DEFAULT_HOME_HEADER);
-
-  /**
-   * Configuracion actual del header (readonly signal)
-   */
-  readonly headerConfig = this._headerConfig.asReadonly();
-
-  /**
-   * Titulo del header traducido y reactivo al cambio de idioma.
-   * Solo aplica para headers tipo 'back' o 'custom' con titleKey.
-   */
-  readonly headerTitle = computed(() => {
-    const config = this._headerConfig();
-    this.i18n.lang(); // Dependencia reactiva al idioma
-
-    if (config.type === 'back' && config.titleKey) {
-      return this.translateKey(config.titleKey);
-    }
-
-    if (config.type === 'custom') {
-      if (config.titleKey) {
-        return this.translateKey(config.titleKey);
-      }
-      return config.title || '';
-    }
-
-    return '';
-  });
-
-  /**
-   * Indica si el header actual tiene boton volver
-   */
-  readonly hasBackButton = computed(() => {
-    const config = this._headerConfig();
-    return config.type === 'back' || (config.type === 'custom' && config.withBack);
-  });
-
-  // ============================================
-  // Legacy Properties (Navigation)
-  // ============================================
-
-  /**
-   * Arbitrary data to be transferred during navigation.
-   * @deprecated Use navigateWithData instead
-   */
-  data: any;
-
-  constructor(
-    public router: Router,
-    public location: Location,
-    public inAppBrowser: InAppBrowserService
-  ) {}
-
-  // ============================================
-  // Header Configuration Methods
-  // ============================================
-
-  /**
-   * Configura un header tipo "back" con titulo traducido.
-   *
-   * @param key Clave i18n (ej: 'pageTitle')
-   * @param namespace Namespace i18n (ej: 'Settings.Profile')
-   * @param options Opciones adicionales (backText, withMenu)
-   *
-   * @example
-   * // Sin menu
-   * this.nav.setBackHeader('pageTitle', 'Settings.Profile');
-   *
-   * @example
-   * // Con menu hamburguesa
-   * this.nav.setBackHeader('pageTitle', 'Settings.Profile', { withMenu: true });
-   */
-  setBackHeader(
-    key: string,
-    namespace: string,
-    options?: { backText?: string; withMenu?: boolean }
-  ): void {
-    const config: BackHeaderConfig = {
-      type: 'back',
-      titleKey: `${namespace}.${key}`,
-      backText: options?.backText,
-      withMenu: options?.withMenu,
-    };
-    this._headerConfig.set(config);
-  }
-
-  /**
-   * Configura un header tipo "home" con logo y acciones.
-   *
-   * @param options Opciones del header home
-   *
-   * @example
-   * this.nav.setHomeHeader({
-   *   withMenu: true,
-   *   actions: [
-   *     { type: 'ICON', token: 'notifications', position: 'right', description: 'notifications-outline' }
-   *   ]
-   * });
-   */
-  setHomeHeader(options: Partial<Omit<HomeHeaderConfig, 'type'>> = {}): void {
-    const config: HomeHeaderConfig = {
-      type: 'home',
-      withMenu: options.withMenu ?? false,
-      actions: options.actions ?? [],
-      logoSrc: options.logoSrc,
-    };
-    this._headerConfig.set(config);
-  }
-
-  /**
-   * Configura un header personalizado.
-   *
-   * @param options Opciones del header
-   */
-  setCustomHeader(options: Omit<CustomHeaderConfig, 'type'>): void {
-    const config: CustomHeaderConfig = {
-      type: 'custom',
-      ...options,
-    };
-    this._headerConfig.set(config);
-  }
-
-  /**
-   * Oculta el header completamente.
-   */
-  hideHeader(): void {
-    this._headerConfig.set({ type: 'none' });
-  }
-
-  /**
-   * Resetea el header al estado por defecto (home).
-   */
-  resetHeader(): void {
-    this._headerConfig.set(DEFAULT_HOME_HEADER);
-  }
-
-  // ============================================
-  // Navigation Methods
-  // ============================================
-
-  /**
-   * Opens a URL using the in-app browser service.
-   * @param url The URL to open
-   */
-  navigateInApp(url: string): void {
-    this.inAppBrowser.openWithInAppBrowser(url);
-  }
-
-  /**
-   * Navigates to a route and transfers data using Angular Router state.
-   * @param route The route to navigate to
-   * @param dataTransfer The data to transfer
-   */
-  navigateWithData(route: string, dataTransfer: any): void {
-    const navigationExtras: NavigationExtras = {
-      state: {
-        data: dataTransfer,
-      },
-    };
-
-    this.router.navigate([route], navigationExtras);
-  }
-
-  /**
-   * Navigates to a URL using Angular Router.
-   * @param url The URL to navigate to
-   */
-  navigateByUrl(url: string): void {
-    this.router
-      .navigateByUrl(url)
-      .then(() => {})
-      .catch(() => {});
-  }
-
-  /**
-   * Opens a URL in a new browser tab.
-   * @param url The URL to open
-   */
-  openInNewTab(url: string): void {
-    window.open(url, '_blank', 'noopener,noreferrer');
-  }
-
-  /**
-   * Navigates back to the previous page in the browser history.
-   */
-  back(): void {
-    this.location.back();
-  }
-
-  // ============================================
-  // Private Helpers
-  // ============================================
-
-  /**
-   * Traduce una clave i18n en formato 'namespace.key'
-   */
-  private translateKey(fullKey: string): string {
-    const lastDot = fullKey.lastIndexOf('.');
-    if (lastDot === -1) {
-      return this.i18n.t(fullKey);
-    }
-    const namespace = fullKey.substring(0, lastDot);
-    const key = fullKey.substring(lastDot + 1);
-    return this.i18n.t(key, namespace);
-  }
-}

package/src/lib/services/navigation/types.ts

@@ -1,86 +0,0 @@
-import { ToolbarAction } from '../../components/types';
-
-/**
- * Tipos de header soportados por NavigationService
- */
-export type HeaderType = 'home' | 'back' | 'custom' | 'none';
-
-/**
- * Configuracion de header para paginas con boton volver
- */
-export interface BackHeaderConfig {
-  type: 'back';
-  /** Clave i18n para el titulo (formato: 'namespace.key') */
-  titleKey: string;
-  /** Texto del boton volver (opcional, usa icono por defecto) */
-  backText?: string;
-  /** Mostrar menu hamburguesa (opcional, false por defecto) */
-  withMenu?: boolean;
-}
-
-/**
- * Configuracion de header para pagina principal (home)
- */
-export interface HomeHeaderConfig {
-  type: 'home';
-  /** Mostrar menu hamburguesa */
-  withMenu?: boolean;
-  /** Acciones adicionales en el header */
-  actions?: ToolbarAction[];
-  /** Logo personalizado (CSS variable o URL) */
-  logoSrc?: string;
-}
-
-/**
- * Configuracion de header personalizado
- */
-export interface CustomHeaderConfig {
-  type: 'custom';
-  /** Titulo del header */
-  title?: string;
-  /** Clave i18n para el titulo */
-  titleKey?: string;
-  /** Mostrar boton volver */
-  withBack?: boolean;
-  /** Texto del boton volver */
-  backText?: string;
-  /** Mostrar acciones */
-  withActions?: boolean;
-  /** Mostrar menu */
-  withMenu?: boolean;
-  /** Acciones del header */
-  actions?: ToolbarAction[];
-}
-
-/**
- * Sin header
- */
-export interface NoHeaderConfig {
-  type: 'none';
-}
-
-/**
- * Union de todos los tipos de configuracion de header
- */
-export type HeaderConfig =
-  | BackHeaderConfig
-  | HomeHeaderConfig
-  | CustomHeaderConfig
-  | NoHeaderConfig;
-
-/**
- * Configuracion por defecto para header tipo 'home'
- */
-export const DEFAULT_HOME_HEADER: HomeHeaderConfig = {
-  type: 'home',
-  withMenu: false,
-  actions: [],
-};
-
-/**
- * Configuracion por defecto para header tipo 'back'
- */
-export const DEFAULT_BACK_HEADER: BackHeaderConfig = {
-  type: 'back',
-  titleKey: '',
-};

package/src/lib/services/pagination/index.ts

@@ -1,13 +0,0 @@
-// Types
-export {
-  PaginationStrategy,
-  PaginationState,
-  PaginationLoadParams,
-  PaginationLoadResult,
-  PaginationConfig,
-  PaginationController,
-  createInitialPaginationState,
-} from './types';
-
-// Service
-export { PaginationService } from './pagination.service';

package/src/lib/services/pagination/pagination.service.ts

@@ -1,243 +0,0 @@
-import { Injectable, signal, computed, Signal } from '@angular/core';
-import { firstValueFrom, isObservable } from 'rxjs';
-import {
-  PaginationConfig,
-  PaginationController,
-  PaginationLoadParams,
-  PaginationLoadResult,
-  PaginationState,
-  createInitialPaginationState,
-} from './types';
-
-/**
- * Implementacion del controlador de paginacion.
- */
-class PaginationControllerImpl<T> implements PaginationController<T> {
-  private readonly _state = signal<PaginationState<T>>(
-    createInitialPaginationState(this.config.pageSize ?? 20, this.config.initialItems)
-  );
-
-  readonly state = this._state.asReadonly();
-  readonly items = computed(() => this._state().items);
-  readonly isLoading = computed(() => this._state().isLoading);
-  readonly hasMore = computed(() => this._state().hasMore);
-  readonly error = computed(() => this._state().error ?? null);
-  readonly currentPage = computed(() => this._state().page);
-  readonly total = computed(() => this._state().total);
-
-  constructor(private readonly config: PaginationConfig<T>) {}
-
-  async loadNext(): Promise<void> {
-    const currentState = this._state();
-    if (currentState.isLoading || !currentState.hasMore) return;
-
-    this._state.update((s) => ({ ...s, isLoading: true, error: undefined }));
-
-    try {
-      const params: PaginationLoadParams = {
-        strategy: this.config.strategy,
-        page: currentState.page,
-        pageSize: currentState.pageSize,
-        cursor: currentState.nextCursor,
-        direction: 'forward',
-      };
-
-      const result = await this.executeLoad(params);
-
-      this._state.update((s) => ({
-        ...s,
-        items: [...s.items, ...result.items],
-        page: s.page + 1,
-        hasMore: result.hasMore,
-        total: result.total ?? s.total,
-        nextCursor: result.nextCursor,
-        prevCursor: result.prevCursor ?? s.prevCursor,
-        isLoading: false,
-      }));
-    } catch (err) {
-      this._state.update((s) => ({
-        ...s,
-        isLoading: false,
-        error: err as Error,
-      }));
-    }
-  }
-
-  async loadPrevious(): Promise<void> {
-    const currentState = this._state();
-    if (currentState.isLoading || currentState.page <= 0) return;
-
-    this._state.update((s) => ({ ...s, isLoading: true, error: undefined }));
-
-    try {
-      const params: PaginationLoadParams = {
-        strategy: this.config.strategy,
-        page: currentState.page - 1,
-        pageSize: currentState.pageSize,
-        cursor: currentState.prevCursor,
-        direction: 'backward',
-      };
-
-      const result = await this.executeLoad(params);
-
-      this._state.update((s) => ({
-        ...s,
-        items: [...result.items, ...s.items],
-        page: s.page - 1,
-        prevCursor: result.prevCursor,
-        isLoading: false,
-      }));
-    } catch (err) {
-      this._state.update((s) => ({
-        ...s,
-        isLoading: false,
-        error: err as Error,
-      }));
-    }
-  }
-
-  async refresh(): Promise<void> {
-    this._state.update((s) => ({
-      ...s,
-      items: [],
-      page: 0,
-      hasMore: true,
-      nextCursor: undefined,
-      prevCursor: undefined,
-      isLoading: true,
-      error: undefined,
-    }));
-
-    try {
-      const params: PaginationLoadParams = {
-        strategy: this.config.strategy,
-        page: 0,
-        pageSize: this._state().pageSize,
-        direction: 'forward',
-      };
-
-      const result = await this.executeLoad(params);
-
-      this._state.update((s) => ({
-        ...s,
-        items: result.items,
-        page: 1,
-        hasMore: result.hasMore,
-        total: result.total,
-        nextCursor: result.nextCursor,
-        isLoading: false,
-      }));
-    } catch (err) {
-      this._state.update((s) => ({
-        ...s,
-        isLoading: false,
-        error: err as Error,
-      }));
-    }
-  }
-
-  reset(): void {
-    this._state.set(
-      createInitialPaginationState(this.config.pageSize ?? 20, this.config.initialItems)
-    );
-  }
-
-  updateItem(predicate: (item: T) => boolean, updates: Partial<T>): void {
-    this._state.update((s) => ({
-      ...s,
-      items: s.items.map((item) => (predicate(item) ? { ...item, ...updates } : item)),
-    }));
-  }
-
-  removeItem(predicate: (item: T) => boolean): void {
-    this._state.update((s) => ({
-      ...s,
-      items: s.items.filter((item) => !predicate(item)),
-    }));
-  }
-
-  prependItems(items: T[]): void {
-    this._state.update((s) => ({
-      ...s,
-      items: [...items, ...s.items],
-    }));
-  }
-
-  appendItems(items: T[]): void {
-    this._state.update((s) => ({
-      ...s,
-      items: [...s.items, ...items],
-    }));
-  }
-
-  private async executeLoad(params: PaginationLoadParams): Promise<PaginationLoadResult<T>> {
-    const result = this.config.loadFn(params);
-
-    if (isObservable(result)) {
-      return await firstValueFrom(result);
-    }
-    return await result;
-  }
-}
-
-/**
- * Servicio para crear controladores de paginacion reutilizables.
- *
- * @example
- * // En un componente
- * pagination = inject(PaginationService);
- *
- * usersController = this.pagination.createController<User>({
- *   strategy: 'offset',
- *   pageSize: 20,
- *   loadFn: (params) => this.userService.getUsers(params.page, params.pageSize)
- * });
- *
- * // En el template
- * @for (user of usersController.items(); track user.id) {
- *   <app-user-card [user]="user"></app-user-card>
- * }
- *
- * @if (usersController.hasMore()) {
- *   <ion-button (click)="usersController.loadNext()">Cargar mas</ion-button>
- * }
- */
-@Injectable({ providedIn: 'root' })
-export class PaginationService {
-  /**
-   * Crea un controlador de paginacion para una fuente de datos.
-   *
-   * @param config Configuracion del controlador
-   * @returns Controlador de paginacion
-   */
-  createController<T>(config: PaginationConfig<T>): PaginationController<T> {
-    return new PaginationControllerImpl<T>(config);
-  }
-
-  /**
-   * Crea un controlador simple para arrays estaticos con paginacion local.
-   *
-   * @param items Array completo de items
-   * @param pageSize Tamano de pagina
-   * @returns Controlador de paginacion
-   */
-  createLocalController<T>(items: T[], pageSize = 20): PaginationController<T> {
-    let currentIndex = 0;
-
-    return this.createController<T>({
-      strategy: 'offset',
-      pageSize,
-      loadFn: async (params) => {
-        const start = params.page * params.pageSize;
-        const end = start + params.pageSize;
-        const pageItems = items.slice(start, end);
-
-        return {
-          items: pageItems,
-          hasMore: end < items.length,
-          total: items.length,
-        };
-      },
-    });
-  }
-}