valtech-components 2.0.787 → 2.0.795

package/src/lib/services/skeleton/templates/list-skeleton.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkeletonComponent } from '../../../components/atoms/skeleton/skeleton.component';
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+
+/**
+ * Template de skeleton para listas.
+ *
+ * @example
+ * <val-skeleton-list [config]="{ count: 5 }"></val-skeleton-list>
+ *
+ * @example
+ * <val-skeleton-list [config]="{ count: 3, variant: 'avatar', gap: '16px' }"></val-skeleton-list>
+ */
+@Component({
+  selector: 'val-skeleton-list',
+  standalone: true,
+  imports: [CommonModule, SkeletonComponent],
+  template: `
+    <div class="skeleton-list" [style.gap]="config.gap || '12px'" [class]="config.cssClass">
+      @for (item of items; track $index) {
+        @if (config.variant === 'avatar') {
+          <div class="skeleton-list-item-avatar">
+            <val-skeleton
+              [props]="{
+                type: 'avatar',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+            <div class="skeleton-content">
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '70%',
+                  height: '16px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '50%',
+                  height: '14px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+            </div>
+          </div>
+        } @else {
+          <val-skeleton
+            [props]="{
+              type: 'list-item',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+        }
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .skeleton-list {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .skeleton-list-item-avatar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 0;
+      }
+
+      .skeleton-content {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        flex: 1;
+      }
+    `,
+  ],
+})
+export class ListSkeletonComponent implements SkeletonTemplateComponent {
+  @Input() config: SkeletonTemplateConfig = { count: 3 };
+
+  get items(): number[] {
+    return Array(this.config.count ?? 3).fill(0);
+  }
+}

package/src/lib/services/skeleton/templates/profile-skeleton.component.ts

@@ -0,0 +1,174 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkeletonComponent } from '../../../components/atoms/skeleton/skeleton.component';
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+
+/**
+ * Template de skeleton para perfiles de usuario.
+ *
+ * @example
+ * <val-skeleton-profile></val-skeleton-profile>
+ *
+ * @example
+ * <val-skeleton-profile [config]="{ variant: 'full' }"></val-skeleton-profile>
+ */
+@Component({
+  selector: 'val-skeleton-profile',
+  standalone: true,
+  imports: [CommonModule, SkeletonComponent],
+  template: `
+    <div
+      class="skeleton-profile"
+      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
+    >
+      <div class="profile-header">
+        <!-- Avatar -->
+        <val-skeleton
+          [props]="{
+            type: 'avatar',
+            width: avatarSize,
+            height: avatarSize,
+            animated: config.animated !== false
+          }"
+        ></val-skeleton>
+
+        <div class="profile-info">
+          <!-- Name -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: nameWidth,
+              height: '20px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          <!-- Subtitle -->
+          <val-skeleton
+            [props]="{
+              type: 'text',
+              width: subtitleWidth,
+              height: '14px',
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+          @if (config.variant === 'full') {
+            <!-- Extra info -->
+            <val-skeleton
+              [props]="{
+                type: 'text',
+                width: '100px',
+                height: '12px',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          }
+        </div>
+      </div>
+
+      @if (config.variant === 'full') {
+        <div class="profile-details">
+          <val-skeleton
+            [props]="{
+              type: 'paragraph',
+              lines: 3,
+              animated: config.animated !== false
+            }"
+          ></val-skeleton>
+
+          <div class="profile-stats">
+            @for (stat of stats; track $index) {
+              <div class="stat-item">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '40px',
+                    height: '24px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '60px',
+                    height: '12px',
+                    animated: config.animated !== false
+                  }"
+                ></val-skeleton>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .skeleton-profile {
+        width: 100%;
+
+        &.variant-default .profile-header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        &.variant-full {
+          .profile-header {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 16px;
+            text-align: center;
+          }
+
+          .profile-info {
+            align-items: center;
+          }
+
+          .profile-details {
+            margin-top: 24px;
+          }
+        }
+      }
+
+      .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .profile-stats {
+        display: flex;
+        justify-content: center;
+        gap: 32px;
+        margin-top: 20px;
+      }
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+      }
+    `,
+  ],
+})
+export class ProfileSkeletonComponent implements SkeletonTemplateComponent {
+  @Input() config: SkeletonTemplateConfig = {};
+
+  get avatarSize(): string {
+    return this.config.variant === 'full' ? '96px' : '48px';
+  }
+
+  get nameWidth(): string {
+    return this.config.variant === 'full' ? '180px' : '160px';
+  }
+
+  get subtitleWidth(): string {
+    return this.config.variant === 'full' ? '140px' : '120px';
+  }
+
+  get stats(): number[] {
+    return [1, 2, 3];
+  }
+}

