valtech-components 2.0.691 → 2.0.692

package/src/lib/components/organisms/avatar-upload/avatar-upload.component.ts

@@ -1,349 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  computed,
-  ElementRef,
-  EventEmitter,
-  inject,
-  input,
-  Output,
-  signal,
-  ViewChild,
-} from '@angular/core';
-import { IonIcon, IonModal, IonSpinner } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { cameraOutline } from 'ionicons/icons';
-import { firstValueFrom } from 'rxjs';
-import { AuthService } from '../../../services/auth';
-import { StorageService } from '../../../services/firebase';
-import { I18nService } from '../../../services/i18n';
-import { ImageService } from '../../../services/image';
-import { ImageCropComponent } from '../../molecules/image-crop';
-import {
-  AVATAR_UPLOAD_DEFAULTS,
-  AvatarUploadError,
-  AvatarUploadMetadata,
-  AvatarUploadResult,
-} from './types';
-
-addIcons({ cameraOutline });
-
-/**
- * AvatarUploadComponent
- *
- * A complete avatar upload solution with:
- * - Image selection from device
- * - Crop modal with round preview
- * - Automatic compression and thumbnail generation
- * - Upload to Firebase Storage
- * - Backend sync via AuthService
- *
- * @example Basic usage
- * ```html
- * <val-avatar-upload
- *   [props]="{
- *     currentUrl: user()?.avatarUrl,
- *     initials: 'JD',
- *     size: 120
- *   }"
- *   (uploaded)="onAvatarUploaded($event)"
- *   (error)="onError($event)"
- * />
- * ```
- */
-@Component({
-  selector: 'val-avatar-upload',
-  standalone: true,
-  imports: [CommonModule, IonIcon, IonSpinner, IonModal, ImageCropComponent],
-  template: `
-    <div
-      class="avatar-upload"
-      [style.--avatar-size.px]="config().size"
-      [class.avatar-upload--loading]="loading()"
-    >
-      <div class="avatar-container">
-        <!-- Avatar Image or Initials -->
-        @if (displayUrl()) {
-          <img
-            class="avatar-image"
-            [src]="displayUrl()"
-            alt="Avatar"
-            (error)="onImageError()"
-          />
-        } @else {
-          <div
-            class="avatar-initials"
-            [style.background-color]="config().backgroundColor"
-          >
-            {{ config().initials || '?' }}
-          </div>
-        }
-
-        <!-- Edit Button -->
-        @if (config().editable && !loading()) {
-          <button
-            class="edit-button"
-            type="button"
-            (click)="openFilePicker()"
-            [attr.aria-label]="editButtonLabel()"
-          >
-            <ion-icon name="camera-outline"></ion-icon>
-          </button>
-        }
-
-        <!-- Loading Overlay -->
-        @if (loading()) {
-          <div class="loading-overlay">
-            <ion-spinner name="crescent"></ion-spinner>
-          </div>
-        }
-      </div>
-
-      <!-- Hidden File Input -->
-      <input
-        #fileInput
-        type="file"
-        accept="image/jpeg,image/png,image/webp"
-        (change)="onFileSelected($event)"
-        hidden
-      />
-
-      <!-- Crop Modal -->
-      <ion-modal
-        [isOpen]="showCropModal()"
-        (didDismiss)="onCropCancel()"
-        [breakpoints]="[0, 1]"
-        [initialBreakpoint]="1"
-      >
-        <ng-template>
-          @if (selectedFile()) {
-            <val-image-crop
-              [image]="selectedFile()!"
-              [aspectRatio]="1"
-              [roundCropper]="true"
-              [i18nNamespace]="config().i18nNamespace"
-              (cropComplete)="onCropComplete($event)"
-              (cancel)="onCropCancel()"
-              (loadFailed)="onCropLoadFailed()"
-            />
-          }
-        </ng-template>
-      </ion-modal>
-    </div>
-  `,
-  styleUrls: ['./avatar-upload.component.scss'],
-})
-export class AvatarUploadComponent {
-  private imageService = inject(ImageService);
-  private storageService = inject(StorageService);
-  private authService = inject(AuthService);
-  private i18n = inject(I18nService);
-
-  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
-
-  /** Component configuration */
-  readonly props = input<AvatarUploadMetadata>({});
-
-  /** Emitted after successful upload and backend sync */
-  @Output() uploaded = new EventEmitter<AvatarUploadResult>();
-
-  /** Emitted on any error during the process */
-  @Output() error = new EventEmitter<AvatarUploadError>();
-
-  /** Emitted when upload starts */
-  @Output() uploadStart = new EventEmitter<void>();
-
-  // Internal state
-  protected loading = signal(false);
-  protected showCropModal = signal(false);
-  protected selectedFile = signal<File | null>(null);
-  protected previewUrl = signal<string | null>(null);
-  protected imageLoadError = signal(false);
-
-  /** Merged config with defaults */
-  protected config = computed(() => ({
-    ...AVATAR_UPLOAD_DEFAULTS,
-    ...this.props(),
-  }));
-
-  /** URL to display (preview takes priority over current) */
-  protected displayUrl = computed(() => {
-    if (this.imageLoadError()) return null;
-    return this.previewUrl() || this.config().currentUrl || null;
-  });
-
-  /** Aria label for edit button */
-  protected editButtonLabel = computed(() => {
-    this.i18n.lang();
-    return this.i18n.t('changePhoto', this.config().i18nNamespace) || 'Cambiar foto';
-  });
-
-  /** Open file picker dialog */
-  openFilePicker(): void {
-    this.fileInput.nativeElement.click();
-  }
-
-  /** Handle file selection */
-  onFileSelected(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const file = input.files?.[0];
-
-    if (!file) return;
-
-    // Reset input for same file selection
-    input.value = '';
-
-    // Validate file
-    const validation = this.imageService.validate(file, {
-      maxSize: this.config().maxFileSize,
-      allowedTypes: ['image/jpeg', 'image/png', 'image/webp'],
-    });
-
-    if (!validation.valid) {
-      this.emitError(validation.error as AvatarUploadError['type'], validation.message!);
-      return;
-    }
-
-    // Open crop modal
-    this.selectedFile.set(file);
-    this.showCropModal.set(true);
-  }
-
-  /** Handle crop completion */
-  async onCropComplete(croppedBlob: Blob): Promise<void> {
-    this.showCropModal.set(false);
-    this.selectedFile.set(null);
-
-    await this.processAndUpload(croppedBlob);
-  }
-
-  /** Handle crop cancel */
-  onCropCancel(): void {
-    this.showCropModal.set(false);
-    this.selectedFile.set(null);
-  }
-
-  /** Handle crop load failure */
-  onCropLoadFailed(): void {
-    this.showCropModal.set(false);
-    this.selectedFile.set(null);
-    this.emitError('invalidType', this.i18n.t('loadFailed', this.config().i18nNamespace) || 'No se pudo cargar la imagen');
-  }
-
-  /** Handle image load error */
-  onImageError(): void {
-    this.imageLoadError.set(true);
-  }
-
-  /** Timeout for upload operations (30 seconds) */
-  private static readonly UPLOAD_TIMEOUT_MS = 30000;
-
-  /** Process cropped image and upload */
-  private async processAndUpload(croppedBlob: Blob): Promise<void> {
-    this.loading.set(true);
-    this.uploadStart.emit();
-
-    // Timeout promise to prevent infinite loading
-    const uploadTimeout = new Promise<never>((_, reject) =>
-      setTimeout(
-        () => reject(new Error('Upload timeout')),
-        AvatarUploadComponent.UPLOAD_TIMEOUT_MS
-      )
-    );
-
-    try {
-      const config = this.config();
-
-      // 1. Compress image
-      const compressed = await this.imageService.compress(croppedBlob, {
-        maxWidth: config.maxWidth,
-        maxHeight: config.maxWidth,
-        quality: config.compressQuality,
-      });
-
-      // 2. Generate thumbnail
-      const thumbnail = await this.imageService.thumbnail(
-        compressed.blob,
-        config.thumbnailSize
-      );
-
-      // 3. Set preview immediately
-      this.previewUrl.set(compressed.dataUrl);
-      this.imageLoadError.set(false);
-
-      // 4. Get user ID for storage path
-      const userId = this.authService.user()?.userId;
-      if (!userId) {
-        throw new Error('User not authenticated');
-      }
-
-      // 5. Upload to Firebase Storage with predictable paths
-      // Path: users/{userId}/avatar.jpg - allows any app to construct URL with just userId
-      // skipPrefix: true - bypasses appId prefix for shared/cross-app paths
-      const avatarPath = `users/${userId}/avatar.jpg`;
-      const thumbPath = `users/${userId}/thumb.jpg`;
-      const uploadMetadata = { skipPrefix: true, contentType: 'image/jpeg' };
-
-      // Race against timeout to prevent infinite loading
-      const [avatarResult, thumbResult] = await Promise.race([
-        Promise.all([
-          this.storageService.uploadAndGetUrl(avatarPath, compressed.blob, uploadMetadata),
-          this.storageService.uploadAndGetUrl(thumbPath, thumbnail.blob, uploadMetadata),
-        ]),
-        uploadTimeout,
-      ]);
-
-      // 6. Update backend with URLs
-      await firstValueFrom(
-        this.authService.updateAvatar({
-          avatarUrl: avatarResult.downloadUrl,
-          avatarThumbnail: thumbResult.downloadUrl,
-        })
-      );
-
-      // 7. Update preview with cache-busting to force refresh
-      const cacheBuster = `?t=${Date.now()}`;
-      this.previewUrl.set(avatarResult.downloadUrl + cacheBuster);
-
-      // 8. Emit success
-      const result: AvatarUploadResult = {
-        avatarUrl: avatarResult.downloadUrl,
-        thumbnailUrl: thumbResult.downloadUrl,
-      };
-
-      this.uploaded.emit(result);
-    } catch (err) {
-      // Revert preview on error
-      this.previewUrl.set(null);
-
-      // Determine error message based on error type
-      let message: string;
-      if (err instanceof Error) {
-        if (err.message === 'Upload timeout') {
-          message =
-            this.i18n.t('uploadTimeout', this.config().i18nNamespace) ||
-            'La subida tardó demasiado. Verifica tu conexión.';
-        } else {
-          message = err.message;
-        }
-      } else {
-        message =
-          this.i18n.t('uploadError', this.config().i18nNamespace) ||
-          'Error al subir la imagen';
-      }
-
-      this.emitError('uploadFailed', message, err);
-    } finally {
-      this.loading.set(false);
-    }
-  }
-
-  /** Emit error event */
-  private emitError(
-    type: AvatarUploadError['type'],
-    message: string,
-    originalError?: unknown
-  ): void {
-    this.error.emit({ type, message, originalError });
-  }
-}

