@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/dropi-country-selector/dropi-country-selector.component.ts

@@ -7,23 +7,30 @@ import {
   EventEmitter,
   ChangeDetectorRef,
   ViewChild,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import {
-  OptionsCountrySelect,
-  SelectProperties,
-} from '@app/utilities/interfaces/ui/country-selector.interface';
-import { IconComponent } from '../icon/icon.component';
-import { COUNTRIES } from './countries.data';
-import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
+  Inject,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+
+type OptionsCountrySelect = any;
+type SelectProperties = any;
+
+import { IconComponent } from "../icon/icon.component";
+import { COUNTRIES } from "./countries.data";
+import { FormsModule, FormControl, ReactiveFormsModule } from "@angular/forms";
 
 @Component({
-  selector: 'app-dropi-country-selector',
+  selector: "app-dropi-country-selector",
   standalone: true,
-  imports: [CommonModule, TranslateModule, IconComponent, FormsModule, ReactiveFormsModule],
-  templateUrl: './dropi-country-selector.component.html',
-  styleUrls: ['./dropi-country-selector.component.scss'],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    IconComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: "./dropi-country-selector.component.html",
+  styleUrls: ["./dropi-country-selector.component.scss"],
 })
 export class DropiCountrySelectorComponent {
   /**
@@ -65,19 +72,22 @@ export class DropiCountrySelectorComponent {
    *
    * @type {OptionsSelect}
    */
-  @Output() onChangeSelect: EventEmitter<OptionsCountrySelect> = new EventEmitter();
+  @Output() onChangeSelect: EventEmitter<OptionsCountrySelect> =
+    new EventEmitter();
 
   /**
    * Setear el pais del modelo inicial, debes enviarle el code del pais.
    *
    * @type {string}
    */
-  private _currentSelection = '';
+  private _currentSelection = "";
 
   @Input() set currentSelection(value: string) {
     this._currentSelection = value;
     if (value) {
-      const found = this.countries.find((propertie) => propertie.code === value);
+      const found = this.countries.find(
+        (propertie) => propertie.code === value,
+      );
       if (found) {
         this.selectedOption = found;
         this.onChangeSelect.emit(this.selectedOption);
@@ -86,8 +96,8 @@ export class DropiCountrySelectorComponent {
     }
   }
 
-  @Input() public searchTerm: string = '';
-  @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
+  @Input() public searchTerm: string = "";
+  @ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement>;
 
   get currentSelection() {
     return this._currentSelection;
@@ -121,11 +131,11 @@ export class DropiCountrySelectorComponent {
   }
 
   constructor(
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef,
+    @Inject(ElementRef) private elementRef: ElementRef,
+    @Inject(ChangeDetectorRef) private cdr: ChangeDetectorRef,
   ) {}
 
-  @HostListener('document:click', ['$event'])
+  @HostListener("document:click", ["$event"])
   closeDropdown(event?: MouseEvent): void {
     if (event && !this.elementRef.nativeElement.contains(event.target)) {
       this.isExpanded = false;
@@ -135,7 +145,7 @@ export class DropiCountrySelectorComponent {
   selectOption(option: OptionsCountrySelect) {
     this.isExpanded = false;
     this.selectedOption = option;
-    this.searchTerm = '';
+    this.searchTerm = "";
     this.filteredCountries = this.countries;
     this.onChangeSelect.emit(option);
   }
@@ -160,7 +170,9 @@ export class DropiCountrySelectorComponent {
   }
 
   setPropertyByLabel(name: string) {
-    this.selectedOption = this.countries.find((propertie) => propertie.name === name);
+    this.selectedOption = this.countries.find(
+      (propertie) => propertie.name === name,
+    );
     this.onChangeSelect.emit(this.selectedOption);
   }
 
@@ -173,7 +185,7 @@ export class DropiCountrySelectorComponent {
 
   clearSelection() {
     this.selectedOption = null;
-    this.searchTerm = '';
+    this.searchTerm = "";
     this.filteredCountries = this.countries;
   }
 }

package/src/components-source/dropi-drawer/dropi-drawer.component.ts

@@ -1,90 +1,103 @@
-import { AfterViewInit, Component, ComponentRef, EventEmitter, Input, NO_ERRORS_SCHEMA, OnDestroy, ViewChild, ViewContainerRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Subscription } from 'rxjs';
+import {
+  AfterViewInit,
+  Component,
+  ComponentRef,
+  EventEmitter,
+  Input,
+  NO_ERRORS_SCHEMA,
+  OnDestroy,
+  ViewChild,
+  ViewContainerRef,
+  Inject,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Subscription } from "rxjs";
 
-import { NgPrimeModule } from '@app/ngprime.module';
-import { DrawerService } from '@app/services/drawer.service';
-import { DrawerConfig } from '@app/utilities/interfaces/ui/drawer.interface';
+// import { NgPrimeModule } from "@app/ngprime.module";
+// import { DrawerService } from "@app/services/drawer.service";
+// import { DrawerConfig } from "@app/utilities/interfaces/ui/drawer.interface";
+
+type DrawerConfig = any;
+const DrawerService = "DrawerService";
 
 @Component({
-  selector: 'dropi-drawer',
+  selector: "dropi-drawer",
   standalone: true,
-  imports: [
-    CommonModule,
-    NgPrimeModule
-  ],
-  templateUrl: './dropi-drawer.component.html',
-  styleUrls: ['./dropi-drawer.component.scss'],
-  schemas: [NO_ERRORS_SCHEMA]
+  imports: [CommonModule],
+  templateUrl: "./dropi-drawer.component.html",
+  styleUrls: ["./dropi-drawer.component.scss"],
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class DropiDrawerComponent implements OnDestroy, AfterViewInit {
-  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;
+  @ViewChild("container", { read: ViewContainerRef })
+  container!: ViewContainerRef;
+
+  drawerConfig: DrawerConfig;
+  drawerTitle: string = null;
+  drawerIsOpen: boolean = false;
+  componentRef: ComponentRef<any> | null;
+  private readonly subscriptions = new Subscription();
+
+  constructor(@Inject(DrawerService) private readonly drawerService: any) {
+    this.drawerConfig = this.drawerService?.defaultDrawerConfig || {};
+  }
+
+  ngAfterViewInit() {
+    this.subscriptions.add(
+      this.drawerService.drawerContent$.subscribe((content) => {
+        if (content && this.container) {
+          this.container.clear();
+          if (this.componentRef) this.componentRef.destroy();
+
+          this.componentRef = this.container.createComponent(content.component);
 
-    drawerConfig: DrawerConfig;
-    drawerTitle: string = null;
-    drawerIsOpen: boolean = false;
-    componentRef: ComponentRef<any> | null;
-    private readonly subscriptions = new Subscription();
-  
-    constructor(private readonly drawerService: DrawerService) {
-      this.drawerConfig = this.drawerService.defaultDrawerConfig;
-    }
-  
-    ngAfterViewInit() {
-      this.subscriptions.add(
-        this.drawerService.drawerContent$.subscribe((content) => {
-          if (content && this.container) {
-            this.container.clear();
-            if (this.componentRef) this.componentRef.destroy();
-  
-            this.componentRef = this.container.createComponent(content.component);
-  
-            if (content.inputs) {
-              Object.keys(content.inputs).forEach((key) => {
-                this.componentRef.instance[key] = content.inputs[key];
-              });
-            }
-  
-            if (content.outputs) {
-              Object.keys(content.outputs).forEach((key) => {
-                if (this.componentRef.instance[key] instanceof EventEmitter) {
-                  this.subscriptions.add(
-                    this.componentRef.instance[key].subscribe((...args: any[]) => {
+          if (content.inputs) {
+            Object.keys(content.inputs).forEach((key) => {
+              this.componentRef.instance[key] = content.inputs[key];
+            });
+          }
+
+          if (content.outputs) {
+            Object.keys(content.outputs).forEach((key) => {
+              if (this.componentRef.instance[key] instanceof EventEmitter) {
+                this.subscriptions.add(
+                  this.componentRef.instance[key].subscribe(
+                    (...args: any[]) => {
                       content.outputs[key](...args);
-                    })
-                  )
-                }
-              });
-            }
-            this.drawerConfig = content.config;
-            this.componentRef.changeDetectorRef.detectChanges();
+                    },
+                  ),
+                );
+              }
+            });
           }
-        }),
-      );
-  
-      this.subscriptions.add(
-        this.drawerService.drawerHeader$.subscribe(
-          (header) => (this.drawerTitle = header),
-        ),
-      );
-  
-      this.subscriptions.add(
-        this.drawerService.drawerIsOpen$.subscribe(
-          (isOpen) => (this.drawerIsOpen = isOpen),
-        ),
-      );
-    }
-  
-    close() {
-      this.drawerService.closeDrawer();
-    }
+          this.drawerConfig = content.config;
+          this.componentRef.changeDetectorRef.detectChanges();
+        }
+      }),
+    );
+
+    this.subscriptions.add(
+      this.drawerService.drawerHeader$.subscribe(
+        (header) => (this.drawerTitle = header),
+      ),
+    );
+
+    this.subscriptions.add(
+      this.drawerService.drawerIsOpen$.subscribe(
+        (isOpen) => (this.drawerIsOpen = isOpen),
+      ),
+    );
+  }
+
+  close() {
+    this.drawerService.closeDrawer();
+  }
 
-    get sizeClass(): string {
-      return (this.drawerConfig?.size ?? '').toLowerCase();
-    }
+  get sizeClass(): string {
+    return (this.drawerConfig?.size ?? "").toLowerCase();
+  }
 
-  
-    ngOnDestroy() {
-      this.subscriptions.unsubscribe();
-    }
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
 }

package/src/components-source/dropi-dropdown/dropi-dropdown.component.ts

@@ -1,53 +1,50 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
-import { DropiAvatarsComponent } from '../dropi-avatars/dropi-avatars.component';
-import { CarrierImageUrl } from '@app/utilities/pipes/carrier-image-url.pipe';
-
-@Component({
-  selector: 'app-dropi-dropdown',
-  templateUrl: './dropi-dropdown.component.html',
-  styleUrls: ['./dropi-dropdown.component.scss'],
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  Pipe,
+  PipeTransform,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { DropiCheckboxComponent } from "../dropi-checkbox/dropi-checkbox.component";
+import { DropiAvatarsComponent } from "../dropi-avatars/dropi-avatars.component";
+
+@Pipe({
+  name: "carrierImageUrl",
   standalone: true,
-  imports: [CommonModule, DropiCheckboxComponent, DropiAvatarsComponent, CarrierImageUrl],
 })
-export class DropiDropdownComponent {
-  // altura en px o en rem o en cualquier medida
-  @Input() height = '';
-
-  //array de objets que se envian al dropdown
-  @Input() options = [];
-
-  //valor iterable a mostrar del model
-  @Input() valueModel = 'name';
-
-  @Input() isInSelect: boolean = false;
-
-  //tipo de la estructura del dropdown
-  @Input() parameters: {
-    type: 'checkbox';
-    icon: string;
-    iconCurrier: boolean;
-  };
-
-  @Output() modelChange = new EventEmitter<string[]>();
-
-  constructor() {
-    this.parameters = {
-      type: 'checkbox',
-      icon: '',
-      iconCurrier: false,
-    };
-  }
-
-  toggleValue(checkValue: boolean, value: any, index: number) {
-    this.options[index].checked = checkValue;
-    const seletedValues = this.options.filter((option) => option.checked);
-    this.modelChange.emit(seletedValues);
+export class CarrierImageUrlPipeStub implements PipeTransform {
+  transform(value: any): string {
+    return value;
   }
+}
 
-  resetChecks() {
-    this.options.forEach((option) => (option['checked'] = false));
-    this.modelChange.emit([]);
+@Component({
+  selector: "app-dropi-dropdown",
+  standalone: true,
+  imports: [
+    CommonModule,
+    DropiCheckboxComponent,
+    DropiAvatarsComponent,
+    CarrierImageUrlPipeStub,
+  ],
+  templateUrl: "./dropi-dropdown.component.html",
+  styleUrls: ["./dropi-dropdown.component.scss"],
+})
+export class DropiDropdownComponent implements OnInit {
+  @Input() public options: any[] = [];
+  @Input() public parameters: any = {}; // Requerido por template
+  @Input() public isInSelect: boolean = false; // Requerido por template
+  @Input() public height: string = ""; // Requerido por template
+  @Input() public valueModel: string = "label"; // Requerido por template
+  @Output() public onSelectionChange = new EventEmitter<any>();
+  @Output() public modelChange = new EventEmitter<any>(); // Requerido por template
+
+  ngOnInit(): void {}
+
+  public toggleValue(event: any, item: any, index: number): void {
+    this.modelChange.emit(item);
   }
 }

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

@@ -1,72 +1,52 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FileItem } from '../../../utilities/interfaces/ui/upload.model';
-import { ButtonComponent } from '@app/ui/dropi-button/dropi-button.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { IconComponent } from '@app/ui/icon/icon.component';
-import { Subscription } from 'rxjs';
-import { ImageOverlayService } from '@app/services/ui/image-overlay.service';
-import { environment } from '@env/environment';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FileItem } from "../../../utilities/interfaces/ui/upload.model";
+import { ButtonComponent } from "../../dropi-button/dropi-button.component";
+import { IconComponent } from "../../icon/icon.component";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: 'app-card-view',
+  selector: "app-card-view",
   standalone: true,
-  imports: [CommonModule, ButtonComponent, TranslateModule, IconComponent],
-  templateUrl: './card-view.component.html',
-  styleUrls: ['./card-view.component.scss'],
+  imports: [CommonModule, ButtonComponent, IconComponent, TranslateModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./card-view.component.html",
+  styleUrls: ["./card-view.component.scss"],
 })
 export class CardViewComponent {
-  @Input() fileItem: FileItem = {
-    file: undefined,
-    progress: 0,
-    state: 'complete',
-    id: '',
-  };
-  @Input() onlyView: boolean;
-  
+  @Input() fileItem!: FileItem;
+  @Input() onlyView: boolean = false;
   @Output() action = new EventEmitter<{
     file: FileItem;
-    type: 'delete' | 'confirm-delete' | 'cancel-delete';
+    type: "delete" | "confirm-delete" | "cancel-delete";
   }>();
 
-  constructor(private readonly imageOverlayService: ImageOverlayService) {}
+  constructor(
+    @Inject("ImageOverlayService") private readonly imageOverlayService: any,
+  ) {}
 
-  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';
+  onSendClick(type: "delete" | "confirm-delete" | "cancel-delete"): void {
+    this.action.emit({ file: this.fileItem, type });
   }
 
-  onSendClick(type: 'delete' | 'confirm-delete' | 'cancel-delete'): void {
-    this.action.emit({ file: this.fileItem, type: type });
+  getFileTypeClass(file: any): string {
+    return "file-default";
   }
 
-  openPreviewImage() {
-    if (this.fileItem.fileType !== 'image'){
-      // abre en nueva pestaña
-      console.log('item', this.fileItem?.uploadedUrl);
-    window.open(`${environment.AWS3WL.cloudfront_server}/${this.fileItem?.uploadedUrl}`, '_blank');
-    } else {
-           this.imageOverlayService.showOverlay([this.fileItem?.previewUrl]);
-    }
-  }
-
-  downloadFile() {
-    const link = document.createElement('a');
-    link.href = this.fileItem?.previewUrl!;
-    link.download = this.fileItem?.file?.name!;
-    link.click();
+  viewType(type: string): boolean {
+    return false;
   }
 
-  viewType(type: string): boolean {
-    let fileType = '';
-    if (this.fileItem?.file!) {
-      fileType = this.fileItem.file.type === 'application/pdf' ? 'pdf' : 'default';
-    } else {
-      fileType = this.fileItem?.previewUrl?.includes('pdf') ? 'pdf' : 'default';
+  openPreviewImage(): void {
+    if (this.fileItem?.previewUrl) {
+      this.imageOverlayService?.open?.(this.fileItem.previewUrl);
     }
-    return fileType === type;
   }
 }