@dropi/ui-components 1.0.0

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

@@ -0,0 +1,110 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { DropiNavBarComponent } from './dropi-navbar.component';
+
+describe('DropiNavBarComponent', () => {
+  let component: DropiNavBarComponent;
+  let fixture: ComponentFixture<DropiNavBarComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [DropiNavBarComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropiNavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.data).toEqual([]);
+      expect(component.title).toBe('');
+      expect(component.sidebarItems).toEqual([]);
+      expect(component.isLoading).toBe(false);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept data input', () => {
+      const testData = [{ id: 1, name: 'Item 1' }] as any;
+      component.data = testData;
+      component.ngOnChanges();
+      expect(component.sidebarItems.length).toBe(1);
+    });
+
+    it('should accept title input', () => {
+      const testTitle = 'Test Title';
+      component.title = testTitle;
+      expect(component.title).toBe(testTitle);
+    });
+  });
+
+  describe('Funcionalidad de sidebar', () => {
+    it('should update sidebarItems when data changes', () => {
+      component.data = [
+        { id: 1, name: 'Item 1' },
+        { id: 2, name: 'Item 2' },
+      ] as any;
+      component.ngOnChanges();
+      
+      expect(component.sidebarItems.length).toBe(2);
+      expect(component.sidebarItems[0].expanded).toBe(false);
+    });
+
+    it('should handle item click', () => {
+      const emitSpy = jest.spyOn(component.clickLoadItem, 'emit');
+      const item = { id: 1, name: 'Item 1' };
+      
+      component.handleItemClick(item);
+      
+      expect(component.activeItem).toBe(item);
+      expect(emitSpy).toHaveBeenCalledWith(item);
+    });
+
+    it('should toggle expanded state for items with children', () => {
+      const itemWithChildren = {
+        id: 1,
+        name: 'Parent',
+        children: [{ id: 2, name: 'Child' }],
+        expanded: false,
+      };
+      
+      component.handleItemClick(itemWithChildren);
+      
+      expect(itemWithChildren.expanded).toBe(true);
+    });
+
+    it('should not emit click for items with children', () => {
+      const emitSpy = jest.spyOn(component.clickLoadItem, 'emit');
+      const itemWithChildren = {
+        id: 1,
+        name: 'Parent',
+        children: [{ id: 2, name: 'Child' }],
+        expanded: false,
+      };
+      
+      component.handleItemClick(itemWithChildren);
+      
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Estados de carga', () => {
+    it('should set isLoading to false after update', () => {
+      component.isLoading = true;
+      component.data = [{ id: 1, name: 'Item' }] as any;
+      component.ngOnChanges();
+      
+      expect(component.isLoading).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import {
+  DropiTableRow,
+} from '@app/utilities/interfaces/ui/dropi-table.interface';
+
+@Component({
+  selector: 'app-dropi-navbar',
+  templateUrl: './dropi-navbar.component.html',
+  styleUrls: ['./dropi-navbar.component.scss'],
+  imports: [ CommonModule ],
+  standalone: true
+})
+export class DropiNavBarComponent implements OnInit {
+  @Input() public data: DropiTableRow[] = [];  
+  @Input() public title: string = "";
+  @Output() clickLoadItem = new EventEmitter<{ item: any; }>();
+  sidebarItems: any[] = [];
+  activeItem: any;
+  isLoading: boolean = true;
+
+  ngOnInit(): void {
+    this.updateSidebarItems();
+  }
+
+  ngOnChanges(): void {
+    this.updateSidebarItems();
+  }
+
+  private updateSidebarItems(): void {
+    if (this.data && this.data.length > 0) {
+      this.sidebarItems = this.data.map(item => ({
+        ...item,
+        expanded: false
+      }));
+    } else {
+    }
+    this.isLoading = false;
+  }
+
+  handleItemClick(item: any): void {
+    
+    if (item.children && item.children.length > 0) {
+      item.expanded = !item.expanded;
+    }
+    
+    this.activeItem = item;
+    if (!item.children) {
+      this.clickLoadItem.emit(item);
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+<div class="selector-quantity"></div>
+
+<div class="dropi-paginator">
+  <button
+    *ngIf="currentPage !== 1 && !isNotTotalPages"
+    class="page-item prev"
+    [disabled]="disabled || currentPage === 1"
+    (click)="goToFirstPage()"
+    aria-label="Anterior"
+  >
+    <app-icon [name]="'Arrow-double-small-left'" [width]="16" [height]="16" />
+  </button>
+  <button
+    *ngIf="currentPage !== 1"
+    class="page-item prev"
+    [ngClass]="{ prevCursor: isNotTotalPages }"
+    [disabled]="disabled || currentPage === 1"
+    (click)="prevPage()"
+    aria-label="Anterior"
+  >
+    <app-icon [name]="'Dropdown-left'" [width]="16" [height]="16" />
+    {{ 'Previous' | translate }}
+  </button>
+
+  <ng-container *ngIf="!isNotTotalPages">
+    <ng-container *ngFor="let page of pages">
+      <ng-container *ngIf="page === '...'; else pageNumber">
+        <button class="page-item ellipsis" disabled tabindex="-1">...</button>
+      </ng-container>
+      <ng-template #pageNumber>
+        <button
+          class="page-item"
+          [ngClass]="{ active: page === currentPage }"
+          [disabled]="disabled || page === currentPage"
+          (click)="goToPage(page)"
+        >
+          {{ page }}
+        </button>
+      </ng-template>
+    </ng-container>
+  </ng-container>
+
+  <button
+    *ngIf="currentPage !== totalPages || (isNotTotalPages && currentPage < totalPages)"
+    class="page-item next"
+    [ngClass]="{ nextCursor: isNotTotalPages }"
+    [disabled]="disabled || currentPage === totalPages"
+    (click)="nextPage()"
+    aria-label="Siguiente"
+  >
+    {{ 'Next' | translate }}
+    <app-icon [name]="'Dropdown-Right'" [width]="16" [height]="16" />
+  </button>
+
+  <button
+    *ngIf="currentPage !== totalPages && !isNotTotalPages"
+    class="page-item next"
+    [disabled]="disabled || currentPage === totalPages"
+    (click)="goToLastPage()"
+    aria-label="Siguiente"
+  >
+    <app-icon [name]="'Arrow-double-small-right'" [width]="16" [height]="16" />
+  </button>
+</div>

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

@@ -0,0 +1,43 @@
+.dropi-paginator {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 2px;
+}
+
+.page-item {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 24px;
+  transition: background-color 0.2s ease-in-out;
+  border: none !important;
+  background-color: transparent;
+  color: var(--Gray-600, #475066);
+  // hover
+  &:hover {
+    background-color: #fff;
+  }
+  // active
+  &.active {
+    background-color: var(--Primary-Primary-500);
+    color: #fff;
+  }
+}
+
+.nextCursor {
+  height: auto;
+  width: auto;
+  gap: 4px !important;
+}
+
+.prevCursor {
+  height: auto;
+  width: auto;
+  gap: 4px !important;
+}

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

@@ -0,0 +1,285 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiPaginatorComponent } from './dropi-paginator.component';
+import { IconComponent } from '../icon/icon.component';
+
+describe('DropiPaginatorComponent', () => {
+  let component: DropiPaginatorComponent;
+  let fixture: ComponentFixture<DropiPaginatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiPaginatorComponent, IconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiPaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.totalPages).toBe(1);
+      expect(component.currentPage).toBe(1);
+      expect(component.disabled).toBe(false);
+      expect(component.maxVisiblePages).toBe(8);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept totalPages', () => {
+      component.totalPages = 10;
+      expect(component.totalPages).toBe(10);
+    });
+
+    it('should accept currentPage', () => {
+      component.currentPage = 5;
+      expect(component.currentPage).toBe(5);
+    });
+
+    it('should accept disabled state', () => {
+      component.disabled = true;
+      expect(component.disabled).toBe(true);
+    });
+
+    it('should accept maxVisiblePages', () => {
+      component.maxVisiblePages = 5;
+      expect(component.maxVisiblePages).toBe(5);
+    });
+  });
+
+  describe('Generación de páginas', () => {
+    it('should show all pages when total is less than max visible', () => {
+      component.totalPages = 5;
+      component.currentPage = 1;
+      component.maxVisiblePages = 8;
+
+      const pages = component.pages;
+
+      expect(pages).toEqual([1, 2, 3, 4, 5]);
+    });
+
+    it('should include ellipsis when there are many pages', () => {
+      component.totalPages = 20;
+      component.currentPage = 10;
+      component.maxVisiblePages = 8;
+
+      const pages = component.pages;
+
+      expect(pages).toContain('...');
+      expect(pages).toContain(1);
+      expect(pages).toContain(20);
+    });
+
+    it('should show pages around current page', () => {
+      component.totalPages = 15;
+      component.currentPage = 8;
+      component.maxVisiblePages = 8;
+
+      const pages = component.pages;
+
+      expect(pages).toContain(8);
+      expect(pages[0]).toBe(1);
+      expect(pages[pages.length - 1]).toBe(15);
+    });
+
+    it('should handle first pages correctly', () => {
+      component.totalPages = 20;
+      component.currentPage = 2;
+      component.maxVisiblePages = 8;
+
+      const pages = component.pages;
+
+      expect(pages[0]).toBe(1);
+      expect(pages).toContain(2);
+    });
+
+    it('should handle last pages correctly', () => {
+      component.totalPages = 20;
+      component.currentPage = 19;
+      component.maxVisiblePages = 8;
+
+      const pages = component.pages;
+
+      expect(pages[pages.length - 1]).toBe(20);
+      expect(pages).toContain(19);
+    });
+  });
+
+  describe('Navegación', () => {
+    it('should emit pageChange when goToPage is called', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.totalPages = 10;
+      component.currentPage = 5;
+
+      component.goToPage(7);
+
+      expect(emitSpy).toHaveBeenCalledWith(7);
+    });
+
+    it('should not emit when disabled', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.disabled = true;
+      component.currentPage = 5;
+
+      component.goToPage(7);
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not emit when clicking same page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 5;
+
+      component.goToPage(5);
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it('should go to previous page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 5;
+
+      component.prevPage();
+
+      expect(emitSpy).toHaveBeenCalledWith(4);
+    });
+
+    it('should not go to previous page when on first page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 1;
+
+      component.prevPage();
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it('should go to next page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 5;
+      component.totalPages = 10;
+
+      component.nextPage();
+
+      expect(emitSpy).toHaveBeenCalledWith(6);
+    });
+
+    it('should not go to next page when on last page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 10;
+      component.totalPages = 10;
+
+      component.nextPage();
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it('should go to first page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 5;
+
+      component.goToFirstPage();
+
+      expect(emitSpy).toHaveBeenCalledWith(1);
+    });
+
+    it('should not emit when already on first page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 1;
+
+      component.goToFirstPage();
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it('should go to last page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 5;
+      component.totalPages = 10;
+
+      component.goToLastPage();
+
+      expect(emitSpy).toHaveBeenCalledWith(10);
+    });
+
+    it('should not emit when already on last page', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.currentPage = 10;
+      component.totalPages = 10;
+
+      component.goToLastPage();
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Visibilidad de botones first/last', () => {
+    it('should show first/last buttons when in middle pages', () => {
+      component.currentPage = 5;
+      component.totalPages = 10;
+
+      expect(component.showFirstLastButtons()).toBe(true);
+    });
+
+    it('should hide buttons when on first page', () => {
+      component.currentPage = 1;
+      component.totalPages = 10;
+
+      expect(component.showFirstLastButtons()).toBe(false);
+    });
+
+    it('should hide buttons when on last page', () => {
+      component.currentPage = 10;
+      component.totalPages = 10;
+
+      expect(component.showFirstLastButtons()).toBe(false);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete pagination workflow', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.totalPages = 10;
+      component.currentPage = 1;
+
+      // First page
+      expect(component.showFirstLastButtons()).toBe(false);
+
+      // Go to page 5
+      component.goToPage(5);
+      expect(emitSpy).toHaveBeenCalledWith(5);
+      component.currentPage = 5;
+      expect(component.showFirstLastButtons()).toBe(true);
+
+      // Next page
+      component.nextPage();
+      expect(emitSpy).toHaveBeenCalledWith(6);
+
+      // Previous page
+      component.prevPage();
+      expect(emitSpy).toHaveBeenCalledWith(5);
+
+      // Last page
+      component.goToLastPage();
+      expect(emitSpy).toHaveBeenCalledWith(10);
+      component.currentPage = 10;
+      expect(component.showFirstLastButtons()).toBe(false);
+    });
+
+    it('should handle disabled state correctly', () => {
+      const emitSpy = jest.spyOn(component.pageChange, 'emit');
+      component.disabled = true;
+      component.totalPages = 10;
+      component.currentPage = 5;
+
+      component.nextPage();
+      component.prevPage();
+      component.goToPage(7);
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+  });
+});