package/src/lib/components/organisms/avatar-upload/index.ts

@@ -1,2 +0,0 @@
-export * from './avatar-upload.component';
-export * from './types';

package/src/lib/components/organisms/avatar-upload/types.ts

@@ -1,71 +0,0 @@
-/**
- * Configuration for AvatarUploadComponent
- */
-export interface AvatarUploadMetadata {
-  /** Current avatar URL */
-  currentUrl?: string;
-  /** Initials to show when no avatar (e.g., "JD" for John Doe) */
-  initials?: string;
-  /** Background color for initials avatar */
-  backgroundColor?: string;
-  /** Avatar size in pixels (default: 100) */
-  size?: number;
-  /** Show edit button (default: true) */
-  editable?: boolean;
-  /** Storage path prefix without userId (default: 'avatars') */
-  storagePath?: string;
-  /** i18n namespace for labels (default: 'AvatarUpload') */
-  i18nNamespace?: string;
-  /** Max file size in bytes (default: 10MB) */
-  maxFileSize?: number;
-  /** Quality for compressed image 0-1 (default: 0.8) */
-  compressQuality?: number;
-  /** Max width for avatar (default: 800) */
-  maxWidth?: number;
-  /** Thumbnail size (default: 150) */
-  thumbnailSize?: number;
-}
-
-/**
- * Result emitted after successful upload
- */
-export interface AvatarUploadResult {
-  /** Full-size avatar URL */
-  avatarUrl: string;
-  /** Thumbnail URL */
-  thumbnailUrl: string;
-}
-
-/**
- * Error types that can occur during upload
- */
-export type AvatarUploadErrorType =
-  | 'invalidType'
-  | 'fileTooLarge'
-  | 'uploadFailed'
-  | 'backendFailed'
-  | 'cancelled';
-
-/**
- * Error object emitted on failure
- */
-export interface AvatarUploadError {
-  type: AvatarUploadErrorType;
-  message: string;
-  originalError?: unknown;
-}
-
-/**
- * Default values
- */
-export const AVATAR_UPLOAD_DEFAULTS = {
-  size: 100,
-  editable: true,
-  storagePath: 'avatars',
-  i18nNamespace: 'AvatarUpload',
-  maxFileSize: 10 * 1024 * 1024, // 10MB
-  compressQuality: 0.8,
-  maxWidth: 800,
-  thumbnailSize: 150,
-  backgroundColor: '#6366f1', // Indigo
-};

