@dropi/ui-components 1.0.0

package/src/components-source/badge/badge.component.html

@@ -0,0 +1,49 @@
+<div class="tag-state" [ngClass]="state">
+  <svg
+    *ngIf="state === 'active'"
+    width="17"
+    height="17"
+    viewBox="0 0 17 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.5444 5.87067L12.5389 6.88004L8.43554 10.9225C8.16142 11.1966 7.80087 11.3333 7.43892 11.3333C7.07696 11.3333 6.71287 11.1952 6.43592 10.919L4.46533 9.00929L5.45204 7.99142L7.43042 9.90887L11.5444 5.87067ZM17 8.5C17 13.187 13.187 17 8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5ZM15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5Z"
+      fill="#1F2937"
+    />
+  </svg>
+
+  <svg
+    *ngIf="state === 'pending'"
+    width="17"
+    height="17"
+    viewBox="0 0 17 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5C17 13.187 13.187 17 8.5 17ZM8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667ZM9.20833 8.5V4.25C9.20833 3.859 8.891 3.54167 8.5 3.54167C8.109 3.54167 7.79167 3.859 7.79167 4.25V7.79167H5.66667C5.27567 7.79167 4.95833 8.109 4.95833 8.5C4.95833 8.891 5.27567 9.20833 5.66667 9.20833H8.5C8.891 9.20833 9.20833 8.891 9.20833 8.5Z"
+      fill="#1F2937"
+    />
+  </svg>
+
+  <svg
+    *ngIf="state === 'canceled'"
+    width="12"
+    height="14"
+    viewBox="0 0 14 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.5497 4.86859V5.76046C12.1075 6.00391 12.5823 6.40464 12.916 6.91364C13.2497 7.42264 13.4279 8.01785 13.4287 8.62648V12.3844C13.4277 13.2146 13.0974 14.0106 12.5103 14.5976C11.9233 15.1847 11.1273 15.515 10.2971 15.516H4.03392C3.20368 15.515 2.40773 15.1847 1.82066 14.5976C1.23359 14.0106 0.903338 13.2146 0.902344 12.3844V8.62648C0.903144 8.01785 1.08129 7.42264 1.41498 6.91364C1.74868 6.40464 2.22347 6.00391 2.78129 5.76046V4.86859C2.78129 3.70582 3.2432 2.59068 4.0654 1.76848C4.8876 0.946282 6.00274 0.484375 7.1655 0.484375C8.32827 0.484375 9.44341 0.946282 10.2656 1.76848C11.0878 2.59068 11.5497 3.70582 11.5497 4.86859ZM4.95114 2.65422C4.36386 3.24151 4.03392 4.03804 4.03392 4.86859V5.4949H10.2971V4.86859C10.2971 4.03804 9.96715 3.24151 9.37986 2.65422C8.79258 2.06694 7.99605 1.73701 7.1655 1.73701C6.33496 1.73701 5.53843 2.06694 4.95114 2.65422ZM11.6257 13.713C11.9781 13.3606 12.176 12.8827 12.176 12.3844V8.62648C12.176 8.12815 11.9781 7.65023 11.6257 7.29786C11.2733 6.94549 10.7954 6.74753 10.2971 6.74753H4.03392C3.53559 6.74753 3.05768 6.94549 2.70531 7.29786C2.35294 7.65023 2.15498 8.12815 2.15498 8.62648V12.3844C2.15498 12.8827 2.35294 13.3606 2.70531 13.713C3.05768 14.0654 3.53559 14.2633 4.03392 14.2633H10.2971C10.7954 14.2633 11.2733 14.0654 11.6257 13.713ZM6.72263 9.43615C6.84009 9.31869 6.99939 9.25271 7.1655 9.25271C7.33161 9.25271 7.49092 9.31869 7.60837 9.43615C7.72583 9.55361 7.79182 9.71291 7.79182 9.87902V11.1317C7.79182 11.2978 7.72583 11.4571 7.60837 11.5745C7.49092 11.692 7.33161 11.758 7.1655 11.758C6.99939 11.758 6.84009 11.692 6.72263 11.5745C6.60517 11.4571 6.53919 11.2978 6.53919 11.1317V9.87902C6.53919 9.71291 6.60517 9.55361 6.72263 9.43615Z"
+      fill="#585C65"
+    />
+  </svg>
+
+  <p>
+    {{ stateText[state] }}
+  </p>
+</div>

