valtech-components 2.0.691 → 2.0.692

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

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

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

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

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

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

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

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

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

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

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

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

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