@dropi/ui-components 1.0.0

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

@@ -0,0 +1,153 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  ViewEncapsulation,
+  HostListener,
+  ElementRef,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+import { animate, style, transition, trigger } from '@angular/animations';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipTrigger = 'hover' | 'click' | 'focus';
+export type ArrowPosition = 'start' | 'center' | 'end';
+
+@Component({
+  selector: 'dropi-tooltip-v2',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  templateUrl: './dropi-tooltip.component.html',
+  styleUrls: ['./dropi-tooltip.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger('tooltipAnimation', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('200ms ease-out', style({ opacity: 1 })),
+      ]),
+      transition(':leave', [animate('150ms ease-in', style({ opacity: 0 }))]),
+    ]),
+  ],
+})
+export class DropiTooltipComponent implements OnInit {
+  @Input() text: string = '';
+  @Input() title: string = '';
+  @Input() label: string = '';
+  @Input() position: TooltipPosition = 'bottom';
+  @Input() arrowPosition: ArrowPosition = 'center';
+  @Input() trigger: TooltipTrigger = 'hover';
+  @Input() disabled: boolean = false;
+  @Input() showIcon: boolean = true;
+  @Input() showX: boolean = false;
+  @Input() iconName: string = 'Tooltip';
+  @Input() iconColor: string = '#7B8190';
+  @Input() iconSize: string = '14';
+  @Input() maxWidth: string = '280px';
+  @Input() minWidth: string = '300px';
+
+  isVisible: boolean = false;
+  private timeoutId: any;
+
+  constructor(
+    private elementRef: ElementRef,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {}
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: Event): void {
+    if (this.trigger === 'click' && this.isVisible) {
+      const target = event.target as HTMLElement;
+      if (!this.elementRef.nativeElement.contains(target)) {
+        this.hide();
+      }
+    }
+  }
+
+  @HostListener('document:keydown.escape', ['$event'])
+  onEscapeKey(event: KeyboardEvent): void {
+    if (this.isVisible) {
+      this.clearTimeout();
+      this.timeoutId = setTimeout(() => {
+        this.hide();
+      }, 10);
+      event.preventDefault();
+    }
+  }
+
+  onMouseEnter(): void {
+    if (this.disabled || this.trigger !== 'hover') return;
+    this.clearTimeout();
+    this.show();
+  }
+
+  onMouseLeave(): void {
+    if (this.disabled || this.trigger !== 'hover') return;
+    this.clearTimeout();
+    this.timeoutId = setTimeout(() => {
+      this.hide();
+    }, 10);
+  }
+
+  onClick(): void {
+    if (this.disabled || this.trigger !== 'click') return;
+    this.toggle();
+  }
+
+  onFocus(): void {
+    if (this.disabled || this.trigger !== 'focus') return;
+    this.show();
+  }
+
+  onBlur(): void {
+    if (this.disabled || this.trigger !== 'focus') return;
+    this.hide();
+  }
+
+  onCloseClick(): void {
+    this.hide();
+  }
+
+  show(): void {
+    if (this.disabled || (!this.text.trim() && !this.title.trim() && !this.label.trim())) return;
+    this.isVisible = true;
+    this.cdr.detectChanges();
+  }
+
+  hide(): void {
+    this.isVisible = false;
+    this.cdr.detectChanges();
+  }
+
+  toggle(): void {
+    if (this.isVisible) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  private clearTimeout(): void {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearTimeout();
+  }
+
+  // Helper para obtener el contenido a mostrar
+  get displayContent(): string {
+    if (this.text) return this.text;
+    if (this.title && this.label) return `<strong>${this.title}</strong><br>${this.label}`;
+    if (this.title) return this.title;
+    if (this.label) return this.label;
+    return '';
+  }
+}

package/src/components-source/dropi-youtube-lazy-video/dropi-youtube-lazy-video.component.html

@@ -0,0 +1,20 @@
+<div class="video-wrapper" [class.playing]="isPlaying">
+  <!-- Thumbnail -->
+  <div *ngIf="!isPlaying" class="thumbnail" (click)="playVideo()">
+    <img [src]="thumbnail" [alt]="'Video thumbnail ' + videoId" (error)="onImageError($event)" />
+    <button class="play-button" aria-label="Reproducir video">
+      <app-icon name="Play" width="17px" height="21px" color="Neutral-White"></app-icon>
+    </button>
+  </div>
+
+  <iframe
+    *ngIf="isPlaying && safeVideoUrl"
+    [attr.src]="safeVideoUrl"
+    [title]="videoTitle"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+    loading="lazy"
+  ></iframe>
+</div>

package/src/components-source/dropi-youtube-lazy-video/dropi-youtube-lazy-video.component.scss

@@ -0,0 +1,63 @@
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; // 16:9 ratio
+  background: #000;
+  overflow: hidden;
+  border-radius: 12px;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .thumbnail {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s ease;
+    }
+
+    &:hover img {
+      transform: scale(1.05);
+    }
+
+    .play-button {
+      position: absolute;
+      color: white;
+      border: none;
+      border-radius: 50%;
+      font-size: var(--Size-6);
+      width: 70px;
+      height: 70px;
+      cursor: pointer;
+      transition: background 0.3s ease;
+      background: rgba(14, 17, 26, 0.6);
+      backdrop-filter: blur(2.1813302040100098px);
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.8);
+      }
+      @media screen and (max-width: 768px) {
+        width: 40px;
+        height: 40px;
+        font-size: var(--Size-4);
+      }
+    }
+  }
+}

