@dropi/ui-components 1.0.0

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

@@ -0,0 +1,250 @@
+// Dropi Tooltip Component Styles
+.dropi-tooltip-container {
+  position: relative;
+  display: inline-block;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.dropi-tooltip-trigger {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
+// Tooltip Master (Auto Layout) - siguiendo estructura de Figma
+.tooltip-master {
+  position: absolute;
+  z-index: 9999;
+  padding: 8px;
+  border-radius: 4px;
+
+  // Posicionamiento
+  &.position-bottom {
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &.arrow-start {
+      transform: translateX(-20px);
+    }
+
+    &.arrow-end {
+      transform: translateX(-80%);
+    }
+  }
+
+  &.position-top {
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-44%);
+
+    &.arrow-start {
+      transform: translateX(-20px);
+    }
+
+    &.arrow-end {
+      transform: translateX(-80%);
+    }
+  }
+
+  &.position-left {
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &.position-right {
+    left: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+// Tooltip wrapper - fondo gris oscuro con borde
+.tooltip-wrapper {
+  background-color: #1f2433;
+  border: 1px solid #1f2433;
+  border-radius: 8px;
+  position: relative;
+  width: 100%;
+}
+
+// Beak containers (contenedores de flecha)
+.beak-top {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+
+  .beak-container-top {
+    height: 0.001px;
+    width: 48px;
+    position: relative;
+
+    .beak-arrow-top {
+      position: absolute;
+      top: -6.34px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 12px;
+      height: 6px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-bottom: 6px solid #1f2433;
+      }
+    }
+  }
+
+  // Arrow positioning
+  .arrow-start & .beak-container-top {
+    margin-left: 16px;
+  }
+
+  .arrow-center & .beak-container-top {
+    margin: 0 auto;
+  }
+
+  .arrow-end & .beak-container-top {
+    margin-right: 16px;
+    margin-left: auto;
+  }
+}
+
+.beak-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+
+  .beak-container-bottom {
+    height: 0.001px;
+    width: 48px;
+    position: relative;
+
+    .beak-arrow-bottom {
+      position: absolute;
+      bottom: -6.34px;
+      left: 0;
+      right: 0;
+      top: 0;
+      width: 12px;
+      height: 6px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid #1f2433;
+      }
+    }
+  }
+
+  // Arrow positioning
+  .arrow-start & .beak-container-bottom {
+    margin-left: 16px;
+  }
+
+  .arrow-center & .beak-container-bottom {
+    margin: 0 auto;
+  }
+
+  .arrow-end & .beak-container-bottom {
+    margin-right: 16px;
+    margin-left: auto;
+  }
+}
+
+// Bubble - contenido principal
+.bubble {
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 16px;
+  border-radius: 4px;
+  flex-grow: 1;
+  min-height: 1px;
+  min-width: 1px;
+}
+
+// Tooltip content
+.tooltip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-grow: 1;
+  min-height: 1px;
+  min-width: 1px;
+  position: relative;
+}
+
+// Tooltip text - siguiendo tipografía de Figma
+.tooltip-text {
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #ffffff;
+  width: 100%;
+  margin: 0;
+
+  strong {
+    font-weight: 600;
+  }
+}
+
+// Close button
+.close-button {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .tooltip-master {
+    max-width: 200px !important;
+  }
+
+  .tooltip-text {
+    font-size: 13px;
+  }
+
+  .bubble {
+    padding: 12px;
+  }
+}

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

