@dropi/ui-components 1.0.0

package/src/components-source/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component.scss

@@ -0,0 +1,270 @@
+@import "../../../../tokens.scss";
+.container{
+    display: block;
+    width: 20px;
+    min-height: 50px; /* O una altura definida */
+    background-color: #f0f0f0;
+    height:20px;
+}
+
+*{
+    box-sizing: border-box;
+    font-family: $font-family-01;
+}
+
+.tittle-h2{
+    padding-top: 2rem;
+}
+
+.background-color-preview{
+  background-color: aqua;
+  width: 4rem;
+  height: 2rem;
+  max-width: 4rem;
+  max-height: 2rem;
+  border-radius: 5px;
+}
+
+.content-color-teble{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex-direction: column;
+}
+
+table {
+    border-collapse: collapse; /* Combinamos los bordes de las celdas */
+    width: 100%; /* Tabla ocupa todo el ancho disponible */
+  }
+
+  th, td {
+    padding: 10px;
+    border: 1px solid #ddd; /* Opcional: para ver las líneas de la tabla */
+    text-align: center; /* Alinea horizontalmente */
+    vertical-align: middle; /* Centra verticalmente */
+  }
+
+  th {
+    background-color: #f2f2f2; /* Fondo gris para encabezados */
+  }
+
+
+  .cell-content {
+    display: flex;
+    align-items: center; /* Centra verticalmente dentro del div */
+    justify-content: center; /* Opcional: centra horizontalmente */
+    height: 100%; /* Asegura que tome el alto de la celda */
+  }
+
+  .cell-content > div {
+    padding: 5px 0;
+    border-bottom: 1px solid #ccc; /* Líneas horizontales de separación */
+  }
+
+  .cell-content > div:last-child {
+    border-bottom: none; /* Eliminamos la última línea para no tener borde extra */
+  }
+
+  .h1 {
+    font-size: $font-size-xxxxl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h1Mobile {
+    font-size: $font-size-xxxxl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h2 {
+    font-size: $font-size-xxxl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h2Mobile {
+    font-size: $font-size-xxxl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h3 {
+    font-size: $font-size-xxl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h3Mobile {
+    font-size: $font-size-xxl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h4 {
+    font-size: $font-size-xl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h4Mobile {
+    font-size: $font-size-xl;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h5 {
+    font-size: $font-size-l;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+  
+  .h5Mobile {
+    font-size: $font-size-l;
+    line-height: $lineheight-simple;
+    font-weight: $font-weight-bold;
+  }
+
+  .labelL {
+    font-size: 16px;
+    line-height: 110%;
+    font-weight: 700;
+  }
+  
+  .labelM {
+    font-size: 14px;
+    line-height: 110%;
+    font-weight: 700;
+  }
+  
+  .labelS {
+    font-size: 12px;
+    line-height: 110%;
+    font-weight: 700;
+  }
+
+  .xxxxl {
+    font-size: $font-size-xxxxl;
+  }
+  
+  .xxxl {
+    font-size: $font-size-xxxl;
+  }
+  
+  .xxl {
+    font-size: $font-size-xxl;
+  }
+  
+  .xl {
+    font-size: $font-size-xl;
+  }
+  
+  .l {
+    font-size: $font-size-l;
+  }
+  
+  .m {
+    font-size: $font-size-m;
+  }
+  
+  .s {
+    font-size: $font-size-s;
+  }
+  
+  .xs {
+    font-size: $font-size-xs;
+  }
+  
+  .xxs {
+    font-size: $font-size-xxs;
+  }
+  
+  /* Clases generadas a partir de this.fontWeight */
+  .bold {
+    font-weight: $font-weight-bold;
+  }
+  
+  .semibold {
+    font-weight: $font-weight-semibold;
+  }
+  
+  .medium {
+    font-weight: $font-weight-medium;
+  }
+  
+  .regular {
+    font-weight: $font-weight-regular;
+  }
+  
+  .light {
+    font-weight: $font-weight-light;
+  }
+  
+  /* Clases generadas a partir de this.fontLineheight */
+  .simple {
+    line-height: $lineheight-simple;
+  }
+  
+  .large {
+    line-height: $lineheight-large;
+  }
+  
+  /* Clases generadas a partir de this.body */
+  .body-l-medium {
+    font-size: $font-size-m;
+    line-height: $lineheight-large;
+    font-weight: $font-weight-medium;
+  }
+  
+  .body-l-regular {
+    font-size: $font-size-m;
+    line-height: $lineheight-large;
+    font-weight: $font-weight-regular;
+  }
+  
+  .body-m-medium {
+    font-size: $font-size-s;
+    line-height: $lineheight-large;
+    font-weight: $font-weight-medium;
+  }
+  
+  .body-m-regular {
+    font-size: $font-size-s;
+    line-height: $lineheight-large;
+    font-weight: $font-weight-regular;
+  }
+  
+  .body-s-medium {
+    font-size: $font-size-xs;
+    line-height: $lineheight-large;
+    font-weight: $font-weight-medium;
+  }
+  
+  .body-s-regular {
+    font-size: $font-size-xs;
+    line-height: $lineheight-large;
+    font-weight: $font-weight-regular;
+  }
+
+  .caption-m {
+    font-size: 12px; /* Equivalente a font-size-xs */
+    line-height: 110%; /* Equivalente a lineheight-simple */
+    font-weight: 700; /* Equivalente a font-weight-bold */
+  }
+  
+  /* Clase para Caption-S */
+  .caption-s {
+    font-size: 10px; /* Equivalente a font-size-xxs */
+    line-height: 110%; /* Equivalente a lineheight-simple */
+    font-weight: 700; /* Equivalente a font-weight-bold */
+  }
+
+  .darkMode{
+    background-color: black;
+    color: white;
+  }
+
+  .darkModeColumn{
+    background-color: #2d2c36f7;
+    color: white;
+  }

package/src/components-source/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component.ts

@@ -0,0 +1,153 @@
+import { CommonModule, KeyValue } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ToastModule } from 'primeng/toast';
+import { MessageService } from 'primeng/api';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+
+@Component({
+  selector: 'app-tillte-table-documentation',
+  templateUrl: './tillte-table-documentation.component.html',
+  styleUrls: ['./tillte-table-documentation.component.scss'],
+  standalone:true,
+  imports:[CommonModule,ToastModule,PrismHighlightDirective],
+  providers: [MessageService], 
+
+})
+export class TillteTableDocumentationComponent implements OnInit {
+  @Input() dataTable  = [] 
+  @Input() tittle:string = '' 
+  @Input() description:string = '' 
+  @Input() type:string = ""
+
+
+
+
+  columns = [];
+  rows = [];
+
+
+
+  constructor(private messageService: MessageService) { }
+
+  ngOnInit() {
+    this.getColums()
+    this.getRows()
+
+  }
+
+
+  getColums(){  
+    if(this.dataTable.length > 0){
+      
+      this.columns = Object.keys(this.dataTable[0])
+      console.log(this.columns);
+    }
+    
+  }
+
+  getRows(){
+    
+    this.dataTable.map(data=>{
+      this.rows.push(data)
+    })
+    
+   
+  }
+
+  originalOrder = (): number => {
+    return 0;
+  }
+
+  getPropertiesExceptLast(obj: any): KeyValue<string, any>[] {
+    const entries = Object.entries(obj);
+    const slicedEntries = entries.slice(0, -1); // Excluye el último par clave-valor    
+    return slicedEntries.map(([key, value]) => ({ key, value }));
+  }
+
+  getLastPropertyKey(obj: any) {
+    const value = Object.values(obj);       
+    return value[value.length-1] 
+    
+  }
+
+  copyNameColor(icon){
+  
+    const positionLine = icon.indexOf('-')
+    console.log(positionLine);
+    
+    let newIcon;
+    if(positionLine > 0){
+      const prefix = icon.substr(0,positionLine)
+       newIcon =`var(--${prefix}-${icon})`
+    }else{
+      newIcon  =   `var(--Neutral-${icon})`
+    }
+
+    navigator.clipboard.writeText(newIcon)
+    .then(() => {
+   
+      
+      this.messageService.add({
+        severity: 'success',
+        summary: 'Copiado',
+        detail: `El color "${newIcon}" ha sido copiado!`
+      });
+    })
+    .catch(error => {
+      this.messageService.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'No se pudo copiar el nombre.'
+      });
+    });
+}
+
+copyNameSimple(icon){
+  console.log("simple");
+  
+ 
+    const  newIcon =`var(--${icon})`
+
+
+  navigator.clipboard.writeText(newIcon)
+  .then(() => {
+ 
+    
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Copiado',
+      detail: `El color "${newIcon}" ha sido copiado!`
+    });
+  })
+  .catch(error => {
+    this.messageService.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'No se pudo copiar el nombre.'
+    });
+  });
+}
+
+copyNameTex(icon){
+
+  navigator.clipboard.writeText(icon)
+  .then(() => {
+ 
+    
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Copiado',
+      detail: `El color "${icon}" ha sido copiado!`
+    });
+  })
+  .catch(error => {
+    this.messageService.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'No se pudo copiar el nombre.'
+    });
+  });
+
+}
+
+}

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