package/src/lib/services/skeleton/templates/table-skeleton.component.ts

@@ -0,0 +1,113 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkeletonComponent } from '../../../components/atoms/skeleton/skeleton.component';
+import { SkeletonTemplateConfig, SkeletonTemplateComponent } from '../types';
+
+/**
+ * Template de skeleton para tablas.
+ *
+ * @example
+ * <val-skeleton-table [config]="{ columns: 5, rows: 10 }"></val-skeleton-table>
+ */
+@Component({
+  selector: 'val-skeleton-table',
+  standalone: true,
+  imports: [CommonModule, SkeletonComponent],
+  template: `
+    <div class="skeleton-table" [class]="config.cssClass">
+      <!-- Header -->
+      <div class="skeleton-table-header">
+        @for (col of columns; track $index) {
+          <div class="skeleton-table-cell" [style.flex]="getColumnFlex($index)">
+            <val-skeleton
+              [props]="{
+                type: 'text',
+                width: '80%',
+                height: '16px',
+                animated: config.animated !== false
+              }"
+            ></val-skeleton>
+          </div>
+        }
+      </div>
+
+      <!-- Rows -->
+      @for (row of rows; track $index) {
+        <div class="skeleton-table-row">
+          @for (col of columns; track $index) {
+            <div class="skeleton-table-cell" [style.flex]="getColumnFlex($index)">
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: getColumnContentWidth($index),
+                  height: '14px',
+                  animated: config.animated !== false
+                }"
+              ></val-skeleton>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .skeleton-table {
+        width: 100%;
+        overflow: hidden;
+        border-radius: 8px;
+        border: 1px solid var(--ion-color-light-shade, #d7d8da);
+      }
+
+      .skeleton-table-header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 14px 16px;
+        background: var(--ion-color-light, #f4f5f8);
+        border-bottom: 1px solid var(--ion-color-light-shade, #d7d8da);
+      }
+
+      .skeleton-table-row {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--ion-color-light-shade, #d7d8da);
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .skeleton-table-cell {
+        min-width: 0;
+      }
+    `,
+  ],
+})
+export class TableSkeletonComponent implements SkeletonTemplateComponent {
+  @Input() config: SkeletonTemplateConfig = { columns: 4, rows: 5 };
+
+  get columns(): number[] {
+    return Array(this.config.columns ?? 4).fill(0);
+  }
+
+  get rows(): number[] {
+    return Array(this.config.rows ?? 5).fill(0);
+  }
+
+  getColumnFlex(index: number): string {
+    // Primera columna mas ancha, ultima mas angosta
+    const totalCols = this.config.columns ?? 4;
+    if (index === 0) return '1.5';
+    if (index === totalCols - 1) return '0.8';
+    return '1';
+  }
+
+  getColumnContentWidth(index: number): string {
+    // Variar anchos para aspecto natural
+    const widths = ['90%', '70%', '60%', '80%', '50%'];
+    return widths[index % widths.length];
+  }
+}

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,163 @@
+/**
+ * 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
+   *
+   * Ionic 8 (`dark.class.css` palette) usa `.ion-palette-dark` en `<html>` para
+   * conmutar el tema dark; en versiones previas leía `body.dark`. Mantenemos
+   * el toggle sobre `body.{name}` por compat con código legacy, y además
+   * espejamos `ion-palette-dark` en `<html>` cuando `name === 'dark'` — esto
+   * es lo que las apps en Ionic 8 necesitan para que el palette aplique.
+   */
+  toggleTheme(name: string, shouldAdd: boolean) {
+    console.log('toggleTheme::: ', name, shouldAdd);
+    document.body.classList.toggle(name, shouldAdd);
+    if (name === 'dark') {
+      document.documentElement.classList.toggle('ion-palette-dark', 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;
+    }
+  }
+}