@dropi/ui-components 1.0.0

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

@@ -0,0 +1,116 @@
+.container-search {
+  width: 100%;
+  min-width: 150px;
+  height: 40px;
+  padding: var(--Size-3);
+  background-color: var(--color-back);
+  border: 1px solid var(--Gray-Gray-100);
+  border-radius: var(--Size-2);
+  padding: var(--Size-3);
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.container-search > input {
+  position: relative;
+  top: 0;
+  right: 0px;
+  left: 0px;
+  top: 0;
+  height: 100%;
+  background-color: transparent;
+  border: none;
+  position: absolute;
+  font-style: 14px !important;
+  padding: 0 38px;
+  width: 100%;
+}
+
+input::placeholder {
+  color: var(--Gray-Gray-500) !important;
+}
+
+.icon-close-input {
+  cursor: pointer;
+}
+
+.icon-close-input-label {
+  cursor: pointer;
+}
+
+.container-close-drop {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  right: 13px;
+  gap: 0.25rem;
+}
+
+.overlay-search-input {
+  width: 100%;
+  box-shadow: 0.5px 4px 8px 0px rgba(0, 0, 0, 0.08);
+  background-color: var(--Neutral-White);
+  position: absolute;
+
+  left: 0;
+  border-radius: var(--Size-2);
+  align-self: stretch;
+  z-index: 100;
+}
+
+.text-no-found {
+  margin-top: var(--Size-2);
+  text-align: center;
+  padding: 0 var(--Size-4);
+}
+
+.content-no-found {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 180px;
+  flex-direction: column;
+}
+
+.container-array {
+  padding: var(--Size-3) var(--Size-4);
+  display: flex;
+  align-items: center;
+}
+
+.content-found {
+  overflow-y: auto;
+  z-index: 99999;
+}
+
+.container-search-input {
+  width: 385px;
+}
+
+.container-array > app-dropi-checkbox {
+  margin-right: var(--Size-3);
+}
+
+.label-custom {
+  cursor: pointer;
+}
+
+.label-custom-icon {
+  color: var(--Gray-Gray-500);
+}
+
+.input-drop-class {
+  padding-right: 10rem !important;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield; /* Firefox */
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none; /* Chrome/Edge/Safari */
+  margin: 0; /* Elimina el espacio reservado para las flechas */
+}

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

@@ -0,0 +1,483 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import {
+  BrowserAnimationsModule,
+  NoopAnimationsModule,
+} from '@angular/platform-browser/animations';
+import { Component } from '@angular/core';
+import { SimpleChange } from '@angular/core';
+
+import { DropiSearchComponent } from './dropi-search.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+// Mock components para los componentes hijos
+@Component({
+  selector: 'app-icon',
+  template: '<div class="mock-icon"></div>',
+})
+class MockIconComponent {
+  name: string;
+  width: string;
+  height: string;
+  color: string;
+}
+
+@Component({
+  selector: 'app-dropi-checkbox',
+  template: '<div class="mock-checkbox"></div>',
+})
+class MockCheckboxComponent {
+  checked: boolean;
+  onChange = jest.fn();
+}
+
+describe('DropiSearchComponent', () => {
+  let component: DropiSearchComponent;
+  let fixture: ComponentFixture<DropiSearchComponent>;
+
+  const mockData = [
+    { id: 1, name: 'Apple', category: 'Fruit' },
+    { id: 2, name: 'Banana', category: 'Fruit' },
+    { id: 3, name: 'Carrot', category: 'Vegetable' },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DropiSearchComponent,
+        TranslateModule.forRoot(),
+        FormsModule,
+        BrowserAnimationsModule,
+        NoopAnimationsModule,
+      ],
+      declarations: [MockIconComponent, MockCheckboxComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiSearchComponent);
+    component = fixture.componentInstance;
+    component.dataToSearch = mockData;
+    component.model = [];
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.type).toBe('default');
+      expect(component.placeholder).toBe('');
+      expect(component.textInput).toBe('');
+      expect(component.typeInput).toBe('text');
+      expect(component.showIcon).toBe(true);
+      expect(component.position).toBe('down');
+    });
+
+    it('should cache dataToSearch on init', () => {
+      component.ngOnInit();
+
+      expect(component.dataToSearchCache).toEqual(mockData);
+    });
+
+    it('should set background based on type', () => {
+      component.type = 'default';
+      component.ngOnInit();
+      expect(component.backgroundInput).toBe('var(--Gray-Gray-50)');
+
+      component.type = 'default-light';
+      component.ngOnInit();
+      expect(component.backgroundInput).toBe('--Neutral-White');
+    });
+  });
+
+  describe('Tipos de componente', () => {
+    it('should handle default type', () => {
+      component.type = 'default';
+      component.ngOnInit();
+
+      expect(component.type).toBe('default');
+    });
+
+    it('should handle dropdown type', () => {
+      component.type = 'dropdown';
+      component.ngOnInit();
+
+      expect(component.type).toBe('dropdown');
+    });
+
+    it('should handle dropdown-button type', () => {
+      component.type = 'dropdown-button';
+      component.ngOnInit();
+
+      expect(component.type).toBe('dropdown-button');
+      // textDropButton gets the name from the first item in dataToSearch
+      expect(component.textDropButton).toBe('Apple');
+    });
+
+    it('should handle default-light type', () => {
+      component.type = 'default-light';
+      component.ngOnInit();
+
+      expect(component.backgroundInput).toBe('--Neutral-White');
+    });
+  });
+
+  describe('Búsqueda de texto', () => {
+    beforeEach(() => {
+      component.ngOnInit();
+    });
+
+    it('should filter data by search term', () => {
+      component.searchText('Apple');
+
+      expect(component.dataToSearchCache.length).toBe(1);
+      expect(component.dataToSearchCache[0].name).toBe('Apple');
+    });
+
+    it('should be case insensitive', () => {
+      component.searchText('apple');
+
+      expect(component.dataToSearchCache.length).toBe(1);
+      expect(component.dataToSearchCache[0].name).toBe('Apple');
+    });
+
+    it('should return all items when search is empty', () => {
+      component.searchText('Apple');
+      component.searchText('');
+
+      expect(component.dataToSearchCache.length).toBe(mockData.length);
+    });
+
+    it('should return empty array when no match', () => {
+      component.searchText('xyz123nonexistent');
+
+      expect(component.dataToSearchCache.length).toBe(0);
+    });
+
+    it('should call selectStyle to update overlay style', () => {
+      // overlaySelected is updated by selectStyle() method, not searchText()
+      // Test the selectStyle method directly
+      
+      // When dataToSearch has items
+      expect(component.dataToSearch.length).toBeGreaterThan(0);
+      component.selectStyle();
+      expect(component.overlaySelected).toBe('content-found');
+
+      // When dataToSearch is empty
+      component.dataToSearch = [];
+      component.selectStyle();
+      expect(component.overlaySelected).toBe('content-no-found');
+    });
+  });
+
+  describe('Manejo de entrada de texto', () => {
+    it('should emit onInput event', () => {
+      const emitSpy = jest.spyOn(component.onInput, 'emit');
+      const mockEvent = { target: { value: 'test' } } as any;
+
+      component.changeText(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith('test');
+    });
+
+    it('should change color when text is entered', () => {
+      const mockEvent = { target: { value: 'test' } } as any;
+
+      component.changeText(mockEvent);
+
+      expect(component.colorSearch).toBe('var(--Gray-Gray-600)');
+    });
+
+    it('should reset color when text is cleared', () => {
+      const mockEvent = { target: { value: '' } } as any;
+
+      component.changeText(mockEvent);
+
+      expect(component.colorSearch).toBe('var(--Gray-Gray-500)');
+    });
+
+    it('should trigger search on changeText for non-dropdown-button types', () => {
+      component.type = 'default';
+      const spy = jest.spyOn(component, 'searchText');
+      const mockEvent = { target: { value: 'test' } } as any;
+
+      component.changeText(mockEvent);
+
+      expect(spy).toHaveBeenCalledWith('test');
+    });
+
+    it('should not trigger search for dropdown-button type', () => {
+      component.type = 'dropdown-button';
+      const spy = jest.spyOn(component, 'searchText');
+      const mockEvent = { target: { value: 'test' } } as any;
+
+      component.changeText(mockEvent);
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Eventos de teclado', () => {
+    it('should emit onKeyEnter on enter key', () => {
+      const emitSpy = jest.spyOn(component.onKeyEnter, 'emit');
+      const mockEvent = { target: { value: 'test' } } as any;
+
+      component.onEnter(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith('test');
+    });
+
+    it('should emit onChange event', () => {
+      const emitSpy = jest.spyOn(component.onChange, 'emit');
+      const mockEvent = { target: { value: 'test' } } as any;
+
+      component.onChangHandler(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith('test');
+    });
+  });
+
+  describe('Limpiar texto', () => {
+    it('should clear text input', () => {
+      component.textInput = 'some text';
+
+      component.clearText();
+
+      expect(component.textInput).toBe('');
+    });
+
+    it('should restore original data', () => {
+      component.dataToSearchCache = [mockData[0]];
+
+      component.clearText();
+
+      expect(component.dataToSearchCache).toEqual(mockData);
+    });
+
+    it('should emit onClear event', () => {
+      const emitSpy = jest.spyOn(component.onClear, 'emit');
+
+      component.clearText();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Control de foco y dropdown', () => {
+    it('should set focus state', () => {
+      component.onFocus();
+
+      expect(component.isFocus).toBe(true);
+    });
+
+    it('should show content after focus animation', (done) => {
+      component.onFocus();
+
+      setTimeout(() => {
+        expect(component.isVisibleContent).toBe(true);
+        done();
+      }, 350);
+    });
+
+    it('should close dropdown on outside click', () => {
+      component.isVisibleContent = true;
+      component.isFocus = true;
+      const mockEvent = new MouseEvent('click');
+
+      component.handleClickOutside(mockEvent);
+
+      setTimeout(() => {
+        expect(component.isVisibleContent).toBe(false);
+        expect(component.isFocus).toBe(false);
+      }, 100);
+    });
+
+    it('should emit onBlur when closing', () => {
+      const emitSpy = jest.spyOn(component.onBlur, 'emit');
+      const mockEvent = new MouseEvent('click');
+
+      component.handleClickOutside(mockEvent);
+
+      setTimeout(() => {
+        expect(emitSpy).toHaveBeenCalled();
+      }, 100);
+    });
+  });
+
+  describe('Selección múltiple (checkbox)', () => {
+    beforeEach(() => {
+      component.ngOnInit();
+    });
+
+    it('should add item to model when checked', () => {
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      component.checkingList(true, mockData[0]);
+
+      expect(component.model.length).toBe(1);
+      expect(component.model[0]).toEqual(mockData[0]);
+      expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should remove item from model when unchecked', () => {
+      component.model = [mockData[0]];
+
+      component.checkingList(false, mockData[0]);
+
+      expect(component.model.length).toBe(0);
+    });
+
+    it('should update isChecked property', () => {
+      const data: any = { ...mockData[0] };
+
+      component.checkingList(true, data);
+
+      expect(data.isChecked).toBe(true);
+    });
+
+    it('should not add duplicate items', () => {
+      component.model = [mockData[0]];
+
+      component.checkingList(true, mockData[0]);
+
+      expect(component.model.length).toBe(1);
+    });
+
+    it('should sync model with cached data', () => {
+      component.model = [mockData[0], mockData[1]];
+
+      component.checkListModel(component.model);
+
+      expect(component.dataToSearchCache[0].isChecked).toBe(true);
+      expect(component.dataToSearchCache[1].isChecked).toBe(true);
+      expect(component.dataToSearchCache[2].isChecked).toBe(false);
+    });
+  });
+
+  describe('Estilos de overlay', () => {
+    it('should set overlay styles for bottom position', () => {
+      component.position = 'down';
+      component.heightOverlay = 300;
+
+      const styles = component.getOverlayStyles();
+
+      expect(styles['max-height']).toBe('300px');
+      expect(styles['top']).toBe('calc(12px + 100%)');
+    });
+
+    it('should set overlay styles for top position', () => {
+      component.position = 'top';
+      component.heightOverlay = 300;
+
+      const styles = component.getOverlayStyles();
+
+      expect(styles['max-height']).toBe('300px');
+      expect(styles['bottom']).toBe('calc(12px + 100%)');
+    });
+
+    it('should update overlay height', () => {
+      component.heightOverlay = 250;
+
+      const styles = component.getOverlayStyles();
+
+      expect(styles['max-height']).toBe('250px');
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should update cached data when dataToSearch changes', () => {
+      const newData = [{ id: 5, name: 'New Item', isChecked: false }];
+
+      component.ngOnChanges({
+        dataToSearch: {
+          currentValue: newData,
+          previousValue: mockData,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(component.dataToSearchCache).toEqual(newData);
+    });
+
+    it('should handle model input changes', () => {
+      // The model input is compared to find matching items and set isChecked
+      // Just verify the ngOnChanges doesn't throw
+      const newModel = [{ id: 1 }];
+
+      expect(() => {
+        component.ngOnChanges({
+          model: {
+            currentValue: newModel,
+            previousValue: [],
+            firstChange: false,
+            isFirstChange: () => false,
+          },
+        });
+      }).not.toThrow();
+    });
+  });
+
+  describe('Dropdown button', () => {
+    it('should handle dropdown button click', () => {
+      const mockEvent = new MouseEvent('click');
+
+      component.handleClickDropButton(mockEvent);
+
+      expect(component.isClickedDropButton).toBe(true);
+    });
+
+    it('should select initial dropdown button text', () => {
+      component.type = 'dropdown-button';
+      component.dataToSearchCache = mockData;
+
+      component.selectInitialDropButton();
+
+      // textDropButton gets the name from the first item using dataName property
+      expect(component.textDropButton).toBe('Apple');
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete search workflow', () => {
+      const emitSpy = jest.spyOn(component.onInput, 'emit');
+
+      // Initialize
+      component.ngOnInit();
+      // mockData has 3 items
+      expect(component.dataToSearchCache.length).toBe(3);
+
+      // Search
+      const mockEvent = { target: { value: 'Apple' } } as any;
+      component.changeText(mockEvent);
+
+      expect(component.dataToSearchCache.length).toBe(1);
+      expect(emitSpy).toHaveBeenCalledWith('Apple');
+
+      // Clear
+      component.clearText();
+      expect(component.textInput).toBe('');
+      expect(component.dataToSearchCache.length).toBe(3);
+    });
+
+    it('should handle complete selection workflow', () => {
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      // Initialize
+      component.ngOnInit();
+
+      // Select items
+      component.checkingList(true, mockData[0]);
+      component.checkingList(true, mockData[1]);
+
+      expect(component.model.length).toBe(2);
+      expect(emitSpy).toHaveBeenCalledTimes(2);
+
+      // Deselect one
+      component.checkingList(false, mockData[0]);
+
+      expect(component.model.length).toBe(1);
+    });
+  });
+});