valtech-components 2.0.687 → 2.0.689

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

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

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

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

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