valtech-components 2.0.687 → 2.0.689

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

@@ -0,0 +1,142 @@
+import { Signal, TemplateRef, Type } from '@angular/core';
+import { Observable } from 'rxjs';
+import { SkeletonMetadata } from '../../components/atoms/skeleton/types';
+
+/**
+ * Nombres de templates de skeleton disponibles.
+ */
+export type SkeletonTemplateName =
+  | 'list'
+  | 'list-avatar'
+  | 'grid'
+  | 'grid-cards'
+  | 'form'
+  | 'form-compact'
+  | 'profile'
+  | 'profile-full'
+  | 'detail'
+  | 'table';
+
+/**
+ * Configuracion para un skeleton template.
+ */
+export interface SkeletonTemplateConfig {
+  /** Numero de items skeleton a mostrar */
+  count?: number;
+  /** Variante del layout */
+  variant?: string;
+  /** Gap entre items (valor CSS) */
+  gap?: string;
+  /** Ancho personalizado */
+  width?: string;
+  /** Animacion habilitada */
+  animated?: boolean;
+  /** Clases CSS adicionales */
+  cssClass?: string;
+  /** Numero de columnas (para grid/table) */
+  columns?: number;
+  /** Numero de filas (para table) */
+  rows?: number;
+  /** Numero de secciones (para detail) */
+  sections?: number;
+}
+
+/**
+ * Fuente de estado de carga - puede ser Signal, Observable o Promise.
+ */
+export type LoadingSource<T = boolean> =
+  | Signal<T>
+  | Observable<T>
+  | Promise<T>
+  | boolean;
+
+/**
+ * Configuracion para la directiva valSkeleton.
+ */
+export interface SkeletonDirectiveConfig {
+  /** Mostrar skeleton cuando esto sea truthy */
+  when: LoadingSource;
+  /** Nombre del template o componente a usar */
+  template?: SkeletonTemplateName | string;
+  /** Configuracion del template */
+  config?: SkeletonTemplateConfig;
+  /** Delay antes de mostrar skeleton (ms) - previene flash */
+  delay?: number;
+  /** Tiempo minimo de visualizacion (ms) - previene parpadeo */
+  minTime?: number;
+}
+
+/**
+ * Configuracion para la directiva valLoading.
+ */
+export interface LoadingDirectiveConfig {
+  /** Fuente de estado de carga */
+  loading: LoadingSource;
+  /** Template de skeleton a mostrar durante carga */
+  skeleton?: SkeletonTemplateName | string;
+  /** Configuracion del skeleton */
+  skeletonConfig?: SkeletonTemplateConfig;
+  /** Template ref personalizado para skeleton */
+  skeletonTemplate?: TemplateRef<unknown>;
+  /** Mostrar spinner en lugar de skeleton */
+  spinner?: boolean;
+  /** Delay antes de mostrar estado de carga (ms) */
+  delay?: number;
+  /** Tiempo minimo de carga (ms) */
+  minTime?: number;
+}
+
+/**
+ * Template de skeleton registrado.
+ */
+export interface RegisteredSkeletonTemplate {
+  name: string;
+  component: Type<unknown>;
+  defaultConfig?: SkeletonTemplateConfig;
+}
+
+/**
+ * Configuracion para provideValtechSkeleton().
+ */
+export interface SkeletonConfig {
+  /** Animacion habilitada por defecto */
+  animated?: boolean;
+  /** Delay global antes de mostrar skeletons */
+  defaultDelay?: number;
+  /** Tiempo minimo de visualizacion global */
+  defaultMinTime?: number;
+  /** Templates de skeleton personalizados a registrar */
+  templates?: RegisteredSkeletonTemplate[];
+  /** Template por defecto para listas */
+  defaultListTemplate?: SkeletonTemplateName;
+  /** Template por defecto para grids */
+  defaultGridTemplate?: SkeletonTemplateName;
+}
+
+/**
+ * Configuracion por defecto para el sistema de skeletons.
+ */
+export const DEFAULT_SKELETON_CONFIG: SkeletonConfig = {
+  animated: true,
+  defaultDelay: 0,
+  defaultMinTime: 300,
+  defaultListTemplate: 'list',
+  defaultGridTemplate: 'grid-cards',
+};
+
+/**
+ * Contexto para templates de skeleton en directivas.
+ */
+export interface SkeletonTemplateContext {
+  /** Configuracion del skeleton */
+  config: SkeletonTemplateConfig;
+  /** Estado de animacion */
+  animated: boolean;
+}
+
+/**
+ * Tipo base para componentes de skeleton template.
+ */
+export interface SkeletonTemplateComponent {
+  config: SkeletonTemplateConfig;
+}

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