package/src/lib/components/organisms/banner/banner.component.scss

@@ -1,51 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.content-container {
-  display: flex;
-  justify-content: space-between;
-
-  &.center {
-    flex-direction: column;
-  }
-
-  &.column {
-    flex-direction: row;
-  }
-
-  &.row {
-    flex-direction: column;
-  }
-
-  &.middle {
-    align-items: center;
-  }
-
-  &.top {
-    align-items: flex-start;
-  }
-
-  &.bottom {
-    align-items: flex-end;
-  }
-
-  &.hybrid {
-    flex-direction: column;
-    align-items: flex-start;
-
-    @include media-medium {
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-}
-
-.buttons-container {
-  align-items: center;
-  display: flex;
-  margin-top: pxToRem(16);
-  margin-bottom: pxToRem(1);
-
-  &.column {
-    margin-top: pxToRem(0);
-  }
-}

package/src/lib/components/organisms/banner/banner.component.ts

@@ -1,95 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-import { BoxComponent } from '../../atoms/box/box.component';
-import { ButtonGroupComponent } from '../../molecules/button-group/button-group.component';
-import { TitleBlockComponent } from '../../molecules/title-block/title-block.component';
-import { BannerMetadata } from './types';
-
-@Component({
-  selector: 'val-banner',
-  standalone: true,
-  imports: [CommonModule, BoxComponent, TitleBlockComponent, ButtonGroupComponent],
-  template: `
-    <val-box
-      [props]="{
-        icon: props.closable ? 'close-outline' : '',
-        bordered: props.bordered,
-        color: '',
-        padding: props.padding,
-      }"
-      (onClick)="closeHandler()"
-    >
-      <div [ngClass]="['content-container', props.mode, props.alignment]" body>
-        <val-title-block
-          [props]="{
-            position: props.content.position,
-            aboveTitle: props.content.aboveTitle,
-            title: props.content.title,
-            bellowTitle: props.content.bellowTitle,
-          }"
-        ></val-title-block>
-        @if (props.actions) {
-          <val-button-group
-            [ngClass]="['buttons-container', props.mode, props.alignment]"
-            [props]="props.actions"
-            (onClick)="clickHandler($event)"
-          ></val-button-group>
-        }
-      </div>
-    </val-box>
-  `,
-  styleUrls: ['./banner.component.scss'],
-})
-/**
- * val-banner
- *
- * Displays a banner with title block, actions, and optional close button.
- *
- * @example
- * <val-banner [props]="{ content: {...}, actions: {...}, closable: true, bordered: true, mode: 'center', alignment: 'center', padding: '8px' }" (onClick)="handler($event)" (onClose)="closeHandler()"></val-banner>
- *
- * @input props: BannerMetadata - Configuration for the banner (content, actions, closable, bordered, mode, alignment, padding)
- * @output onClick - Emits when an action is clicked
- * @output onClose - Emits when the banner is closed
- */
-export class BannerComponent implements OnInit, OnChanges {
-  @Input()
-  props: BannerMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  @Output()
-  onClose = new EventEmitter();
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  ngOnInit() {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['props']) {
-      // Forzar detección de cambios múltiple
-      this.cdr.detectChanges();
-      setTimeout(() => {
-        this.cdr.detectChanges();
-      }, 0);
-    }
-  }
-
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-
-  closeHandler() {
-    this.onClose.emit();
-  }
-}