@dropi/ui-components 1.0.0

package/src/components-source/dropi-phone-input/dropi-phone-input.component.ts

@@ -0,0 +1,203 @@
+import {
+  Component,
+  ViewEncapsulation,
+  Input,
+  OnInit,
+  Output,
+  EventEmitter,
+  ElementRef,
+  HostListener,
+} from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { UserService } from 'src/app/pages/service/auth/user.service';
+import { Api } from 'src/app/services/api.service';
+import { SettingsService } from 'src/app/services/setting.service';
+import { COUNTRIES } from 'src/app/constants/constants';
+import { TranslateModule } from '@ngx-translate/core';
+import { NumericInputDirective } from './numeric-input.directive';
+import { NgClass, NgFor, CommonModule } from '@angular/common';
+import { FormsModule, FormControl } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { IconComponent } from '../icon/icon.component';
+
+interface Country {
+  code: string;
+  name: string;
+  flag: string;
+  maxLength: number;
+}
+
+interface SelectProperties {
+  label: string;
+  placeholder: string;
+  options: Country[];
+  showObligatory?: boolean;
+  textHelper?: string;
+}
+
+@Component({
+  selector: 'app-dropi-phone-input',
+  templateUrl: './dropi-phone-input.component.html',
+  styleUrls: ['./dropi-phone-input.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgSelectModule,
+    FormsModule,
+    NgClass,
+    NgFor,
+    NumericInputDirective,
+    TranslateModule,
+    IconComponent,
+  ],
+})
+export class DropiPhoneInputComponent implements OnInit {
+  private _CodArea!: string;
+  @Input() set CodArea(value: any) {
+    this._CodArea = value;
+
+    // Si ya tienes la lista de países cargada:
+    if (this.countries && Array.isArray(this.countries)) {
+      const match = this.countries.find((c) => c.code === value);
+      if (match) {
+        this.selectedOption = match;
+      }
+    }
+  }
+  get CodArea(): string {
+    return this._CodArea;
+  }
+
+  @Input() ngModelPhone = '';
+  @Input() phoneNumberPlaceholder: string = null;
+  @Input() isValidPhone = undefined;
+  @Input() public selectedOption: Country;
+  @Input() public selectProperties: SelectProperties;
+
+  /**
+   * Establece si el campo del teléfono debe ser verificado al inicializar el componente.
+   * @default true
+   */
+  @Input() validateOnInit = true;
+  @Input() disabledInput = false;
+  /**
+   * FormControl opcional para validación y mostrar errores
+   */
+  @Input() public formControl: FormControl;
+
+  @Output() ngModelChangeCod = new EventEmitter();
+  @Output() ngModelChangePhone = new EventEmitter();
+  @Output() verifiedField = new EventEmitter();
+  @Output() onChangeSelect: EventEmitter<Country> = new EventEmitter();
+
+  maxLengthPhone = 10;
+  countries: Country[] = COUNTRIES;
+  disabled: any;
+  isExpanded: boolean;
+
+  constructor(
+    private elementRef: ElementRef,
+    public userService: UserService,
+    public settingsService: SettingsService,
+    public apiService: Api,
+    private readonly translateService: TranslateService,
+  ) {}
+
+  /**
+   * Verifica si el formControl tiene errores y está dirty/touched
+   */
+  get hasError(): boolean {
+    return (
+      this.formControl &&
+      this.formControl.invalid &&
+      (this.formControl.dirty || this.formControl.touched)
+    );
+  }
+
+  ngOnInit(): void {
+    if (this.validateOnInit) this.validtaeLengthPhone();
+
+    if (!this.phoneNumberPlaceholder)
+      this.phoneNumberPlaceholder = this.translateService.instant('Enter phone number');
+  }
+
+  cambioCod(option): void {
+    this.isExpanded = false;
+    this.selectedOption = option;
+    this.ngModelPhone = '';
+    this.ngModelChangeCod.emit(option.code);
+    this.validtaeLengthPhone();
+  }
+
+  cambioPhone(event?: KeyboardEvent): void {
+    if (this.ngModelPhone?.length === 0 && event?.key === 'Backspace') return;
+    if (this.ngModelPhone === '' && event) this.ngModelPhone = event?.key;
+
+    this.ngModelChangePhone.emit(this.ngModelPhone);
+    this.validtaeLengthPhone();
+  }
+
+  validtaeLengthPhone(): void {
+    const country = this.countries.find((c) => c.code === this.CodArea);
+    if (country) {
+      this.maxLengthPhone = country.maxLength;
+
+      // Nueva logica para Ecuador: acepta tanto 9 como 10 dígitos
+      if (this.CodArea === '593') {
+        const phoneLength = this.ngModelPhone?.length || 0;
+        if (phoneLength === 9 || phoneLength === 10) {
+          this.isValidPhone = true;
+          this.verifiedField.emit(true);
+        } else {
+          this.isValidPhone = false;
+          this.verifiedField.emit(false);
+        }
+      } else {
+        if (this.ngModelPhone?.length === this.maxLengthPhone) {
+          this.isValidPhone = true;
+          this.verifiedField.emit(true);
+        } else {
+          this.isValidPhone = false;
+          this.verifiedField.emit(false);
+        }
+      }
+    } else {
+      this.isValidPhone = false;
+    }
+  }
+
+  handlePaste(event: ClipboardEvent): void {
+    event.preventDefault();
+    const pastedText = event.clipboardData?.getData('text') || '';
+    const sanitizedText = pastedText.replace(/\D+/g, '');
+    this.ngModelPhone = sanitizedText;
+    this.cambioPhone();
+  }
+
+  @HostListener('document:click', ['$event'])
+  closeDropdown(event?: MouseEvent): void {
+    if (event && !this.elementRef.nativeElement.contains(event.target)) {
+      this.isExpanded = false;
+    }
+  }
+
+  showOptions() {
+    if (this.disabled) return;
+    this.isExpanded = !this.isExpanded;
+  }
+
+  setPropertyById(code: string) {
+    this.selectedOption = this.selectProperties.options.find(
+      (propertie) => propertie.code === code,
+    );
+    this.onChangeSelect.emit(this.selectedOption);
+  }
+
+  setPropertyByLabel(name: string) {
+    this.selectedOption = this.selectProperties.options.find(
+      (propertie) => propertie.name === name,
+    );
+    this.onChangeSelect.emit(this.selectedOption);
+  }
+}

