@dropi/ui-components 1.0.0

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

@@ -0,0 +1,465 @@
+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';
+
+@Component({
+  selector: 'app-dropi-select',
+  standalone: true,
+  imports: [
+    CommonModule,
+    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)' })
+        ),
+        ]),
+      ]),
+    ],
+})
+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}
+   */
+  @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 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 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,
+  ) {}
+
+  ngOnInit() {
+    this.initializeSelectedProperties();
+    this.getAllOptions();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['selectProperties'] && !changes['selectProperties'].firstChange) {
+      this.initializeSelectedProperties();
+      this.getAllOptions();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.scrollDebounceTimeout) {
+      clearTimeout(this.scrollDebounceTimeout);
+    }
+    this.closeOverlay();
+  }
+
+  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;
+      }
+    }
+  }
+
+  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;
+  }
+
+  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),
+      );
+      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.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() {
+    this.selectedOption = null;
+  }
+
+  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;
+  }
+}

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

@@ -0,0 +1,10 @@
+<div
+  class="skeleton preloader-row-dropi-card"
+  [ngStyle]="{
+    width: width ? width : '',
+    height: height ? height : '',
+    borderRadius: radius ? radius : '',
+    background: backgroundStyle,
+    backgroundSize: '1000px 104px'
+  }"
+></div>

package/src/components-source/dropi-skeleton/dropi-skeleton.component.scss

@@ -0,0 +1,28 @@
+@keyframes placeHolderShimmer {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+  
+  .preloader-row-dropi-card {
+    height: 98px;
+    width: 100%;
+    border-radius: 6px;
+    margin-bottom: 12px;
+  }
+  
+  .skeleton {
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+    background: #f6f7f8;
+    background-size: 1000px 104px;
+    position: relative;
+    border-radius: 6px;
+  }
+