carriera-intern 0.0.0 → 1.1.76

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

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