@dropi/ui-components 1.0.0

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

@@ -0,0 +1,224 @@
+.phone-input-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.p-autocomplete-input::placeholder {
+  color: #627587 !important;
+}
+
+.flag-code {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.country-select {
+  position: relative;
+}
+
+.ng-select .ng-dropdown-panel .ng-option.ng-option-marked {
+  color: #313131 !important;
+}
+
+.selected-country {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.flag-icon {
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.country-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-top: none;
+  width: 100%;
+}
+
+.country-list li {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.country-list li:hover {
+  background-color: #f5f5f5;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+input.is-invalid {
+  background: #fffbfb;
+}
+
+.is-invalid-country .ng-select-container {
+  border: 1px solid #ff3d00 !important;
+  background: #fffbfb !important;
+  color: #f10001 !important;
+}
+
+.form-control {
+  width: 100%;
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: 5px;
+  font-size: 14px;
+  transition: border-color 0.3s ease-in-out;
+  height: 40px;
+}
+
+.form-control:focus::placeholder {
+  color: var(--Gray-Gray-500);
+}
+
+.form-control:focus {
+  border-color: var(--Info-Info-500);
+  outline: none;
+}
+
+.form-control:disabled {
+  border: 1px solid var(--Gray-Gray-200) !important;
+  color: var(--Gray-Gray-400);
+  background-color: var(--Gray-Gray-50);
+  outline: none;
+}
+
+.custom-select {
+  position: relative;
+  width: 50%;
+  label {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-regular);
+    color: var(--Gray-Gray-600);
+    span {
+      color: var(--Error-Error-500);
+    }
+  }
+}
+
+.select-button {
+  width: 100%;
+  height: 40px;
+  padding: 0.47rem 0.75rem;
+  padding-right: 7px;
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Border-2);
+  background: var(--Neutral-White);
+  color: var(--Gray-Gray-500);
+  font-size: var(--font-size-s);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  cursor: pointer;
+}
+
+.select-dropdown {
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 0 0;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2);
+  overflow-y: scroll;
+  z-index: 100;
+}
+
+.option {
+  width: 100%;
+  height: 45px;
+  border-radius: var(--Border-2);
+  padding-top: var(--Size-3);
+  padding-right: var(--Size-4);
+  padding-bottom: var(--Size-3);
+  padding-left: var(--Size-4);
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--Gray-Gray-600);
+  font-size: var(--font-size-s);
+  cursor: pointer;
+}
+
+.option:hover {
+  background: var(--Gray-Gray-50);
+}
+
+.expanded-select {
+  max-height: 250px;
+  background: var(--Neutral-White);
+  box-shadow: var(--Shadow-medium);
+  transition: max-height 0.2s ease-in;
+}
+
+.collapsed-select {
+  max-height: 0;
+  background: transparent;
+  box-shadow: none;
+  transition:
+    max-height 0.2s ease-out,
+    background 0.6s ease-out,
+    box-shadow 0.6s ease-out;
+}
+
+.select-button:focus {
+  border-color: var(--Info-Info-500) !important;
+}
+
+.select-button:disabled,
+.option:disabled {
+  border-color: var(--Gray-Gray-200);
+  color: var(--Gray-Gray-400);
+  background-color: var(--Gray-Gray-50);
+  cursor: unset;
+}
+
+.select-completed {
+  border-color: var(--Gray-Gray-400);
+  color: var(--Gray-Gray-600);
+  background: var(--Neutral-White);
+}
+
+.select-invalid {
+  border-color: var(--Error-Error-500) !important;
+}
+
+.select-helper {
+  display: flex;
+  gap: 4px;
+  align-items: baseline;
+  span {
+    display: block;
+    margin-top: 8px;
+    color: var(--Gray-Gray-600);
+    font-size: var(--font-size-xs);
+  }
+}
+
+.invalid-color {
+  color: var(--Error-Error-500) !important;
+}

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

