@dropi/ui-components 1.0.0

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

@@ -0,0 +1,327 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { TooltipComponent } from './tooltip.component';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+
+describe('TooltipComponent', () => {
+  let component: TooltipComponent;
+  let fixture: ComponentFixture<TooltipComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TooltipComponent, OverlayPanelModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TooltipComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.text).toBeUndefined();
+      expect(component.questionTooltip).toBe('body');
+    });
+
+    it('should accept text input', () => {
+      component.text = 'Test tooltip text';
+      expect(component.text).toBe('Test tooltip text');
+    });
+
+    it('should call ngOnInit without errors', () => {
+      expect(() => component.ngOnInit()).not.toThrow();
+    });
+  });
+
+  describe('Propiedades del componente', () => {
+    it('should handle string text input', () => {
+      const testText = 'This is a tooltip message';
+      component.text = testText;
+
+      expect(component.text).toBe(testText);
+    });
+
+    it('should handle undefined text input', () => {
+      component.text = undefined;
+
+      expect(component.text).toBeUndefined();
+    });
+
+    it('should handle null text input', () => {
+      component.text = null;
+
+      expect(component.text).toBeNull();
+    });
+
+    it('should handle empty string text input', () => {
+      component.text = '';
+
+      expect(component.text).toBe('');
+    });
+
+    it('should maintain questionTooltip property', () => {
+      expect(component.questionTooltip).toBe('body');
+
+      component.questionTooltip = 'custom-tooltip';
+      expect(component.questionTooltip).toBe('custom-tooltip');
+    });
+  });
+
+  describe('Casos de texto', () => {
+    it('should handle short text', () => {
+      component.text = 'Short';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Short');
+    });
+
+    it('should handle long text', () => {
+      const longText =
+        'This is a very long tooltip text that might span multiple lines and should be handled properly by the component without any issues or performance problems.';
+      component.text = longText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(longText);
+    });
+
+    it('should handle text with special characters', () => {
+      const specialText = 'Text with special chars: !@#$%^&*()_+-=[]{}|;:,.<>?';
+      component.text = specialText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(specialText);
+    });
+
+    it('should handle text with HTML characters', () => {
+      const htmlText = 'Text with HTML: <b>bold</b> & <i>italic</i>';
+      component.text = htmlText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(htmlText);
+    });
+
+    it('should handle text with line breaks', () => {
+      const multilineText = 'Line 1\nLine 2\nLine 3';
+      component.text = multilineText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(multilineText);
+    });
+
+    it('should handle text with unicode characters', () => {
+      const unicodeText = 'Unicode: 你好 🌟 café naïve résumé';
+      component.text = unicodeText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(unicodeText);
+    });
+  });
+
+  describe('Renderizado del template', () => {
+    it('should render overlay panel', () => {
+      const tooltipContainer = debugElement.query(By.css('.questiontooltip'));
+      expect(tooltipContainer).toBeTruthy();
+    });
+
+    it('should pass text to template when text is provided', () => {
+      component.text = 'Tooltip content';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Tooltip content');
+    });
+
+    it('should handle template rendering with undefined text', () => {
+      component.text = undefined;
+      fixture.detectChanges();
+
+      expect(() => fixture.detectChanges()).not.toThrow();
+    });
+
+    it('should handle template rendering with null text', () => {
+      component.text = null;
+      fixture.detectChanges();
+
+      expect(() => fixture.detectChanges()).not.toThrow();
+    });
+
+    it('should handle template rendering with empty text', () => {
+      component.text = '';
+      fixture.detectChanges();
+
+      expect(() => fixture.detectChanges()).not.toThrow();
+    });
+  });
+
+  describe('Configuración del overlay', () => {
+    it('should have correct questionTooltip configuration', () => {
+      expect(component.questionTooltip).toBe('body');
+    });
+
+    it('should allow changing questionTooltip configuration', () => {
+      component.questionTooltip = 'viewport';
+      expect(component.questionTooltip).toBe('viewport');
+
+      component.questionTooltip = 'target';
+      expect(component.questionTooltip).toBe('target');
+    });
+
+    it('should handle empty string questionTooltip', () => {
+      component.questionTooltip = '';
+      expect(component.questionTooltip).toBe('');
+    });
+
+    it('should handle null questionTooltip', () => {
+      component.questionTooltip = null;
+      expect(component.questionTooltip).toBeNull();
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle very long tooltip text', () => {
+      const veryLongText = 'a'.repeat(10000);
+      component.text = veryLongText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(veryLongText);
+    });
+
+    it('should handle text with only whitespace', () => {
+      const whitespaceText = '   \n\t   ';
+      component.text = whitespaceText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(whitespaceText);
+    });
+
+    it('should handle numeric string text', () => {
+      const numericText = '12345';
+      component.text = numericText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(numericText);
+    });
+
+    it('should handle text with quotes', () => {
+      const quotedText = 'Text with "double quotes" and \'single quotes\'';
+      component.text = quotedText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(quotedText);
+    });
+
+    it('should handle text with escape sequences', () => {
+      const escapedText = 'Text with \\n \\t \\r escape sequences';
+      component.text = escapedText;
+      fixture.detectChanges();
+
+      expect(component.text).toBe(escapedText);
+    });
+  });
+
+  describe('Cambios dinámicos', () => {
+    it('should update text dynamically', () => {
+      component.text = 'Initial text';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Initial text');
+
+      component.text = 'Updated text';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Updated text');
+    });
+
+    it('should handle rapid text changes', () => {
+      const texts = ['Text 1', 'Text 2', 'Text 3', 'Text 4', 'Text 5'];
+
+      texts.forEach((text) => {
+        component.text = text;
+        fixture.detectChanges();
+        expect(component.text).toBe(text);
+      });
+    });
+
+    it('should handle text change from defined to undefined', () => {
+      component.text = 'Defined text';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Defined text');
+
+      component.text = undefined;
+      fixture.detectChanges();
+
+      expect(component.text).toBeUndefined();
+    });
+
+    it('should handle text change from undefined to defined', () => {
+      component.text = undefined;
+      fixture.detectChanges();
+
+      expect(component.text).toBeUndefined();
+
+      component.text = 'Now defined';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Now defined');
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with complete tooltip configuration', () => {
+      component.text = 'Complete tooltip text';
+      component.questionTooltip = 'viewport';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Complete tooltip text');
+      expect(component.questionTooltip).toBe('viewport');
+
+      const tooltipContainer = debugElement.query(By.css('.questiontooltip'));
+      expect(tooltipContainer).toBeTruthy();
+    });
+
+    it('should handle multiple property changes', () => {
+      component.text = 'First text';
+      component.questionTooltip = 'body';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('First text');
+      expect(component.questionTooltip).toBe('body');
+
+      component.text = 'Second text';
+      component.questionTooltip = 'target';
+      fixture.detectChanges();
+
+      expect(component.text).toBe('Second text');
+      expect(component.questionTooltip).toBe('target');
+    });
+
+    it('should maintain component state across multiple operations', () => {
+      // Initialize
+      component.text = 'Initial';
+      component.questionTooltip = 'body';
+      fixture.detectChanges();
+
+      // Multiple operations
+      component.text = 'Updated';
+      fixture.detectChanges();
+
+      component.questionTooltip = 'viewport';
+      fixture.detectChanges();
+
+      component.text = 'Final';
+      fixture.detectChanges();
+
+      // Verify final state
+      expect(component.text).toBe('Final');
+      expect(component.questionTooltip).toBe('viewport');
+    });
+  });
+});

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit, ViewEncapsulation, NO_ERRORS_SCHEMA } from '@angular/core';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'dropi-tooltip',
+  templateUrl: './tooltip.component.html',
+  styleUrls: ['./tooltip.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [CommonModule, OverlayPanelModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class TooltipComponent implements OnInit {
+  @Input() text: string | undefined;
+  @Input() outlined: boolean = false;
+
+  // Añade la propiedad `questionTooltip`
+  questionTooltip: string = 'body'; // Puedes establecer el valor según tus necesidades
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/components-source/ui-dropi.module.ts

@@ -0,0 +1,125 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+
+// Re-export all standalone components
+export * from './index';
+
+// Import standalone components
+import { DatePickerRangeComponent } from './date-picker-range/date-picker-range.component';
+import { TooltipComponent } from './tooltip/tooltip.component';
+import { DropiTooltipComponent } from './dropi-tooltip/dropi-tooltip.component';
+import { TagTypeProductComponent } from './tag-type-product/tag-type-product.component';
+import { AlertModalComponent } from './alert-modal/alert-modal.component';
+import { SimpleStepperComponent } from './simple-stepper/simple-stepper.component';
+import { CitySelectorComponent } from './city-selector/city-selector.component';
+import { LottieLoaderComponent } from './lottie-loader/lottie-loader.component';
+import { RadioSelectionListComponent } from './radio-selection-list/radio-selection-list.component';
+import { ToastComponent } from './toast/toast.component';
+import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import { AccordionComponent } from './accordion/accordion.component';
+import { AccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
+import { CheckboxSelectionListComponent } from './checkbox-selection-list/checkbox-selection-list.component';
+import { ReadMoreComponent } from './read-more/read-more.component';
+import { IconComponent } from './icon/icon.component';
+import { AlertComponent } from './alert/alert.component';
+import { DatePickerComponent } from './date-picker/date-picker.component';
+import { InputComponent } from './input/input.component';
+import { DropiSwitchComponent } from './dropi-switch/dropi-switch.component';
+import { ButtonComponent } from './dropi-button/dropi-button.component';
+import { OtpSendCodeComponent } from './otp-send-code/otp-send-code.component';
+import { DropiTagComponent } from './dropi-tag/dropi-tag.component';
+import { DropiChipsComponent } from './dropi-chips/dropi-chips.component';
+import { DropiSearchComponent } from './dropi-search/dropi-search.component';
+import { TabsComponent } from './tabs/tabs.component';
+import { DropiSelectComponent } from './dropi-select/dropi-select.component';
+import { DropiImageOverlayComponent } from './dropi-image-overlay/dropi-image-overlay.component';
+import { DropiTableComponent } from './dropi-table/dropi-table.component';
+import { DropiStepsComponent } from './dropi-steps/dropi-steps.component';
+import { DropiDrawerComponent } from './dropi-drawer/dropi-drawer.component';
+import { DropiModalComponent } from './dropi-modal/dropi-modal.component';
+import { PTemplateDirective } from './dropi-modal/p-template.directive';
+import { VerticalStepsComponent } from './vertical-steps/vertical-steps.component';
+
+/**
+ * @deprecated Use direct imports from '@app/ui' instead.
+ * Example: import { IconComponent, AlertComponent } from '@app/ui';
+ *
+ * This module is kept for backward compatibility only.
+ */
+@NgModule({
+  imports: [
+    // All components are standalone - just import them
+    DatePickerRangeComponent,
+    TooltipComponent,
+    DropiTooltipComponent,
+    TagTypeProductComponent,
+    AlertModalComponent,
+    OtpSendCodeComponent,
+    CitySelectorComponent,
+    LottieLoaderComponent,
+    RadioSelectionListComponent,
+    ToastComponent,
+    BreadcrumbComponent,
+    SimpleStepperComponent,
+    AccordionComponent,
+    AccordionItemComponent,
+    CheckboxSelectionListComponent,
+    ReadMoreComponent,
+    IconComponent,
+    AlertComponent,
+    DatePickerComponent,
+    InputComponent,
+    DropiSwitchComponent,
+    ButtonComponent,
+    DropiTagComponent,
+    DropiChipsComponent,
+    DropiSearchComponent,
+    TabsComponent,
+    DropiSelectComponent,
+    DropiImageOverlayComponent,
+    DropiTableComponent,
+    DropiStepsComponent,
+    DropiDrawerComponent,
+    DropiModalComponent,
+    PTemplateDirective,
+    VerticalStepsComponent,
+  ],
+  exports: [
+    // Re-export all standalone components
+    DatePickerRangeComponent,
+    TooltipComponent,
+    DropiTooltipComponent,
+    TagTypeProductComponent,
+    OtpSendCodeComponent,
+    AlertModalComponent,
+    SimpleStepperComponent,
+    CitySelectorComponent,
+    LottieLoaderComponent,
+    RadioSelectionListComponent,
+    ToastComponent,
+    BreadcrumbComponent,
+    AccordionComponent,
+    AccordionItemComponent,
+    CheckboxSelectionListComponent,
+    ReadMoreComponent,
+    IconComponent,
+    AlertComponent,
+    DatePickerComponent,
+    InputComponent,
+    DropiSwitchComponent,
+    ButtonComponent,
+    DropiTagComponent,
+    DropiChipsComponent,
+    DropiSearchComponent,
+    TabsComponent,
+    DropiSelectComponent,
+    DropiImageOverlayComponent,
+    DropiTableComponent,
+    DropiStepsComponent,
+    DropiDrawerComponent,
+    DropiModalComponent,
+    PTemplateDirective,
+    VerticalStepsComponent,
+  ],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class UiDropiModule {}