@dropi/ui-components 1.0.0

package/src/components-source/dropi-languages-selector/dropi-languages-selector.component.spec.ts

@@ -0,0 +1,152 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  DropiLanguagesSelectorComponent,
+  LanguageOption,
+} from './dropi-languages-selector.component';
+import { CountryFlagsComponent } from '../country-flags/country-flags.component';
+import { IconComponent } from '../icon/icon.component';
+import { DomSanitizer } from '@angular/platform-browser';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+
+describe('DropiLanguagesSelectorComponent', () => {
+  let component: DropiLanguagesSelectorComponent;
+  let fixture: ComponentFixture<DropiLanguagesSelectorComponent>;
+
+  const mockLanguages: LanguageOption[] = [
+    { code: 'es', label: 'Español', flag: 'colombia' },
+    { code: 'en', label: 'English', flag: 'usa' },
+    { code: 'pt', label: 'Português', flag: 'brazil' },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiLanguagesSelectorComponent, CountryFlagsComponent, IconComponent],
+      providers: [{ provide: DomSanitizer, useValue: mockDomSanitizer }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiLanguagesSelectorComponent);
+    component = fixture.componentInstance;
+    // Set default languages to prevent template errors
+    component.languages = mockLanguages;
+    component.selectedLang = mockLanguages[0];
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+    });
+
+    it('should have languages set', () => {
+      fixture.detectChanges();
+      expect(component.languages).toEqual(mockLanguages);
+    });
+
+    it('should initialize dropdownOpen as false', () => {
+      expect(component.dropdownOpen).toBe(false);
+    });
+  });
+
+  describe('ngOnInit', () => {
+    it('should set selectedLang to first language if not already set', () => {
+      component.languages = mockLanguages;
+      component.ngOnInit();
+      expect(component.selectedLang).toEqual(mockLanguages[0]);
+    });
+
+    it('should not change selectedLang if already set', () => {
+      const customLang = { code: 'fr', label: 'Français', flag: 'france' };
+      component.languages = mockLanguages;
+      component.selectedLang = customLang;
+      component.ngOnInit();
+      expect(component.selectedLang).toEqual(customLang);
+    });
+
+    it('should not change selectedLang if languages array becomes empty after init', () => {
+      fixture.detectChanges();
+      const originalLang = component.selectedLang;
+      component.languages = [];
+      component.ngOnInit();
+      // selectedLang remains from the previous state
+      expect(component.selectedLang).toEqual(originalLang);
+    });
+  });
+
+  describe('Propiedad languages', () => {
+    it('should accept languages array', () => {
+      component.languages = mockLanguages;
+      expect(component.languages).toEqual(mockLanguages);
+    });
+
+    it('should accept empty array', () => {
+      component.languages = [];
+      expect(component.languages).toEqual([]);
+    });
+  });
+
+  describe('Propiedad selectedLang', () => {
+    it('should accept language option', () => {
+      const lang: LanguageOption = { code: 'es', label: 'Español', flag: 'colombia' };
+      component.selectedLang = lang;
+      expect(component.selectedLang).toEqual(lang);
+    });
+  });
+
+  describe('Método toggleDropdown', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should toggle dropdownOpen from false to true', () => {
+      component.dropdownOpen = false;
+      component.toggleDropdown();
+      expect(component.dropdownOpen).toBe(true);
+    });
+
+    it('should toggle dropdownOpen from true to false', () => {
+      component.dropdownOpen = true;
+      component.toggleDropdown();
+      expect(component.dropdownOpen).toBe(false);
+    });
+  });
+
+  describe('Método selectLanguage', () => {
+    beforeEach(() => {
+      component.languages = mockLanguages;
+      fixture.detectChanges();
+    });
+
+    it('should set selectedLang to the given language', () => {
+      const lang = mockLanguages[1];
+      component.selectLanguage(lang);
+      expect(component.selectedLang).toEqual(lang);
+    });
+
+    it('should emit languageChange event', () => {
+      const spy = jest.spyOn(component.languageChange, 'emit');
+      const lang = mockLanguages[1];
+      component.selectLanguage(lang);
+      expect(spy).toHaveBeenCalledWith(lang);
+    });
+
+    it('should close dropdown after selection', () => {
+      component.dropdownOpen = true;
+      const lang = mockLanguages[1];
+      component.selectLanguage(lang);
+      expect(component.dropdownOpen).toBe(false);
+    });
+  });
+
+  describe('Output languageChange', () => {
+    it('should emit when language is selected', () => {
+      const spy = jest.spyOn(component.languageChange, 'emit');
+      component.languages = mockLanguages;
+      fixture.detectChanges();
+
+      const lang = mockLanguages[2];
+      component.selectLanguage(lang);
+
+      expect(spy).toHaveBeenCalledWith(lang);
+    });
+  });
+});