@@ -0,0 +1,376 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiPhoneInputComponent } from './dropi-phone-input.component';
+import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
+import { UserService } from 'src/app/pages/service/auth/user.service';
+import { SettingsService } from 'src/app/services/setting.service';
+import { Api } from 'src/app/services/api.service';
+import { FormsModule } from '@angular/forms';
+import { IconComponent } from '../icon/icon.component';
+import { of } from 'rxjs';
+
+describe('DropiPhoneInputComponent', () => {
+  let component: DropiPhoneInputComponent;
+  let fixture: ComponentFixture<DropiPhoneInputComponent>;
+  let mockTranslateService: any;
+  let mockUserService: any;
+  let mockSettingsService: any;
+  let mockApiService: any;
+
+  beforeEach(() => {
+    mockTranslateService = {
+      instant: jest.fn((key) => key),
+      get: jest.fn((key) => of(key)),
+      use: jest.fn(() => of({})),
+      setDefaultLang: jest.fn(),
+    };
+
+    mockUserService = {};
+    mockSettingsService = {};
+    mockApiService = {};
+
+    const mockElementRef = {
+      nativeElement: {
+        querySelector: jest.fn().mockReturnValue(null),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        contains: jest.fn().mockReturnValue(false),
+      },
+    };
+
+    // Crear el componente directamente sin TestBed
+    component = new DropiPhoneInputComponent(
+      mockElementRef,
+      mockUserService,
+      mockSettingsService,
+      mockApiService,
+      mockTranslateService,
+    );
+    
+    // Inicializar selectProperties con las opciones de países
+    component.selectProperties = {
+      label: 'Country',
+      placeholder: 'Select a country',
+      options: component.countries,
+    };
+    
+    fixture = {
+      componentInstance: component,
+      detectChanges: () => {},
+      nativeElement: {},
+    } as any;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.ngModelPhone).toBe('');
+      expect(component.disabledInput).toBe(false);
+      expect(component.validateOnInit).toBe(true);
+      expect(component.maxLengthPhone).toBe(10);
+    });
+
+    it('should load countries data', () => {
+      expect(component.countries).toBeDefined();
+      expect(component.countries.length).toBeGreaterThan(0);
+    });
+
+    it('should set placeholder on init', () => {
+      component.ngOnInit();
+
+      expect(component.phoneNumberPlaceholder).toBeDefined();
+    });
+
+    it('should validate phone on init if validateOnInit is true', () => {
+      const spy = jest.spyOn(component, 'validtaeLengthPhone');
+      component.validateOnInit = true;
+
+      component.ngOnInit();
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Selección de código de área', () => {
+    it('should change country code', () => {
+      const emitSpy = jest.spyOn(component.ngModelChangeCod, 'emit');
+      const testCountry = component.countries[0];
+
+      component.cambioCod(testCountry);
+
+      expect(component.selectedOption).toEqual(testCountry);
+      expect(emitSpy).toHaveBeenCalledWith(testCountry.code);
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should clear phone number when changing country', () => {
+      component.ngModelPhone = '1234567890';
+      const testCountry = component.countries[0];
+
+      component.cambioCod(testCountry);
+
+      expect(component.ngModelPhone).toBe('');
+    });
+
+    it('should validate phone length after country change', () => {
+      const spy = jest.spyOn(component, 'validtaeLengthPhone');
+      const testCountry = component.countries[0];
+
+      component.cambioCod(testCountry);
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Entrada de número telefónico', () => {
+    it('should emit phone number change', () => {
+      const emitSpy = jest.spyOn(component.ngModelChangePhone, 'emit');
+      component.ngModelPhone = '1234567890';
+
+      component.cambioPhone();
+
+      expect(emitSpy).toHaveBeenCalledWith('1234567890');
+    });
+
+    it('should validate phone length on change', () => {
+      const spy = jest.spyOn(component, 'validtaeLengthPhone');
+
+      component.cambioPhone();
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should handle backspace on empty input', () => {
+      component.ngModelPhone = '';
+      const mockEvent = new KeyboardEvent('keydown', { key: 'Backspace' });
+
+      component.cambioPhone(mockEvent);
+
+      expect(component.ngModelPhone).toBe('');
+    });
+
+    it('should set first character from keyboard event', () => {
+      component.ngModelPhone = '';
+      const mockEvent = new KeyboardEvent('keydown', { key: '5' });
+
+      component.cambioPhone(mockEvent);
+
+      expect(component.ngModelPhone).toBe('5');
+    });
+  });
+
+  describe('Validación de longitud', () => {
+    beforeEach(() => {
+      // Setup US country (10 digits) - note: code is '1', not '+1'
+      const usCountry = component.countries.find((c) => c.code === '1');
+      if (usCountry) {
+        component.CodArea = '1';
+        component.selectedOption = usCountry;
+      }
+    });
+
+    it('should validate correct phone length', () => {
+      const emitSpy = jest.spyOn(component.verifiedField, 'emit');
+      component.ngModelPhone = '1234567890'; // 10 digits
+
+      component.validtaeLengthPhone();
+
+      expect(component.isValidPhone).toBe(true);
+      expect(emitSpy).toHaveBeenCalledWith(true);
+    });
+
+    it('should invalidate incorrect phone length', () => {
+      const emitSpy = jest.spyOn(component.verifiedField, 'emit');
+      component.ngModelPhone = '12345'; // 5 digits
+
+      component.validtaeLengthPhone();
+
+      expect(component.isValidPhone).toBe(false);
+      expect(emitSpy).toHaveBeenCalledWith(false);
+    });
+
+    it('should set maxLength based on country', () => {
+      const country = component.countries.find((c) => c.code === '1');
+      component.CodArea = '1';
+
+      component.validtaeLengthPhone();
+
+      expect(component.maxLengthPhone).toBe(country.maxLength);
+    });
+
+    it('should handle invalid country code', () => {
+      component.CodArea = '+999';
+
+      component.validtaeLengthPhone();
+
+      expect(component.isValidPhone).toBe(false);
+    });
+  });
+
+  describe('Manejo de pegado', () => {
+    it('should handle paste event and sanitize text', () => {
+      const mockEvent = {
+        preventDefault: jest.fn(),
+        clipboardData: {
+          getData: jest.fn().mockReturnValue('123-456-7890'),
+        },
+      } as any;
+
+      component.handlePaste(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(component.ngModelPhone).toBe('1234567890');
+    });
+
+    it('should remove non-numeric characters on paste', () => {
+      const mockEvent = {
+        preventDefault: jest.fn(),
+        clipboardData: {
+          getData: jest.fn().mockReturnValue('(123) 456-7890'),
+        },
+      } as any;
+
+      component.handlePaste(mockEvent);
+
+      expect(component.ngModelPhone).toBe('1234567890');
+    });
+  });
+
+  describe('Control de dropdown', () => {
+    it('should toggle dropdown', () => {
+      component.disabled = false;
+      component.isExpanded = false;
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(true);
+    });
+
+    it('should not open dropdown when disabled', () => {
+      component.disabled = true;
+      component.isExpanded = false;
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should close dropdown on document click', () => {
+      component.isExpanded = true;
+      const mockEvent = new MouseEvent('click');
+
+      component.closeDropdown(mockEvent);
+
+      expect(component.isExpanded).toBe(false);
+    });
+  });
+
+  describe('Configuración de país', () => {
+    it('should set property by country code', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+      const testCode = '1'; // US country code without +
+
+      component.setPropertyById(testCode);
+
+      const expectedCountry = component.countries.find((c) => c.code === testCode);
+      expect(component.selectedOption).toEqual(expectedCountry);
+      expect(emitSpy).toHaveBeenCalledWith(expectedCountry);
+    });
+
+    it('should set property by country name', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+      const testName = 'United States';
+
+      component.setPropertyByLabel(testName);
+
+      expect(component.selectedOption?.name).toBe(testName);
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('CodArea input', () => {
+    it('should set country when CodArea is set', () => {
+      const testCode = '1'; // US country code without +
+
+      component.CodArea = testCode;
+
+      const expectedCountry = component.countries.find((c) => c.code === testCode);
+      expect(component.selectedOption).toEqual(expectedCountry);
+    });
+
+    it('should get CodArea value', () => {
+      component['_CodArea'] = '1';
+
+      expect(component.CodArea).toBe('1');
+    });
+  });
+
+  describe('CodArea input', () => {
+    it('should update selected option when CodArea changes', () => {
+      const testCode = '1'; // US code without +
+
+      component.CodArea = testCode;
+
+      const expectedCountry = component.countries.find((c) => c.code === testCode);
+      expect(component.selectedOption).toEqual(expectedCountry);
+    });
+  });
+
+  describe('Estado deshabilitado', () => {
+    it('should accept disabled state', () => {
+      component.disabledInput = true;
+      fixture.detectChanges();
+
+      expect(component.disabledInput).toBe(true);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept custom placeholder', () => {
+      component.phoneNumberPlaceholder = 'Custom placeholder';
+
+      expect(component.phoneNumberPlaceholder).toBe('Custom placeholder');
+    });
+
+    it('should accept isValidPhone state', () => {
+      component.isValidPhone = true;
+
+      expect(component.isValidPhone).toBe(true);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete phone input workflow', () => {
+      // Select country - use code without +
+      const usCountry = component.countries.find((c) => c.code === '1');
+      component.cambioCod(usCountry);
+      expect(component.selectedOption).toEqual(usCountry);
+
+      // Enter phone number
+      component.ngModelPhone = '1234567890';
+      component.cambioPhone();
+
+      // Validate
+      component.CodArea = '1';
+      component.validtaeLengthPhone();
+      expect(component.isValidPhone).toBe(true);
+    });
+
+    it('should handle phone number correction workflow', () => {
+      // Initial entry
+      const country = component.countries.find((c) => c.code === '1');
+      component.cambioCod(country);
+      component.CodArea = '1';
+      component.ngModelPhone = '12345';
+      component.validtaeLengthPhone();
+      expect(component.isValidPhone).toBe(false);
+
+      // Correct entry
+      component.ngModelPhone = '1234567890';
+      component.validtaeLengthPhone();
+      expect(component.isValidPhone).toBe(true);
+    });
+  });
+});