@@ -0,0 +1,154 @@
+/**
+ * Service for managing application themes (light, dark, auto).
+ * Handles user preferences, system theme detection, and theme toggling.
+ * Uses localStorage to persist the selected theme.
+ */
+
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { THEME } from '../shared/constants/storage';
+import { LocalStorageService } from './local-storage.service';
+
+export enum ThemeOption {
+  LIGHT = 'light',
+  DARK = 'dark',
+  AUTO = 'auto',
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  /**
+   * Indicates if the light theme is active.
+   */
+  lightToggle = false;
+  /**
+   * Indicates if the dark theme is active.
+   */
+  darkToggle = false;
+  /**
+   * Indicates if the auto theme is active.
+   */
+  autoToggle = false;
+  /**
+   * The current selected theme option.
+   */
+  currentOption = ThemeOption.AUTO;
+  /**
+   * Enum with all available theme options.
+   */
+  themeOptions = ThemeOption;
+  /**
+   * Whether the system prefers dark mode.
+   */
+  prefersDark = false;
+  /**
+   * The default theme option.
+   */
+  default = ThemeOption.AUTO;
+  /**
+   * Observable for the current theme.
+   */
+  theme: BehaviorSubject<ThemeOption>;
+
+  constructor() {
+    const current = LocalStorageService.get<ThemeOption>(THEME);
+    console.log('💡 ThemeConfig current::: ', current);
+    this.theme = new BehaviorSubject<ThemeOption>(current || this.default);
+    this.currentOption = this.Theme;
+    console.log('💡 ThemeConfig this.currentOption::: ', this.currentOption);
+    this.toggleUserPreference(this.currentOption);
+
+    const prefersDarkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    this.prefersDark = prefersDarkQuery.matches;
+    this.handleAutoConfiguration();
+
+    prefersDarkQuery.addEventListener('change', mediaQuery => {
+      console.log('💡 ThemeConfig addEventListener change::: ', mediaQuery);
+      this.prefersDark = mediaQuery.matches;
+      this.handleAutoConfiguration();
+    });
+  }
+
+  private handleAutoConfiguration() {
+    if (this.prefersDark && this.currentOption === ThemeOption.AUTO) {
+      console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
+      this.toggleUserPreference(ThemeOption.AUTO);
+    }
+    if (!this.prefersDark && this.currentOption === ThemeOption.AUTO) {
+      console.log('💡 ThemeConfig prefersDark::: ', this.prefersDark);
+      this.toggleUserPreference(ThemeOption.AUTO);
+    }
+  }
+
+  private handleDarkPreference() {
+    this.toggleTheme(ThemeOption.DARK, true);
+    this.toggleTheme(ThemeOption.LIGHT, false);
+  }
+
+  private handleLightPreference() {
+    this.toggleTheme(ThemeOption.LIGHT, true);
+    this.toggleTheme(ThemeOption.DARK, false);
+  }
+
+  /**
+   * Returns true if the system prefers dark mode.
+   */
+  get IsDark(): boolean {
+    return this.prefersDark;
+  }
+
+  /**
+   * Gets the current theme option.
+   */
+  get Theme(): ThemeOption {
+    return this.theme.value;
+  }
+
+  /**
+   * Sets the current theme option and persists it.
+   */
+  set Theme(theme: ThemeOption) {
+    this.theme.next(theme);
+    LocalStorageService.set<ThemeOption>(THEME, theme);
+  }
+
+  /**
+   * Toggles a theme class on the document body.
+   * @param name The theme name
+   * @param shouldAdd Whether to add or remove the class
+   */
+  toggleTheme(name: string, shouldAdd: boolean) {
+    console.log('toggleTheme::: ', name, shouldAdd);
+    document.body.classList.toggle(name, shouldAdd);
+  }
+
+  /**
+   * Sets the user theme preference and updates toggles and theme classes.
+   * @param option The selected theme option
+   */
+  toggleUserPreference(option: ThemeOption) {
+    this.currentOption = option;
+    this.Theme = option;
+    this.lightToggle = option === ThemeOption.LIGHT;
+    this.darkToggle = option === ThemeOption.DARK;
+    this.autoToggle = option === ThemeOption.AUTO;
+
+    switch (option) {
+      case ThemeOption.LIGHT:
+        this.handleLightPreference();
+        break;
+      case ThemeOption.DARK:
+        this.handleDarkPreference();
+        break;
+      case ThemeOption.AUTO:
+        if (this.prefersDark) {
+          this.handleDarkPreference();
+        } else {
+          this.handleLightPreference();
+        }
+        break;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { ToastController, ToastOptions } from '@ionic/angular';
+
+/**
+ * Service for displaying toast notifications using Ionic's ToastController.
+ * Provides methods to show and present toasts with custom options.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  constructor(private toastController: ToastController) {}
+
+  /**
+   * Presents a toast notification with the given options.
+   * @param request Toast options (message, duration, position, color, etc.)
+   */
+  async presentToast(request: ToastOptions) {
+    const toast = await this.toastController.create({
+      message: request.message,
+      duration: request.duration,
+      position: request.position,
+      color: request.color,
+    });
+
+    await toast.present();
+  }
+
+  /**
+   * Shows a toast notification and logs the result.
+   * @param request Toast options (message, duration, position, color, etc.)
+   */
+  show(request: ToastOptions) {
+    this.presentToast(request)
+      .then(() => {
+        console.info('Toast created');
+      })
+      .catch(error => {
+        console.error(JSON.stringify(error));
+      });
+  }
+}

package/src/lib/services/types.ts

@@ -0,0 +1,6 @@
+// Types for valtech-components services
+// ValtechConfig and LangProvider have been removed in v3.0.0
+// Use LocaleService for language management instead
+
+// Empty export to maintain module compatibility
+export {};

package/src/lib/shared/constants/storage.ts

@@ -0,0 +1,2 @@
+export const LANG = 'LANG';
+export const THEME = 'THEME';

package/src/lib/shared/pipes/process-links.pipe.ts

@@ -0,0 +1,64 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { LinkProcessorConfig, LinkProcessorService } from '../../services/link-processor.service';
+
+/**
+ * ProcessLinksPipe - Pipe para procesar texto y convertir URLs en enlaces clickeables.
+ *
+ * Este pipe standalone detecta automáticamente URLs externas (http/https) y rutas internas
+ * (que empiezan con /) y las convierte en elementos HTML anchor con los atributos apropiados.
+ *
+ * @example Uso básico:
+ * ```html
+ * <div [innerHTML]="'Visit https://example.com or go to /profile' | processLinks"></div>
+ * ```
+ *
+ * @example Con configuración personalizada:
+ * ```html
+ * <div [innerHTML]="text | processLinks:linkConfig"></div>
+ * ```
+ *
+ * @example En TypeScript:
+ * ```typescript
+ * export class MyComponent {
+ *   linkConfig: LinkProcessorConfig = {
+ *     openExternalInNewTab: true,
+ *     openInternalInNewTab: false,
+ *     linkClass: 'my-link',
+ *     externalLinkClass: 'external',
+ *     internalLinkClass: 'internal'
+ *   };
+ * }
+ * ```
+ */
+@Pipe({
+  name: 'processLinks',
+  standalone: true,
+})
+export class ProcessLinksPipe implements PipeTransform {
+  private linkProcessor = inject(LinkProcessorService);
+
+  /**
+   * Transforma texto procesando URLs y rutas internas para convertirlas en enlaces.
+   *
+   * @param value - El texto a procesar
+   * @param config - Configuración opcional para el procesamiento de enlaces
+   * @returns SafeHtml con enlaces procesados o string original si no hay enlaces
+   *
+   * @example
+   * ```html
+   * <!-- Uso básico -->
+   * <p [innerHTML]="'Check out https://angular.io' | processLinks"></p>
+   *
+   * <!-- Con configuración -->
+   * <p [innerHTML]="message | processLinks:{ openExternalInNewTab: false }"></p>
+   * ```
+   */
+  transform(value: string, config?: LinkProcessorConfig): SafeHtml | string {
+    if (!value) {
+      return '';
+    }
+
+    return this.linkProcessor.processLinks(value, config);
+  }
+}

package/src/lib/shared/utils/dom.ts

@@ -0,0 +1,29 @@
+import { ElementRef } from '@angular/core';
+
+/**
+ * Scrolls smoothly to the top of the element with the given id.
+ * @param id The id of the element to scroll to
+ */
+export const goToTop = (id: string): void => {
+  const element = document.getElementById(id);
+  if (element) {
+    element.scrollIntoView({
+      block: 'start',
+      inline: 'nearest',
+      behavior: 'smooth',
+    });
+  }
+};
+
+/**
+ * Checks if the bottom of the given ElementRef is within the viewport.
+ * Useful for determining if a form or element is fully visible.
+ * @param elementRef The Angular ElementRef to check
+ * @returns True if the element's bottom is at or above the window's bottom
+ */
+export const isAtEnd = (elementRef: ElementRef): boolean => {
+  const formElement = elementRef.nativeElement;
+  const rect = formElement.getBoundingClientRect();
+  const windowHeight = window.innerHeight;
+  return rect.bottom <= windowHeight;
+};

package/src/lib/shared/utils/form-defaults.ts

@@ -0,0 +1,119 @@
+/**
+ * Utilities for handling default values in form inputs based on InputMetadata configuration.
+ */
+
+import { InputMetadata, InputType } from '../../components/types';
+
+/**
+ * Resolves the initial value for a form input based on its configuration.
+ *
+ * @param input - The input metadata configuration
+ * @returns The resolved initial value
+ *
+ * @example
+ * // Custom default value
+ * const customValue = resolveInputDefaultValue({ withDefault: '2025-06-24', type: InputType.DATE });
+ *
+ * // Auto default value
+ * const autoValue = resolveInputDefaultValue({ withDefault: true, type: InputType.NUMBER });
+ *
+ * // Explicit value (takes precedence)
+ * const explicitValue = resolveInputDefaultValue({ value: 'explicit', withDefault: true, type: InputType.TEXT });
+ */
+export function resolveInputDefaultValue(input: InputMetadata): any {
+  // Explicit value takes precedence
+  if (input.value !== undefined && input.value !== null && input.value !== '') {
+    return parseValueByType(input.value, input.type);
+  }
+
+  // No default configuration
+  if (!input.withDefault) {
+    return null;
+  }
+
+  // Custom default value
+  if (typeof input.withDefault === 'string') {
+    return parseValueByType(input.withDefault, input.type);
+  }
+
+  // Auto default value (withDefault === true)
+  return getAutoDefaultValue(input.type);
+}
+
+/**
+ * Parses a string value to the appropriate type based on the input type.
+ *
+ * @param value - The string value to parse
+ * @param type - The input type
+ * @returns The parsed value
+ */
+function parseValueByType(value: string, type: InputType): any {
+  switch (type) {
+    case InputType.DATE:
+      return new Date(value).toISOString();
+    case InputType.NUMBER:
+      return parseFloat(value) || 0;
+    case InputType.CHECK:
+      return value === 'true' || value === '1';
+    case InputType.TEXT:
+    case InputType.EMAIL:
+    case InputType.PASSWORD:
+    case InputType.COMMENT:
+    case InputType.PIN_CODE:
+    case InputType.HOUR:
+    case InputType.RADIO:
+    case InputType.SELECT:
+    case InputType.SEARCH_SELECT:
+    case InputType.FILE:
+    default:
+      return value;
+  }
+}
+
+/**
+ * Gets the automatic default value for a given input type.
+ *
+ * @param type - The input type
+ * @returns The auto default value
+ */
+function getAutoDefaultValue(type: InputType): any {
+  switch (type) {
+    case InputType.DATE:
+      return new Date().toISOString();
+    case InputType.NUMBER:
+      return 0;
+    case InputType.CHECK:
+      return false;
+    case InputType.TEXT:
+    case InputType.EMAIL:
+    case InputType.PASSWORD:
+    case InputType.COMMENT:
+    case InputType.PIN_CODE:
+    case InputType.HOUR:
+    case InputType.RADIO:
+    case InputType.SELECT:
+    case InputType.SEARCH_SELECT:
+    case InputType.FILE:
+    default:
+      return '';
+  }
+}
+
+/**
+ * Applies the resolved default value to a FormControl.
+ *
+ * @param input - The input metadata configuration
+ * @example
+ * const input = { control: myFormControl, type: InputType.DATE, withDefault: true };
+ * applyDefaultValueToControl(input);
+ */
+export function applyDefaultValueToControl(input: InputMetadata): void {
+  if (!input.control) return;
+
+  const defaultValue = resolveInputDefaultValue(input);
+  if (defaultValue !== null) {
+    input.control.setValue(defaultValue);
+    input.control.markAsPristine();
+    input.control.updateValueAndValidity();
+  }
+}

package/src/lib/shared/utils/styles.ts

@@ -0,0 +1,39 @@
+/**
+ * Resolves a color string to a valid CSS value for use in styles.
+ * Supports Ionic color names, CSS variables, and custom colors.
+ *
+ * @param color The color name, CSS variable, or custom color string
+ * @returns A valid CSS color value
+ *
+ * @example
+ * resolveColor('primary'); // returns 'var(--ion-color-primary)'
+ * resolveColor('--my-custom-color'); // returns 'var(--my-custom-color)'
+ * resolveColor('#ff0000'); // returns '#ff0000'
+ */
+export function resolveColor(color: string): string {
+  // Si el color empieza con "--", se asume que es una variable CSS válida
+  if (color.startsWith('--')) {
+    return `var(${color})`;
+  }
+
+  // Lista de colores predefinidos de Ionic
+  const ionicColors = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'success',
+    'warning',
+    'danger',
+    'light',
+    'medium',
+    'dark',
+  ];
+
+  // Verificar si el color es un color de Ionic
+  if (ionicColors.includes(color)) {
+    return `var(--ion-color-${color})`;
+  }
+
+  // Si no es una variable CSS ni un color de Ionic, devolver el color tal cual
+  return color;
+}

package/src/lib/shared/utils/text.ts

@@ -0,0 +1,12 @@
+/**
+ * Removes diacritical marks (accents) from a string using Unicode normalization.
+ * Useful for text search and comparison.
+ *
+ * @param text The input string
+ * @returns The normalized string without diacritical marks
+ *
+ * @example
+ * replaceSpecialChars('canción') // returns 'cancion'
+ */
+export const replaceSpecialChars = (text: string) =>
+  text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');

package/src/lib/version.ts

@@ -0,0 +1,5 @@
+/**
+ * Current version of valtech-components.
+ * This is automatically updated during the publish process.
+ */
+export const VERSION = '2.0.688';