@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/dropi-file-upload/file-list/file-list.component.ts

@@ -1,39 +1,52 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FileItem } from '../../../utilities/interfaces/ui/upload.model';
-import { CardViewComponent } from '../card-view/card-view.component';
-import { GridViewComponent } from '../grid-view/grid-view.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { UploadFileService } from '@app/services/ui/upload-file.service';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  Inject,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FileItem } from "../../../utilities/interfaces/ui/upload.model";
+import { CardViewComponent } from "../card-view/card-view.component";
+import { GridViewComponent } from "../grid-view/grid-view.component";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: 'app-file-list',
+  selector: "app-file-list",
   standalone: true,
-  imports: [CommonModule, CardViewComponent, GridViewComponent, TranslateModule],
-  templateUrl: './file-list.component.html',
-  styleUrls: ['./file-list.component.scss'],
+  imports: [
+    CommonModule,
+    CardViewComponent,
+    GridViewComponent,
+    TranslateModule,
+  ],
+  templateUrl: "./file-list.component.html",
+  styleUrls: ["./file-list.component.scss"],
 })
 export class FileListComponent implements OnChanges {
-  @Input() files: FileItem[];
-  @Input() onlyView: boolean;
-  @Input() previewType: 'card' | 'grid' = 'card';
-  @Input() maxFiles: number = 1; 
+  @Input() files: FileItem[] = [];
+  @Input() onlyView: boolean = false;
+  @Input() previewType: "card" | "grid" = "card";
+  @Input() maxFiles: number = 1;
   @Input() addButton: boolean = true;
   @Output() action = new EventEmitter<{
     file: FileItem;
-    type: 'delete' | 'confirm-delete' | 'cancel-delete';
+    type: "delete" | "confirm-delete" | "cancel-delete";
   }>();
 
-  public cardFiles: FileItem[];
-  public gridFiles: FileItem[];
-  viewImageToDelete: boolean;
-  imageTodelete: FileItem;
-  imageCopyValue: FileItem;
+  public cardFiles: FileItem[] = [];
+  public gridFiles: FileItem[] = [];
+  viewImageToDelete: boolean = false;
+  imageTodelete: FileItem | null = null;
+  imageCopyValue: FileItem | null = null;
+  imageCopyValueGrid: FileItem | null = null; // Fix for grid delete
 
-  constructor(private uploadFileService: UploadFileService) {}
+  constructor(@Inject("UploadFileService") private uploadFileService: any) {}
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['files']) {
+    if (changes["files"]) {
       this.updateFileViews();
     }
   }
@@ -43,7 +56,7 @@ export class FileListComponent implements OnChanges {
     this.gridFiles = [];
 
     this.files.forEach((file) => {
-      if (file.typeView === 'card') {
+      if (file.typeView === "card") {
         this.cardFiles.push(file);
         return;
       }
@@ -51,34 +64,40 @@ export class FileListComponent implements OnChanges {
     });
   }
 
-  onChildAction(event: { file: FileItem; type: 'delete' | 'confirm-delete' | 'cancel-delete' }) {
+  onChildAction(event: {
+    file: FileItem;
+    type: "delete" | "confirm-delete" | "cancel-delete";
+  }) {
     this.action.emit(event);
   }
-    onChildGridAction(event: { file: FileItem; type: 'delete' | 'confirm-delete' | 'cancel-delete' }) {
-    
-        this.imageTodelete = {...event.file, state:'confirm-delete' };
-              this.viewImageToDelete = true;
-        this.imageCopyValue  = event.file;
-
+  onChildGridAction(event: {
+    file: FileItem;
+    type: "delete" | "confirm-delete" | "cancel-delete";
+  }) {
+    this.imageTodelete = { ...event.file, state: "confirm-delete" };
+    this.viewImageToDelete = true;
+    this.imageCopyValueGrid = event.file;
   }
 
-  onDeleteCardAction(event: { file: FileItem; type: 'delete' | 'confirm-delete' | 'cancel-delete' }) {
-    console.log('event', event);
-    if(event.type == 'confirm-delete'){
-    
-      
-       this.action.emit({type:'confirm-delete', file: this.imageCopyValue});
-       this.viewImageToDelete = false;
-       this.imageCopyValue = null;
+  onDeleteCardAction(event: {
+    file: FileItem;
+    type: "delete" | "confirm-delete" | "cancel-delete";
+  }) {
+    if (event.type == "confirm-delete") {
+      this.action.emit({
+        type: "confirm-delete",
+        file: this.imageCopyValueGrid || event.file,
+      });
+      this.viewImageToDelete = false;
+      this.imageCopyValueGrid = null;
     } else {
       this.imageTodelete = null;
       this.viewImageToDelete = false;
-      this.imageCopyValue = null;
+      this.imageCopyValueGrid = null;
     }
-
-  } 
+  }
 
   addImage() {
-    this.uploadFileService.triggerInput();
+    this.uploadFileService?.triggerInput();
   }
 }

package/src/components-source/dropi-file-upload/grid-view/grid-view.component.ts

@@ -1,35 +1,36 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FileItem } from '../../../utilities/interfaces/ui/upload.model';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FileItem } from "../../../utilities/interfaces/ui/upload.model";
+import { IconComponent } from "../../icon/icon.component";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: 'app-grid-view',
+  selector: "app-grid-view",
   standalone: true,
-  imports: [CommonModule],
-  templateUrl: './grid-view.component.html',
-  styleUrls: ['./grid-view.component.scss'],
+  imports: [CommonModule, IconComponent, TranslateModule],
+  templateUrl: "./grid-view.component.html",
+  styleUrls: ["./grid-view.component.scss"],
 })
 export class GridViewComponent {
-  @Input() fileItem: FileItem = {
-    file: undefined,
-    progress: 0,
-    state: 'uploading',
-    id: '',
-  };
+  @Input() fileItem!: FileItem;
   @Output() action = new EventEmitter<{
     file: FileItem;
-    type: 'delete' | 'confirm-delete' | 'cancel-delete';
+    type: "delete" | "confirm-delete" | "cancel-delete";
   }>();
 
-  getFileTypeClass(file: File): string {
-    const type = file?.type || '';
-    if (type.includes('pdf')) return 'pdf';
-    if (type.includes('word') || type.includes('document')) return 'word';
-    if (type.startsWith('image/')) return 'image';
-    return 'generic';
+  onDelete(): void {
+    this.action.emit({ file: this.fileItem, type: "delete" });
   }
 
-  onSendClick(type: 'delete' | 'confirm-delete' | 'cancel-delete'): void {
-    this.action.emit({ file: this.fileItem, type: type });
+  onSendClick(type: "delete" | "confirm-delete" | "cancel-delete"): void {
+    this.action.emit({ file: this.fileItem, type });
+  }
+
+  getFileTypeClass(file: any): string {
+    if (!file) return "file-default";
+    const type = file.type || "";
+    if (type.startsWith("image/")) return "file-image";
+    if (type === "application/pdf") return "file-pdf";
+    return "file-default";
   }
 }

package/src/components-source/dropi-ilustration-icon/dropi-ilustration-icon.component.scss

@@ -16,7 +16,7 @@
       background: var(--Info-Info-500);
     }
     &.warning {
-      background: url('../../../assets/icons/ilustration/bg-warning.svg') no-repeat center;
+      // background: url('../../../assets/icons/ilustration/bg-warning.svg') no-repeat center;
       background-size: contain;
       border-radius: 0;
     }
@@ -53,7 +53,11 @@
       background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);
     }
     &--exclusive {
-      background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);
+      background: linear-gradient(
+        90deg,
+        var(--Gray-900, #0e111a) 26.09%,
+        #ff6102 116.67%
+      );
     }
   }
 }

