valtech-components 2.0.687 → 2.0.689

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

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

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

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

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

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

@@ -0,0 +1,95 @@
+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();
+  }
+}