package/src/components-source/dropi-youtube-lazy-video/dropi-youtube-lazy-video.component.spec.ts

@@ -0,0 +1,121 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiYoutubeLazyVideoComponent } from './dropi-youtube-lazy-video.component';
+import { IconComponent } from '../icon/icon.component';
+import { DomSanitizer } from '@angular/platform-browser';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+
+describe('DropiYoutubeLazyVideoComponent', () => {
+  let component: DropiYoutubeLazyVideoComponent;
+  let fixture: ComponentFixture<DropiYoutubeLazyVideoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiYoutubeLazyVideoComponent, IconComponent],
+      providers: [{ provide: DomSanitizer, useValue: mockDomSanitizer }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiYoutubeLazyVideoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.videoId).toBeUndefined();
+      expect(component.thumbnailSrc).toBe('');
+      expect(component.videoTitle).toBe('');
+      expect(component.isPlaying).toBe(false);
+      expect(component.safeVideoUrl).toBeNull();
+    });
+  });
+
+  describe('Propiedad videoId', () => {
+    it('should accept video id', () => {
+      component.videoId = 'dQw4w9WgXcQ';
+      expect(component.videoId).toBe('dQw4w9WgXcQ');
+    });
+  });
+
+  describe('Propiedad thumbnailSrc', () => {
+    it('should accept thumbnail source', () => {
+      component.thumbnailSrc = 'my-thumbnail';
+      expect(component.thumbnailSrc).toBe('my-thumbnail');
+    });
+  });
+
+  describe('Propiedad videoTitle', () => {
+    it('should accept video title', () => {
+      component.videoTitle = 'My Video Title';
+      expect(component.videoTitle).toBe('My Video Title');
+    });
+  });
+
+  describe('Getter thumbnail', () => {
+    it('should return correct thumbnail path', () => {
+      component.thumbnailSrc = 'test-image';
+      expect(component.thumbnail).toBe('/assets/images/test-image.png');
+    });
+
+    it('should return path with empty filename when thumbnailSrc is empty', () => {
+      component.thumbnailSrc = '';
+      expect(component.thumbnail).toBe('/assets/images/.png');
+    });
+  });
+
+  describe('Método playVideo', () => {
+    it('should set isPlaying to true', () => {
+      component.videoId = 'test-video-id';
+      component.playVideo();
+      expect(component.isPlaying).toBe(true);
+    });
+
+    it('should create safeVideoUrl when called', () => {
+      component.videoId = 'test-video-id';
+      component.playVideo();
+      expect(component.safeVideoUrl).toBeDefined();
+    });
+
+    it('should not recreate safeVideoUrl if already set', () => {
+      component.videoId = 'test-video-id';
+      component.playVideo();
+      const firstUrl = component.safeVideoUrl;
+      component.playVideo();
+      expect(component.safeVideoUrl).toBe(firstUrl);
+    });
+
+    it('should call sanitizer.bypassSecurityTrustResourceUrl', () => {
+      component.videoId = 'test-video-id';
+      component.playVideo();
+      expect(mockDomSanitizer.bypassSecurityTrustResourceUrl).toHaveBeenCalled();
+    });
+  });
+
+  describe('Método onImageError', () => {
+    it('should log error when image fails to load', () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+      const mockEvent = {} as Event;
+      
+      component.thumbnailSrc = 'broken-image';
+      component.onImageError(mockEvent);
+      
+      expect(consoleSpy).toHaveBeenCalledWith('Error loading thumbnail image:', '/assets/images/broken-image.png');
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Estados de reproducción', () => {
+    it('should start with isPlaying false', () => {
+      expect(component.isPlaying).toBe(false);
+    });
+
+    it('should change to playing state after playVideo', () => {
+      component.videoId = 'test';
+      component.playVideo();
+      expect(component.isPlaying).toBe(true);
+    });
+  });
+});

