@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/date-picker-range/date-picker-range.component.ts

@@ -1,254 +1,61 @@
 import {
   Component,
-  OnInit,
-  forwardRef,
   Input,
   Output,
   EventEmitter,
-  OnChanges,
-  SimpleChanges,
-  Renderer2,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { ButtonModule } from 'primeng/button';
-import { SharedModule } from 'primeng/api';
-import { CalendarModule } from 'primeng/calendar';
-import { NgIf, NgClass, NgFor } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
 
 @Component({
-  selector: 'app-date-picker-range',
-  templateUrl: './date-picker-range.component.html',
-  styleUrls: ['./date-picker-range.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DatePickerRangeComponent),
-      multi: true,
-    },
-  ],
+  selector: "app-date-picker-range",
   standalone: true,
-  imports: [
-    NgIf,
-    NgClass,
-    CalendarModule,
-    FormsModule,
-    SharedModule,
-    NgFor,
-    ButtonModule,
-    TranslateModule,
-  ],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./date-picker-range.component.html",
+  styleUrls: ["./date-picker-range.component.scss"],
 })
-export class DatePickerRangeComponent implements OnInit, OnChanges, ControlValueAccessor {
-  @Input() startDate: string;
-  @Input() showLabel: boolean = true;
-  @Input() placeholder: string = '';
-  @Input() endDate: string;
-  @Input() limit: number = 0;
-  @Input() minDateLimit: string;
-  @Input() maxDateLimit: string;
-  @Input() loading: boolean = false;
-  @Input() setRight: boolean = false;
-  @Input() maxDaysRange: number = 0;
-  @Input() appendTo: string = '';
-
-  @Output() startDateChange = new EventEmitter<Date>();
-  @Output() endDateChange = new EventEmitter<Date>();
-
-  viewRangeWarning: boolean = false;
-
-  CalendarTypeView: 'date' | 'month' | 'year' | null = null;
-  isDateView = true;
-  dateRange: Date[] | undefined;
-  ranges: any[];
-  locale: any;
-  activeRangeIndex: number | null = null;
-  maxDate: Date;
-  minDate: Date;
-
-  onChange: any = () => {};
-  onTouch: any = () => {};
-
-  constructor(private renderer: Renderer2) {
-    this.ranges = [
-      { label: 'today range', value: [new Date(), new Date()] },
-      {
-        label: 'last 7 days',
-        value: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],
-      },
-      {
-        label: 'last 30 days',
-        value: [new Date(new Date().setDate(new Date().getDate() - 29)), new Date()],
-      },
-      {
-        label: 'last 90 days',
-        value: [new Date(new Date().setDate(new Date().getDate() - 89)), new Date()],
-      },
-    ];
-
-    this.locale = {
-      firstDayOfWeek: 1,
-      dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
-      dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
-      dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
-      monthNames: [
-        'Enero',
-        'Febrero',
-        'Marzo',
-        'Abril',
-        'Mayo',
-        'Junio',
-        'Julio',
-        'Agosto',
-        'Septiembre',
-        'Octubre',
-        'Noviembre',
-        'Diciembre',
-      ],
-      monthNamesShort: [
-        'Ene',
-        'Feb',
-        'Mar',
-        'Abr',
-        'May',
-        'Jun',
-        'Jul',
-        'Ago',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dic',
-      ],
-      today: 'Hoy',
-      clear: 'Borrar',
-    };
-  }
-
-  ngOnInit() {
-    this.updateDateRange();
-    this.updateDateLimits();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['startDate'] || changes['endDate']) {
-      if (this.maxDaysRange !== 0 && this.dateRange!) {
-        if (this.dateRange.length === 2) {
-          const [startDate, endDate] = this.dateRange;
-          if (startDate! && endDate!) {
-            const timeDifference = Math.abs(endDate.getTime() - startDate.getTime());
-            const dayDifference = timeDifference / (1000 * 3600 * 24);
-            if (dayDifference > this.maxDaysRange) {
-              this.viewRangeWarning = true;
-            } else {
-              this.viewRangeWarning = false;
-            }
-          }
-        }
-      }
-      this.updateDateRange();
-    }
-    if (changes['limit'] || changes['minDateLimit'] || changes['maxDateLimit']) {
-      this.updateDateLimits();
-    }
-  }
-
-  updateDateRange() {
-    if (this.startDate && this.endDate) {
-      this.dateRange = [new Date(this.startDate), new Date(this.endDate)];
-      this.checkActiveRange();
-    }
-  }
-
-  updateDateLimits() {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-
-    if (this.limit === 0) {
-      this.maxDate = today;
-    } else {
-      this.maxDate = new Date(today.setDate(today.getDate() + this.limit));
-    }
-
-    if (this.minDateLimit) {
-      this.minDate = new Date(this.minDateLimit);
-    }
-
-    if (this.maxDateLimit) {
-      const maxDateFromLimit = new Date(this.maxDateLimit);
-      if (maxDateFromLimit < this.maxDate) {
-        this.maxDate = maxDateFromLimit;
-      }
-    }
-  }
-
-  writeValue(value: any): void {
-    if (value) {
-      this.dateRange = value;
-      this.checkActiveRange();
-    }
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  onSelect(event: any) {
+export class DatePickerRangeComponent implements OnInit {
+  @Input() public setRight: boolean = false;
+  @Input() public loading: boolean = false;
+  @Input() public showLabel: boolean = true;
+  @Input() public placeholder: string = "";
+  @Input() public appendTo: string = "body";
+  @Input() public maxDate: any;
+  @Input() public minDate: any;
+
+  public dateRange: any[] = [];
+  public CalendarTypeView: string | null = null;
+  public ranges: any[] = [
+    { label: "today", value: [new Date(), new Date()] },
+    { label: "last 7 days", value: [new Date(), new Date()] },
+  ];
+  public activeRangeIndex: number | null = null;
+  public viewRangeWarning: boolean = false;
+  public calendar: any; // Para el template variable
+
+  @Output() public startDateChange = new EventEmitter<any>();
+  @Output() public endDateChange = new EventEmitter<any>();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  public onSelect(event: any): void {
     if (this.dateRange && this.dateRange.length === 2) {
       this.startDateChange.emit(this.dateRange[0]);
       this.endDateChange.emit(this.dateRange[1]);
     }
-    this.onChange(this.dateRange);
-    this.onTouch();
-    this.checkActiveRange();
   }
 
-  selectRange(range: any, index: number) {
+  public checkCalendarView(calendar: any): void {}
+
+  public selectRange(range: any, index: number): void {
     this.dateRange = range.value;
-    this.startDateChange.emit(this.dateRange[0]);
-    this.endDateChange.emit(this.dateRange[1]);
-    this.onChange(this.dateRange);
-    this.onTouch();
     this.activeRangeIndex = index;
-  }
-
-  checkActiveRange() {
-    if (
-      !this.dateRange ||
-      this.dateRange.length !== 2 ||
-      !this.dateRange[0] ||
-      !this.dateRange[1]
-    ) {
-      this.activeRangeIndex = null;
-      return;
-    }
-
-    const start = this.dateRange[0] instanceof Date ? this.dateRange[0].setHours(0, 0, 0, 0) : null;
-    const end = this.dateRange[1] instanceof Date ? this.dateRange[1].setHours(0, 0, 0, 0) : null;
-
-    this.activeRangeIndex = this.ranges.findIndex((range) => {
-      const rangeStart = range.value[0].setHours(0, 0, 0, 0);
-      const rangeEnd = range.value[1].setHours(0, 0, 0, 0);
-      return start === rangeStart && end === rangeEnd;
-    });
-  }
-
-  checkCalendarView(calendar: any) {
-    alert(this.isDateView);
-    // Verifica si el componente está en la vista de selección de día, mes o año
-    const isMonthOrYearView =
-      calendar.overlay?.querySelector('.p-datepicker-monthpicker') ||
-      calendar.overlay?.querySelector('.p-datepicker-yearpicker');
-    this.isDateView = !isMonthOrYearView;
-
-    console.log(this.CalendarTypeView);
-  }
-
-  showCalendar() {
-    const input = this.renderer.selectRootElement('#date-range', true);
-    input.click();
+    this.onSelect(null);
   }
 }

package/src/components-source/dropi-banner-external/dropi-banner-external.component.ts

@@ -2,203 +2,42 @@ import {
   Component,
   Input,
   OnInit,
-  Output,
-  EventEmitter,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { forkJoin, of } from 'rxjs';
-
-import { WordpressDropiService } from 'src/app/services/wordpress-dropi.service';
-import { IconComponent } from '../icon/icon.component';
-import { BettaTesterService } from '@app/services/betta-tester.service';
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'app-dropi-banner-external',
+  selector: "app-dropi-banner-external",
   standalone: true,
-  imports: [CommonModule, IconComponent],
-  templateUrl: './dropi-banner-external.component.html',
-  styleUrls: ['./dropi-banner-external.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-banner-external.component.html",
+  styleUrls: ["./dropi-banner-external.component.scss"],
 })
-export class DropiBannerExternalComponent implements OnInit, OnChanges {
-  banners: any[] = [];
-  @Input() slugName!: string; // slug requerido
-  @Output() bannerClick = new EventEmitter<any>();
-  @Output() isVisible = new EventEmitter<boolean>();
-  /**
-   * Si es true: se muestra para TODAS las marcas (Dropi y white label).
-   * Si es false: SOLO se muestra para la marca Dropi.
-   */
-  @Input() viewOnWhiteBrand: boolean = false;
-  /**
-   * Lista de países (nombre) donde se permite mostrar el banner.
-   * Si está vacío o undefined => se muestra en TODOS los países.
-   * Si tiene valores => se muestra solo si el país actual está en la lista (usando viewOnlyCountry()).
-   */
-  @Input() viewOnlyCountries: string[] = [];
-
-  banner: any | null = null; // banner seleccionado
-  hasLink = false;
-  loading = false;
-  error: string | null = null;
-  imageUrls: { large?: string; medium?: string; tablet?: string; mobile?: string } = {};
-  backgroundColor = 'transparent';
+export class DropiBannerExternalComponent implements OnInit {
+  public imageUrls: any = { large: "", medium: "", tablet: "", mobile: "" };
+  public banner: any = { title: { rendered: "" }, acf: { slug: "" } };
+  public loading: boolean = false;
+  public backgroundColor: string = "transparent";
+  public hasLink: boolean = false;
 
   constructor(
-    private wordpressService: WordpressDropiService,
-    private bettaTesterService: BettaTesterService,
+    @Inject("WordpressService") private wordpressService: any,
+    @Inject("BettaTesterService") private bettaTesterService: any,
   ) {}
 
-  ngOnInit(): void {
-    if (this.slugName) {
-      this.loadBanners();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['slugName'] && !changes['slugName'].firstChange) {
-      this.loadBanners();
-    }
-  }
-
-  private setInvisible(reason?: string) {
-    if (reason) {
-      console.debug('[DropiBannerExternal] No visible:', reason);
-    }
-    this.banner = null;
-    this.hasLink = false;
-    this.isVisible.emit(false);
-  }
+  ngOnInit(): void {}
 
-  /**
-   * Reglas solicitadas:
-   *  - viewOnWhiteBrand = false => solo Dropi
-   *  - viewOnWhiteBrand = true  => todas las marcas
-   * Se asegura invocar isDropiBrand() antes de cualquier otra validación.
-   */
-  private canShowForCurrentBrand(isDropi: boolean): boolean {
-    if (this.viewOnWhiteBrand) return true; // mostrar a todos
-    return isDropi; // restringido a Dropi
+  public getImageFallback(): string {
+    return "";
   }
 
-  /**
-   * Validación por país:
-   *  - Si viewOnlyCountries está vacío => permitir todos.
-   *  - Si tiene elementos => usar bettaTesterService.viewOnlyCountry(viewOnlyCountries)
-   */
-  private canShowForCurrentCountry(): boolean {
-    if (!this.viewOnlyCountries || this.viewOnlyCountries.length === 0) return true;
-    try {
-      return this.bettaTesterService.viewOnlyCountry(this.viewOnlyCountries);
-    } catch (e) {
-      console.warn('[DropiBannerExternal] Error al validar país', e);
-      return false;
-    }
+  public getActionLink(): string {
+    return "#";
   }
 
-  loadBanners(): void {
-    this.loading = true;
-    this.error = null;
-    this.setInvisible(); // reset inicial
+  public onClickBanner(event: any): void {}
 
-    // Aseguramos llamada temprana (puede tener efectos secundarios internos)
-    const isDropi = this.bettaTesterService.isDropiBrand();
-
-    // Validar marca
-    if (!this.canShowForCurrentBrand(isDropi)) {
-      this.setInvisible('Solo visible para marca Dropi');
-      this.loading = false;
-      return;
-    }
-
-    // Validar país
-    if (!this.canShowForCurrentCountry()) {
-      this.setInvisible('País no permitido para este banner');
-      this.loading = false;
-      return;
-    }
-
-    this.wordpressService.getBanners(this.slugName).subscribe(
-      (data) => {
-        this.banners = Array.isArray(data) ? data : [];
-        const banner = this.banners.find((b: any) => b?.acf && b.acf.slug === this.slugName);
-
-        if (!banner) {
-          this.setInvisible('No se encontró banner con ese slug');
-          this.loading = false;
-          return;
-        }
-        if (!banner.acf?.estado) {
-          this.setInvisible('Banner con estado=false');
-          this.loading = false;
-          return;
-        }
-
-        this.banner = banner;
-        this.hasLink = !!this.extractLink();
-        this.backgroundColor = this.banner.acf?.background || 'transparent';
-        this.resolveImages();
-        this.isVisible.emit(true);
-        this.loading = false;
-      },
-      (error) => {
-        console.error('Error al cargar los banners:', error);
-        this.error = 'Error al cargar los banners';
-        this.setInvisible('Error de carga');
-        this.loading = false;
-      },
-    );
-  }
-
-  private resolveImages() {
-    if (!this.banner?.acf) return;
-    const sizes: Array<keyof typeof this.imageUrls> = ['large', 'medium', 'tablet', 'mobile'];
-    const calls: { [k: string]: any } = {};
-    sizes.forEach((size) => {
-      const val = this.banner.acf[size];
-      if (!val) return;
-      if (typeof val === 'number') {
-        calls[size] = this.wordpressService.getImageUrl(val);
-      } else if (typeof val === 'string') {
-        calls[size] = of(val);
-      }
-    });
-    if (Object.keys(calls).length === 0) return;
-    forkJoin(calls).subscribe((res: any) => {
-      this.imageUrls = res;
-    });
-  }
-
-  private extractLink(): string | null {
-    const link = this.banner?.acf?.link_de_la_accion;
-    if (!link) return null;
-    if (typeof link === 'string') return link;
-    if (typeof link === 'object') return link.url || null;
-    return null;
-  }
-
-  getActionLink(): string | null {
-    return this.extractLink();
-  }
-
-  onClickBanner(event: Event): void {
-    if (!this.banner) return;
-    if (!this.hasLink) {
-      event.preventDefault();
-      this.bannerClick.emit(this.banner);
-    }
-  }
-
-  getImageFallback(): string {
-    if (!this.banner?.acf) return '';
-    const { mobile, tablet, medium, large } = this.imageUrls;
-    return mobile || tablet || medium || large || '';
-  }
-
-  closeBanner() {
-    this.setInvisible('Cerrado por usuario');
-    this.isVisible.emit(false);
-    this.loading = false;
-  }
+  public closeBanner(): void {}
 }

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

@@ -2,8 +2,17 @@
   <div class="crumb-list">
     <!-- HOME: solo ícono -->
     <div class="crumb-home">
-      <a [routerLink]="homeRoute" class="home-link" aria-label="Inicio">
-        <app-icon [name]="homeIconName" width="16px" color="Gray-Gray-500"></app-icon>
+      <a
+        (click)="navigate(null, true)"
+        class="home-link"
+        aria-label="Inicio"
+        style="cursor: pointer"
+      >
+        <app-icon
+          [name]="homeIconName"
+          width="16px"
+          color="Gray-Gray-500"
+        ></app-icon>
       </a>
 
       <app-icon
@@ -18,39 +27,30 @@
     <div *ngFor="let it of items; let last = last" class="crumb">
       <!-- Si NO es el último (o sí, pero queremos que sea clicable) -->
       <ng-container *ngIf="!last || lastItemClickable; else current">
-        <!-- Interno con RouterLink -->
+        <!-- Interno con Navegación -->
         <a
-          *ngIf="it.routerLink; else maybeExternal"
-          [routerLink]="it.routerLink"
-          [queryParams]="it.queryParams || null"
-          [fragment]="it.fragment || null"
+          *ngIf="it.command || it.url; else plain"
+          (click)="navigate(it)"
           [class.disabled]="it.disabled"
           class="crumb-link Body-S-Regular"
+          style="cursor: pointer"
         >
           {{ it.label | translate }}
         </a>
 
-        <!-- Enlace externo (opcional) -->
-        <ng-template #maybeExternal>
-          <a
-            class="crumb-link Body-S-Regular"
-            *ngIf="it.url; else plain"
-            [href]="it.url"
-            [class.disabled]="it.disabled"
-          >
-            {{ it.label | translate }}
-          </a>
-        </ng-template>
-
         <!-- Sin destino / deshabilitado -->
         <ng-template #plain>
-          <span class="disabled Body-S-Regular">{{ it.label | translate }}</span>
+          <span class="disabled Body-S-Regular">{{
+            it.label | translate
+          }}</span>
         </ng-template>
       </ng-container>
 
       <!-- Último como “actual” por defecto -->
       <ng-template #current>
-        <span class="current Body-S-Regular" aria-current="page">{{ it.label | translate }}</span>
+        <span class="current Body-S-Regular" aria-current="page">{{
+          it.label | translate
+        }}</span>
       </ng-template>
 
       <app-icon

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

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { anyTestingModule } from ' /testing';
 import { DropiBreadcrumbComponent, BreadcrumbItem } from './dropi-breadcrumb.component';
 import { IconComponent } from '../icon/icon.component';
 import { TranslateModule } from '@ngx-translate/core';
@@ -15,7 +15,7 @@ describe('DropiBreadcrumbComponent', () => {
       imports: [
         DropiBreadcrumbComponent,
         IconComponent,
-        RouterTestingModule,
+        anyTestingModule,
         TranslateModule.forRoot(),
       ],
       providers: [{ provide: DomSanitizer, useValue: mockDomSanitizer }],
@@ -53,18 +53,18 @@ describe('DropiBreadcrumbComponent', () => {
       expect(component.items[0].label).toBe('Home');
     });
 
-    it('should accept items with routerLink', () => {
+    it('should accept items with  (click)', () => {
       const items: BreadcrumbItem[] = [
-        { label: 'Home', routerLink: '/home' },
-        { label: 'Products', routerLink: '/products' },
+        { label: 'Home',  (click): '/home' },
+        { label: 'Products',  (click): '/products' },
       ];
       component.items = items;
-      expect(component.items[0].routerLink).toBe('/home');
+      expect(component.items[0]. (click)).toBe('/home');
     });
 
     it('should accept items with disabled property', () => {
       const items: BreadcrumbItem[] = [
-        { label: 'Home', routerLink: '/home' },
+        { label: 'Home',  (click): '/home' },
         { label: 'Current Page', disabled: true },
       ];
       component.items = items;
@@ -73,14 +73,14 @@ describe('DropiBreadcrumbComponent', () => {
 
     it('should accept items with queryParams', () => {
       const items: BreadcrumbItem[] = [
-        { label: 'Products', routerLink: '/products', queryParams: { category: 'electronics' } },
+        { label: 'Products',  (click): '/products', queryParams: { category: 'electronics' } },
       ];
       component.items = items;
       expect(component.items[0].queryParams).toEqual({ category: 'electronics' });
     });
 
     it('should accept items with fragment', () => {
-      const items: BreadcrumbItem[] = [{ label: 'Section', routerLink: '/page', fragment: 'section1' }];
+      const items: BreadcrumbItem[] = [{ label: 'Section',  (click): '/page', fragment: 'section1' }];
       component.items = items;
       expect(component.items[0].fragment).toBe('section1');
     });