@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/country-flags/country-flags.component.ts

@@ -1,18 +1,26 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { COUNTRIES } from 'src/app/constants/constants';
+import {
+  Component,
+  Input,
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'app-country-flags',
+  selector: "app-country-flags",
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './country-flags.component.html',
-  styleUrls: ['./country-flags.component.scss'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./country-flags.component.html",
+  styleUrls: ["./country-flags.component.scss"],
 })
-export class CountryFlagsComponent {
-  @Input() country: string;
-  @Input() style: string;
-  @Input() height: string | Number;
-  @Input() width: string | Number;
+export class CountryFlagsComponent implements OnInit {
+  @Input() public country: string = "";
+  @Input() public width: number = 24;
+  @Input() public height: number = 24;
+  @Input() public style: string = "rectangle";
+
+  public countries: any[] = [];
+
+  ngOnInit(): void {}
 }

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

@@ -1,313 +1,53 @@
-import { AnimationEvent } from '@angular/animations';
-import { CommonModule } from '@angular/common';
 import {
   Component,
-  forwardRef,
   Input,
   Output,
   EventEmitter,
-  ViewChild,
-  TemplateRef,
-  EmbeddedViewRef,
   OnInit,
-  NgZone,
-} from '@angular/core';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CalendarModule } from 'primeng/calendar';
-import { NgPrimeModule } from '@app/ngprime.module';
-import { IconComponent } from '../icon/icon.component';
-
-/**
- * Componente que renderiza un calendario para seleccionar fechas.
- * Soporta la configuración de fechas mínima y máxima que se pueden seleccionar.
- * Permite mostrar un título flotante sobre el componente de fecha y un texto placeholder.
- * Emite eventos cuando se selecciona una nueva fecha y cuando se cierra el panel emergente del calendario.
- * @example
- * <app-date-picker [minDate]="new Date(2022, 0, 1)" [maxDate]="new Date(2022, 11, 31)"></app-date-picker>
- */
-
-interface FilterOption {
-  filter: string; // Texto descriptivo del filtro
-  value: string; // Valor técnico del filtro
-  group: string; // Grupo al que pertenece
-}
-type FilterGroup = Array<FilterOption>;
+  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',
+  selector: "app-date-picker",
   standalone: true,
