valtech-components 2.0.691 → 2.0.692

package/src/lib/services/skeleton/directives/loading.directive.ts

@@ -1,230 +0,0 @@
-import {
-  Directive,
-  Input,
-  TemplateRef,
-  ViewContainerRef,
-  inject,
-  effect,
-  signal,
-  OnDestroy,
-  isSignal,
-  DestroyRef,
-  ComponentRef,
-} from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { isObservable } from 'rxjs';
-import { SkeletonService } from '../skeleton.service';
-import { LoadingSource, SkeletonTemplateName, SkeletonTemplateComponent } from '../types';
-
-/**
- * Directiva estructural simplificada para estados de carga.
- *
- * Soporta multiples fuentes de estado de carga:
- * - Angular Signal<boolean>
- * - RxJS Observable<boolean>
- * - Promise<any> (cargando hasta que se resuelve)
- * - boolean literal
- *
- * @example
- * <!-- Uso simple con signal -->
- * <ng-container *valLoading="isLoading(); skeleton: 'list'">
- *   <app-list [items]="items()"></app-list>
- * </ng-container>
- *
- * @example
- * <!-- Con configuracion -->
- * <ng-container *valLoading="loading$; skeleton: 'grid-cards'; count: 8">
- *   <app-grid [data]="data"></app-grid>
- * </ng-container>
- *
- * @example
- * <!-- Con template personalizado -->
- * <ng-container *valLoading="isLoading(); skeletonTpl: customSkeleton">
- *   <app-content></app-content>
- * </ng-container>
- * <ng-template #customSkeleton>
- *   <val-skeleton [props]="{ type: 'card' }"></val-skeleton>
- * </ng-template>
- */
-@Directive({
-  selector: '[valLoading]',
-  standalone: true,
-})
-export class LoadingDirective implements OnDestroy {
-  private readonly templateRef = inject(TemplateRef<unknown>);
-  private readonly viewContainer = inject(ViewContainerRef);
-  private readonly skeletonService = inject(SkeletonService);
-  private readonly destroyRef = inject(DestroyRef);
-
-  private readonly _loading = signal(false);
-  private hasContentView = false;
-  private skeletonComponentRef: ComponentRef<SkeletonTemplateComponent> | null = null;
-
-  /** Template de skeleton a usar */
-  @Input('valLoadingSkeleton') skeleton: SkeletonTemplateName | string = 'list';
-
-  /** Template personalizado para skeleton */
-  @Input('valLoadingSkeletonTpl') skeletonTpl: TemplateRef<unknown> | null = null;
-
-  /** Cantidad de items skeleton */
-  @Input('valLoadingCount') count = 3;
-
-  /** Animacion habilitada */
-  @Input('valLoadingAnimated') animated = true;
-
-  /** Gap entre items */
-  @Input('valLoadingGap') gap: string | undefined;
-
-  /** Variante del template */
-  @Input('valLoadingVariant') variant: string | undefined;
-
-  /** Mostrar spinner en lugar de skeleton */
-  @Input('valLoadingSpinner') spinner = false;
-
-  constructor() {
-    effect(() => {
-      const isLoading = this._loading();
-      this.updateView(isLoading);
-    });
-  }
-
-  /**
-   * Input principal - puede ser boolean, Signal, Observable o Promise.
-   */
-  @Input('valLoading')
-  set loading(source: LoadingSource) {
-    this.resolveLoadingSource(source);
-  }
-
-  ngOnDestroy(): void {
-    this.viewContainer.clear();
-    this.skeletonComponentRef = null;
-  }
-
-  private resolveLoadingSource(source: LoadingSource): void {
-    if (typeof source === 'boolean') {
-      this._loading.set(source);
-    } else if (isSignal(source)) {
-      // Sincronizar signal con effect
-      effect(
-        () => {
-          this._loading.set((source as () => boolean)());
-        },
-        { injector: this.viewContainer.injector }
-      );
-    } else if (isObservable(source)) {
-      // Convertir observable a signal
-      const signalValue = toSignal(source, {
-        initialValue: true,
-        injector: this.viewContainer.injector,
-      });
-      effect(
-        () => {
-          this._loading.set(signalValue());
-        },
-        { injector: this.viewContainer.injector }
-      );
-    } else if (source instanceof Promise) {
-      this._loading.set(true);
-      source.finally(() => this._loading.set(false));
-    }
-  }
-
-  private updateView(isLoading: boolean): void {
-    if (isLoading) {
-      this.showSkeleton();
-    } else {
-      this.showContent();
-    }
-  }
-
-  private showSkeleton(): void {
-    // Limpiar contenido previo
-    this.viewContainer.clear();
-    this.hasContentView = false;
-
-    if (this.skeletonTpl) {
-      // Usar template personalizado
-      this.viewContainer.createEmbeddedView(this.skeletonTpl);
-    } else if (this.spinner) {
-      // Mostrar spinner (usar val-content-loader si esta disponible)
-      this.showSpinner();
-    } else {
-      // Usar template de skeleton registrado
-      this.showSkeletonTemplate();
-    }
-  }
-
-  private showSkeletonTemplate(): void {
-    const template = this.skeletonService.getTemplate(this.skeleton);
-
-    if (template) {
-      this.skeletonComponentRef = this.viewContainer.createComponent(
-        template.component as new () => SkeletonTemplateComponent
-      );
-
-      // Combinar config por defecto con inputs
-      const config = {
-        ...template.defaultConfig,
-        count: this.count,
-        animated: this.animated,
-        gap: this.gap,
-        variant: this.variant,
-      };
-
-      this.skeletonComponentRef.instance.config = config;
-    } else {
-      // Fallback: mostrar texto de carga si no hay template
-      console.warn(`[valLoading] Template '${this.skeleton}' not found. Using fallback.`);
-      this.showFallback();
-    }
-  }
-
-  private showSpinner(): void {
-    // Crear un div con spinner simple
-    const element = document.createElement('div');
-    element.className = 'val-loading-spinner';
-    element.innerHTML = `
-      <ion-spinner name="crescent"></ion-spinner>
-    `;
-    element.style.cssText = 'display: flex; justify-content: center; padding: 20px;';
-
-    const hostElement = this.viewContainer.element.nativeElement as HTMLElement;
-    hostElement.parentElement?.insertBefore(element, hostElement);
-  }
-
-  private showFallback(): void {
-    // Fallback simple si no hay template registrado
-    const element = document.createElement('div');
-    element.className = 'val-loading-fallback';
-    element.style.cssText =
-      'display: flex; flex-direction: column; gap: 12px; padding: 16px;';
-
-    for (let i = 0; i < this.count; i++) {
-      const skeleton = document.createElement('div');
-      skeleton.style.cssText = `
-        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-        background-size: 200% 100%;
-        animation: skeleton-loading 1.5s infinite;
-        height: 56px;
-        border-radius: 8px;
-      `;
-      element.appendChild(skeleton);
-    }
-
-    const hostElement = this.viewContainer.element.nativeElement as HTMLElement;
-    hostElement.parentElement?.insertBefore(element, hostElement);
-  }
-
-  private showContent(): void {
-    // Limpiar skeleton
-    this.viewContainer.clear();
-    this.skeletonComponentRef = null;
-
-    // Mostrar contenido real
-    if (!this.hasContentView) {
-      this.viewContainer.createEmbeddedView(this.templateRef);
-      this.hasContentView = true;
-    }
-  }
-}

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