package/src/components-source/dropi-languages-selector/dropi-languages-selector.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CountryFlagsComponent } from '../country-flags/country-flags.component';
+import { IconComponent } from '../icon/icon.component';
+
+export interface LanguageOption {
+  code: string;
+  label: string;
+  flag: string; // ruta o clase para la bandera
+}
+
+@Component({
+  selector: 'dropi-languages-selector',
+  standalone: true,
+  imports: [CommonModule, CountryFlagsComponent, IconComponent],
+  templateUrl: './dropi-languages-selector.component.html',
+  styleUrls: ['./dropi-languages-selector.component.scss'],
+})
+export class DropiLanguagesSelectorComponent implements OnInit {
+  @Input() languages: LanguageOption[] = [];
+  @Input() selectedLang: LanguageOption;
+  @Output() languageChange = new EventEmitter<LanguageOption>();
+
+  dropdownOpen = false;
+
+  ngOnInit() {
+    if (!this.selectedLang && this.languages.length > 0) {
+      this.selectedLang = this.languages[0];
+    }
+  }
+
+  toggleDropdown(): void {
+    this.dropdownOpen = !this.dropdownOpen;
+  }
+
+  selectLanguage(lang: LanguageOption): void {
+    this.selectedLang = lang;
+    this.languageChange.emit(lang);
+    this.dropdownOpen = false;
+  }
+}

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

@@ -0,0 +1,3 @@
+<figure class="dropi-logo" [ngClass]="size">
+  <img [src]="urlLogo" alt="Logo" loading="lazy" (error)="onImageError($event)" />
+</figure>

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