-  imports: [CommonModule, CalendarModule, FormsModule, IconComponent],
-  templateUrl: './date-picker.component.html',
-  styleUrls: ['./date-picker.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => DatePickerComponent),
-      multi: true,
-    },
-  ],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./date-picker.component.html",
+  styleUrls: ["./date-picker.component.scss"],
 })
 export class DatePickerComponent implements OnInit {
-  @Input() showTime: boolean = false;
-  /**
-   * Establece la fecha mínima que se puede seleccionar.
-   * @example
-   * <app-date-picker [minDate]="new Date(2022, 0, 1)"/>
-   */
-  @Input() minDate: Date;
-
-  /**
-   * Establece la fecha máxima que se puede seleccionar.
-   * @example
-   * <app-date-picker [maxDate]="new Date(2022, 11, 31)"/>
-   */
-  @Input() maxDate: Date;
-
-  /**
-   * Indica si el componente está en estado de carga.
-   * Por defecto es false.
-   * @example
-   * <app-date-picker [loading]="true"/>
-   */
-  @Input() loading: boolean = false;
-
-  /**
-   * Establece la alineación del calendario emergente.
-   * Por defecto es false, lo que significa que el calendario se abrirá a la izquierda del input de fecha.
-   * Si se establece en true, el calendario se abrirá a la derecha del input de fecha.
-   * @example
-   * <app-date-picker [setRight]="true"/>
-   */
-  @Input() setRight: boolean = false;
-
-  /**
-   * Establece un título flotante sobre el componente de fecha.
-   * @example
-   * <app-date-picker [label]="'Fecha de nacimiento'"/>
-   */
-  @Input() label: string = null;
-
-  /**
-   * Texto que se mostrará en el input de fecha si no se ha seleccionado una fecha.
-   * Por defecto es null, lo que significa que se mostrará el texto "DD/MM/YYYY".
-   * @example
-   * <app-date-picker [placeholder]="'Seleccione una fecha'"/>
-   */
-  @Input() placeholder: string = 'DD/MM/YYYY';
-
-  /**
-   * Establece si el componente de fecha debe mostrar un icono de calendario.
-   * Por defecto es false.
-   * @example
-   * <app-date-picker [showIcon]="true"/>
-   */
-  @Input() showIcon: boolean = false;
-
-  @Input() required: boolean = false;
-
-  /**
-   * Indica si el componente debe mostrar un estado de error.
-   * Por defecto es false.
-   * @example
-   * <app-date-picker [isInvalid]="true"/>
-   */
-  @Input() isInvalid: boolean = false;
-
-  // Indica si el componente debe estar deshabilitado.
-  @Input() disabled: boolean = false;
-
-  /**
-   * Indica si el componente debe mostrar un estado de error.
-   * Por defecto es false.
-   * @example
-   * <app-date-picker [isInvalid]="true"/>
-   */
-  @Input() selectionMode: string = 'single';
-
-  /**
-   * Indica si el componente debe mostrar un estado de error.
-   * Por defecto es false.
-   * @example
-   * <app-date-picker [isInvalid]="true"/>
-   */
-  @Input() filters: FilterGroup[] = [];
-
-  /**
-   * Evento que se dispara cuando se selecciona una nueva fecha.
-   * @example
-   * <app-date-picker (onChangeDate)="onChangeDate($event)"/>
-   */
-  @Output() onChangeDate = new EventEmitter<Date>();
-
-  /**
-   * Emite un evento cuando se cierra el panel emergente del calendario.
-   * El evento emitido contiene la animación que se está ejecutando en el momento de cerrar el panel.
-   * @example
-   * <app-date-picker (onClosePanel)="onClosePanel($event)"/>
-   */
-  @Output() onClosePanel = new EventEmitter<AnimationEvent>();
-
-  @Output() sendFilters = new EventEmitter<FilterOption>();
-  /**
-   * Define la fecha preseleccionada ( en caso de que cuando lo utilices, ya tengas una fecha estipulada)
-   * Por defecto es null.
-   * @example
-   * <app-date-picker [selectedDate]="new Date(2022, 11, 31)"/>
-   */
-  private _selectedDate: Date | Date[] = new Date();
-
-  /**
-   * Verifica si una fecha es válida
-   * @param date Fecha a validar
-   * @returns true si la fecha es válida, false en caso contrario
-   */
-  private isValidDate(date: Date): boolean {
-    return date instanceof Date && !isNaN(date.getTime());
-  }
-
-  @Input() set selectedDate(value: any) {
-    if (!this.selectionMode || this.selectionMode !== 'range') {
-      if (value === undefined || value === null || value === '' || value === 'Invalid Date') {
-        this._selectedDate = null;
-        return;
-      }
-      const parsedDate = new Date(value);
-      // Solo asignar si la fecha es válida
-      this._selectedDate = this.isValidDate(parsedDate) ? parsedDate : null;
-    } else if (this.selectionMode === 'range') {
-      if (value === undefined || value === null || value === '' || value === 'Invalid Date') {
-        this._selectedDate = [];
-        return;
-      }
-      // Asegurar que value sea un array para el rango
-      if (Array.isArray(value)) {
-        this._selectedDate = value.map((date) => {
-          if (!date || date === 'Invalid Date') return null;
-          const parsedDate = new Date(date);
-          return this.isValidDate(parsedDate) ? parsedDate : null;
-        });
-      } else {
-        // Si no es un array, crear un rango con la misma fecha en ambos extremos
-        const date = new Date(value);
-        if (this.isValidDate(date)) {
-          this._selectedDate = [date, date];
-        } else {
-          this._selectedDate = [];
-        }
-      }
-    }
-  }
-
-  @ViewChild('filtersTemplate') filtersTemplate!: TemplateRef<any>;
-  private filtersViewRef: EmbeddedViewRef<any> | null = null;
-
-  get selectedDate(): Date | Date[] {
-    // Tipo ajustado para coincidir con el setter
-    return this._selectedDate;
-  }
-
-  isDateView = true;
-  activeRangeIndex: number | null = null;
-  isSelectedFilter: boolean = false;
-
-  onChange: any = () => {};
-  onTouch: any = () => {};
-
-  constructor(private zone: NgZone) {}
+  @Input() public label: string | null = null;
+  @Input() public required: boolean = false;
+  @Input() public selectedDate: any = new Date();
+  @Input() public minDate: any;
+  @Input() public maxDate: any;
+  @Input() public showIcon: boolean = false;
+  @Input() public showTime: boolean = false;
+  @Input() public loading: boolean = false;
+  @Input() public isInvalid: boolean = false;
+  @Input() public placeholder: string = "DD/MM/YYYY";
+  @Input() public disabled: boolean = false;
+  @Input() public selectionMode: string = "single";
+  @Input() public setRight: boolean = false;
+  @Input() public filters: any[] = [];
+
+  @Output() public onChangeDate = new EventEmitter<any>();
+  @Output() public onClosePanel = new EventEmitter<any>();
+
+  constructor() {}
 
   ngOnInit(): void {}
 
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-
-  onSelect(event: Date) {
+  public onSelect(event: any): void {
     this.onChangeDate.emit(event);
-
-    this.onTouch();
   }
 
-  onClose(event: AnimationEvent) {
+  public onClose(event: any): void {
     this.onClosePanel.emit(event);
   }
 
-  writeValue(value: any): void {
-    // Usar el setter que ya tiene validación de fechas inválidas
-    this.selectedDate = value;
-  }
-
-  onCalendarOpen(event: any) {
-    if (this.filters.length > 0) {
-      const overlay = document.querySelector('.p-datepicker') as HTMLElement;
-
-      if (overlay) {
-        overlay.style.display = 'flex';
-        overlay.style.flexDirection = 'row';
-        overlay.style.alignItems = 'flex-start';
-        overlay.style.justifyContent = 'space-between';
-        overlay.style.gap = '1rem';
-
-        let filtersDiv = overlay.querySelector('.custom-filters') as HTMLElement;
-        if (!filtersDiv) {
-          filtersDiv = document.createElement('div');
-          filtersDiv.classList.add('custom-filters');
-          this.buildFilters(filtersDiv);
-          overlay.appendChild(filtersDiv);
-        }
-
-        // 👉 Observa cambios en el calendario
-        const observer = new MutationObserver(() => {
-          const isMonthPicker = !!overlay.querySelector('.p-monthpicker');
-          const isYearPicker = !!overlay.querySelector('.p-yearpicker');
-
-          if (isMonthPicker || isYearPicker) {
-            filtersDiv.style.display = 'none';
-          } else {
-            filtersDiv.style.display = 'block';
-          }
-        });
-
-        observer.observe(overlay, { childList: true, subtree: true });
-      }
-    }
-  }
-
-  // Método auxiliar
-  private buildFilters(filtersDiv: HTMLElement) {
-    this.filters.forEach((group) => {
-      let groupDiv = document.createElement('div');
-      groupDiv.classList.add('filtros');
-
-      let title = document.createElement('div');
-      title.classList.add('title-header');
-      title.textContent = group[0].group;
-      groupDiv.appendChild(title);
-
-      group.forEach((f) => {
-        let btn = document.createElement('button');
-        btn.textContent = f.filter;
-        btn.classList.add('filter-btn');
-
-        btn.addEventListener('click', () => {
-          this.zone.run(() => {
-            groupDiv.querySelectorAll('.filter-btn').forEach((b) => b.classList.remove('selected'));
-            btn.classList.add('selected');
-            this.sendFilters.emit(f);
-          });
-        });
-
-        groupDiv.appendChild(btn);
-      });
-
-      filtersDiv.appendChild(groupDiv);
-    });
-  }
-
-  ditributeFilters() {
-    this.filters;
-  }
+  public onCalendarOpen(event: any): void {}
 }

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

@@ -1,9 +1,15 @@
-<div [ngClass]="setRight ? '' : 'calendar-left'" class="date-picker-range" *ngIf="!loading">
-  <div *ngIf="showLabel" class="label">{{'date range'|translate}}</div>
+<div
+  [ngClass]="setRight ? '' : 'calendar-left'"
+  class="date-picker-range"
+  *ngIf="!loading"
+>
+  <div *ngIf="showLabel" class="label">{{ "date range" | translate }}</div>
   <p-calendar
     #calendarInputRef
     class="date-picker-input"
-    [panelStyleClass]="setRight ? 'dropi-custom-calendar' : 'dropi-custom-calendar calendar-left'"
+    [panelStyleClass]="
+      setRight ? 'dropi-custom-calendar' : 'dropi-custom-calendar calendar-left'
+    "
     [ngClass]="{ 'date-picker-input--open': loading }"
     [(ngModel)]="dateRange"
     selectionMode="range"
@@ -25,15 +31,17 @@
     <ng-template *ngIf="CalendarTypeView === null" pTemplate="header">
       <div class="custom-header">
         <button
-          pButton
           *ngFor="let range of ranges; let i = index"
           (click)="selectRange(range, i)"
-          label="{{ range.label |translate}}"
           class="p-button-text"
           [ngClass]="{ active: i === activeRangeIndex }"
-        ></button>
+        >
+          {{ range.label | translate }}
+        </button>
         <div *ngIf="viewRangeWarning" class="warning-box">
-          <span class="warning-message">Solo puedes filtrar en un rango máximo de 90 días.</span>
+          <span class="warning-message"
+            >Solo puedes filtrar en un rango máximo de 90 días.</span
+          >
         </div>
       </div>
     </ng-template>