@dropi/ui-components 1.0.0

package/src/components-source/dropi-text-area/dropi-text-area.component.spec.ts

@@ -0,0 +1,507 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiTextAreaComponent } from './dropi-text-area.component';
+import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { TextAreaProperties } from '@app/utilities/interfaces/ui/input-interface';
+
+describe('DropiTextAreaComponent', () => {
+  let component: DropiTextAreaComponent;
+  let fixture: ComponentFixture<DropiTextAreaComponent>;
+
+  beforeEach(() => {
+    // Crear el componente directamente sin TestBed para evitar problemas de dependencias
+    component = new DropiTextAreaComponent();
+
+    // 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.disabled).toBe(false);
+      expect(component.showObligatoryAsterisk).toBe(false);
+    });
+
+    it('should call validateDisabled on init', () => {
+      const spy = jest.spyOn(component, 'validateDisabled');
+      const formControl = new FormControl('');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+
+      component.ngOnInit();
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Propiedades del textarea', () => {
+    let formControl: FormControl;
+    let textAreaProps: TextAreaProperties;
+
+    beforeEach(() => {
+      formControl = new FormControl('');
+      textAreaProps = {
+        formControl,
+        label: 'Description',
+        placeholder: 'Enter description',
+        maxLength: 200,
+      };
+    });
+
+    it('should accept textAreaProperties', () => {
+      component.textAreaProperties = textAreaProps;
+
+      expect(component.textAreaProperties.label).toBe('Description');
+      expect(component.textAreaProperties.placeholder).toBe('Enter description');
+      expect(component.textAreaProperties.maxLength).toBe(200);
+    });
+
+    it('should accept optional textHelper', () => {
+      textAreaProps.textHelper = 'Helper text';
+      component.textAreaProperties = textAreaProps;
+
+      expect(component.textAreaProperties.textHelper).toBe('Helper text');
+    });
+
+    it('should accept optional id', () => {
+      textAreaProps.id = 'custom-id';
+      component.textAreaProperties = textAreaProps;
+
+      expect(component.textAreaProperties.id).toBe('custom-id');
+    });
+
+    it('should accept optional rows', () => {
+      textAreaProps.rows = 5;
+      component.textAreaProperties = textAreaProps;
+
+      expect(component.textAreaProperties.rows).toBe(5);
+    });
+
+    it('should accept optional resize', () => {
+      textAreaProps.resize = 'vertical';
+      component.textAreaProperties = textAreaProps;
+
+      expect(component.textAreaProperties.resize).toBe('vertical');
+    });
+  });
+
+  describe('Estado deshabilitado', () => {
+    let formControl: FormControl;
+
+    beforeEach(() => {
+      formControl = new FormControl('test value');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+    });
+
+    it('should disable form control when disabled is true', () => {
+      component.disabled = true;
+      component.validateDisabled();
+
+      expect(formControl.disabled).toBe(true);
+    });
+
+    it('should enable form control when disabled is false', () => {
+      formControl.disable();
+      component.disabled = false;
+      component.validateDisabled();
+
+      expect(formControl.disabled).toBe(false);
+    });
+
+    it('should handle disabled state change', () => {
+      component.disabled = true;
+      component.validateDisabled();
+      expect(formControl.disabled).toBe(true);
+
+      component.disabled = false;
+      component.validateDisabled();
+      expect(formControl.disabled).toBe(false);
+    });
+
+    it('should validate disabled on init', () => {
+      component.disabled = true;
+      component.ngOnInit();
+
+      expect(formControl.disabled).toBe(true);
+    });
+  });
+
+  describe('Validación requerida', () => {
+    it('should detect required validator', () => {
+      const formControl = new FormControl('', Validators.required);
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+
+      const result = component.isRequired();
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false when not required', () => {
+      const formControl = new FormControl('');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+
+      const result = component.isRequired();
+
+      expect(result).toBe(false);
+    });
+
+    it('should return false when no validator', () => {
+      const formControl = new FormControl('');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+
+      const result = component.isRequired();
+
+      expect(result).toBe(false);
+    });
+
+    it('should return false when control is null', () => {
+      component.textAreaProperties = null;
+
+      const result = component.isRequired();
+
+      expect(result).toBe(false);
+    });
+
+    it('should return false when formControl is null', () => {
+      component.textAreaProperties = {
+        formControl: null,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+
+      const result = component.isRequired();
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('Mensajes de error', () => {
+    let formControl: FormControl;
+
+    beforeEach(() => {
+      formControl = new FormControl('', Validators.required);
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+    });
+
+    it('should return required error message', () => {
+      formControl.setValue('');
+      formControl.markAsTouched();
+
+      const errorMessage = component.getErrorMessage();
+
+      expect(errorMessage).toBe('This field is required');
+    });
+
+    it('should return empty string when no errors', () => {
+      formControl.setValue('Valid value');
+
+      const errorMessage = component.getErrorMessage();
+
+      expect(errorMessage).toBe('');
+    });
+
+    it.skip('should handle null control', () => {
+      component.textAreaProperties.formControl = null;
+
+      expect(() => component.getErrorMessage()).not.toThrow();
+    });
+  });
+
+  describe('Validadores múltiples', () => {
+    it('should detect required in multiple validators', () => {
+      const formControl = new FormControl('', [Validators.required, Validators.maxLength(100)]);
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+
+      const result = component.isRequired();
+
+      expect(result).toBe(true);
+    });
+
+    it('should work with only maxLength validator', () => {
+      const formControl = new FormControl('', Validators.maxLength(100));
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+
+      const result = component.isRequired();
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('Asterisco obligatorio', () => {
+    let formControl: FormControl;
+
+    beforeEach(() => {
+      formControl = new FormControl('', Validators.required);
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+    });
+
+    it('should show asterisk when showObligatoryAsterisk is true and field is required', () => {
+      component.showObligatoryAsterisk = true;
+
+      expect(component.showObligatoryAsterisk).toBe(true);
+      expect(component.isRequired()).toBe(true);
+    });
+
+    it('should not show asterisk when showObligatoryAsterisk is false', () => {
+      component.showObligatoryAsterisk = false;
+
+      expect(component.showObligatoryAsterisk).toBe(false);
+    });
+
+    it('should handle asterisk for optional field', () => {
+      const optionalControl = new FormControl('');
+      component.textAreaProperties.formControl = optionalControl;
+      component.showObligatoryAsterisk = true;
+
+      expect(component.showObligatoryAsterisk).toBe(true);
+      expect(component.isRequired()).toBe(false);
+    });
+  });
+
+  describe('Límite de caracteres', () => {
+    let formControl: FormControl;
+
+    beforeEach(() => {
+      formControl = new FormControl('');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 50,
+      };
+    });
+
+    it('should accept maxLength property', () => {
+      expect(component.textAreaProperties.maxLength).toBe(50);
+    });
+
+    it('should work with different maxLength values', () => {
+      component.textAreaProperties.maxLength = 200;
+      expect(component.textAreaProperties.maxLength).toBe(200);
+
+      component.textAreaProperties.maxLength = 1000;
+      expect(component.textAreaProperties.maxLength).toBe(1000);
+    });
+  });
+
+  describe('Configuración de filas', () => {
+    let formControl: FormControl;
+
+    beforeEach(() => {
+      formControl = new FormControl('');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+    });
+
+    it('should accept custom rows value', () => {
+      component.textAreaProperties.rows = 5;
+
+      expect(component.textAreaProperties.rows).toBe(5);
+    });
+
+    it('should work without rows specified', () => {
+      expect(component.textAreaProperties.rows).toBeUndefined();
+    });
+  });
+
+  describe('Configuración de redimensionamiento', () => {
+    let formControl: FormControl;
+
+    beforeEach(() => {
+      formControl = new FormControl('');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+    });
+
+    it('should accept none resize', () => {
+      component.textAreaProperties.resize = 'none';
+      expect(component.textAreaProperties.resize).toBe('none');
+    });
+
+    it('should accept both resize', () => {
+      component.textAreaProperties.resize = 'both';
+      expect(component.textAreaProperties.resize).toBe('both');
+    });
+
+    it('should accept horizontal resize', () => {
+      component.textAreaProperties.resize = 'horizontal';
+      expect(component.textAreaProperties.resize).toBe('horizontal');
+    });
+
+    it('should accept vertical resize', () => {
+      component.textAreaProperties.resize = 'vertical';
+      expect(component.textAreaProperties.resize).toBe('vertical');
+    });
+  });
+
+  describe('Integración con FormControl', () => {
+    let formControl: FormControl;
+
+    beforeEach(() => {
+      formControl = new FormControl('Initial value');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+    });
+
+    it('should reflect FormControl value', () => {
+      expect(formControl.value).toBe('Initial value');
+
+      formControl.setValue('New value');
+      expect(formControl.value).toBe('New value');
+    });
+
+    it('should reflect FormControl validity', () => {
+      const requiredControl = new FormControl('', Validators.required);
+      component.textAreaProperties.formControl = requiredControl;
+
+      expect(requiredControl.valid).toBe(false);
+
+      requiredControl.setValue('Valid value');
+      expect(requiredControl.valid).toBe(true);
+    });
+
+    it('should handle FormControl touched state', () => {
+      expect(formControl.touched).toBe(false);
+
+      formControl.markAsTouched();
+      expect(formControl.touched).toBe(true);
+    });
+
+    it('should handle FormControl dirty state', () => {
+      expect(formControl.dirty).toBe(false);
+
+      formControl.markAsDirty();
+      expect(formControl.dirty).toBe(true);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete workflow with required field', () => {
+      const formControl = new FormControl('', Validators.required);
+      component.textAreaProperties = {
+        formControl,
+        label: 'Description',
+        placeholder: 'Enter your description',
+        maxLength: 200,
+        textHelper: 'Maximum 200 characters',
+        rows: 4,
+      };
+      component.showObligatoryAsterisk = true;
+      component.disabled = false;
+
+      component.ngOnInit();
+
+      // Check initial state
+      expect(component.isRequired()).toBe(true);
+      expect(formControl.disabled).toBe(false);
+      expect(formControl.valid).toBe(false);
+
+      // Add value
+      formControl.setValue('Valid description');
+      expect(formControl.valid).toBe(true);
+      expect(component.getErrorMessage()).toBe('');
+    });
+
+    it('should handle optional field', () => {
+      const formControl = new FormControl('');
+      component.textAreaProperties = {
+        formControl,
+        label: 'Optional Notes',
+        placeholder: 'Add notes (optional)',
+        maxLength: 500,
+      };
+      component.disabled = false;
+
+      component.ngOnInit();
+
+      expect(component.isRequired()).toBe(false);
+      expect(formControl.valid).toBe(true);
+    });
+
+    it('should handle disabled state workflow', () => {
+      const formControl = new FormControl('Some text', Validators.required);
+      component.textAreaProperties = {
+        formControl,
+        label: 'Test',
+        placeholder: 'Test',
+        maxLength: 100,
+      };
+      component.disabled = true;
+
+      component.ngOnInit();
+
+      expect(formControl.disabled).toBe(true);
+
+      // Try to enable
+      component.disabled = false;
+      component.validateDisabled();
+
+      expect(formControl.disabled).toBe(false);
+    });
+  });
+});

package/src/components-source/dropi-text-area/dropi-text-area.component.ts

@@ -0,0 +1,80 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TextAreaProperties } from '@app/utilities/interfaces/ui/input-interface';
+import { Validators, ReactiveFormsModule } from '@angular/forms';
+import { IconComponent } from '../icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-dropi-text-area',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule, IconComponent],
+  templateUrl: './dropi-text-area.component.html',
+  styleUrls: ['./dropi-text-area.component.scss'],
+})
+export class DropiTextAreaComponent implements OnInit {
+  /**
+   * Define las propiedades necesarias para un textArea.
+   *
+   * Cada campo debe contener las siguientes propiedades:
+   * - `formControl`: Control de formulario asociado al campo.
+   * - `label`: Texto descriptivo que se mostrará como etiqueta.
+   * - `placeholder`: Texto de ejemplo dentro del campo.
+   * - `maxLength`: Número máximo de caracteres permitidos.
+   *
+   * Propiedades opcionales:
+   * - `textHelper`: Texto de ayuda que se mostrará debajo del campo.
+   * - `id`: Identificador único del campo, personalizado.
+   * - `rows`: Número de filas visibles en el área de texto.
+   * - `resize`: Indica si el área de texto puede ser redimensionada por el usuario ('none' | 'both' | 'horizontal' | 'vertical').
+   * @type {TextAreaProperties}
+   */
+  @Input() public textAreaProperties: TextAreaProperties;
+  /**
+   * Indica si se debe mostrar deshabilitiado el input.
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  @Input() public disabled: boolean = false;
+  /**
+   * Indica si se debe mostrar el asterisco de obligatorio basado en si es requerido el formControl
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  @Input() public showObligatoryAsterisk: boolean = false;
+
+  ngOnInit() {
+    this.validateDisabled();
+  }
+
+  isRequired(): boolean {
+    const control = this.textAreaProperties?.formControl;
+    if (!control || !control.validator) return false;
+    const validationResult = control.validator({} as any);
+
+    return !!validationResult?.['required'];
+  }
+
+  validateDisabled() {
+    if (this.disabled) {
+      this.textAreaProperties.formControl.disable();
+    } else {
+      this.textAreaProperties.formControl.enable();
+    }
+  }
+
+  getErrorMessage(): string {
+    const control = this.textAreaProperties?.formControl;
+
+    if (control?.errors) {
+      if (control.errors['required']) {
+        return 'This field is required';
+      }
+    }
+    return '';
+  }
+}

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

@@ -0,0 +1,70 @@
+<div class="dropi-tooltip-container" [class.disabled]="disabled">
+  <!-- Trigger element -->
+  <div
+    class="dropi-tooltip-trigger"
+    (mouseenter)="onMouseEnter()"
+    (mouseleave)="onMouseLeave()"
+    (click)="onClick()"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+    [attr.tabindex]="trigger === 'focus' ? '0' : null"
+  >
+    <!-- Default icon trigger -->
+    <app-icon
+      *ngIf="showIcon"
+      [name]="iconName"
+      [color]="iconColor"
+      [width]="iconSize"
+      [height]="iconSize"
+    >
+    </app-icon>
+
+    <!-- Custom content slot -->
+    <ng-content></ng-content>
+  </div>
+
+  <!-- Tooltip content - siguiendo estructura exacta de Figma -->
+  <div
+    @tooltipAnimation
+    class="tooltip-master"
+    *ngIf="isVisible"
+    [class.position-top]="position === 'top'"
+    [class.position-bottom]="position === 'bottom'"
+    [class.position-left]="position === 'left'"
+    [class.position-right]="position === 'right'"
+    [class.arrow-start]="arrowPosition === 'start'"
+    [class.arrow-center]="arrowPosition === 'center'"
+    [class.arrow-end]="arrowPosition === 'end'"
+    [style.min-width]="minWidth"
+    [style.max-width]="maxWidth"
+  >
+    <!-- Tooltip wrapper -->
+    <div class="tooltip-wrapper">
+      <!-- Beak container (flecha superior) -->
+      <div class="beak-top" *ngIf="position === 'bottom'">
+        <div class="beak-container-top">
+          <div class="beak-arrow-top"></div>
+        </div>
+      </div>
+
+      <!-- Bubble content -->
+      <div class="bubble">
+        <div class="tooltip-content">
+          <div class="tooltip-text" [innerHTML]="displayContent"></div>
+        </div>
+
+        <!-- Close button -->
+        <div class="close-button" *ngIf="showX" (click)="onCloseClick()">
+          <app-icon name="Close-small" color="#ffffff" width="16" height="16"></app-icon>
+        </div>
+      </div>
+
+      <!-- Beak container (flecha inferior) -->
+      <div class="beak-bottom" *ngIf="position === 'top'">
+        <div class="beak-container-bottom">
+          <div class="beak-arrow-bottom"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>