@@ -0,0 +1,20 @@
+.dropi-logo {
+  margin: 0;
+  &.large {
+    max-width: 256px;
+    max-height: 84px;
+    width: 256px;
+    height: 84px;
+  }
+  &.small {
+    max-width: 86px;
+    max-height: 81px;
+    width: 86px;
+    height: 81px;
+  }
+  img {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}

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

@@ -0,0 +1,274 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiLogoComponent } from './dropi-logo.component';
+import { setupGlobalMocks } from '../../../test-utils/jest-mocks';
+
+setupGlobalMocks();
+
+describe('DropiLogoComponent', () => {
+  let component: DropiLogoComponent;
+  let fixture: ComponentFixture<DropiLogoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiLogoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiLogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.size).toBe('large');
+      expect(component.theme).toBe('light');
+      expect(component.urlLogo).toBeUndefined();
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept urlLogo input', () => {
+      component.urlLogo = 'https://example.com/logo.png';
+      expect(component.urlLogo).toBe('https://example.com/logo.png');
+    });
+
+    it('should accept size input - small', () => {
+      component.size = 'small';
+      expect(component.size).toBe('small');
+    });
+
+    it('should accept size input - large', () => {
+      component.size = 'large';
+      expect(component.size).toBe('large');
+    });
+
+    it('should accept theme input - dark', () => {
+      component.theme = 'dark';
+      expect(component.theme).toBe('dark');
+    });
+
+    it('should accept theme input - light', () => {
+      component.theme = 'light';
+      expect(component.theme).toBe('light');
+    });
+  });
+
+  describe('onImageError method', () => {
+    it('should set fallback image when image fails to load', () => {
+      const mockImg = {
+        src: 'https://example.com/broken-logo.png',
+      } as HTMLImageElement;
+
+      const mockEvent = {
+        target: mockImg,
+      } as unknown as Event;
+
+      component.onImageError(mockEvent);
+
+      expect(mockImg.src).toContain('data:image/svg+xml');
+      expect(mockImg.src).toContain('256%20x%2084');
+    });
+
+    it('should handle event with null target gracefully', () => {
+      const mockEvent = {
+        target: null,
+      } as unknown as Event;
+
+      expect(() => component.onImageError(mockEvent)).toThrow();
+    });
+
+    it('should handle event with non-HTMLImageElement target', () => {
+      const mockDiv = document.createElement('div');
+      const mockEvent = {
+        target: mockDiv,
+      } as unknown as Event;
+
+      // El componente hace casting directo, asumiendo que target es HTMLImageElement
+      // Esto puede causar errores pero no lanza excepciones explícitas
+      expect(() => component.onImageError(mockEvent)).not.toThrow();
+    });
+  });
+
+  describe('Renderizado', () => {
+    it('should render image when urlLogo is provided', () => {
+      component.urlLogo = 'https://example.com/test-logo.png';
+      fixture.detectChanges();
+
+      const imgElement = fixture.nativeElement.querySelector('img');
+      expect(imgElement).toBeTruthy();
+      expect(imgElement.src).toBe('https://example.com/test-logo.png');
+    });
+
+    it('should apply small size class', () => {
+      component.size = 'small';
+      fixture.detectChanges();
+
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      expect(logoElement?.classList.contains('small')).toBe(true);
+    });
+
+    it('should apply large size class', () => {
+      component.size = 'large';
+      fixture.detectChanges();
+
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      expect(logoElement?.classList.contains('large')).toBe(true);
+    });
+
+    it('should store theme property but not apply as CSS class', () => {
+      component.theme = 'dark';
+      fixture.detectChanges();
+
+      // El theme se almacena pero no se aplica como clase CSS
+      expect(component.theme).toBe('dark');
+
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      expect(logoElement?.classList.contains('dark')).toBe(false);
+    });
+
+    it('should default to light theme', () => {
+      fixture.detectChanges();
+
+      expect(component.theme).toBe('light');
+
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      expect(logoElement?.classList.contains('light')).toBe(false);
+    });
+
+    it('should have error handler attached to image', () => {
+      component.urlLogo = 'https://example.com/test-logo.png';
+      fixture.detectChanges();
+
+      const imgElement = fixture.nativeElement.querySelector('img');
+      expect(imgElement).toBeTruthy();
+
+      // Trigger error event
+      const errorEvent = new Event('error');
+      const originalSrc = imgElement.src;
+      imgElement.dispatchEvent(errorEvent);
+
+      // Check if the error handler was called (src should change to fallback)
+      expect(imgElement.src).toContain('data:image/svg+xml');
+    });
+  });
+
+  describe('Combinaciones de propiedades', () => {
+    it('should handle small dark logo', () => {
+      component.size = 'small';
+      component.theme = 'dark';
+      component.urlLogo = 'https://example.com/logo.png';
+      fixture.detectChanges();
+
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      expect(logoElement?.classList.contains('small')).toBe(true);
+      // theme no se aplica como clase CSS, solo se almacena
+      expect(component.theme).toBe('dark');
+
+      const imgElement = fixture.nativeElement.querySelector('img');
+      expect(imgElement.src).toBe('https://example.com/logo.png');
+    });
+
+    it('should handle large light logo', () => {
+      component.size = 'large';
+      component.theme = 'light';
+      component.urlLogo = 'https://example.com/logo.png';
+      fixture.detectChanges();
+
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      expect(logoElement?.classList.contains('large')).toBe(true);
+      // theme no se aplica como clase CSS, solo se almacena
+      expect(component.theme).toBe('light');
+
+      const imgElement = fixture.nativeElement.querySelector('img');
+      expect(imgElement.src).toBe('https://example.com/logo.png');
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle empty urlLogo', () => {
+      component.urlLogo = '';
+      fixture.detectChanges();
+
+      const imgElement = fixture.nativeElement.querySelector('img');
+      if (imgElement) {
+        // El navegador convierte URL vacía a localhost
+        expect(imgElement.src).toContain('localhost');
+      }
+    });
+
+    it('should handle null urlLogo', () => {
+      component.urlLogo = null as any;
+      fixture.detectChanges();
+
+      expect(() => fixture.detectChanges()).not.toThrow();
+    });
+
+    it('should handle undefined urlLogo', () => {
+      component.urlLogo = undefined as any;
+      fixture.detectChanges();
+
+      expect(() => fixture.detectChanges()).not.toThrow();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete logo workflow', () => {
+      // Set all properties
+      component.urlLogo = 'https://example.com/company-logo.png';
+      component.size = 'small';
+      component.theme = 'dark';
+
+      fixture.detectChanges();
+
+      // Verify all properties are set correctly
+      expect(component.urlLogo).toBe('https://example.com/company-logo.png');
+      expect(component.size).toBe('small');
+      expect(component.theme).toBe('dark');
+
+      // Verify rendering
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      const imgElement = fixture.nativeElement.querySelector('img');
+
+      expect(logoElement?.classList.contains('small')).toBe(true);
+      // theme no se aplica como clase CSS, solo se almacena
+      expect(component.theme).toBe('dark');
+      expect(imgElement.src).toBe('https://example.com/company-logo.png');
+    });
+
+    it('should handle logo with error fallback workflow', () => {
+      component.urlLogo = 'https://example.com/broken-logo.png';
+      component.size = 'large';
+      component.theme = 'light';
+
+      fixture.detectChanges();
+
+      const imgElement = fixture.nativeElement.querySelector('img');
+      expect(imgElement).toBeTruthy();
+
+      // Simulate image load error
+      const errorEvent = new Event('error');
+      imgElement.dispatchEvent(errorEvent);
+
+      // Verify fallback image is set
+      expect(imgElement.src).toContain('data:image/svg+xml');
+      expect(imgElement.src).toContain('256%20x%2084');
+    });
+
+    it('should handle default configuration', () => {
+      // Don't set any properties (use defaults)
+      fixture.detectChanges();
+
+      expect(component.size).toBe('large');
+      expect(component.theme).toBe('light');
+
+      const logoElement = fixture.nativeElement.querySelector('.dropi-logo');
+      expect(logoElement?.classList.contains('large')).toBe(true);
+      // theme no se aplica como clase CSS, solo se almacena como valor
+      expect(component.theme).toBe('light');
+    });
+  });
+});

