@dropi/ui-components 1.0.0

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

@@ -0,0 +1,275 @@
+.custom-select {
+  position: relative;
+  width: 100%;
+
+  label {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-regular);
+    color: var(--Gray-Gray-600);
+
+    span {
+      color: var(--Error-Error-500);
+    }
+  }
+
+  .disabled-label {
+    color: var(--Gray-Gray-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: 1300;
+}
+
+// Estilos para el dropdown cuando se renderiza en el overlay CDK
+.select-dropdown-overlay {
+  width: 100%;
+  max-height: 250px;
+  overflow-y: auto;
+  list-style: none;
+  padding: var(--Size-4);
+  padding-bottom: var(--Size-3);
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2);
+  background: var(--Neutral-White);
+  box-shadow: var(--Shadow-medium);
+  z-index: 9999;
+}
+
+.select-dropdown-overlay.padding-dropdown {
+  padding: var(--Size-4);
+}
+
+.padding-dropdown {
+  padding: var(--Size-4);
+}
+
+.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;
+  padding: 0;
+  transition:
+    max-height 0.2s ease-out,
+    background 0.3s ease-out,
+    box-shadow 0.3s ease-out,
+    padding 0.3s;
+}
+
+.select-button:focus {
+  border-color: var(--Info-Info-500);
+}
+
+.select-button-error {
+  border-color: var(--Error-Error-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-helper {
+  display: flex;
+  gap: var(--Size-1);
+  align-items: baseline;
+  span {
+    display: block;
+    margin-top: var(--Size-2);
+    color: var(--Gray-Gray-600);
+    font-size: var(--font-size-xs);
+  }
+}
+
+.select-helper-error {
+  display: flex;
+  gap: var(--Size-1);
+  align-items: baseline;
+  span {
+    display: block;
+    margin-top: var(--Size-2);
+    color: var(--Error-Error-500);
+    font-size: var(--font-size-xs);
+  }
+}
+
+.invalid-color {
+  color: var(--Error-Error-500) !important;
+}
+
+.elipsis {
+  flex: 1 1 auto; /* ✅ que crezca y se reduzca */
+  min-width: 0; /* ✅ permite que se corte el texto */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.option-group-title {
+  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);
+}
+
+.option-group {
+  padding-left: var(--Size-6);
+}
+
+.sticky-search {
+  position: sticky;
+  top: 0;
+  background: var(--Neutral-White);
+  z-index: 10;
+}
+
+::ng-deep .custom-select .select-dropdown .sticky-search .container-search {
+  background-color: var(--Neutral-White) !important;
+}
+
+.no-border {
+  border: none !important;
+  color: var(--Gray-Gray-600, #475066);
+  padding: var(--Size-4, 16px);
+  gap: var(--Size-2, 8px);
+  background-color: transparent !important; // vista dropdown
+}
+
+.no-border:disabled {
+  background-color: transparent !important;
+  // background-color: var(--Gray-Gray-50) !important;
+}
+
+.select-button:disabled {
+  color: var(--Gray-Gray-400);
+  background-color: var(--Gray-Gray-50);
+}
+
+.dropdown-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .left-label {
+    color: var(--Gray-600, #475066);
+    white-space: nowrap;
+  }
+}
+
+// Estilos para banderas de países
+.button-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  flex: 1;
+}
+
+.select-button.with-flag {
+  .button-content {
+    app-country-flags {
+      flex-shrink: 0;
+      ::ng-deep {
+        .rectangle {
+          max-width: 24px !important;
+          max-height: 17px !important;
+          border-radius: var(--Border-1);
+        }
+      }
+    }
+  }
+}
+
+.option-with-flag {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  app-country-flags {
+    flex-shrink: 0;
+    ::ng-deep {
+      .rectangle {
+        max-width: 24px !important;
+        max-height: 17px !important;
+        border-radius: var(--Border-1);
+      }
+    }
+  }
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,386 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement, Component, Input, Output, EventEmitter } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { DropiSelectComponent } from './dropi-select.component';
+import {
+  OptionsSelect,
+  SelectProperties,
+  GroupedOptions,
+} from '@app/utilities/interfaces/ui/select.interface';
+
+// Mock components
+@Component({
+  selector: 'app-icon',
+  standalone: true,
+  template: '<span>icon</span>',
+})
+class MockIconComponent {
+  @Input() icon: string;
+  @Input() size: string;
+  @Input() color: string;
+}
+
+@Component({
+  selector: 'app-dropi-search',
+  standalone: true,
+  template: '<input type="text">',
+})
+class MockDropiSearchComponent {
+  @Input() searchTerm: string;
+  @Output() termSearched = new EventEmitter<string>();
+}
+
+@Component({
+  selector: 'app-dropi-dropdown',
+  standalone: true,
+  template: '<div><ng-content></ng-content></div>',
+})
+class MockDropiDropdownComponent {
+  @Input() isExpanded: boolean;
+  @Input() parametersDrop: any;
+  @Input() label: string;
+  @Input() filteredOptions: any[];
+  @Input() multiSelect: boolean;
+  @Input() multiSelecOptions: any[];
+  @Output() scrolledToEnd = new EventEmitter<void>();
+  @Output() optionSelected = new EventEmitter<any>();
+  @Output() onKeyEnter = new EventEmitter<any>();
+}
+
+describe('DropiSelectComponent', () => {
+  let component: DropiSelectComponent;
+  let fixture: ComponentFixture<DropiSelectComponent>;
+  let debugElement: DebugElement;
+
+  const mockSelectProperties: SelectProperties = {
+    label: 'Test Select',
+    placeholder: 'Choose an option',
+    options: [
+      { id: 1, label: 'Option 1', disabled: false },
+      { id: 2, label: 'Option 2', disabled: false },
+      { id: 3, label: 'Option 3', disabled: true },
+    ],
+    textHelper: 'Helper text',
+    showObligatory: true,
+  };
+
+  const mockGroupedOptions: GroupedOptions[] = [
+    {
+      category: 'Category 1',
+      options: [
+        { id: 1, label: 'Option 1', disabled: false },
+        { id: 2, label: 'Option 2', disabled: false },
+      ],
+    },
+    {
+      category: 'Category 2',
+      options: [
+        { id: 3, label: 'Option 3', disabled: false },
+        { id: 4, label: 'Option 4', disabled: false },
+      ],
+    },
+  ];
+
+  beforeEach(async () => {
+    // Mock ElementRef
+    const mockElementRef = {
+      nativeElement: {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        querySelector: jest.fn(),
+        contains: jest.fn().mockReturnValue(false), // Add contains method
+        getBoundingClientRect: jest.fn().mockReturnValue({
+          top: 0,
+          left: 0,
+          bottom: 100,
+          right: 100,
+          width: 100,
+          height: 100,
+        }),
+      },
+    };
+
+    // Mock Overlay
+    const mockOverlayRef = {
+      attach: jest.fn(),
+      detach: jest.fn(),
+      dispose: jest.fn(),
+      hasAttached: jest.fn().mockReturnValue(false),
+      backdropClick: jest.fn().mockReturnValue({
+        subscribe: jest.fn(),
+      }),
+    };
+    const mockOverlay = {
+      create: jest.fn().mockReturnValue(mockOverlayRef),
+      position: jest.fn().mockReturnValue({
+        flexibleConnectedTo: jest.fn().mockReturnValue({
+          withPositions: jest.fn().mockReturnValue({
+            withPush: jest.fn().mockReturnValue({
+              withDefaultOffsetY: jest.fn().mockReturnValue({}),
+            }),
+          }),
+        }),
+      }),
+      scrollStrategies: {
+        reposition: jest.fn().mockReturnValue({}),
+      },
+    };
+
+    // Mock ViewContainerRef
+    const mockViewContainerRef = {
+      createEmbeddedView: jest.fn(),
+    };
+
+    // Create component directly
+    component = new DropiSelectComponent(mockElementRef as any, mockOverlay as any, mockViewContainerRef as any);
+    component.selectProperties = mockSelectProperties;
+    
+    // Mock ViewChild elements
+    (component as any).buttonSelect = {
+      nativeElement: document.createElement('button')
+    };
+
+    // Mock fixture for tests that need it
+    fixture = {
+      componentInstance: component,
+      debugElement: {
+        query: jest.fn(),
+        queryAll: jest.fn(),
+        nativeElement: mockElementRef.nativeElement,
+      },
+      detectChanges: jest.fn(),
+    } as any;
+
+    debugElement = fixture.debugElement;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      // Verifica que el componente se crea correctamente
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      // Verifica los valores por defecto
+      expect(component.disabled).toBe(false);
+      expect(component.isExpanded).toBe(false);
+      expect(component.searchEnabled).toBe(false);
+      expect(component.isGrouped).toBe(false);
+    });
+
+    it('should initialize properties from selectProperties', () => {
+      // Verifica que inicializa correctamente las propiedades del select
+      component.ngOnInit();
+      expect(component.filteredOptions).toEqual(mockSelectProperties.options);
+    });
+  });
+
+  describe('Opciones agrupadas', () => {
+    it('should detect grouped options correctly', () => {
+      // Verifica que detecta correctamente las opciones agrupadas
+      component.selectProperties = {
+        ...mockSelectProperties,
+        options: mockGroupedOptions as any,
+      };
+      component.ngOnInit();
+
+      expect(component.isGrouped).toBe(true);
+    });
+
+    it('should detect non-grouped options correctly', () => {
+      // Verifica que detecta correctamente las opciones no agrupadas
+      component.ngOnInit();
+      expect(component.isGrouped).toBe(false);
+    });
+  });
+
+  describe('Funcionalidad de búsqueda', () => {
+    beforeEach(() => {
+      component.selectProperties = {
+        ...mockSelectProperties,
+        searchEnabled: true,
+      };
+      component.ngOnInit();
+    });
+
+    it('should enable search when searchEnabled is true', () => {
+      // Verifica que habilita la búsqueda cuando searchEnabled es true
+      expect(component.searchEnabled).toBe(true);
+    });
+
+    it('should filter non-grouped options correctly', () => {
+      // Verifica que filtra correctamente las opciones no agrupadas
+      component.filterOptions('Option 1');
+
+      expect(component.filteredOptions).toEqual([{ id: 1, label: 'Option 1', disabled: false }]);
+    });
+
+    it('should filter grouped options correctly', () => {
+      // Verifica que filtra correctamente las opciones agrupadas
+      component.selectProperties.options = mockGroupedOptions as any;
+      component.ngOnInit();
+
+      component.filterOptions('Option 1');
+
+      const expectedResult = [
+        {
+          category: 'Category 1',
+          options: [{ id: 1, label: 'Option 1', disabled: false }],
+        },
+      ];
+
+      expect(component.filteredOptions).toEqual(expectedResult);
+    });
+
+    it('should return empty array when no matches found in grouped options', () => {
+      // Verifica que devuelve array vacío cuando no encuentra coincidencias en opciones agrupadas
+      component.selectProperties.options = mockGroupedOptions as any;
+      component.ngOnInit();
+
+      component.filterOptions('Nonexistent');
+
+      expect(component.filteredOptions).toEqual([]);
+    });
+  });
+
+  describe('Selección de opciones', () => {
+    it('should select option correctly', () => {
+      // Verifica que selecciona la opción correctamente
+      const optionToSelect = mockSelectProperties.options[0];
+
+      component.selectOption(optionToSelect);
+
+      expect(component.selectedOption).toEqual(optionToSelect);
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should set property by id correctly', () => {
+      // Verifica que establece la propiedad por ID correctamente
+      component.setPropertyById(2);
+
+      expect(component.selectedOption).toEqual(mockSelectProperties.options[1]);
+    });
+
+    it('should set property by label correctly', () => {
+      // Verifica que establece la propiedad por etiqueta correctamente
+      component.setPropertyByLabel('Option 2');
+
+      expect(component.selectedOption).toEqual(mockSelectProperties.options[1]);
+    });
+  });
+
+  describe('Mostrar/ocultar opciones', () => {
+    it('should toggle expanded state when not disabled', () => {
+      // Verifica que alterna el estado expandido cuando no está deshabilitado
+      component.disabled = false;
+      component.isExpanded = false;
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(true);
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should not toggle expanded state when disabled', () => {
+      // Verifica que no alterna el estado cuando está deshabilitado
+      component.disabled = true;
+      component.isExpanded = false;
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(false);
+    });
+  });
+
+  describe('Cerrar dropdown', () => {
+    it('should close dropdown when clicking outside', () => {
+      // Verifica que cierra el dropdown al hacer clic fuera
+      component.isExpanded = true;
+      const mockEvent = {
+        target: document.createElement('div'),
+      } as any;
+
+      component.closeDropdown(mockEvent);
+
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should not close dropdown when clicking inside', () => {
+      // Verifica que no cierra el dropdown al hacer clic dentro
+      component.isExpanded = true;
+
+      // Simular clic dentro del elemento
+      jest.spyOn(component['elementRef'].nativeElement, 'contains').mockReturnValue(true);
+
+      const mockEvent = {
+        target: document.createElement('div'),
+      } as any;
+
+      component.closeDropdown(mockEvent);
+
+      expect(component.isExpanded).toBe(true);
+    });
+  });
+
+  describe('Cambios en propiedades', () => {
+    it('should reinitialize when selectProperties changes', () => {
+      // Verifica que reinicializa cuando cambian las selectProperties
+      jest.spyOn(component, 'initializeSelectedProperties');
+
+      const newProperties = {
+        ...mockSelectProperties,
+        options: [{ id: 5, label: 'New Option', disabled: false }],
+      };
+
+      component.selectProperties = newProperties;
+      component.ngOnChanges({
+        selectProperties: {
+          currentValue: newProperties,
+          previousValue: mockSelectProperties,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(component.initializeSelectedProperties).toHaveBeenCalled();
+    });
+
+    it('should not reinitialize on first change', () => {
+      // Verifica que no reinicializa en el primer cambio
+      jest.spyOn(component, 'initializeSelectedProperties');
+
+      component.ngOnChanges({
+        selectProperties: {
+          currentValue: mockSelectProperties,
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      });
+
+      expect(component.initializeSelectedProperties).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Estado deshabilitado', () => {
+    it('should accept disabled input', () => {
+      // Verifica que acepta el input disabled
+      component.disabled = true;
+      expect(component.disabled).toBe(true);
+    });
+
+    it('should prevent interactions when disabled', () => {
+      // Verifica que previene interacciones cuando está deshabilitado
+      component.disabled = true;
+      component.isExpanded = false;
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(false);
+    });
+  });
+});