carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/drop-zone/drop-zone.component.ts

@@ -0,0 +1,1272 @@
+import {
+  Component,
+  ElementRef,
+  signal,
+  ViewChild,
+  inject,
+  computed,
+  input,
+  Input,
+  Output,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  AfterViewChecked,
+} from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+
+//components
+import { SvgIconComponent } from 'angular-svg-icon';
+import { ImageCropperComponent } from 'ngx-image-cropper';
+import { DocumentPreviewComponent } from '../document-preview/document-preview.component';
+import { AvatarComponent } from '../avatar/avatar.component';
+import { LottieComponent } from 'ngx-lottie';
+
+//models
+import { AppFile, FileExtension } from './models';
+import { Driver } from '../avatar/models';
+import { FileResponse } from './models/file.response';
+
+//modules
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { CommonModule } from '@angular/common';
+
+//cropper
+import {
+  ImageCroppedEvent,
+  LoadedImage,
+  ImageTransform,
+  base64ToFile,
+} from 'ngx-image-cropper';
+
+//services
+import { DocumentService } from '../../services/document.service';
+
+//forms
+import { FormGroup } from '@angular/forms';
+
+//interfaces
+import { DocumentTag } from '../document-preview/interfaces';
+import { AnimationItem } from 'lottie-web';
+
+//enums
+import { DropZoneVariant } from './enums';
+
+//pipes
+import { DragModeAnimationPipe } from './pipes/drag-mode-animation.pipe';
+
+//helpers
+import { DropZoneDocumentsHelper } from './utils/helpers';
+
+/**
+ * A component that provides a user interface for file uploading via
+ * drag-and-drop or a file input dialog. It displays previews of the
+ * selected files in a carousel.
+ */
+@Component({
+  selector: 'cai-drop-zone',
+  imports: [
+    // modules
+    CommonModule,
+    NgbTooltipModule,
+
+    // components
+    SvgIconComponent,
+    DocumentPreviewComponent,
+    ImageCropperComponent,
+    AvatarComponent,
+    LottieComponent,
+
+    //pipes
+    DragModeAnimationPipe,
+  ],
+  templateUrl: './drop-zone.component.html',
+  styleUrl: './drop-zone.component.scss',
+  providers: [],
+})
+export class DropZoneComponent implements OnDestroy, AfterViewChecked {
+  // Signals
+  public zoomValue = signal<number>(5.8);
+  public smallView = signal<boolean>(false);
+  public cropHeight = signal<number>(0);
+  public cropWidth = signal<number>(0);
+  public showCropper = signal<boolean>(false);
+  public isCropperReady = signal<boolean>(false);
+  public deletedDocs = signal<number[]>([]);
+  public dragMode = signal<boolean>(false);
+  public onDragover = signal<boolean>(false);
+  public invalidFileSize = signal<boolean>(false);
+  public isLoadingSkeleton = signal<boolean>(true);
+  public skeletonCount = signal(0);
+  public maxCountReached = signal<boolean>(false);
+  public carouselIndex = signal(0);
+
+  public driver = signal<Driver>({
+    id: 0,
+    firstName: '',
+    lastName: '',
+    avatarFile: null,
+    avatarColor: 'Blue',
+  });
+
+  public transform: ImageTransform = {
+    scale: this.zoomValue(),
+  };
+
+  public imageChangedEvent: Event | null = null;
+  public croppedImage: SafeUrl | null = '';
+  public originalImageWidth: number = 0;
+  public originalImageHeight: number = 0;
+  private cropperResultFile: File | null = null;
+  private cropperPreviewUrl: string | null = null;
+
+  private lottieAnimation: AnimationItem | null = null;
+  public temporaryImageFile: AppFile | null = null;
+
+  public drawerViewportWidth = signal(0);
+  private drawerRo: ResizeObserver | null = null;
+  private drawerEl: HTMLElement | null = null;
+
+  // Inputs
+  public crop = input<boolean>(false);
+  public size = input<string>();
+  public rounded = input<boolean>(false);
+  public deletedFileIds = input<number[]>([]);
+  public maxCountFiles = input<number>(1);
+  public isDetailsSlider = input<boolean>(false);
+  public isDrawerMode = input<boolean>(false);
+  public isCoverDetails = input<boolean>(false);
+  public maxFileSize = input<number>(100); //MB
+  public isDocumentsMode = input<boolean>(false);
+  public documentsDropZoneOpen = input<boolean>(false);
+  public searchText = input<string | null>(null);
+
+  @Input()
+  set files(value: FileResponse[] | null) {
+    this._files = value ?? [];
+
+    if (!this._files.length) {
+      this.docs.set([]);
+      this.isLoadingSkeleton.set(false);
+      return;
+    }
+
+    this.populateDocs(this._files);
+  }
+
+  get files(): FileResponse[] {
+    return this._files;
+  }
+
+  //enums
+  public dropZoneVariant = DropZoneVariant;
+
+  //outputs
+  @Output() onDeletedFileIds = new EventEmitter<number[]>();
+  @Output() onDocsChange = new EventEmitter<AppFile[]>();
+  @Output() onDocumentPreviewClick = new EventEmitter<{ fileId: number }>();
+  @Output() onDocumentFileNameChange = new EventEmitter<{
+    fileId?: number;
+    newFileName: string;
+  }>();
+  @Output() onCropPendingChange = new EventEmitter<boolean>();
+  @Output() onDocumentDropZoneOpenChange = new EventEmitter<boolean>();
+
+  //views
+  @ViewChild('inputRange') inputRange!: ElementRef<HTMLInputElement>;
+  @ViewChild('dropZoneContainer') dropZoneContainer!: ElementRef<HTMLElement>;
+  @ViewChild('docsViewport') docsViewport?: ElementRef<HTMLElement>;
+
+  //variables
+  public coverUrl: string = '';
+  public profileUrl: string = '';
+  public logoUrl: string = '';
+  public categoryTag: string | null = null;
+  private _files: FileResponse[] = [];
+
+  // helpers
+  private DropZoneDocumentsHelper = DropZoneDocumentsHelper;
+
+  /**
+   * A input that holds an FormGroup object that is used to update the form validity when the crop mode is closed.
+   */
+
+  public parentForm = input<FormGroup | null>(null);
+
+  /**
+    * A signal that holds an array of `AppFile` objects representing the files
+    * that have been selected or dropped by the user.
+ 
+    */
+  public variant = input<string>(this.dropZoneVariant.DOCUMENT);
+
+  /**
+   * Input that holds an array of `DocumentTag` objects representing the tags for the documents.
+   */
+  public documentTags = input<DocumentTag[]>([]);
+
+  /**
+   * Injects the DocumentService for file processing tasks like
+   * thumbnail generation and PDF page counting.
+   * @private
+   */
+  private documentService = inject(DocumentService);
+
+  /**
+   * An array of file extensions that should be excluded from the supported list.
+   * @defaultValue `[]` (an empty array)
+   * @type {FileExtension[]}
+   */
+  excludedFileTypes = input<FileExtension[]>([]);
+
+  /**
+   * The base array of all file extensions that are generally allowed.
+   * Supported file types will be derived from this list, after excluding
+   * any types specified in `excludedFileTypes`.
+   *
+   * @defaultValue `['avi', 'mov', 'mp4', 'pdf', 'gif', 'png', 'jpg', 'jpeg']`
+   * @type {FileExtension[]}
+   */
+  fileTypes = input<FileExtension[]>([
+    'pdf',
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'avi',
+    'mov',
+    'mp4',
+  ]);
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    this.cropDimensions();
+  }
+
+  ngOnDestroy() {
+    this.clearCropperPreviewUrl();
+    this.clearDrawerRo();
+  }
+
+  ngAfterViewChecked() {
+    this.setDrawerRo();
+  }
+
+  private clampDrawerIndex(): void {
+    const maxStart = Math.max(
+      0,
+      this.docs().length - this.carouselVisibleCount(),
+    );
+    if (this.carouselIndex() > maxStart) this.carouselIndex.set(maxStart);
+  }
+
+  private setDrawerRo(): void {
+    if (!this.isDrawerMode()) {
+      this.clearDrawerRo();
+      this.drawerEl = null;
+      return;
+    }
+    const el = this.docsViewport?.nativeElement;
+    if (!el) {
+      this.drawerEl = null;
+      return;
+    }
+    if (el !== this.drawerEl) {
+      this.drawerEl = el;
+      this.drawerViewportWidth.set(el.getBoundingClientRect().width);
+      this.clampDrawerIndex();
+      this.drawerRo = new ResizeObserver(() => {
+        this.drawerViewportWidth.set(
+          this.docsViewport!.nativeElement.getBoundingClientRect().width,
+        );
+        this.clampDrawerIndex();
+      });
+      this.drawerRo.observe(el);
+    }
+  }
+
+  private clearDrawerRo(): void {
+    if (this.drawerRo && this.drawerEl) {
+      this.drawerRo.unobserve(this.drawerEl);
+      this.drawerRo.disconnect();
+      this.drawerRo = null;
+    }
+  }
+
+  emitDocs() {
+    this.onDocsChange.emit(this.docs());
+  }
+
+  animationCreated(animation: AnimationItem) {
+    this.lottieAnimation = animation;
+    this.lottieAnimation.goToAndStop(0, true);
+  }
+
+  private playDropAnimation(forward: boolean = true) {
+    if (!this.lottieAnimation) {
+      return;
+    }
+
+    const speed = forward ? 1 : 4;
+    const endFrame = Math.max(0, this.lottieAnimation.totalFrames ?? 0);
+    const currentFrame = Math.round(
+      Math.min(Math.max(this.lottieAnimation.currentFrame ?? 0, 0), endFrame),
+    );
+
+    this.lottieAnimation.setDirection(forward ? 1 : -1);
+    this.lottieAnimation.setSpeed(speed);
+    this.lottieAnimation.goToAndPlay(
+      forward ? 0 : currentFrame || endFrame,
+      true,
+    );
+  }
+
+  private stopDropAnimation() {
+    if (!this.lottieAnimation) {
+      return;
+    }
+
+    this.lottieAnimation.goToAndStop(0, true);
+  }
+
+  getTagIds(tags: string[] | null | undefined, generatedByUser: boolean) {
+    if (!generatedByUser) {
+      this.categoryTag = tags?.[0] ?? null;
+      return null;
+    }
+
+    const tag = this.documentTags().find((tag) => tags?.includes(tag.tagName));
+    if (!tag) {
+      this.categoryTag = tags?.[0] ?? null;
+      return null;
+    } else {
+      return this.documentTags()
+        .filter((tag) => tags?.includes(tag.tagName))
+        .map((tag) => tag.tagId);
+    }
+  }
+
+  async populateDocs(currentFiles: FileResponse[] | AppFile[]) {
+    if (!currentFiles?.length) {
+      this.docs.set([]);
+      this.isLoadingSkeleton.set(false);
+      return;
+    }
+
+    this.skeletonCount.set(currentFiles.length);
+
+    const filesToProcess =
+      this.DropZoneDocumentsHelper.splitExistingAndNewFiles(
+        currentFiles,
+        this.docs(),
+      );
+
+    const newlyProcessed = await Promise.all(
+      filesToProcess.map(async (fileResp) => {
+        if ((fileResp as AppFile).imagePreviewUrl) return fileResp as AppFile;
+
+        const fileExtension =
+          fileResp.fileName?.split('.').pop()?.toLowerCase() || 'pdf';
+
+        let previewUrl = (fileResp as FileResponse)?.url || '';
+        let pageCount: number | undefined;
+
+        const file = await this.DropZoneDocumentsHelper.fetchFileAsFile(
+          fileResp as FileResponse,
+        );
+
+        const supportedBase64 = ['profile', 'cover', 'logo'].includes(
+          this.variant(),
+        );
+
+        const base64Url =
+          supportedBase64 && file
+            ? await this.DropZoneDocumentsHelper.fileToBase64(file)
+            : null;
+
+        if (fileExtension === 'pdf' && file) {
+          try {
+            const [thumb, pages] = await Promise.all([
+              this.documentService.generateThumbnail(file),
+              this.documentService.getPdfPageCount(file),
+            ]);
+            previewUrl = thumb;
+            pageCount = pages;
+          } catch (error) {
+            console.error(`Failed ${fileResp.fileName}:`, error);
+          }
+        }
+
+        return {
+          fileName: fileResp.fileName || '',
+          baseName: fileResp.fileName?.split('.').slice(0, -1).join('.') || '',
+          fileId: fileResp.fileId || 0,
+          type: fileExtension as FileExtension,
+          size: (fileResp as FileResponse).fileSize || 0,
+          imagePreviewUrl: previewUrl,
+          file: file,
+          pageCount: pageCount,
+          tags: this.getTagIds(
+            (fileResp as FileResponse).tags || [],
+            (fileResp as FileResponse).tagGeneratedByUser ?? false,
+          ),
+          tagChanged: false,
+          fileNameChanged: false,
+          categoryTag: this.categoryTag,
+          base64Url,
+        };
+      }),
+    );
+
+    const validNewFiles = (newlyProcessed.filter(Boolean) as AppFile[]) || [];
+
+    if (validNewFiles.length > 0) {
+      const updatedDocs = [...this.docs(), ...validNewFiles];
+      this.docs.set(updatedDocs);
+      this.setImagePreviewUrl(updatedDocs[0]?.imagePreviewUrl || '');
+    }
+
+    if (this.crop()) {
+      this.submitCrop(true);
+    }
+
+    console.log('this.docs()', this.docs());
+    this.isLoadingSkeleton.set(false);
+    this.deletedDocs.set(this.deletedFileIds() ?? []);
+  }
+
+  updateRangeBackground(input: HTMLInputElement) {
+    if (!input) return;
+    const min = Number(input.min);
+    const max = Number(input.max);
+    var value;
+    value = ((this.zoomValue() - min) / (max - min)) * 100;
+    input.style.setProperty('--range-progress', `${value}%`);
+  }
+
+  cropDimensions() {
+    const variant = this.variant();
+    const rounded = this.rounded();
+    let width = 0;
+    let height = 0;
+    switch (variant) {
+      case 'profile':
+        if (rounded) {
+          width = 178;
+          height = 178;
+        } else {
+          width = 160;
+          height = 178;
+        }
+        break;
+      case 'logo':
+        width = 628;
+        height = 214;
+        break;
+      case 'cover':
+        width = 267;
+        height = 178;
+        break;
+    }
+
+    this.cropWidth.set(width);
+    this.cropHeight.set(height);
+  }
+
+  private setImagePreviewUrl(previewUrl: string) {
+    if (!previewUrl) return;
+
+    switch (this.variant()) {
+      case this.dropZoneVariant.PROFILE: {
+        this.profileUrl = previewUrl;
+        break;
+      }
+      case this.dropZoneVariant.COVER: {
+        this.coverUrl = previewUrl;
+        if (this.size() === '480px') {
+          this.smallView.set(true);
+        }
+        break;
+      }
+      case this.dropZoneVariant.LOGO: {
+        this.logoUrl = previewUrl;
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  ratioHelper(): number {
+    const width = this.cropWidth();
+    const height = this.cropHeight();
+
+    return width && height ? width / height : 1;
+  }
+
+  onZoomChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const zoom = Number(input.value);
+    this.zoomValue.set(zoom);
+
+    this.transform = {
+      scale: zoom,
+    };
+    this.updateRangeBackground(event.target as HTMLInputElement);
+  }
+
+  fileChangeEvent(event: Event): void {
+    this.imageChangedEvent = event;
+    this.isCropperReady.set(false);
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+
+    this.zoomValue.set(5.8);
+    this.transform = { scale: this.zoomValue() };
+
+    const fileExtension = file?.name.split('.').pop()?.toLowerCase();
+    const isSupportedImage =
+      file &&
+      file.type.startsWith('image/') &&
+      fileExtension &&
+      this.supportedFileTypes().includes(fileExtension as FileExtension);
+    if (isSupportedImage && this.crop()) {
+      this.setInvalid();
+      this.showCropper.set(true);
+    } else {
+      this.showCropper.set(false);
+    }
+
+    this.zoomValue.set(5.8);
+  }
+
+  imageCropped(event: ImageCroppedEvent) {
+    if (event.base64) {
+      const blob = base64ToFile(event.base64);
+      this.setCropperFile(this.createFileFromBlob(blob));
+    } else if (event.objectUrl) {
+      this.setCropperFileFromObjectUrl(event.objectUrl);
+    }
+  }
+
+  private setCropperFile(file: File) {
+    this.cropperResultFile = file;
+    this.updateCropperPreviewUrl(URL.createObjectURL(file));
+  }
+
+  private createFileFromBlob(blob: Blob): File {
+    const name =
+      this.temporaryImageFile?.fileName ??
+      this.docs()[this.docs().length - 1]?.fileName ??
+      'cropped-image.png';
+    return new File([blob], name, {
+      type: blob.type,
+      lastModified: Date.now(),
+    });
+  }
+
+  private async setCropperFileFromObjectUrl(objectUrl: string) {
+    try {
+      const response = await fetch(objectUrl);
+      const blob = await response.blob();
+      this.setCropperFile(this.createFileFromBlob(blob));
+    } catch (error) {
+      console.error('Failed to convert objectUrl to File:', error);
+    }
+  }
+
+  private updateCropperPreviewUrl(url: string) {
+    if (this.cropperPreviewUrl) {
+      URL.revokeObjectURL(this.cropperPreviewUrl);
+    }
+    this.cropperPreviewUrl = url;
+    this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(url);
+  }
+
+  private clearCropperPreviewUrl() {
+    if (this.cropperPreviewUrl) {
+      URL.revokeObjectURL(this.cropperPreviewUrl);
+      this.cropperPreviewUrl = null;
+      this.croppedImage = null;
+    }
+  }
+
+  imageLoaded(image: LoadedImage) {}
+
+  cropperReady() {
+    this.isCropperReady.set(true);
+    if (this.inputRange?.nativeElement) {
+      this.updateRangeBackground(this.inputRange.nativeElement);
+    }
+  }
+
+  loadImageFailed() {
+    // show message
+  }
+
+  onTransformChange(event: ImageTransform) {
+    const scale = event?.scale as number;
+    this.zoomValue.set(scale);
+  }
+
+  cancelCrop() {
+    this.clearInvalid();
+    this.isCropperReady.set(false);
+    this.showCropper.set(false);
+    this.onCropPendingChange.emit(false);
+  }
+
+  async submitCrop(initial: boolean = false) {
+    if (!this.cropperResultFile) {
+      this.clearInvalid();
+      this.showCropper.set(false);
+      this.isCropperReady.set(false);
+      return;
+    }
+
+    const previewUrl = URL.createObjectURL(this.cropperResultFile);
+
+    if (this.temporaryImageFile) {
+      this.temporaryImageFile.file = this.cropperResultFile;
+      this.temporaryImageFile.imagePreviewUrl = previewUrl;
+
+      if (['profile', 'cover', 'logo'].includes(this.variant())) {
+        this.temporaryImageFile.base64Url =
+          await this.DropZoneDocumentsHelper.fileToBase64(
+            this.cropperResultFile,
+          );
+      }
+
+      this.docs.set([this.temporaryImageFile]);
+      this.setImagePreviewUrl(previewUrl);
+      this.clearInvalid();
+      this.showCropper.set(false);
+      this.isCropperReady.set(false);
+
+      if (!initial) this.emitDocs();
+      if (previewUrl) {
+        this.clearCropperPreviewUrl();
+      }
+
+      this.temporaryImageFile = null;
+      this.cropperResultFile = null;
+      this.onCropPendingChange.emit(false);
+
+      return;
+    }
+
+    const lastIndex = this.docs().length - 1;
+
+    if (lastIndex >= 0) {
+      const updatedDocs = [...this.docs()];
+      const lastDoc = { ...updatedDocs[lastIndex] };
+      lastDoc.imagePreviewUrl = previewUrl;
+      lastDoc.file = this.cropperResultFile;
+      updatedDocs[lastIndex] = lastDoc;
+
+      this.docs.set(updatedDocs);
+      this.clearInvalid();
+
+      this.showCropper.set(false);
+    }
+
+    this.setImagePreviewUrl(previewUrl);
+    this.cropDimensions();
+    if (!initial) this.emitDocs();
+    this.isCropperReady.set(false);
+    if (previewUrl) {
+      this.clearCropperPreviewUrl();
+    }
+    this.cropperResultFile = null;
+  }
+
+  /**
+   * A computed signal that derives the list of currently supported file extensions.
+   * It filters the base `fileTypes` array, removing any extensions present
+   * in the `excludedFileTypes` input.
+   */
+  supportedFileTypes = computed(() => {
+    const excluded = this.excludedFileTypes();
+    const types = this.fileTypes();
+
+    if (!excluded || excluded.length === 0) {
+      return types;
+    }
+
+    return types.filter((type) => !excluded.includes(type));
+  });
+
+  /**
+   * A signal that holds an array of `AppFile` objects representing the files
+   * that have been selected or dropped by the user.
+   */
+  docs = signal<AppFile[]>([]);
+
+  /**
+   * A signal that acts as a boolean flag. It is set to `true` when the user
+   * attempts to upload a file with an unsupported extension.
+   */
+  unsupported = signal(false);
+
+  /**
+   * Handles the 'change' event from the hidden file input. It extracts the
+   * selected files and passes them to the `processFiles` method.
+   * @param event The `Event` object from the file input element.
+   */
+  onInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const files = target.files as FileList;
+    this.processFiles(files);
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    this.resetDragState();
+    const dropZone = this.dropZoneContainer?.nativeElement;
+    const isInDropArea =
+      dropZone?.contains(event.target as Node) ||
+      (this.dragMode() &&
+        dropZone?.parentElement?.contains(event.target as Node));
+    if (!isInDropArea || this.unsupported()) return;
+    const files = event.dataTransfer?.files;
+    if (files && files.length > 0) {
+      this.processFiles(files);
+    }
+  }
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    if (this.unsupported()) return;
+    const relatedTarget = event.target as HTMLElement;
+
+    if (this.dropZoneContainer?.nativeElement?.contains(relatedTarget)) {
+      this.onDragover.set(true);
+    } else {
+      this.onDragover.set(false);
+    }
+  }
+
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    if (
+      !relatedTarget ||
+      !this.dropZoneContainer?.nativeElement?.contains(relatedTarget)
+    ) {
+      this.onDragover.set(false);
+      this.lottieAnimation?.stop();
+      this.playDropAnimation(false);
+    } else {
+      this.onDragover.set(true);
+    }
+  }
+
+  onDragEnter(event: DragEvent) {
+    const dropZone = this.dropZoneContainer?.nativeElement;
+    const relatedTarget = event.relatedTarget as Node | null;
+
+    if (
+      !dropZone ||
+      this.unsupported() ||
+      (relatedTarget && dropZone.contains(relatedTarget))
+    )
+      return;
+
+    event.preventDefault();
+    this.dragMode.set(true);
+    this.onDragover.set(false);
+    this.playDropAnimation(true);
+  }
+
+  @HostListener('document:dragenter', ['$event'])
+  onDocumentDragEnter(event: DragEvent) {
+    if (
+      (this.isDocumentsMode() && !this.documentsDropZoneOpen()) ||
+      this.unsupported() ||
+      (this.variant() === this.dropZoneVariant.LOGO && this.logoUrl) ||
+      (this.docs().length === this.maxCountFiles() &&
+        this.variant() === this.dropZoneVariant.DOCUMENT)
+    )
+      return;
+
+    this.dragMode.set(true);
+    this.onDragover.set(false);
+  }
+
+  @HostListener('document:dragover', ['$event'])
+  onDocumentDragOver(event: DragEvent) {
+    const dropZone = this.dropZoneContainer?.nativeElement;
+    if (this.dragMode()) {
+      event.preventDefault();
+      return;
+    }
+    if (
+      (this.isDocumentsMode() && !this.documentsDropZoneOpen()) ||
+      dropZone?.contains(event.target as Node) ||
+      dropZone?.parentElement?.contains(event.target as Node)
+    )
+      return;
+    if (this.unsupported()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'none';
+    }
+  }
+
+  @HostListener('document:dragleave', ['$event'])
+  onWindowDragLeave(event: DragEvent) {
+    if (this.isDocumentsMode() && !this.documentsDropZoneOpen()) {
+      return;
+    }
+    event.preventDefault();
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    if (!relatedTarget) {
+      this.resetDragState();
+    }
+  }
+
+  @HostListener('document:drop', ['$event'])
+  onDocumentDrop(event: DragEvent) {
+    if (this.isDocumentsMode() && !this.documentsDropZoneOpen()) {
+      return;
+    }
+    const dropZone = this.dropZoneContainer?.nativeElement;
+    if (dropZone?.contains(event.target as Node)) {
+      this.resetDragState();
+      return;
+    }
+
+    if (
+      this.dragMode() &&
+      dropZone?.parentElement?.contains(event.target as Node)
+    ) {
+      this.resetDragState();
+      return;
+    }
+    if (this.dragMode()) {
+      event.preventDefault();
+      this.resetDragState();
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'none';
+      event.dataTransfer.clearData();
+    }
+    this.resetDragState();
+  }
+
+  /**
+   * Resets the drag state when drag operation ends.
+   */
+  private resetDragState() {
+    this.dragMode.set(false);
+    this.onDragover.set(false);
+    this.stopDropAnimation();
+  }
+
+  skeletonItems = computed(() => Array.from({ length: this.skeletonCount() }));
+
+  /**
+   * Asynchronously processes a list of files. For each file, it validates
+   * the extension against `supportedFileTypes`. If valid, it generates a
+   * thumbnail, counts pages for PDFs, creates an `AppFile` object, and adds
+   * it to the `docs` signal. If any file is unsupported, the `unsupported`
+   * flag is set.
+   * @param files The `FileList` object to be processed.
+   */
+  async processFiles(files: FileList) {
+    this.unsupported.set(false);
+    this.invalidFileSize.set(false);
+    this.inputRef.nativeElement.disabled = false;
+    this.maxCountReached.set(false);
+
+    const fileArray = Array.from(files);
+    const maxSizeBytes = this.maxFileSize() * 1024 * 1024;
+    const supportedTypes = this.supportedFileTypes();
+    const existingNames = new Set(this.docs().map((d) => d.fileName));
+
+    if (
+      (this.variant() === this.dropZoneVariant.DOCUMENT ||
+        this.variant() === this.dropZoneVariant.VIDEO) &&
+      this.docs().length >= this.maxCountFiles()
+    ) {
+      this.inputRef.nativeElement.disabled = true;
+      this.maxCountReached.set(true);
+      return;
+    }
+
+    const toProcess: File[] = [];
+    let totalDocsCount = this.docs().length;
+
+    for (const file of fileArray) {
+      const fileExtension = file.name.split('.').pop()?.toLowerCase();
+
+      if (
+        !fileExtension ||
+        !supportedTypes.includes(fileExtension as FileExtension)
+      ) {
+        this.unsupported.set(true);
+        continue;
+      }
+
+      if (file.size > maxSizeBytes) {
+        this.invalidFileSize.set(true);
+        return;
+      }
+
+      if (totalDocsCount >= this.maxCountFiles()) {
+        break;
+      }
+
+      if (existingNames.has(file.name)) {
+        return;
+      }
+
+      existingNames.add(file.name);
+      toProcess.push(file);
+      totalDocsCount++;
+    }
+
+    if (toProcess.length === 0) {
+      return;
+    }
+
+    // Parallel
+    const processedFiles = await Promise.all(
+      toProcess.map(async (file) => {
+        const fileExtension = file.name.split('.').pop()?.toLowerCase() || '';
+        let pageCount: number | undefined;
+
+        const supportedBase64 = ['profile', 'cover', 'logo'].includes(
+          this.variant(),
+        );
+        const base64Url =
+          supportedBase64 && file
+            ? await this.DropZoneDocumentsHelper.fileToBase64(file)
+            : null;
+
+        try {
+          const [thumbnail, pages] = await Promise.all([
+            this.documentService.generateThumbnail(file),
+            fileExtension === 'pdf'
+              ? this.documentService.getPdfPageCount(file)
+              : Promise.resolve(undefined),
+          ]);
+          pageCount = pages;
+
+          return {
+            fileName: file.name,
+            baseName: file.name.split('.').slice(0, -1).join('.'),
+            type: fileExtension as FileExtension,
+            size: file.size,
+            imagePreviewUrl: thumbnail,
+            file: file,
+            pageCount,
+            tags: [] as number[] | null,
+            tagChanged: false,
+            fileNameChanged: false,
+            categoryTag: null,
+            base64Url,
+          } as AppFile;
+        } catch (error) {
+          console.error(`Failed processing ${file.name}:`, error);
+          return null;
+        }
+      }),
+    );
+
+    const valid = processedFiles.filter(Boolean) as AppFile[];
+
+    if (valid.length === 0) return;
+
+    if (['profile', 'cover', 'logo'].includes(this.variant())) {
+      this.temporaryImageFile = valid[0];
+    } else {
+      this.docs.update((docs) => [...docs, ...valid]);
+    }
+
+    const isSupportedImage =
+      valid[0].file?.type.startsWith('image/') &&
+      valid[0].type &&
+      supportedTypes.includes(valid[0].type as FileExtension);
+
+    if (isSupportedImage && this.crop()) {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(valid[0].file as File);
+      this.inputRef.nativeElement.files = dataTransfer.files;
+      const syntheticEvent = {
+        target: this.inputRef.nativeElement,
+      } as unknown as Event;
+
+      this.imageChangedEvent = syntheticEvent;
+      this.isCropperReady.set(false);
+      this.zoomValue.set(5.8);
+      this.transform = { scale: this.zoomValue() };
+      this.setInvalid();
+      this.showCropper.set(true);
+    }
+
+    if (!this.crop()) {
+      this.emitDocs();
+      this.resetInput();
+    }
+
+    const total = this.docs().length;
+
+    if (!this.isDocumentsMode()) {
+      const visibleCount = this.carouselVisibleCount();
+      const maxStartIndex = Math.max(0, total - visibleCount);
+      if (total > visibleCount) {
+        this.carouselIndex.set(maxStartIndex);
+      } else {
+        this.carouselIndex.set(0);
+      }
+    }
+
+    if (
+      total === this.maxCountFiles() &&
+      this.variant() === this.dropZoneVariant.DOCUMENT
+    ) {
+      this.inputRef.nativeElement.disabled = true;
+      this.maxCountReached.set(true);
+    }
+  }
+
+  /**
+   * Handles the download action for a specific file.
+   * Note: This is a placeholder and currently only logs the file name.
+   * @param fileName The name of the file to be downloaded.
+   */
+  handleDownload(fileName: string) {
+    const fileToDownload = this.docs().find((doc) => doc.fileName === fileName);
+
+    if (!fileToDownload || !fileToDownload.file) {
+      console.error('File not found or is null');
+      return;
+    }
+
+    const file = fileToDownload.file;
+    const url = URL.createObjectURL(file);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileToDownload.fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    URL.revokeObjectURL(url);
+  }
+
+  /**
+   * A ViewChild reference to the native `<input type='file'>` element.
+   * Used to programmatically trigger the file selection dialog.
+   */
+  @ViewChild('inputRef') inputRef!: ElementRef<HTMLInputElement>;
+
+  /**
+   * Resets the component's state after an unsupported file type error
+   * by setting the `unsupported` signal to `false`.
+   */
+  cancel() {
+    this.unsupported.set(false);
+    this.invalidFileSize.set(false);
+    this.resetInput();
+  }
+
+  /**
+   * Programmatically triggers a click on the hidden file input element,
+   * which opens the system's file selection dialog.
+   */
+  handleClickToAdd() {
+    this.inputRef.nativeElement.click();
+  }
+
+  /**
+   * Deletes a file from the preview list. It filters the `docs` array to
+   * remove the specified file and adjusts the carousel position.
+   * @param fileName The name of the file to be deleted.
+   */
+  handleDelete(fileName: string) {
+    this.carouselLeft();
+
+    const fileIdToDelete = this.docs().find(
+      (doc) => doc.fileName === fileName,
+    )?.fileId;
+
+    if (fileIdToDelete) {
+      this.deletedDocs.set([...this.deletedDocs(), fileIdToDelete]);
+
+      this.onDeletedFileIds.emit(this.deletedDocs());
+    }
+
+    this.docs.set(this.docs().filter((doc) => doc.fileName !== fileName));
+    this.emitDocs();
+
+    if (this.docs().length === 0) {
+      this.unsupported.set(false);
+    }
+
+    if (this.docs().length < this.maxCountFiles()) {
+      this.inputRef.nativeElement.disabled = false;
+      this.maxCountReached.set(false);
+    }
+
+    if (this.variant() === this.dropZoneVariant.COVER) {
+      this.coverUrl = '';
+      this.smallView.set(false);
+    }
+    if (this.variant() === this.dropZoneVariant.PROFILE) {
+      this.profileUrl = '';
+    }
+    if (this.variant() === this.dropZoneVariant.LOGO) {
+      this.logoUrl = '';
+    }
+
+    this.inputRef.nativeElement.value = '';
+  }
+
+  // Carousel logic
+
+  /**
+   * A computed signal that calculates the CSS `translateX` value for the
+   * carousel container. This creates the sliding effect based on the
+   * `carouselIndex`.
+   */
+  carouselTransform = computed(() => {
+    if (this.isDocumentsMode()) {
+      return 'translateX(0)';
+    }
+    if (this.isDetailsSlider()) {
+      const offset = this.carouselIndex() * -100;
+      return `translateX(${offset}%)`;
+    }
+    if (this.isDrawerMode()) {
+      const cardWidthWithGap = 194 + 4; // 194px width + 4px gap
+      const containerWidth = this.drawerViewportWidth();
+      const contentWidth = this.docs().length * cardWidthWithGap;
+
+      if (containerWidth <= 0 || contentWidth <= containerWidth) {
+        return 'translateX(0)';
+      }
+
+      const step = cardWidthWithGap;
+      const desiredTranslate = step * this.carouselIndex() * -1;
+      const maxTranslate = containerWidth - contentWidth;
+
+      const clampedTranslate = Math.max(desiredTranslate, maxTranslate);
+      return `translateX(${clampedTranslate}px)`;
+    }
+    const gap = this.size() === '480px' ? 6 : 8;
+    const offset = (148 + gap) * this.carouselIndex() * -1;
+    return `translateX(${offset}px)`;
+  });
+
+  /**
+   * Navigates the carousel one step to the left by decrementing the
+   * `carouselIndex`. The index will not go below 0.
+   */
+  carouselLeft() {
+    this.carouselIndex.update((i) => Math.max(0, i - 1));
+  }
+
+  /**
+   * Navigates the carousel one step to the right by incrementing the
+   * `carouselIndex`. The index will not exceed the maximum possible value
+   * based on the number of documents.
+   */
+  carouselRight() {
+    const visibleCount = this.carouselVisibleCount();
+    const maxIndex = Math.max(0, this.docs().length - visibleCount);
+    this.carouselIndex.update((i) => Math.min(maxIndex, i + 1));
+  }
+
+  carouselVisibleCount(): number {
+    if (this.isDetailsSlider()) return 1;
+    if (this.isDrawerMode()) {
+      const width = this.drawerViewportWidth();
+      return width <= 0 ? 1 : Math.max(1, Math.floor((width + 4) / 198));
+    }
+    return this.size() === '480px' ? 2 : 3;
+  }
+
+  isCarouselAtEnd(): boolean {
+    const maxIndex = Math.max(
+      0,
+      this.docs().length - this.carouselVisibleCount(),
+    );
+    return this.carouselIndex() >= maxIndex;
+  }
+
+  handleTagChange(event: { fileName: string; tag: DocumentTag | null }) {
+    this.docs().forEach((doc) => {
+      if (doc.fileName === event.fileName) {
+        doc.tags = event?.tag?.tagId ? [event?.tag?.tagId] : [];
+        doc.tagChanged = true;
+      }
+    });
+    this.emitDocs();
+  }
+
+  handleFileNameChange(event: { fileId?: number; newFileName: string }) {
+    this.docs().forEach((doc) => {
+      if (doc.fileId === event.fileId) {
+        doc.fileName = event.newFileName;
+        doc.baseName =
+          event.newFileName.split('.').slice(0, -1).join('.') ||
+          event.newFileName;
+        const file = new File([doc.file as BlobPart], event.newFileName, {
+          type: doc.file?.type,
+          lastModified: Date.now(),
+        });
+        doc.file = file;
+        doc.fileNameChanged = true;
+      }
+    });
+    this.emitDocs();
+    this.onDocumentFileNameChange.emit(event);
+  }
+
+  setInvalid() {
+    this.parentForm()?.setErrors({ childInvalid: true });
+    this.onCropPendingChange.emit(true);
+  }
+
+  resetInput() {
+    this.inputRef.nativeElement.value = '';
+  }
+
+  clearInvalid() {
+    const { childInvalid, ...rest } = this.parentForm()?.errors ?? {};
+    const next = Object.keys(rest).length ? rest : null;
+    this.parentForm()?.setErrors(next);
+    this.parentForm()?.updateValueAndValidity({
+      emitEvent: true,
+      onlySelf: true,
+    });
+
+    // Clear the input value to allow the same file to be selected again
+    if (this.inputRef?.nativeElement) {
+      this.resetInput();
+    }
+  }
+
+  handleDocumentPreviewClick(event: { fileId: number }) {
+    this.onDocumentPreviewClick.emit({ fileId: event.fileId });
+  }
+
+  downloadAllFiles(): void {
+    this.DropZoneDocumentsHelper.onDownloadAllFiles(this.docs());
+  }
+
+  onCancel(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.onDocumentDropZoneOpenChange.emit(false);
+  }
+}