package/src/components-source/dropi-youtube-lazy-video/dropi-youtube-lazy-video.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, NO_ERRORS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { IconComponent } from '../icon/icon.component';
+
+@Component({
+  selector: 'dropi-youtube-lazy-video',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  schemas: [NO_ERRORS_SCHEMA],
+  templateUrl: './dropi-youtube-lazy-video.component.html',
+  styleUrls: ['./dropi-youtube-lazy-video.component.scss'],
+})
+export class DropiYoutubeLazyVideoComponent {
+  @Input() videoId!: string;
+  @Input() thumbnailSrc: string = '';
+  @Input() videoTitle: string = '';
+
+  isPlaying = false;
+  safeVideoUrl: SafeResourceUrl | null = null;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  get thumbnail(): string {
+    return `/assets/images/${this.thumbnailSrc}.png`;
+  }
+
+  playVideo(): void {
+    if (!this.safeVideoUrl) {
+      const timestamp = Date.now();
+      const url = `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1&enablejsapi=1&t=${timestamp}`;
+      this.safeVideoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+      console.log('Created video URL:', url);
+    }
+
+    this.isPlaying = true;
+  }
+
+  onImageError(event: Event): void {
+    console.error('Error loading thumbnail image:', this.thumbnail);
+    console.error('Event:', event);
+  }
+}

package/src/components-source/dropi-youtube-lazy-video/dropi-youtube-lazy-video.stories.ts