package/src/components-source/dropi-phone-input/numeric-input.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[appNumericInput]',
+    standalone: true
+})
+export class NumericInputDirective {
+  constructor(private el: ElementRef) {}
+
+  @HostListener('input', ['$event']) onInputChange(event) {
+    const initialValue = this.el.nativeElement.value;
+    this.el.nativeElement.value = initialValue.replace(/[^0-9]/g, '').slice(0, 20);
+    if (initialValue !== this.el.nativeElement.value) {
+      event.stopPropagation();
+    }
+  }
+}

package/src/components-source/dropi-radio-button/dropi-radio-button.component.html

@@ -0,0 +1,8 @@
+<input
+  #radioInput
+  [id]="id"
+  type="radio"
+  [name]="name"
+  [checked]="checked"
+  (change)="sendClick($event)"
+/>

package/src/components-source/dropi-radio-button/dropi-radio-button.component.scss

@@ -0,0 +1,33 @@
+input[type='radio'] {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--Primary-Primary-500); /* 🔲 Borde blanco */
+  border-radius: 50%;
+  background-color: transparent;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+}
+
+input[type='radio']::before {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 10px;
+  height: 10px;
+  background-color: #f4ae6b; /* 🟠 Centro color durazno */
+  border-radius: 50%;
+  display: none;
+}
+
+input[type='radio']:checked::before {
+  display: block;
+}
+
+input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/components-source/dropi-radio-button/dropi-radio-button.component.spec.ts