package/src/components-source/dropi-image-overlay/dropi-image-overlay.component.ts

@@ -1,76 +1,21 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ImageOverlayService } from '@app/services/ui/image-overlay.service';
-import { Subscription } from 'rxjs';
-import { IconComponent } from '../icon/icon.component';
-import { SettingsService } from '@app/services/setting.service';
+import {
+  Component,
+  Input,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'dropi-image-overlay',
+  selector: "app-dropi-image-overlay",
   standalone: true,
-  imports: [CommonModule, IconComponent],
-  templateUrl: './dropi-image-overlay.component.html',
-  styleUrls: ['./dropi-image-overlay.component.scss']
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: '<div *ngIf="settingsService.brand$ | async">Overlay</div>',
 })
-export class DropiImageOverlayComponent implements OnInit, OnDestroy {
-  imageUrls: string[] = [];
-  selectedImageIndex: number = 0;
-  imageError: boolean = false;
-  isDropi: boolean = false;
-  fallbackUrl= '';
-
-  private readonly subscriptions = new Subscription();
-  constructor(private readonly imageOverlayService: ImageOverlayService,  public settingsService: SettingsService) { }
-
-  ngOnInit() {
-    this.subscriptions.add(
-      this.imageOverlayService.imageUrls$.subscribe(imageUrls => {
-        this.imageUrls = imageUrls;
-        
-      })
-    );
-
-    this.subscriptions.add(
-      this.imageOverlayService.selectedImageIndex$.subscribe(selectedImageIndex => {
-        this.selectedImageIndex = selectedImageIndex;
-      })
-    );
-
-    this.isDropi = this.settingsService.getBrand()?.name?.toLowerCase() === 'dropi';
-    this.fallbackUrl  = this.isDropi ? './assets/utils/no-image.jpg' : './assets/utils/wb-no-image.jpg';
-  }
-
-  closeOverlay() {
-    this.imageOverlayService.closeOverlay();
-  }
-  
-  nextImage(event: MouseEvent) {
-    event.stopPropagation();
-
-    if (this.selectedImageIndex === this.imageUrls.length - 1) {
-      this.imageOverlayService.setSelectedImageIndex(0);
-      return;
-    }
-    
-    this.imageOverlayService.setSelectedImageIndex(this.selectedImageIndex + 1);
-  }
-
-  previousImage(event: MouseEvent) {
-    event.stopPropagation();
-
-    if (this.selectedImageIndex === 0) {
-      this.imageOverlayService.setSelectedImageIndex(this.imageUrls.length - 1);
-      return
-    }
-    
-    this.imageOverlayService.setSelectedImageIndex(this.selectedImageIndex - 1);
-  }
-
-  ngOnDestroy() {
-    this.subscriptions.unsubscribe();
-  }
-  selectImage(index: number) {
-  this.imageOverlayService.setSelectedImageIndex(index);
-}
-
+export class DropiImageOverlayComponent {
+  constructor(
+    @Inject("ImageOverlayService") private readonly imageOverlayService: any,
+    @Inject("SettingsService") public settingsService: any,
+  ) {}
 }