@dropi/ui-components 1.0.12 → 1.0.13

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

@@ -1,465 +1,102 @@
 import {
   Component,
-  HostListener,
   Input,
-  ElementRef,
   Output,
   EventEmitter,
   OnInit,
-  OnChanges,
-  SimpleChanges,
-  ViewChild,
-  ViewContainerRef,
-  TemplateRef,
-  OnDestroy,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { Overlay, OverlayModule, OverlayRef, ConnectedPosition } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import {
-  OptionsSelect,
-  SelectProperties,
-  GroupedOptions,
-} from '@app/utilities/interfaces/ui/select.interface';
-import { IconComponent } from '../icon/icon.component';
-import { DropiSearchComponent } from '../dropi-search/dropi-search.component';
-import { DropiDropdownComponent } from '../dropi-dropdown/dropi-dropdown.component';
-import { CountryFlagsComponent } from '../country-flags/country-flags.component';
-import { animate, style, transition, trigger } from '@angular/animations';
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { IconComponent } from "../icon/icon.component";
+import { DropiSearchComponent } from "../dropi-search/dropi-search.component";
+import { DropiDropdownComponent } from "../dropi-dropdown/dropi-dropdown.component";
+import { CountryFlagsComponent } from "../country-flags/country-flags.component";
+import { SelectProperties } from "../../utilities/interfaces/ui/select-interface";
 
 @Component({
-  selector: 'app-dropi-select',
+  selector: "app-dropi-select",
   standalone: true,
   imports: [
     CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
     TranslateModule,
     IconComponent,
     DropiSearchComponent,
     DropiDropdownComponent,
-    OverlayModule,
     CountryFlagsComponent,
   ],
-  templateUrl: './dropi-select.component.html',
-  styleUrls: ['./dropi-select.component.scss'],
-  animations: [
-      trigger('selectAnimation', [
-        transition(':enter', [
-       style({ opacity: 0, transform: 'scaleY(0.95)' }),
-         animate(
-          '120ms ease-out',
-          style({ opacity: 1, transform: 'scaleY(1)' })
-        ),
-        ]),
-        transition(':leave', [
-         animate(
-          '80ms ease-in',
-          style({ opacity: 0, transform: 'scaleY(0.95)' })
-        ),
-        ]),
-      ]),
-    ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-select.component.html",
+  styleUrls: ["./dropi-select.component.scss"],
 })
-export class DropiSelectComponent implements OnInit, OnChanges, OnDestroy {
-  /**
-   * Define las propiedades necesarias para un campo de entrada (`input`).
-   *
-   * Cada campo debe contener las siguientes propiedades:
-   * - `label`: Texto descriptivo que se mostrará como etiqueta.
-   * - `placeholder`: Texto de ejemplo dentro del campo.
-   * -  `dropdownType`: tipo de selector con borde o sin borde
-   * - `options`: opciones que se mostraran en el menu desplegable que tienen los tipos:
-   *     - `id`: Indicativo con el cual se identifica la opcion
-   *     - `label`: Texto descriptivo de la opción
-   *     - `disabled`: Indicador de opción deshabilitada
-   *
-   * Propiedades opcionales:
-   * - `textHelper`: Texto de ayuda que se mostrará debajo del campo.
-   * - `hasError`: Indicador de error en el campo.
-   * - `errorText`: Texto a mostrar cuando hay error en el campo.
-   * - `showObligatory`: Indicador para mostrar si el campo es obligatorio.
-   *
-   * @type {SelectProperties}
-   */
-  @Input() public selectProperties: SelectProperties;
-  /**
-   * Indica si se debe mostrar deshabilitiado el select.
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
+export class DropiSelectComponent implements OnInit {
+  @Input() public label: string = "";
+  @Input() public options: any[] = [];
+  @Input() public selectProperties: SelectProperties = {};
+  @Input() public labelDrop: string = "";
   @Input() public disabled: boolean = false;
 
-  /**
-   * Habilita la visualización de banderas de países en las opciones del select.
-   * Requiere que cada opción tenga la propiedad `countryCode` definida.
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
-  @Input() public showCountryFlags: boolean = false;
-
-  /**
-   * ID de la opción que debe estar seleccionada por defecto al inicializar el componente.
-   *
-   * @type {string | number}
-   */
-  @Input() public defaultSelectedId: string | number;
-
-  @Output() private onClear: EventEmitter<any> = new EventEmitter();
-
-  /**
-   * Evento que emite el valor del select cuando se selecciona
-   *
-   * @type {OptionsSelect}
-   */
-  @Output() private onChangeSelect: EventEmitter<OptionsSelect> = new EventEmitter();
-  /**
-   * Indica si el select esta desplegado
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
+  public isOpen: boolean = false;
   public isExpanded: boolean = false;
-  /**
-   * Almacena la opción actual seleccionada
-   *
-   * @type {OptionsSelect}
-   */
-  @Input() public selectedOption: OptionsSelect | null = null;
-  public multiSelecOptions: OptionsSelect[] = [];
-
-  // Evento que se dispara cuando se llega al final del scroll
-  @Output() scrolledToEnd = new EventEmitter<void>();
-  @Output() onKeyEnter = new EventEmitter<any>();
-
-  public parametersDrop: { type: string; icon: string } = {
-    type: 'checkbox',
-    icon: '',
-  };
-
-  public searchEnabled: boolean = false;
-  public multiSelect: boolean = false;
-  public labelDrop: string = '';
-  private scrollDebounceTimeout: any;
-  private hasEmittedScrolledToEnd: boolean = false;
+  public selectedOption: any = null;
+  public searchValue: string = "";
   public isGrouped: boolean = false;
-  public searchTerm: string = '';
-  private lastScrollTop: number = 0;
-  private dynamicThreshold: number = 5;
-  private dataOptions: OptionsSelect[] | GroupedOptions[] = [];
-  public filteredOptions: OptionsSelect[] | GroupedOptions[] = [];
-
-  @ViewChild('dropdownTemplate') dropdownTemplate: TemplateRef<any>;
-  @ViewChild(DropiDropdownComponent) private dropdownComp: DropiDropdownComponent;
-  @ViewChild('buttonSelect') buttonSelect: ElementRef;
-
-  private overlayRef: OverlayRef | null = null;
-  private allMultiSelectOptions: OptionsSelect[] = [];
-
-  constructor(
-    private elementRef: ElementRef,
-    private overlay: Overlay,
-    private viewContainerRef: ViewContainerRef,
-  ) {}
+  public multiSelect: boolean = false;
+  public showCountryFlags: boolean = false;
+  public searchEnabled: boolean = false;
+  public searchTerm: string = "";
+  public filteredOptions: any[] = [];
+  public multiSelecOptions: any[] = [];
+  public parametersDrop: any = {};
 
-  ngOnInit() {
-    this.initializeSelectedProperties();
-    this.getAllOptions();
+  ngOnInit(): void {
+    this.filteredOptions = this.options;
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['selectProperties'] && !changes['selectProperties'].firstChange) {
-      this.initializeSelectedProperties();
-      this.getAllOptions();
-    }
+  public showOptions(): void {
+    this.toggleDropdown();
   }
 
-  ngOnDestroy() {
-    if (this.scrollDebounceTimeout) {
-      clearTimeout(this.scrollDebounceTimeout);
-    }
-    this.closeOverlay();
+  public toggleDropdown(): void {
+    if (this.disabled) return;
+    this.isOpen = !this.isOpen;
+    this.isExpanded = this.isOpen;
   }
 
-  initializeSelectedProperties() {
-    this.searchEnabled = this.selectProperties.searchEnabled ?? false;
-    this.multiSelect = this.selectProperties.multiSelect ?? false;
-
-    this.setOptions(this.selectProperties.options);
-
-    // Establecer opción seleccionada por defecto si se proporciona defaultSelectedId
-    if (this.defaultSelectedId !== undefined && !this.selectedOption) {
-      const defaultOption = (this.selectProperties.options as OptionsSelect[]).find(
-        (opt) => opt.id === this.defaultSelectedId || opt.id.toString() === this.defaultSelectedId.toString()
-      );
-      if (defaultOption) {
-        this.selectedOption = defaultOption;
-      }
-    }
+  public selectOption(option: any): void {
+    if (option.disabled) return;
+    this.selectedOption = option;
+    this.isOpen = false;
+    this.isExpanded = false;
   }
 
-  setOptions(input: OptionsSelect[] | GroupedOptions[]) {
-    this.isGrouped =
-      input.length > 0 && 'category' in input[0] && 'options' in input[0] ? true : false;
-    this.dataOptions = input;
-    this.filteredOptions = input;
+  public getSelectedCountryCode(): string {
+    return this.selectedOption?.countryCode || "";
   }
 
-  filterOptions(value: string) {
-    const term = value.toLowerCase().trim();
-    //  Caso MULTISELECT
-    if (this.multiSelect) {
-      if (!term) {
-        // Si el campo está vacío, restauramos todas
-        this.multiSelecOptions = [...this.allMultiSelectOptions];
-        return;
-      }
-
-      this.multiSelecOptions = this.allMultiSelectOptions.filter((opt) =>
-        opt.label.toLowerCase().includes(term),
-      );
+  public filterOptions(term: any): void {
+    const val = typeof term === "string" ? term : term?.target?.value || "";
+    if (!val.trim()) {
+      this.filteredOptions = this.options;
       return;
     }
-    // Caso SINGLESELECT
-
-    if (!this.isGrouped) {
-      this.filteredOptions = (this.dataOptions as OptionsSelect[]).filter((opt) =>
-        opt.label.toLowerCase().includes(term),
-      );
-    } else {
-      const result: GroupedOptions[] = [];
-
-      for (const group of this.dataOptions as GroupedOptions[]) {
-        const filteredItems = group.options.filter((item) =>
-          item.label.toLowerCase().includes(term),
-        );
-
-        if (filteredItems.length > 0) {
-          result.push({
-            category: group.category,
-            options: filteredItems,
-          });
-        }
-      }
-
-      this.filteredOptions = result;
-    }
-  }
-
-  @HostListener('document:click', ['$event'])
-  closeDropdown(event?: MouseEvent): void {
-    if (event && !this.elementRef.nativeElement.contains(event.target)) {
-      // Solo cerramos si no es parte del overlay (clicks fuera del componente)
-      const overlayContainer = document.querySelector('.dropi-select-overlay-panel');
-      const clickedInsideOverlay =
-        overlayContainer && overlayContainer.contains(event.target as Node);
-
-      if (!clickedInsideOverlay) {
-        this.isExpanded = false;
-        this.closeOverlay();
-      }
-    }
-  }
-
-  selectOption(option: OptionsSelect) {
-    // En modo multiSelect, no cerramos el overlay para permitir múltiples selecciones
-    if (!this.multiSelect) {
-      this.isExpanded = false;
-      this.closeOverlay();
-    }
-
-    this.selectedOption = option;
-    this.onChangeSelect.emit(option);
-  }
-
-  showOptions() {
-    if (this.disabled) return;
-    this.isExpanded = !this.isExpanded;
-
-    if (this.isExpanded) {
-      this.openOverlay();
-    } else {
-      this.closeOverlay();
-    }
-  }
-
-  /**
-   * Establece la opción seleccionada por su identificador.
-   *
-   * Busca en las opciones del select la que coincida con el identificador proporcionado
-   * y la establece como la opción seleccionada.
-   * Preferiblemente usar con ViewChild desde el componente padre.
-   *
-   * @param {number | string} id - El identificador de la opción a seleccionar.
-   */
-  setPropertyById(id: number | string) {
-    this.selectedOption = this.selectProperties.options.find((propertie) => propertie.id === id);
-    this.onChangeSelect.emit(this.selectedOption);
-  }
-
-  /**
-   * Establece la opción seleccionada por su etiqueta.
-   *
-   * Busca en las opciones del select la que coincida con la etiqueta proporcionada
-   * y la establece como la opción seleccionada.
-   * Preferiblemente usar con ViewChild desde el componente padre.
-   *
-   * @param {string} label - La etiqueta de la opción a seleccionar.
-   */
-  setPropertyByLabel(label: string) {
-    this.selectedOption = this.selectProperties.options.find(
-      (propertie) => propertie.label === label,
+    this.filteredOptions = this.options.filter(
+      (o) =>
+        o.label?.toLowerCase().includes(val.toLowerCase()) ||
+        o.name?.toLowerCase().includes(val.toLowerCase()),
     );
-    this.onChangeSelect.emit(this.selectedOption);
-  }
-
-  //virtual scroll
-
-  onScroll(event: any) {
-    clearTimeout(this.scrollDebounceTimeout);
-    this.scrollDebounceTimeout = setTimeout(() => {
-      const target = event.target;
-      const distanceFromBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
-
-      // Ajusta el umbral dinámicamente basado en el tamaño de la lista
-      this.dynamicThreshold = Math.min(50, target.clientHeight / 2);
-
-      // Check if the user has scrolled up
-      if (target.scrollTop < this.lastScrollTop) {
-        this.hasEmittedScrolledToEnd = false;
-      }
-
-      this.lastScrollTop = target.scrollTop;
-
-      if (distanceFromBottom <= this.dynamicThreshold && !this.hasEmittedScrolledToEnd) {
-        this.scrolledToEnd.emit();
-        this.hasEmittedScrolledToEnd = true;
-
-        // Reset hasEmittedScrolledToEnd after a delay
-        setTimeout(() => {
-          this.hasEmittedScrolledToEnd = false;
-        }, 1000); // Adjust the delay as needed
-      }
-    }, 100); // tiempo de debounce
-  }
-
-  onKeyPress(event: KeyboardEvent) {
-    this.onKeyEnter.emit(event);
   }
 
-  clearSelection() {
+  public onKeyPress(event: any): void {}
+  public onClearHanddle(): void {
     this.selectedOption = null;
+    this.searchTerm = "";
+    this.filteredOptions = this.options;
   }
 
-  onClearHanddle() {
-    this.searchTerm = '';
-
-    if (this.multiSelect) {
-      this.multiSelecOptions = [...this.allMultiSelectOptions];
-    } else {
-      this.filteredOptions = this.dataOptions;
-    }
-    this.onClear.emit();
-  }
-
-  getAllOptions() {
-    this.multiSelecOptions = this.selectProperties.options;
-    this.allMultiSelectOptions = [...this.multiSelecOptions];
-  }
-
-  getValueDrop(e) {
-    this.selectedOption = e;
-    this.getLabelDrop(e);
-    this.onChangeSelect.emit(this.selectedOption);
-  }
-
-  getLabelDrop(e) {
-    let label = '';
-    e.map((option) => {
-      label = label.length == 0 ? option.label : label + ', ' + option.label;
-    });
-
-    this.labelDrop = label;
-  }
-
-  resetMultiSelect(label: string) {
-    this.selectedOption = null;
-    this.labelDrop = label;
-    this.multiSelecOptions = this.multiSelecOptions.map((opt) => ({ ...opt, checked: false }));
-
-    // Si el dropdown aún no existe, salimos sin error
-    if (!this.dropdownComp) return;
-
-    this.dropdownComp.resetChecks();
-  }
-
-  private openOverlay() {
-    if (this.overlayRef) {
-      return;
-    }
-
-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(this.buttonSelect.nativeElement)
-      .withPositions(this.getPositions())
-      .withPush(false);
-
-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.reposition(),
-      hasBackdrop: false,
-      width: this.elementRef.nativeElement.offsetWidth,
-      panelClass: 'dropi-select-overlay-panel', // Clase personalizada para estilos específicos
-    });
-
-    const portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
-    this.overlayRef.attach(portal);
-
-    this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
-  }
-
-  private closeOverlay() {
-    if (this.overlayRef) {
-      this.overlayRef.dispose();
-      this.overlayRef = null;
-    }
-    // 🔹 Restaurar el listado si no hay término de búsqueda
-    if (this.multiSelect && !this.searchTerm.trim()) {
-      this.multiSelecOptions = [...this.allMultiSelectOptions];
-    }
-
-    // 🔹 Si sí había término, lo borramos visualmente también
-    this.searchTerm = '';
-  }
-
-  private getPositions(): ConnectedPosition[] {
-    return [
-      {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetY: 4,
-      },
-      {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetY: -4,
-      },
-    ];
-  }
-
-  /**
-   * Obtiene el código de país de la opción actualmente seleccionada
-   * @returns El código ISO de 2 letras del país o undefined si no hay selección
-   */
-  getSelectedCountryCode(): string | undefined {
-    return this.selectedOption?.countryCode;
-  }
+  public getValueDrop(event: any): void {}
+  public onScroll(event: any): void {}
 }

package/src/components-source/dropi-table/dropi-table.component.html

@@ -1,7 +1,9 @@
 <ng-container *ngIf="dropiTableConfiguration">
   <div class="table-container" *ngIf="!loading">
     <div class="search-container" *ngIf="dropiTableConfiguration?.showSearch">
-      <h3 class="table-title">{{ dropiTableConfiguration?.title | translate }}</h3>
+      <h3 class="table-title">
+        {{ dropiTableConfiguration?.title | translate }}
+      </h3>
       <app-input
         [inputProperties]="{
           label: 'Search',
@@ -11,7 +13,10 @@
       ></app-input>
     </div>
 
-    <div class="table-wrapper" [ngClass]="hasActions ? 'width-actions' : 'width-no-actions'">
+    <div
+      class="table-wrapper"
+      [ngClass]="hasActions ? 'width-actions' : 'width-no-actions'"
+    >
       <table
         class="custom-table"
         [ngClass]="{
@@ -20,8 +25,13 @@
       >
         <thead>
           <tr>
-            <th class="checkbox-header" *ngIf="dropiTableConfiguration?.showCheckbox">
-              <app-dropi-checkbox (onChange)="onSelectAll($event)"></app-dropi-checkbox>
+            <th
+              class="checkbox-header"
+              *ngIf="dropiTableConfiguration?.showCheckbox"
+            >
+              <app-dropi-checkbox
+                (onChange)="onSelectAll($event)"
+              ></app-dropi-checkbox>
             </th>
             <th
               *ngFor="let header of headers"
@@ -60,7 +70,7 @@
               </div>
             </th>
             <th class="actions-header actions" *ngIf="hasActions">
-              {{ 'Actions' | translate }}
+              {{ "Actions" | translate }}
             </th>
           </tr>
         </thead>
@@ -82,7 +92,7 @@
         <div class="message-container">
           <img src="\assets\utils\icon-not-found.png" alt="empty" />
           <div class="message">
-            {{ dropiTableConfiguration.emptyMessage ?? 'no data' | translate }}
+            {{ dropiTableConfiguration.emptyMessage ?? "no data" | translate }}
           </div>
         </div>
       </div>
@@ -90,11 +100,13 @@
 
     <div
       class="pagination"
-      *ngIf="dropiTableConfiguration?.showPaginator && !hidePaginator && !loading"
+      *ngIf="
+        dropiTableConfiguration?.showPaginator && !hidePaginator && !loading
+      "
     >
       <div class="page-size-selector">
-        <label>{{ 'Show' | translate }}</label>
-        <select (change)="onChangePageSize($event.target.value)">
+        <label>{{ "Show" | translate }}</label>
+        <select (change)="onChangePageSize($event)">
           <option
             *ngFor="let size of dropiTableConfiguration?.pageSizeConfiguration"
             [selected]="pageSize === size"
@@ -126,6 +138,7 @@
       <td *ngIf="dropiTableConfiguration?.showCheckbox">
         <app-dropi-checkbox
           [disabled]="rowData?.disableCheckbox"
+          [checked]="rowData?.selected"
           (onChange)="onSelectRow($event, rowData)"
         ></app-dropi-checkbox>
       </td>
@@ -150,7 +163,8 @@
         [ngClass]="{
           'short-actions': dropiTableConfiguration?.showActionsPerRow
             ? rowData.actionsPerRow && rowData.actionsPerRow.length <= 3
-            : dropiTableConfiguration?.rowActions && dropiTableConfiguration.rowActions.length <= 3,
+            : dropiTableConfiguration?.rowActions &&
+              dropiTableConfiguration.rowActions.length <= 3,
         }"
         *ngIf="hasActions"
       >
@@ -166,14 +180,7 @@
         >
           <app-icon
             class="action-icon"
-            (click)="
-              toggleActions(
-                level === 0 ? parentIndex : parentIndex,
-                actionsMenu,
-                level > 0,
-                childIndex
-              )
-            "
+            (click)="toggleActions(level === 0 ? parentIndex : parentIndex)"
             name="Menu-dots-vertical"
             width="24px"
             height="24px"
@@ -277,8 +284,8 @@
 
       <ng-container *ngSwitchCase="'date'">
         <div class="date-label">
-          <span>{{ item.value | date: 'dd-MM-yyyy' }} </span>
-          <span>{{ item.value | date: 'hh:mm a' }} </span>
+          <span>{{ item.value | date: "dd-MM-yyyy" }} </span>
+          <span>{{ item.value | date: "hh:mm a" }} </span>
         </div>
       </ng-container>
 
@@ -320,7 +327,10 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="'textIcon'">
-        <div class="text-icon-label" [ngClass]="{ 'justify-center': !item?.value }">
+        <div
+          class="text-icon-label"
+          [ngClass]="{ 'justify-center': !item?.value }"
+        >
           <app-icon
             [name]="item.icon"
             width="24px"
@@ -334,10 +344,17 @@
       <ng-container *ngSwitchCase="'status'">
         <div class="status-label">
           <div class="status-dot">
-            <div [ngClass]="'dot dot-' + item.status.toLowerCase()"></div>
+            <div
+              [ngClass]="
+                'dot dot-' +
+                (item.status ? item.status.toLowerCase() : 'unknown')
+              "
+            ></div>
             <span class="status-text">{{ item.status | translate }}</span>
           </div>
-          <span *ngIf="item?.value" class="status-description">{{ item.value }}</span>
+          <span *ngIf="item?.value" class="status-description">{{
+            item.value
+          }}</span>
         </div>
       </ng-container>