@@ -1,30 +0,0 @@
-// Types
-export {
-  SkeletonTemplateName,
-  SkeletonTemplateConfig,
-  LoadingSource,
-  SkeletonDirectiveConfig,
-  LoadingDirectiveConfig,
-  RegisteredSkeletonTemplate,
-  SkeletonConfig,
-  SkeletonTemplateContext,
-  SkeletonTemplateComponent,
-  DEFAULT_SKELETON_CONFIG,
-} from './types';
-
-// Service
-export { SkeletonService } from './skeleton.service';
-
-// Directives
-export { LoadingDirective } from './directives/loading.directive';
-
-// Templates
-export { ListSkeletonComponent } from './templates/list-skeleton.component';
-export { GridSkeletonComponent } from './templates/grid-skeleton.component';
-export { FormSkeletonComponent } from './templates/form-skeleton.component';
-export { ProfileSkeletonComponent } from './templates/profile-skeleton.component';
-export { TableSkeletonComponent } from './templates/table-skeleton.component';
-export { DetailSkeletonComponent } from './templates/detail-skeleton.component';
-
-// Config / Provider
-export { provideValtechSkeleton } from './config';

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

@@ -1,220 +0,0 @@
-import { Injectable, signal, computed, Type } from '@angular/core';
-import {
-  SkeletonTemplateName,
-  SkeletonTemplateConfig,
-  RegisteredSkeletonTemplate,
-  SkeletonConfig,
-  DEFAULT_SKELETON_CONFIG,
-} from './types';
-
-/**
- * Servicio para gestionar templates de skeleton y estados de carga globales.
- *
- * @example
- * // En un componente
- * skeleton = inject(SkeletonService);
- *
- * // Registrar template personalizado
- * skeleton.registerTemplate('my-custom', MyCustomSkeletonComponent);
- *
- * // Obtener componente de template
- * const component = skeleton.getTemplate('list');
- *
- * // Gestionar estados de carga globales
- * skeleton.setLoadingState('dashboard', true);
- * const isDashboardLoading = skeleton.loadingState('dashboard');
- */
-@Injectable({ providedIn: 'root' })
-export class SkeletonService {
-  private readonly _config = signal<SkeletonConfig>(DEFAULT_SKELETON_CONFIG);
-  private readonly _templates = signal<Map<string, RegisteredSkeletonTemplate>>(new Map());
-  private readonly _loadingStates = signal<Map<string, boolean>>(new Map());
-  private _initialized = false;
-
-  /** Configuracion actual (solo lectura) */
-  readonly config = this._config.asReadonly();
-
-  /** Templates registrados (solo lectura) */
-  readonly templates = this._templates.asReadonly();
-
-  /** Estado de carga global (cualquier estado registrado esta cargando) */
-  readonly isAnyLoading = computed(() => {
-    const states = this._loadingStates();
-    return Array.from(states.values()).some((v) => v);
-  });
-
-  /** Cantidad de templates registrados */
-  readonly templateCount = computed(() => this._templates().size);
-
-  /**
-   * Configura el servicio de skeleton.
-   * Llamado por provideValtechSkeleton().
-   */
-  configure(config: SkeletonConfig): void {
-    if (this._initialized) {
-      console.warn('[SkeletonService] Service already configured. Ignoring reconfiguration.');
-      return;
-    }
-
-    this._config.set({ ...DEFAULT_SKELETON_CONFIG, ...config });
-
-    // Registrar templates personalizados de la configuracion
-    config.templates?.forEach((t) => {
-      this.registerTemplate(t.name, t.component, t.defaultConfig);
-    });
-
-    this._initialized = true;
-  }
-
-  /**
-   * Registra un template de skeleton personalizado.
-   *
-   * @param name Nombre unico del template
-   * @param component Componente a usar
-   * @param defaultConfig Configuracion por defecto opcional
-   */
-  registerTemplate(
-    name: string,
-    component: Type<unknown>,
-    defaultConfig?: SkeletonTemplateConfig
-  ): void {
-    this._templates.update((map) => {
-      const newMap = new Map(map);
-      newMap.set(name, { name, component, defaultConfig });
-      return newMap;
-    });
-  }
-
-  /**
-   * Obtiene un template de skeleton registrado.
-   *
-   * @param name Nombre del template
-   * @returns Template registrado o undefined si no existe
-   */
-  getTemplate(name: SkeletonTemplateName | string): RegisteredSkeletonTemplate | undefined {
-    return this._templates().get(name);
-  }
-
-  /**
-   * Verifica si un template esta registrado.
-   *
-   * @param name Nombre del template
-   * @returns true si el template existe
-   */
-  hasTemplate(name: string): boolean {
-    return this._templates().has(name);
-  }
-
-  /**
-   * Obtiene todos los nombres de templates registrados.
-   *
-   * @returns Array de nombres de templates
-   */
-  getTemplateNames(): string[] {
-    return Array.from(this._templates().keys());
-  }
-
-  /**
-   * Registra un estado de carga nombrado.
-   * Util para indicadores de carga globales.
-   *
-   * @param key Identificador unico del estado
-   * @param isLoading Estado de carga
-   */
-  setLoadingState(key: string, isLoading: boolean): void {
-    this._loadingStates.update((map) => {
-      const newMap = new Map(map);
-      if (isLoading) {
-        newMap.set(key, true);
-      } else {
-        newMap.delete(key);
-      }
-      return newMap;
-    });
-  }
-
-  /**
-   * Obtiene el estado de carga para una clave especifica.
-   *
-   * @param key Identificador del estado
-   * @returns Estado de carga actual
-   */
-  getLoadingState(key: string): boolean {
-    return this._loadingStates().get(key) ?? false;
-  }
-
-  /**
-   * Crea un signal computado para un estado de carga especifico.
-   *
-   * @param key Identificador del estado
-   * @returns Signal reactivo del estado de carga
-   */
-  loadingState(key: string) {
-    return computed(() => this._loadingStates().get(key) ?? false);
-  }
-
-  /**
-   * Obtiene todas las claves de estados de carga activos.
-   *
-   * @returns Array de claves con estado de carga activo
-   */
-  getActiveLoadingKeys(): string[] {
-    const states = this._loadingStates();
-    return Array.from(states.entries())
-      .filter(([, isLoading]) => isLoading)
-      .map(([key]) => key);
-  }
-
-  /**
-   * Limpia todos los estados de carga.
-   */
-  clearLoadingStates(): void {
-    this._loadingStates.set(new Map());
-  }
-
-  /**
-   * Limpia un estado de carga especifico.
-   *
-   * @param key Identificador del estado a limpiar
-   */
-  clearLoadingState(key: string): void {
-    this.setLoadingState(key, false);
-  }
-
-  /**
-   * Ejecuta una funcion async con tracking de estado de carga.
-   *
-   * @param key Identificador del estado
-   * @param fn Funcion async a ejecutar
-   * @returns Resultado de la funcion
-   */
-  async withLoading<T>(key: string, fn: () => Promise<T>): Promise<T> {
-    this.setLoadingState(key, true);
-    try {
-      return await fn();
-    } finally {
-      this.setLoadingState(key, false);
-    }
-  }
-
-  /**
-   * Obtiene la configuracion de animacion por defecto.
-   */
-  get animated(): boolean {
-    return this._config().animated ?? true;
-  }
-
-  /**
-   * Obtiene el delay por defecto.
-   */
-  get defaultDelay(): number {
-    return this._config().defaultDelay ?? 0;
-  }
-
-  /**
-   * Obtiene el tiempo minimo por defecto.
-   */
-  get defaultMinTime(): number {
-    return this._config().defaultMinTime ?? 300;
-  }
-}

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