package/src/components-source/badge/badge.component.scss

@@ -0,0 +1,57 @@
+.tag-state {
+  border-radius: 12px;
+  padding: 2px 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  svg {
+    width: 13px;
+  }
+  p {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+  }
+  &.active {
+    background: var(--Success-success-50, #e7f8f3);
+    color: var(--Success-success-500, #0abb87);
+    svg {
+      path {
+        fill: var(--Success-success-500, #0abb87);
+      }
+    }
+  }
+  &.pending {
+    color: var(--Orange-orange-500, #f49a3d);
+    background: var(--Orange-orange-50, #fef5ec);
+
+    svg {
+      path {
+        fill: var(--Orange-orange-500, #f49a3d);
+      }
+    }
+  }
+  &.canceled {
+    color: var(--Gray-gray-500, #6c757d);
+    background: var(--Gray-gray-50, #f8f9fa);
+
+    svg {
+      path {
+        fill: var(--Gray-gray-500, #6c757d);
+      }
+    }
+  }
+  &.frozen {
+    color: var(--Gray-gray-500, #6c757d);
+    background: var(--Gray-gray-50, #f8f9fa);
+
+    svg {
+      path {
+        fill: var(--Gray-gray-500, #6c757d);
+      }
+    }
+  }
+}

package/src/components-source/badge/badge.component.spec.ts

@@ -0,0 +1,181 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { BadgeComponent } from './badge.component';
+
+describe('BadgeComponent', () => {
+  let component: BadgeComponent;
+  let fixture: ComponentFixture<BadgeComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BadgeComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should have correct state text mapping', () => {
+      expect(component.stateText.pending).toBe('Pendiente');
+      expect(component.stateText.active).toBe('Activo');
+      expect(component.stateText.canceled).toBe('Cancelado');
+      expect(component.stateText.frozen).toBe('Congelado');
+    });
+
+    it('should accept state input', () => {
+      component.state = 'active';
+      expect(component.state).toBe('active');
+    });
+  });
+
+  describe('Estados del badge', () => {
+    it('should handle pending state', () => {
+      component.state = 'pending';
+      fixture.detectChanges();
+
+      expect(component.state).toBe('pending');
+      expect(component.stateText[component.state]).toBe('Pendiente');
+    });
+
+    it('should handle active state', () => {
+      component.state = 'active';
+      fixture.detectChanges();
+
+      expect(component.state).toBe('active');
+      expect(component.stateText[component.state]).toBe('Activo');
+    });
+
+    it('should handle canceled state', () => {
+      component.state = 'canceled';
+      fixture.detectChanges();
+
+      expect(component.state).toBe('canceled');
+      expect(component.stateText[component.state]).toBe('Cancelado');
+    });
+
+    it('should handle frozen state', () => {
+      component.state = 'frozen';
+      fixture.detectChanges();
+
+      expect(component.state).toBe('frozen');
+      expect(component.stateText[component.state]).toBe('Congelado');
+    });
+  });
+
+  describe('Renderizado del template', () => {
+    it('should apply correct CSS class for pending state', () => {
+      component.state = 'pending';
+      fixture.detectChanges();
+
+      const badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.classList.contains('pending')).toBeTruthy();
+    });
+
+    it('should apply correct CSS class for active state', () => {
+      component.state = 'active';
+      fixture.detectChanges();
+
+      const badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.classList.contains('active')).toBeTruthy();
+    });
+
+    it('should apply correct CSS class for canceled state', () => {
+      component.state = 'canceled';
+      fixture.detectChanges();
+
+      const badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.classList.contains('canceled')).toBeTruthy();
+    });
+
+    it('should apply correct CSS class for frozen state', () => {
+      component.state = 'frozen';
+      fixture.detectChanges();
+
+      const badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.classList.contains('frozen')).toBeTruthy();
+    });
+
+    it('should display correct text for each state', () => {
+      const states = ['pending', 'active', 'canceled', 'frozen'];
+
+      states.forEach((state) => {
+        component.state = state;
+        fixture.detectChanges();
+
+        const badgeElement = debugElement.query(By.css('.tag-state'));
+        expect(badgeElement.nativeElement.textContent.trim()).toBe(component.stateText[state]);
+      });
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle undefined state', () => {
+      component.state = undefined;
+      fixture.detectChanges();
+
+      expect(component.state).toBeUndefined();
+    });
+
+    it('should handle invalid state', () => {
+      component.state = 'invalid-state';
+      fixture.detectChanges();
+
+      expect(component.state).toBe('invalid-state');
+      expect(component.stateText[component.state]).toBeUndefined();
+    });
+
+    it('should handle empty string state', () => {
+      component.state = '';
+      fixture.detectChanges();
+
+      expect(component.state).toBe('');
+    });
+
+    it('should handle null state', () => {
+      component.state = null;
+      fixture.detectChanges();
+
+      expect(component.state).toBeNull();
+    });
+  });
+
+  describe('Cambios dinámicos', () => {
+    it('should update display when state changes', () => {
+      component.state = 'pending';
+      fixture.detectChanges();
+
+      let badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.textContent.trim()).toBe('Pendiente');
+
+      component.state = 'active';
+      fixture.detectChanges();
+
+      badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.textContent.trim()).toBe('Activo');
+    });
+
+    it('should update CSS classes when state changes', () => {
+      component.state = 'pending';
+      fixture.detectChanges();
+
+      let badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.classList.contains('pending')).toBeTruthy();
+
+      component.state = 'frozen';
+      fixture.detectChanges();
+
+      badgeElement = debugElement.query(By.css('.tag-state'));
+      expect(badgeElement.nativeElement.classList.contains('frozen')).toBeTruthy();
+      expect(badgeElement.nativeElement.classList.contains('badge--pending')).toBeFalsy();
+    });
+  });
+});

package/src/components-source/badge/badge.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'dropi-badge',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.scss'],
+})
+export class BadgeComponent {
+  @Input() state: string;
+  // pending | active | blocked | frozen
+
+  stateText = {
+    pending: 'Pendiente',
+    active: 'Activo',
+    canceled: 'Cancelado',
+    frozen: 'Congelado',
+  };
+}