package/src/components-source/dropi-logo/dropi-logo.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+type LogoTheme = 'dark' | 'light';
+type LogoSize = 'small' | 'large';
+
+@Component({
+  selector: 'dropi-logo',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './dropi-logo.component.html',
+  styleUrls: ['./dropi-logo.component.scss'],
+})
+export class DropiLogoComponent {
+  @Input() urlLogo: string;
+  @Input() size: LogoSize = 'large';
+  @Input() theme: LogoTheme = 'light';
+
+  onImageError(event: Event): void {
+    const target = event.target as HTMLImageElement;
+    target.src =
+      'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22256%22%20height%3D%2284%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%2084%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20%20%20%23holder%20text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2024px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20600%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Cg%20id%3D%22holder%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23E6EAF2%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dy%3D%22.3em%22%3E256%20x%2084%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fsvg%3E';
+  }
+}

package/src/components-source/dropi-modal/dropi-modal-stack.service.ts

@@ -0,0 +1,75 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+
+export type DropiOverlayEntry = {
+  id: string;
+  baseZIndex: number;
+  blockScroll: boolean;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DropiModalStackService {
+  private readonly stack: DropiOverlayEntry[] = [];
+  private scrollLocks = 0;
+
+  constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+
+  register(entry: DropiOverlayEntry): void {
+    if (this.stack.some((e) => e.id === entry.id)) {
+      return;
+    }
+
+    this.stack.push(entry);
+
+    if (entry.blockScroll) {
+      this.lockScroll();
+    }
+  }
+
+  unregister(id: string): void {
+    const index = this.stack.findIndex((e) => e.id === id);
+    if (index === -1) {
+      return;
+    }
+
+    const [removed] = this.stack.splice(index, 1);
+
+    if (removed?.blockScroll) {
+      this.unlockScroll();
+    }
+  }
+
+  getZIndexes(id: string): { maskZIndex: number; panelZIndex: number } {
+    const index = this.stack.findIndex((e) => e.id === id);
+    const entry = this.stack[index];
+
+    const baseZIndex = entry?.baseZIndex ?? 1100;
+    const stackIndex = Math.max(0, index);
+
+    // Similar a PrimeNG overlays: mask debajo, panel encima.
+    const maskZIndex = baseZIndex + stackIndex * 100;
+    const panelZIndex = maskZIndex + 1;
+
+    return { maskZIndex, panelZIndex };
+  }
+
+  private lockScroll(): void {
+    this.scrollLocks += 1;
+    if (this.scrollLocks !== 1) {
+      return;
+    }
+
+    this.document.body.style.overflow = 'hidden';
+  }
+
+  private unlockScroll(): void {
+    this.scrollLocks = Math.max(0, this.scrollLocks - 1);
+    if (this.scrollLocks !== 0) {
+      return;
+    }
+
+    this.document.body.style.overflow = '';
+  }
+}

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

@@ -0,0 +1,55 @@
+<ng-template #overlayTpl>
+  <div [ngClass]="rootClasses">
+    @if (modal) {
+      <div
+        class="dropi-modal__mask"
+        [style.z-index]="maskZIndex"
+        [style.transition-duration]="transitionOptions"
+        (click)="onMaskClick($event)"
+      ></div>
+    }
+
+    <div
+      [ngClass]="panelClass"
+      [style.z-index]="panelZIndex"
+      [style.transition-duration]="transitionOptions"
+      [style.max-width]="maxWidth"
+      role="dialog"
+      [attr.aria-modal]="modal ? 'true' : null"
+    >
+      @if (showHeader) {
+        <div class="dropi-modal__header">
+          @if (headerTemplate) {
+            <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
+          } @else {
+            <div class="dropi-modal__title">{{ header }}</div>
+          }
+
+          @if (showCloseIcon) {
+            <button type="button" class="dropi-modal-close" (click)="hide()" aria-label="Cerrar">
+              ×
+            </button>
+          }
+        </div>
+      }
+
+      <div
+        class="dropi-modal__content"
+        [class.dropi-modal__content--sidebar]="position === 'left' || position === 'right'"
+        (click)="$event.stopPropagation()"
+      >
+        @if (contentTemplate) {
+          <ng-container [ngTemplateOutlet]="contentTemplate"></ng-container>
+        } @else {
+          <ng-content></ng-content>
+        }
+      </div>
+
+      @if (footerTemplate) {
+        <div class="dropi-modal__footer">
+          <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
+        </div>
+      }
+    </div>
+  </div>
+</ng-template>