@@ -1,166 +0,0 @@
-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 paginas de detalle.
- *
- * @example
- * <val-skeleton-detail></val-skeleton-detail>
- *
- * @example
- * <val-skeleton-detail [config]="{ sections: 3 }"></val-skeleton-detail>
- */
-@Component({
-  selector: 'val-skeleton-detail',
-  standalone: true,
-  imports: [CommonModule, SkeletonComponent],
-  template: `
-    <div class="skeleton-detail" [class]="config.cssClass">
-      <!-- Hero/Header section -->
-      <div class="skeleton-detail-hero">
-        <val-skeleton
-          [props]="{
-            type: 'custom',
-            width: '100%',
-            height: '200px',
-            borderRadius: '8px',
-            animated: config.animated !== false
-          }"
-        ></val-skeleton>
-      </div>
-
-      <!-- Title section -->
-      <div class="skeleton-detail-title">
-        <val-skeleton
-          [props]="{
-            type: 'text',
-            width: '70%',
-            height: '28px',
-            animated: config.animated !== false
-          }"
-        ></val-skeleton>
-        <val-skeleton
-          [props]="{
-            type: 'text',
-            width: '40%',
-            height: '16px',
-            animated: config.animated !== false
-          }"
-        ></val-skeleton>
-      </div>
-
-      <!-- Metadata row -->
-      <div class="skeleton-detail-meta">
-        @for (meta of metaItems; track $index) {
-          <val-skeleton
-            [props]="{
-              type: 'custom',
-              width: '80px',
-              height: '24px',
-              borderRadius: '12px',
-              animated: config.animated !== false
-            }"
-          ></val-skeleton>
-        }
-      </div>
-
-      <!-- Content sections -->
-      @for (section of sections; track $index) {
-        <div class="skeleton-detail-section">
-          <!-- Section title -->
-          <val-skeleton
-            [props]="{
-              type: 'text',
-              width: '30%',
-              height: '20px',
-              animated: config.animated !== false
-            }"
-          ></val-skeleton>
-          <!-- Section content -->
-          <val-skeleton
-            [props]="{
-              type: 'paragraph',
-              lines: 4,
-              animated: config.animated !== false
-            }"
-          ></val-skeleton>
-        </div>
-      }
-
-      <!-- Action buttons -->
-      <div class="skeleton-detail-actions">
-        <val-skeleton
-          [props]="{
-            type: 'custom',
-            width: '120px',
-            height: '44px',
-            borderRadius: '8px',
-            animated: config.animated !== false
-          }"
-        ></val-skeleton>
-        <val-skeleton
-          [props]="{
-            type: 'custom',
-            width: '120px',
-            height: '44px',
-            borderRadius: '8px',
-            animated: config.animated !== false
-          }"
-        ></val-skeleton>
-      </div>
-    </div>
-  `,
-  styles: [
-    `
-      .skeleton-detail {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        width: 100%;
-      }
-
-      .skeleton-detail-hero {
-        width: 100%;
-      }
-
-      .skeleton-detail-title {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .skeleton-detail-meta {
-        display: flex;
-        gap: 12px;
-        flex-wrap: wrap;
-      }
-
-      .skeleton-detail-section {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        padding-top: 16px;
-        border-top: 1px solid var(--ion-color-light-shade, #d7d8da);
-      }
-
-      .skeleton-detail-actions {
-        display: flex;
-        gap: 12px;
-        padding-top: 16px;
-      }
-    `,
-  ],
-})
-export class DetailSkeletonComponent implements SkeletonTemplateComponent {
-  @Input() config: SkeletonTemplateConfig = { sections: 2 };
-
-  get sections(): number[] {
-    return Array(this.config.sections ?? 2).fill(0);
-  }
-
-  get metaItems(): number[] {
-    return [1, 2, 3];
-  }
-}