@@ -0,0 +1,423 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiTooltipComponent } from './dropi-tooltip.component';
+import { ChangeDetectorRef } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('DropiTooltipComponent', () => {
+  let component: DropiTooltipComponent;
+  let fixture: ComponentFixture<DropiTooltipComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiTooltipComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiTooltipComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.text).toBe('');
+      expect(component.title).toBe('');
+      expect(component.label).toBe('');
+      expect(component.position).toBe('bottom');
+      expect(component.arrowPosition).toBe('center');
+      expect(component.trigger).toBe('hover');
+      expect(component.disabled).toBe(false);
+      expect(component.showIcon).toBe(true);
+      expect(component.showX).toBe(false);
+      expect(component.iconName).toBe('Tooltip');
+      expect(component.iconColor).toBe('#7B8190');
+      expect(component.iconSize).toBe('14');
+      expect(component.maxWidth).toBe('280px');
+      expect(component.isVisible).toBe(false);
+    });
+  });
+
+  describe('Posicionamiento', () => {
+    it('should accept top position', () => {
+      component.position = 'top';
+      expect(component.position).toBe('top');
+    });
+
+    it('should accept bottom position', () => {
+      component.position = 'bottom';
+      expect(component.position).toBe('bottom');
+    });
+
+    it('should accept left position', () => {
+      component.position = 'left';
+      expect(component.position).toBe('left');
+    });
+
+    it('should accept right position', () => {
+      component.position = 'right';
+      expect(component.position).toBe('right');
+    });
+
+    it('should handle arrow position start', () => {
+      component.arrowPosition = 'start';
+      expect(component.arrowPosition).toBe('start');
+    });
+
+    it('should handle arrow position center', () => {
+      component.arrowPosition = 'center';
+      expect(component.arrowPosition).toBe('center');
+    });
+
+    it('should handle arrow position end', () => {
+      component.arrowPosition = 'end';
+      expect(component.arrowPosition).toBe('end');
+    });
+  });
+
+  describe('Trigger: hover', () => {
+    beforeEach(() => {
+      component.trigger = 'hover';
+      component.text = 'Tooltip text';
+    });
+
+    it('should show tooltip on mouse enter', () => {
+      component.onMouseEnter();
+
+      expect(component.isVisible).toBe(true);
+    });
+
+    it('should hide tooltip on mouse leave', (done) => {
+      component.onMouseEnter();
+      expect(component.isVisible).toBe(true);
+
+      component.onMouseLeave();
+
+      setTimeout(() => {
+        expect(component.isVisible).toBe(false);
+        done();
+      }, 50);
+    });
+
+    it('should not show on mouse enter when disabled', () => {
+      component.disabled = true;
+
+      component.onMouseEnter();
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should not hide on mouse leave when disabled', () => {
+      component.disabled = true;
+      component.isVisible = true;
+
+      component.onMouseLeave();
+
+      expect(component.isVisible).toBe(true);
+    });
+  });
+
+  describe('Trigger: click', () => {
+    beforeEach(() => {
+      component.trigger = 'click';
+      component.text = 'Tooltip text';
+    });
+
+    it('should toggle tooltip on click', () => {
+      component.onClick();
+      expect(component.isVisible).toBe(true);
+
+      component.onClick();
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should not toggle when disabled', () => {
+      component.disabled = true;
+
+      component.onClick();
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should hide on document click outside', () => {
+      component.isVisible = true;
+      const mockEvent = new MouseEvent('click');
+      Object.defineProperty(mockEvent, 'target', {
+        value: document.createElement('div'),
+      });
+
+      component.onDocumentClick(mockEvent);
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should not hide on document click inside', () => {
+      component.isVisible = true;
+      const mockEvent = new MouseEvent('click');
+      Object.defineProperty(mockEvent, 'target', {
+        value: fixture.nativeElement,
+      });
+
+      component.onDocumentClick(mockEvent);
+
+      expect(component.isVisible).toBe(true);
+    });
+  });
+
+  describe('Trigger: focus', () => {
+    beforeEach(() => {
+      component.trigger = 'focus';
+      component.text = 'Tooltip text';
+    });
+
+    it('should show tooltip on focus', () => {
+      component.onFocus();
+
+      expect(component.isVisible).toBe(true);
+    });
+
+    it('should hide tooltip on blur', () => {
+      component.onFocus();
+      expect(component.isVisible).toBe(true);
+
+      component.onBlur();
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should not show on focus when disabled', () => {
+      component.disabled = true;
+
+      component.onFocus();
+
+      expect(component.isVisible).toBe(false);
+    });
+  });
+
+  describe('Control de visibilidad', () => {
+    beforeEach(() => {
+      component.text = 'Tooltip text';
+    });
+
+    it('should show tooltip', () => {
+      component.show();
+
+      expect(component.isVisible).toBe(true);
+    });
+
+    it('should hide tooltip', () => {
+      component.isVisible = true;
+
+      component.hide();
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should toggle tooltip visibility', () => {
+      component.toggle();
+      expect(component.isVisible).toBe(true);
+
+      component.toggle();
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should not show when disabled', () => {
+      component.disabled = true;
+
+      component.show();
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should not show when text is empty', () => {
+      component.text = '';
+      component.title = '';
+      component.label = '';
+
+      component.show();
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should not show when text is only whitespace', () => {
+      component.text = '   ';
+
+      component.show();
+
+      expect(component.isVisible).toBe(false);
+    });
+  });
+
+  describe('Contenido del tooltip', () => {
+    it('should display text content', () => {
+      component.text = 'Tooltip text';
+
+      expect(component.displayContent).toBe('Tooltip text');
+    });
+
+    it('should display title and label combined', () => {
+      component.title = 'Title';
+      component.label = 'Label';
+
+      expect(component.displayContent).toBe('<strong>Title</strong><br>Label');
+    });
+
+    it('should prioritize text over title/label', () => {
+      component.text = 'Text';
+      component.title = 'Title';
+      component.label = 'Label';
+
+      expect(component.displayContent).toBe('Text');
+    });
+
+    it('should display only title when label is empty', () => {
+      component.title = 'Title';
+      component.label = '';
+
+      expect(component.displayContent).toBe('Title');
+    });
+
+    it('should display only label when title is empty', () => {
+      component.title = '';
+      component.label = 'Label';
+
+      expect(component.displayContent).toBe('Label');
+    });
+
+    it('should return empty string when all content is empty', () => {
+      component.text = '';
+      component.title = '';
+      component.label = '';
+
+      expect(component.displayContent).toBe('');
+    });
+  });
+
+  describe('Botón de cierre', () => {
+    it('should hide tooltip on close click', () => {
+      component.isVisible = true;
+
+      component.onCloseClick();
+
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should show close button when showX is true', () => {
+      component.showX = true;
+
+      expect(component.showX).toBe(true);
+    });
+  });
+
+  describe('Configuración de icono', () => {
+    it('should accept custom icon name', () => {
+      component.iconName = 'custom-icon';
+
+      expect(component.iconName).toBe('custom-icon');
+    });
+
+    it('should accept custom icon color', () => {
+      component.iconColor = '#FF0000';
+
+      expect(component.iconColor).toBe('#FF0000');
+    });
+
+    it('should accept custom icon size', () => {
+      component.iconSize = '20';
+
+      expect(component.iconSize).toBe('20');
+    });
+
+    it('should hide icon when showIcon is false', () => {
+      component.showIcon = false;
+
+      expect(component.showIcon).toBe(false);
+    });
+  });
+
+  describe('Ancho máximo', () => {
+    it('should accept custom max width', () => {
+      component.maxWidth = '400px';
+
+      expect(component.maxWidth).toBe('400px');
+    });
+  });
+
+  describe('Temporizadores', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      component.trigger = 'hover';
+      component.text = 'Tooltip text';
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should clear timeout on mouse enter', () => {
+      component.onMouseLeave();
+      component.onMouseEnter();
+
+      jest.advanceTimersByTime(50);
+
+      expect(component.isVisible).toBe(true);
+    });
+
+    it('should cleanup timeout on destroy', () => {
+      component.onMouseLeave();
+
+      component.ngOnDestroy();
+
+      jest.advanceTimersByTime(50);
+      // No debería fallar
+      expect(true).toBe(true);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete hover workflow', (done) => {
+      component.trigger = 'hover';
+      component.text = 'Tooltip text';
+
+      // Mouse enter
+      component.onMouseEnter();
+      expect(component.isVisible).toBe(true);
+
+      // Mouse leave
+      component.onMouseLeave();
+
+      setTimeout(() => {
+        expect(component.isVisible).toBe(false);
+        done();
+      }, 50);
+    });
+
+    it('should handle complete click workflow', () => {
+      component.trigger = 'click';
+      component.text = 'Tooltip text';
+
+      // First click - open
+      component.onClick();
+      expect(component.isVisible).toBe(true);
+
+      // Second click - close
+      component.onClick();
+      expect(component.isVisible).toBe(false);
+    });
+
+    it('should handle complete focus workflow', () => {
+      component.trigger = 'focus';
+      component.text = 'Tooltip text';
+
+      // Focus
+      component.onFocus();
+      expect(component.isVisible).toBe(true);
+
+      // Blur
+      component.onBlur();
+      expect(component.isVisible).toBe(false);
+    });
+  });
+});