@@ -0,0 +1,225 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { DropiRadioButtonComponent } from './dropi-radio-button.component';
+
+describe('DropiRadioButtonComponent', () => {
+  let component: DropiRadioButtonComponent;
+  let fixture: ComponentFixture<DropiRadioButtonComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiRadioButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiRadioButtonComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.label).toBe('');
+      expect(component.name).toBe('name');
+      expect(component.id).toBe('radioButton');
+      expect(component.checked).toBe(false);
+      expect(component.resetTrigger).toBe(false);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept custom label', () => {
+      component.label = 'Option 1';
+      fixture.detectChanges();
+      expect(component.label).toBe('Option 1');
+    });
+
+    it('should accept custom name', () => {
+      component.name = 'customGroup';
+      fixture.detectChanges();
+      expect(component.name).toBe('customGroup');
+    });
+
+    it('should accept custom id', () => {
+      component.id = 'customRadio1';
+      fixture.detectChanges();
+      expect(component.id).toBe('customRadio1');
+    });
+
+    it('should accept checked state', () => {
+      component.checked = true;
+      fixture.detectChanges();
+      expect(component.checked).toBe(true);
+    });
+
+    it('should accept resetTrigger', () => {
+      component.resetTrigger = true;
+      fixture.detectChanges();
+      expect(component.resetTrigger).toBe(true);
+    });
+  });
+
+  describe('Eventos de salida', () => {
+    it('should emit onChange event when clicked', () => {
+      const emitSpy = jest.spyOn(component.onChange, 'emit');
+      const mockEvent = { target: { checked: true } };
+
+      component.sendClick(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('should emit event with correct data', () => {
+      const emitSpy = jest.spyOn(component.onChange, 'emit');
+      const mockEvent = {
+        target: {
+          id: 'radio1',
+          value: 'option1',
+          checked: true,
+        },
+      };
+
+      component.sendClick(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockEvent);
+    });
+  });
+
+  describe('Funcionalidad de reset', () => {
+    it('should reset checked state when resetTrigger changes to true', () => {
+      component.checked = true;
+      fixture.detectChanges();
+
+      component.resetTrigger = true;
+      component.ngOnChanges({
+        resetTrigger: {
+          currentValue: true,
+          previousValue: false,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(component.checked).toBe(false);
+    });
+
+    it('should not reset when resetTrigger is false', () => {
+      component.checked = true;
+      fixture.detectChanges();
+
+      component.resetTrigger = false;
+      component.ngOnChanges({
+        resetTrigger: {
+          currentValue: false,
+          previousValue: false,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(component.checked).toBe(true);
+    });
+  });
+
+  describe('Comportamiento de radio group', () => {
+    it('should work with same name for radio group', () => {
+      const radioGroup = 'testGroup';
+      component.name = radioGroup;
+      fixture.detectChanges();
+
+      expect(component.name).toBe(radioGroup);
+    });
+
+    it('should maintain unique id for each radio button', () => {
+      component.id = 'uniqueRadio1';
+      fixture.detectChanges();
+
+      expect(component.id).toBe('uniqueRadio1');
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should call ngOnChanges successfully', () => {
+      expect(() => component.ngOnChanges({})).not.toThrow();
+    });
+
+    it('should handle changes in checked property', () => {
+      component.checked = false;
+
+      component.ngOnChanges({
+        checked: {
+          currentValue: true,
+          previousValue: false,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with all properties set', () => {
+      component.label = 'Payment Method A';
+      component.name = 'paymentMethod';
+      component.id = 'payment_a';
+      component.checked = true;
+
+      fixture.detectChanges();
+
+      expect(component.label).toBe('Payment Method A');
+      expect(component.name).toBe('paymentMethod');
+      expect(component.id).toBe('payment_a');
+      expect(component.checked).toBe(true);
+    });
+
+    it('should handle complete user interaction workflow', () => {
+      const emitSpy = jest.spyOn(component.onChange, 'emit');
+
+      // Setup
+      component.label = 'Option 1';
+      component.name = 'options';
+      component.id = 'opt1';
+      component.checked = false;
+      fixture.detectChanges();
+
+      // User clicks
+      const mockEvent = { target: { checked: true, id: 'opt1' } };
+      component.sendClick(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('should handle reset and reselection workflow', () => {
+      // Initial selection
+      component.checked = true;
+      fixture.detectChanges();
+
+      // Reset
+      component.resetTrigger = true;
+      component.ngOnChanges({
+        resetTrigger: {
+          currentValue: true,
+          previousValue: false,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(component.checked).toBe(false);
+
+      // Reselect
+      component.checked = true;
+      fixture.detectChanges();
+      expect(component.checked).toBe(true);
+    });
+  });
+});

package/src/components-source/dropi-radio-button/dropi-radio-button.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'app-dropi-radio-button',
+  templateUrl: './dropi-radio-button.component.html',
+  styleUrls: ['./dropi-radio-button.component.scss'],
+  imports: [CommonModule],
+  standalone: true,
+})
+export class DropiRadioButtonComponent implements OnInit, OnChanges {
+  @Input() label = '';
+  @Input() name = 'name';
+  @Input() id = 'radioButton';
+  @Input() checked = false;
+  @Input() resetTrigger: boolean = false; // Nuevo input para reiniciar
+
+  @Output() onChange = new EventEmitter<{}>();
+  @ViewChild('radioInput') radioInput!: ElementRef<HTMLInputElement>;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['resetTrigger'] && this.resetTrigger) {
+      this.checked = false; // Reiniciar el estado
+      if (this.radioInput) {
+        this.radioInput.nativeElement.checked = false;
+      }
+    }
+    // ... existing code ...
+  }
+
+  sendClick(e) {
+    this.onChange.emit(e);
+  }
+}

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

@@ -0,0 +1,124 @@
+<div [style.--color-back]="backgroundInput" #containerRef class="container-search">
+  <input
+    (focus)="onFocus()"
+    (input)="changeText($event)"
+    (change)="onChangHandler($event)"
+    (keyup.enter)="onEnter($event)"
+    [(ngModel)]="textInput"
+    [ngClass]="{
+      'Body-M-Regular': true,
+      'custom-input': true,
+      'input-drop-class': type === 'dropdown-button'
+    }"
+    [type]="typeInput"
+    [maxlength]="maxLength"
+    [placeholder]="placeholder | translate"
+  />
+  <svg
+    [style.color]="colorSearch"
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <g clip-path="url(#clip0_3021_2)">
+      <path
+        d="M17.1297 16.1484L12.9846 12.0032C14.1142 10.6217 14.6695 8.85886 14.5358 7.07932C14.4021 5.29979 13.5896 3.63972 12.2662 2.44249C10.9429 1.24526 9.20997 0.602467 7.42598 0.647073C5.64199 0.691678 3.94338 1.42027 2.68152 2.68213C1.41965 3.944 0.69106 5.64261 0.646455 7.4266C0.601849 9.21059 1.24464 10.9435 2.44187 12.2668C3.6391 13.5902 5.29917 14.4028 7.0787 14.5365C8.85824 14.6702 10.6211 14.1148 12.0026 12.9852L16.1478 17.1303C16.2787 17.2568 16.4542 17.3268 16.6362 17.3252C16.8183 17.3237 16.9925 17.2506 17.1212 17.1219C17.25 16.9931 17.323 16.8189 17.3246 16.6368C17.3262 16.4548 17.2562 16.2794 17.1297 16.1484ZM7.61095 13.1671C6.51217 13.1671 5.43806 12.8413 4.52445 12.2308C3.61084 11.6204 2.89877 10.7527 2.47829 9.73759C2.0578 8.72244 1.94778 7.60541 2.16214 6.52773C2.37651 5.45006 2.90562 4.46016 3.68258 3.6832C4.45954 2.90624 5.44944 2.37713 6.52712 2.16276C7.60479 1.9484 8.72183 2.05842 9.73697 2.47891C10.7521 2.89939 11.6198 3.61146 12.2302 4.52507C12.8407 5.43868 13.1665 6.51278 13.1665 7.61157C13.1649 9.08449 12.579 10.4966 11.5375 11.5381C10.496 12.5796 9.08387 13.1655 7.61095 13.1671Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3021_2">
+        <rect
+          width="16.6667"
+          height="16.6667"
+          fill="white"
+          transform="translate(0.666664 0.666626)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+
+  <div class="container-close-drop">
+    <app-icon
+      *ngIf="textInput?.length > 0 && showIcon"
+      (click)="clearText()"
+      [class]="label ? 'icon-close-input-label' : 'icon-close-input'"
+      name="Close-small"
+      width="20px"
+      height="20px"
+      color="Gray-Gray-600"
+    ></app-icon>
+
+    <div class="label-custom" *ngIf="label && isFocus && type == 'dropdown'">
+      <span class="label-custom-icon Body-M-Regular">
+        {{ label || 'Label' }}
+      </span>
+      <app-icon name="Dropdown-down" width="24px" height="24px" color="Gray-Gray-500"></app-icon>
+    </div>
+    <dropi-button
+      *ngIf="type == 'dropdown-button'"
+      [type]="'dropdown'"
+      [severity]="'tertiary'"
+      [state]="'default'"
+      [text]="textDropButton"
+      (onClick)="handleClickDropButton($event)"
+    ></dropi-button>
+  </div>
+
+  <div
+    #overlay
+    (click)="$event.stopPropagation()"
+    [class]="'overlay-search-input ' + overlaySelected"
+    *ngIf="(isFocus && type == 'dropdown') || (isClickedDropButton && type == 'dropdown-button')"
+    [ngStyle]="getOverlayStyles()"
+    @fade
+  >
+    <div
+      class="container-content"
+      *ngIf="
+        (isVisibleContent && type == 'dropdown') ||
+        (isClickedDropButton && type == 'dropdown-button')
+      "
+      @fade
+    >
+      <div class="content-no-found" *ngIf="dataToSearchCache?.length == 0">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="21"
+          height="20"
+          viewBox="0 0 21 20"
+          fill="none"
+        >
+          <path
+            d="M10.5 1.66663C8.85185 1.66663 7.24068 2.15537 5.87027 3.07105C4.49986 3.98672 3.43176 5.28821 2.80103 6.81093C2.1703 8.33365 2.00527 10.0092 2.32681 11.6257C2.64836 13.2422 3.44203 14.7271 4.60747 15.8925C5.77291 17.058 7.25776 17.8516 8.87427 18.1732C10.4908 18.4947 12.1663 18.3297 13.6891 17.699C15.2118 17.0682 16.5133 16.0001 17.4289 14.6297C18.3446 13.2593 18.8334 11.6481 18.8334 9.99996C18.831 7.79056 17.9522 5.67233 16.3899 4.11004C14.8277 2.54776 12.7094 1.66902 10.5 1.66663ZM10.5 16.9444C9.12654 16.9444 7.78391 16.5371 6.6419 15.7741C5.49989 15.011 4.6098 13.9264 4.08419 12.6575C3.55859 11.3886 3.42106 9.99226 3.68902 8.64517C3.95697 7.29808 4.61836 6.06069 5.58956 5.0895C6.56076 4.1183 7.79814 3.4569 9.14523 3.18895C10.4923 2.921 11.8886 3.05852 13.1575 3.58413C14.4265 4.10974 15.5111 4.99983 16.2741 6.14183C17.0372 7.28384 17.4445 8.62648 17.4445 9.99996C17.4424 11.8411 16.7102 13.6063 15.4083 14.9082C14.1064 16.2101 12.3412 16.9424 10.5 16.9444Z"
+            fill="var(--Gray-Gray-600)"
+          />
+          <path
+            d="M10.5 5.13895C10.3158 5.13895 10.1392 5.21212 10.009 5.34235C9.87875 5.47259 9.80558 5.64922 9.80558 5.8334V11.389C9.80558 11.5731 9.87875 11.7498 10.009 11.88C10.1392 12.0102 10.3158 12.0834 10.5 12.0834C10.6842 12.0834 10.8608 12.0102 10.9911 11.88C11.1213 11.7498 11.1945 11.5731 11.1945 11.389V5.8334C11.1945 5.64922 11.1213 5.47259 10.9911 5.34235C10.8608 5.21212 10.6842 5.13895 10.5 5.13895Z"
+            fill="#475066"
+          />
+          <path
+            d="M11.1945 14.1667C11.1945 13.7832 10.8836 13.4723 10.5 13.4723C10.1165 13.4723 9.80558 13.7832 9.80558 14.1667C9.80558 14.5503 10.1165 14.8612 10.5 14.8612C10.8836 14.8612 11.1945 14.5503 11.1945 14.1667Z"
+            fill="#475066"
+          />
+        </svg>
+
+        <div class="Body-S-Regular text-no-found">
+          No encontramos resultados, por favor intenta con otra búsqueda.
+        </div>
+      </div>
+
+      <div *ngIf="dataToSearchCache?.length > 0">
+        <div class="container-array" *ngFor="let data of dataToSearchCache; let i = index">
+          <app-dropi-checkbox
+            [checked]="data.isChecked"
+            (onChange)="checkingList($event, data)"
+          ></app-dropi-checkbox>
+          {{ data[dataName] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>