@@ -0,0 +1,125 @@
+/**
+ * @fileoverview YouTube Lazy Video component stories for Storybook
+ * @description A lazy-loading YouTube video component for improved performance
+ */
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { DropiYoutubeLazyVideoComponent } from '@app/ui/dropi-youtube-lazy-video/dropi-youtube-lazy-video.component';
+import { IconComponent } from '@app/ui/icon/icon.component';
+
+const meta: Meta<DropiYoutubeLazyVideoComponent> = {
+  title: 'UI Dropi/YouTube Lazy Video',
+  component: DropiYoutubeLazyVideoComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [IconComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=YOUTUBE-VIDEO-NODE-ID&m=dev',
+    },
+    docs: {
+      description: {
+        component: `
+# YouTube Lazy Video Component
+
+A lazy-loading YouTube video embed component for improved application performance.
+
+## Key Features
+- **Lazy loading**: iframe only loads when user clicks play
+- **Customizable thumbnail**: Specify preview image quality
+- **Autoplay**: Video plays automatically on click
+- **Responsive**: Adapts to different screen sizes with 16:9 ratio
+- **Performance optimization**: Reduces initial page weight by loading only thumbnails
+
+## Benefits
+- **Better performance**: Does not load YouTube iframe until necessary
+- **Bandwidth saving**: Only consumes data when user wants to watch
+- **Improved UX**: Smooth transition between thumbnail and video
+- **SEO friendly**: Includes titles and alt attributes for accessibility
+
+## Basic Usage
+\`\`\`html
+<dropi-youtube-lazy-video
+  [videoId]="'dQw4w9WgXcQ'"
+  [thumbnailSrc]="'maxresdefault'"
+  [videoTitle]="'Usage tutorial'">
+</dropi-youtube-lazy-video>
+\`\`\`
+
+## Properties
+- **videoId**: YouTube video ID (final part of the video URL)
+- **thumbnailSrc**: Preview image path ('/assets/images/maxresdefault.png', etc.)
+- **videoTitle**: Descriptive video title for accessibility
+
+## Thumbnail
+Save thumbnails in \`/assets/images/\` folder and pass the image name as argument:
+e.g., for a thumbnail named \`hqdefault.png\`, pass \`[thumbnailSrc]="'hqdefault'"\`
+
+## Use Cases
+- **Landing pages**: Present promotional videos without affecting performance
+        `,
+      },
+    },
+  },
+  argTypes: {
+    videoId: {
+      control: 'text',
+      description: 'ID del video de YouTube (parte final de la URL)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'hXlgIB7r6c0' },
+      },
+    },
+    thumbnailSrc: {
+      control: 'text',
+      description: 'Nombre de la miniatura del video ubicada en /assets/images/',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'thumb-video-academy.png' },
+      },
+    },
+    videoTitle: {
+      control: 'text',
+      description: 'Título descriptivo del video para accesibilidad',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiYoutubeLazyVideoComponent>;
+
+// Ejemplos principales
+export const Default: Story = {
+  args: {
+    videoId: 'hXlgIB7r6c0',
+    thumbnailSrc: 'thumb-video-academy',
+    videoTitle: 'Descubre Dropi Academy y Transforma tu vida.',
+  },
+  parameters: {
+    layout: 'centered',
+    viewport: {
+      defaultViewport: 'responsive',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 680px; max-width: 100%;">
+        <dropi-youtube-lazy-video
+          [videoId]="videoId"
+          [thumbnailSrc]="thumbnailSrc"
+          [videoTitle]="videoTitle">
+        </dropi-youtube-lazy-video>
+      </div>
+    `,
+  }),
+};

package/src/components-source/empty-state/empty-state.component.html

@@ -0,0 +1,30 @@
+<div class="container">
+  <div class="empty-container">
+    <!-- <img
+      class="empty-dropi-icon"
+      *ngIf="brandName === 'dropi'"
+      src="\assets\utils\logo-dropi-img-loader.png"
+      alt=""
+    /> -->
+    <dropi-ilustration-icon class="empty-dropi-icon" *ngIf="brandName === 'dropi'" [type]="'dropi' " [state]="dropiIcon"
+      ></dropi-ilustration-icon>
+    <div class="icon-container" *ngIf="brandName !== 'dropi'">
+      <app-icon name="Warning-circle" width="24px" color="Gray-Gray-500"></app-icon>
+    </div>
+    <div class="text-container">
+      <div *ngIf="title !== ''" class="empty-title Body-L-Medium">
+        {{ title | translate }}
+      </div>
+      <div class="description-container">
+        <div class="description Body-M-Regular">{{ description | translate }}</div>
+      </div>
+    </div>
+
+    <dropi-button
+      *ngIf="buttonText !== ''"
+      [text]="buttonText | translate"
+      [severity]="buttonSeverity"
+      (onClick)="buttonClick()"
+    ></dropi-button>
+  </div>
+</div>

package/src/components-source/empty-state/empty-state.component.scss

@@ -0,0 +1,76 @@
+.description {
+  color: var(--Gray-500, #69738c);
+  text-align: center;
+  max-width: 400px;
+  align-self: stretch;
+  width: 100%;
+}
+
+.icon-container {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--Size-7, 40px);
+  background: var(--GrayGray-50, #f7f8fa);
+}
+
+.empty-dropi-icon {
+  height: 60px;
+  flex-shrink: 0;
+  width: 60px;
+  filter: brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%);
+}
+
+.empty-container {
+  display: flex;
+  width: 420px;
+  padding: var(--Size-4, 16px);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-4, 16px);
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.description-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  align-self: stretch;
+}
+.empty-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  align-self: stretch;
+  overflow: hidden;
+  color: var(--Gray-Gray-700, #32394d);
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+@media screen and (max-width: 600px) {
+  .description {
+    max-width: calc(100vw - 32px);
+    width: 100%;
+  }
+}