package/src/components-source/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,5 @@
+<p-breadcrumb
+  class="max-w-full breadcumb-list mb-4 mt-4"
+  [model]="items"
+  [home]="home"
+></p-breadcrumb>

package/src/components-source/breadcrumb/breadcrumb.component.scss

@@ -0,0 +1,46 @@
+:host ::ng-deep .breadcumb-list .p-breadcrumb {
+  background: transparent;
+  border: none;
+  padding: 0px;
+  border-radius: 0px;
+}
+
+:host ::ng-deep .breadcumb-list .p-breadcrumb ol {
+  margin: 0;
+  padding: 0;
+  min-width: max-content;
+}
+
+:host ::ng-deep .breadcumb-list .p-breadcrumb li {
+  font-size: 14px;
+  & .pi:before {
+    font-size: 14px;
+  }
+}
+
+:host ::ng-deep .breadcumb-list .p-breadcrumb span.p-menuitem-text {
+  color: #6b6f88;
+  font-weight: 400;
+}
+
+:host ::ng-deep .breadcumb-list .p-breadcrumb svg {
+  color: #a3a5b491;
+  width: 12px;
+}
+
+:host ::ng-deep .card-icon {
+  background-image: url('../../../assets/img/icons/card.svg');
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  svg {
+    display: none;
+  }
+}
+
+// color #A3A6B8 breadcrum disable color
+:host ::ng-deep .breadcumb-list .p-breadcrumb li.p-disabled span.p-menuitem-text {
+  color: #a3a6b8;
+}

package/src/components-source/breadcrumb/breadcrumb.component.spec.ts