@@ -0,0 +1,26 @@
+<div class="tabs-container">
+  <div
+    class="custom-tab"
+    *ngFor="let tab of configuration"
+    [ngClass]="{
+      'active-tab': tab.id === activeTab && !tab.disabled,
+      'disabled-tab': tab.disabled
+    }"
+    [class.disabled-tab]="tab.disabled"
+    (click)="!tab.disabled && onTabClick(tab)"
+  >
+    <span>
+      <p>{{ tab.label | translate }}</p>
+      <dropi-badge
+        *ngIf="tab?.counter || tab?.counter === 0"
+        type="counter"
+        [count]="tab.counter"
+        [variant]="tab.id === activeTab ? 'primary' : 'tertiary'"
+      />
+    </span>
+
+    <ng-container *ngIf="showIcon">
+      <dropi-badge type="state" [state]="tab.completed ? 'check' : 'pending'" />
+    </ng-container>
+  </div>
+</div>

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

@@ -0,0 +1,62 @@
+.tabs-container {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: scroll;
+  width: 100%;
+  height: 52px;
+
+  .custom-tab {
+    padding-inline: var(--Size-5);
+    padding-block: var(--Size-4);
+    background-color: var(--Neutral-White);
+    border-bottom: 2px solid var(--Gray-Gray-100);
+    cursor: pointer;
+    display: flex;
+    gap: var(--Size-4);
+    align-items: center;
+
+    span {
+      display: flex;
+      align-items: center;
+      gap: var(--Size-2, 8px);
+    }
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      color: var(--Gray-Gray-400);
+      font-weight: var(--font-weight-bold);
+      line-height: 20px;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    &.active-tab {
+      background-color: var(--Neutral-White);
+      border-bottom: 2px solid var(--Primary-Primary-500);
+
+      p {
+        color: var(--Gray-Gray-600);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+
+    // disabled-tab debe ir después de active-tab para tener mayor prioridad
+    &.disabled-tab {
+      background: #dfe4ed38 !important;
+      cursor: not-allowed !important;
+      opacity: 0.7;
+      pointer-events: none;
+
+      p {
+        font-weight: 200 !important;
+        color: var(--Gray-Gray-300) !important;
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}

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

@@ -0,0 +1,212 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router, NavigationEnd } from '@angular/router';
+import { TabsComponent } from './tabs.component';
+import { IconComponent } from '../icon/icon.component';
+import { TabProperties } from '@app/utilities/interfaces/ui/tabs.interface';
+import { Subject } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('TabsComponent', () => {
+  let component: TabsComponent;
+  let fixture: ComponentFixture<TabsComponent>;
+  let mockRouter: any;
+  let routerEventsSubject: Subject<any>;
+
+  beforeEach(async () => {
+    routerEventsSubject = new Subject();
+
+    mockRouter = {
+      url: '/test-route',
+      events: routerEventsSubject.asObservable(),
+      navigate: jest.fn().mockResolvedValue(true),
+    };
+
+    // Crear el componente directamente sin TestBed para evitar problemas de dependencias
+    component = new TabsComponent(mockRouter);
+
+    // Mock fixture básico
+    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.configuration).toEqual([]);
+      expect(component.showIcon).toBe(false);
+      expect(component.activeTab).toBe(0);
+    });
+
+    it('should set active tab by route on init', () => {
+      const mockConfig: TabProperties[] = [
+        { id: 0, label: 'Tab 1', route: '/test-route' },
+        { id: 1, label: 'Tab 2', route: '/other-route' },
+      ];
+      component.configuration = mockConfig;
+      mockRouter.url = '/test-route';
+
+      component.ngOnInit();
+
+      expect(component.activeTab).toBe(0);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept configuration array', () => {
+      const mockConfig: TabProperties[] = [
+        { id: 0, label: 'Tab 1', route: '/route1' },
+        { id: 1, label: 'Tab 2', route: '/route2' },
+      ];
+      component.configuration = mockConfig;
+
+      expect(component.configuration).toEqual(mockConfig);
+      expect(component.configuration.length).toBe(2);
+    });
+
+    it('should accept showIcon flag', () => {
+      component.showIcon = true;
+      expect(component.showIcon).toBe(true);
+    });
+
+    it('should accept activeTab index', () => {
+      component.activeTab = 2;
+      expect(component.activeTab).toBe(2);
+    });
+
+    it('should handle tabs with completed status', () => {
+      const mockConfig: TabProperties[] = [
+        { id: 0, label: 'Tab 1', route: '/route1', completed: true },
+      ];
+      component.configuration = mockConfig;
+
+      expect(component.configuration[0].completed).toBe(true);
+    });
+
+    it('should handle tabs with counter', () => {
+      const mockConfig: TabProperties[] = [{ id: 0, label: 'Tab 1', route: '/route1', counter: 5 }];
+      component.configuration = mockConfig;
+
+      expect(component.configuration[0].counter).toBe(5);
+    });
+  });
+
+  describe('Funcionalidad de navegación', () => {
+    it('should emit onIndexChanged when tab is clicked', () => {
+      const emitSpy = jest.spyOn(component.onIndexChanged, 'emit');
+      const mockTab: TabProperties = { id: 1, label: 'Tab 2', route: '' };
+
+      component.onTabClick(mockTab);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockTab);
+    });
+
+    it('should navigate to route when tab with route is clicked', () => {
+      const mockTab: TabProperties = { id: 0, label: 'Tab 1', route: '/test-route' };
+
+      component.onTabClick(mockTab);
+
+      expect(mockRouter.navigate).toHaveBeenCalledWith(['/test-route'], { queryParams: {} });
+    });
+
+    it('should handle route with query params', () => {
+      const mockTab: TabProperties = {
+        id: 0,
+        label: 'Tab 1',
+        route: '/test-route?section=invoice',
+      };
+
+      component.onTabClick(mockTab);
+
+      expect(mockRouter.navigate).toHaveBeenCalledWith(['/test-route'], {
+        queryParams: { section: 'invoice' },
+      });
+    });
+
+    it('should set activeTab when tab without route is clicked', () => {
+      const mockTab: TabProperties = { id: 2, label: 'Tab 3' };
+
+      component.onTabClick(mockTab);
+
+      expect(component.activeTab).toBe(2);
+    });
+  });
+
+  describe('Detección de cambios de URL', () => {
+    it('should update activeTab on route change', () => {
+      const mockConfig: TabProperties[] = [
+        { id: 0, label: 'Tab 1', route: '/route1' },
+        { id: 1, label: 'Tab 2', route: '/route2' },
+      ];
+      component.configuration = mockConfig;
+      component.ngOnInit();
+
+      routerEventsSubject.next(new NavigationEnd(1, '/route2', '/route2'));
+
+      expect(component.activeTab).toBe(1);
+    });
+
+    it('should set activeTab to 0 if route not found', () => {
+      const mockConfig: TabProperties[] = [{ id: 0, label: 'Tab 1', route: '/route1' }];
+      component.configuration = mockConfig;
+      component.ngOnInit();
+
+      routerEventsSubject.next(new NavigationEnd(1, '/unknown-route', '/unknown-route'));
+
+      expect(component.activeTab).toBe(0);
+    });
+  });
+
+  describe('Ciclo de vida', () => {
+    it('should unsubscribe on destroy', () => {
+      component.configuration = [{ id: 0, label: 'Tab', route: '/route' }];
+      component.ngOnInit();
+
+      const unsubscribeSpy = jest.spyOn(component['subscriptions'], 'unsubscribe');
+
+      component.ngOnDestroy();
+
+      expect(unsubscribeSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Escenarios de integración', () => {
+    it('should work with all features enabled', () => {
+      const mockConfig: TabProperties[] = [
+        { id: 0, label: 'Tab 1', route: '/route1', completed: true, counter: 3 },
+        { id: 1, label: 'Tab 2', route: '/route2', completed: false, counter: 5 },
+        { id: 2, label: 'Tab 3', route: '/route3', completed: true },
+      ];
+      component.configuration = mockConfig;
+      component.showIcon = true;
+      component.activeTab = 1;
+
+      fixture.detectChanges();
+
+      expect(component.configuration.length).toBe(3);
+      expect(component.showIcon).toBe(true);
+      expect(component.activeTab).toBe(1);
+    });
+
+    it('should handle tab navigation workflow', () => {
+      const mockConfig: TabProperties[] = [
+        { id: 0, label: 'Personal', route: '/settings/personal' },
+        { id: 1, label: 'Security', route: '/settings/security' },
+      ];
+      component.configuration = mockConfig;
+      component.ngOnInit();
+
+      const emitSpy = jest.spyOn(component.onIndexChanged, 'emit');
+
+      component.onTabClick(mockConfig[1]);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockConfig[1]);
+      expect(mockRouter.navigate).toHaveBeenCalled();
+    });
+  });
+});