@@ -0,0 +1,279 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Component } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { BreadcrumbComponent } from './breadcrumb.component';
+import { IconComponent } from '../icon/icon.component';
+
+// Componente dummy para las rutas de prueba
+@Component({
+  template: '<div>Test Component</div>',
+})
+class TestComponent {}
+
+describe('BreadcrumbComponent', () => {
+  let component: BreadcrumbComponent;
+  let fixture: ComponentFixture<BreadcrumbComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        BreadcrumbComponent,
+        IconComponent,
+        RouterTestingModule.withRoutes([
+          { path: 'test', component: TestComponent },
+          { path: 'home', component: TestComponent },
+          { path: '', component: TestComponent },
+        ]),
+      ],
+      declarations: [TestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.items).toBeUndefined(); // No tiene valor por defecto
+      expect(component.imageIcon).toBe('pi pi-home');
+      expect(component.homeRoute).toBe('/');
+      expect(component.home).toBeDefined(); // Se define en ngOnInit (ejecutado automáticamente)
+    });
+
+    it('should set home item correctly on ngOnInit', () => {
+      component.ngOnInit();
+
+      expect(component.home.icon).toBe('pi pi-home');
+      expect(component.home.routerLink).toBe('/');
+    });
+
+    it('should accept custom imageIcon', () => {
+      component.imageIcon = 'dashboard';
+      component.ngOnInit();
+
+      expect(component.home.icon).toBe('dashboard');
+    });
+
+    it('should accept custom homeRoute', () => {
+      component.homeRoute = '/dashboard';
+      component.ngOnInit();
+
+      expect(component.home.routerLink).toBe('/dashboard');
+    });
+  });
+
+  describe('Manejo de items', () => {
+    it('should handle empty items array', () => {
+      component.items = [];
+      fixture.detectChanges();
+
+      expect(component.items.length).toBe(0);
+    });
+
+    it('should handle single item', () => {
+      const testItems: MenuItem[] = [{ label: 'Products', routerLink: '/products' }];
+
+      component.items = testItems;
+      fixture.detectChanges();
+
+      expect(component.items.length).toBe(1);
+      expect(component.items[0].label).toBe('Products');
+    });
+
+    it('should handle multiple items', () => {
+      const testItems: MenuItem[] = [
+        { label: 'Products', routerLink: '/products' },
+        { label: 'Electronics', routerLink: '/products/electronics' },
+        { label: 'Phones', routerLink: '/products/electronics/phones' },
+      ];
+
+      component.items = testItems;
+      fixture.detectChanges();
+
+      expect(component.items.length).toBe(3);
+      expect(component.items[2].label).toBe('Phones');
+    });
+
+    it('should handle items with icons', () => {
+      const testItems: MenuItem[] = [
+        { label: 'Products', routerLink: '/products', icon: 'pi-box' },
+        { label: 'Settings', routerLink: '/settings', icon: 'pi-cog' },
+      ];
+
+      component.items = testItems;
+      fixture.detectChanges();
+
+      expect(component.items[0].icon).toBe('pi-box');
+      expect(component.items[1].icon).toBe('pi-cog');
+    });
+
+    it('should handle items without routerLink', () => {
+      const testItems: MenuItem[] = [
+        { label: 'Current Page' }, // Sin routerLink
+      ];
+
+      component.items = testItems;
+      fixture.detectChanges();
+
+      expect(component.items[0].routerLink).toBeUndefined();
+    });
+  });
+
+  describe('Configuración del home item', () => {
+    it('should create home item with default icon and route', () => {
+      component.ngOnInit();
+
+      expect(component.home.icon).toBe('pi pi-home');
+      expect(component.home.routerLink).toBe('/');
+    });
+
+    it('should create home item with custom icon', () => {
+      component.imageIcon = 'house';
+      component.ngOnInit();
+
+      expect(component.home.icon).toBe('house');
+    });
+
+    it('should create home item with custom route', () => {
+      component.homeRoute = '/main';
+      component.ngOnInit();
+
+      expect(component.home.routerLink).toBe('/main');
+    });
+
+    it('should create home item with both custom icon and route', () => {
+      component.imageIcon = 'dashboard';
+      component.homeRoute = '/admin';
+      component.ngOnInit();
+
+      expect(component.home.icon).toBe('dashboard');
+      expect(component.home.routerLink).toBe('/admin');
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle undefined items', () => {
+      component.items = undefined as any;
+      fixture.detectChanges();
+
+      expect(component.items).toBeUndefined();
+    });
+
+    it('should handle null items', () => {
+      component.items = null as any;
+      fixture.detectChanges();
+
+      expect(component.items).toBeNull();
+    });
+
+    it('should handle empty string for imageIcon', () => {
+      component.imageIcon = '';
+      component.ngOnInit();
+
+      expect(component.home.icon).toBe('');
+    });
+
+    it('should handle empty string for homeRoute', () => {
+      component.homeRoute = '';
+      component.ngOnInit();
+
+      expect(component.home.routerLink).toBe('');
+    });
+
+    it('should handle null imageIcon', () => {
+      component.imageIcon = null as any;
+      component.ngOnInit();
+
+      expect(component.home.icon).toBeNull();
+    });
+
+    it('should handle null homeRoute', () => {
+      component.homeRoute = null as any;
+      component.ngOnInit();
+
+      expect(component.home.routerLink).toBeNull();
+    });
+  });
+
+  describe('Cambios dinámicos', () => {
+    it('should update home item when imageIcon changes and ngOnInit is called', () => {
+      component.imageIcon = 'original';
+      component.ngOnInit();
+      expect(component.home.icon).toBe('original');
+
+      component.imageIcon = 'changed';
+      component.ngOnInit();
+      expect(component.home.icon).toBe('changed');
+    });
+
+    it('should update home item when homeRoute changes and ngOnInit is called', () => {
+      component.homeRoute = '/original';
+      component.ngOnInit();
+      expect(component.home.routerLink).toBe('/original');
+
+      component.homeRoute = '/changed';
+      component.ngOnInit();
+      expect(component.home.routerLink).toBe('/changed');
+    });
+
+    it('should handle multiple calls to ngOnInit', () => {
+      component.ngOnInit();
+      const firstHomeItem = component.home;
+
+      component.ngOnInit();
+      const secondHomeItem = component.home;
+
+      expect(firstHomeItem.icon).toBe(secondHomeItem.icon);
+      expect(firstHomeItem.routerLink).toBe(secondHomeItem.routerLink);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with complete breadcrumb setup', () => {
+      const testItems: MenuItem[] = [
+        { label: 'Dashboard', routerLink: '/dashboard', icon: 'dashboard' },
+        { label: 'Users', routerLink: '/users', icon: 'people' },
+        { label: 'Profile', routerLink: '/users/profile' },
+      ];
+
+      component.imageIcon = 'home';
+      component.homeRoute = '/';
+      component.items = testItems;
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      expect(component.home.icon).toBe('home');
+      expect(component.home.routerLink).toBe('/');
+      expect(component.items.length).toBe(3);
+      expect(component.items[0].icon).toBe('dashboard');
+      expect(component.items[2].label).toBe('Profile');
+    });
+
+    it('should handle complex menu items with commands', () => {
+      const testItems: MenuItem[] = [
+        {
+          label: 'Actions',
+          command: () => console.log('Action clicked'),
+          icon: 'settings',
+        },
+        {
+          label: 'Reports',
+          routerLink: '/reports',
+          queryParams: { type: 'monthly' },
+        },
+      ];
+
+      component.items = testItems;
+      fixture.detectChanges();
+
+      expect(component.items[0].command).toBeDefined();
+      expect(component.items[1].queryParams).toEqual({ type: 'monthly' });
+    });
+  });
+});

package/src/components-source/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, NO_ERRORS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'app-breadcrumb',
+  standalone: true,
+  imports: [CommonModule, BreadcrumbModule],
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.scss'],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class BreadcrumbComponent implements OnInit {
+  @Input() items: MenuItem[];
+  @Input() imageIcon: string = 'pi pi-home';
+  @Input() homeRoute: string = '/';
+
+  home: MenuItem | undefined;
+
+  ngOnInit() {
+    this.home = { icon: this.imageIcon, routerLink: this.homeRoute };
+  }
+}