@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

package/src/lib/date-hour-picker/date-hour-picker.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DateHourPickerComponent } from './date-hour-picker.component';
-
-describe('DateHourPickerComponent', () => {
-  let component: DateHourPickerComponent;
-  let fixture: ComponentFixture<DateHourPickerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DateHourPickerComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(DateHourPickerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/date-hour-picker/date-hour-picker.component.ts

@@ -1,317 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
-import { CdkConnectedOverlay, OverlayModule, ConnectedPosition, ScrollStrategy, Overlay } from '@angular/cdk/overlay';
-import { IconMdComponent } from '../icon-md/icon-md.component';
-import { SimpleDividerComponent } from '../simple-divider/simple-divider.component';
-import { ButtonStandardTertiaryComponent } from '../button-standard-tertiary/button-standard-tertiary.component';
-
-@Component({
-  selector: 'ius-date-hour-picker',
-  standalone: true,
-  imports: [
-    CommonModule,
-    OverlayModule, // ✅ CDK Overlay
-    IconMdComponent,
-    SimpleDividerComponent,
-    ButtonStandardTertiaryComponent,
-  ],
-  templateUrl: './date-hour-picker.component.html',
-  styleUrl: './date-hour-picker.component.scss',
-})
-export class DateHourPickerComponent {
-  @Input() label = 'Fecha y hora';
-  @Input() placeholder = 'Seleccione una fecha y hora';
-  @Input() error = false;
-  @Input() helpText = '';
-  @Input() helpTextError = '';
-  @Input() errorText?: string;
-  @Input() disabled = false;
-  @Input() iconHelp = false;
-  @Input() isRequired = true;
-  @Input() mode: 'date-only' | 'time-only' | 'date-time' = 'date-time';
-
-  @Output() dateSelected = new EventEmitter<string>();
-  @Output() onBlurEvent = new EventEmitter<void>();
-
-  @ViewChild(CdkConnectedOverlay) private connectedOverlay!: CdkConnectedOverlay;
-
-  readonly dayLabels = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
-  readonly months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
-  readonly yearsArray = Array.from({ length: 12 }, (_, i) => i);
-
-  readonly hours = Array.from({ length: 12 }, (_, i) => i + 1); // 01 a 12
-  readonly minutes = Array.from({ length: 60 }, (_, i) => i);   // 00 a 59
-
-  selectedDate: Date | null = null;
-  selectedHour = 1;
-  selectedMinute = 0;
-  selectedPeriod: 'AM' | 'PM' = 'PM';
-  isAlertText = false;
-
-  viewDate = new Date();
-  calendarOpen = false;
-  focused = false;
-  calendarView: 'day' | 'month' | 'year' = 'day';
-  calendarDays: Date[] = [];
-
-  // Posiciones preferidas del overlay: izquierda abajo, derecha abajo, izquierda arriba, derecha arriba
-  overlayPositions: ConnectedPosition[] = [
-    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
-    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
-    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
-  ];
-
-  scrollStrategy!: ScrollStrategy;
-
-  constructor(
-    private elRef: ElementRef
-    // private overlay: Overlay
-  ) { }
-
-  ngOnInit(): void {
-    // this.scrollStrategy = this.overlay.scrollStrategies.reposition();
-
-    this.generateCalendarDays();
-    this.updateLabelAndPlaceholder();
-  }
-
-  private updateLabelAndPlaceholder(): void {
-    switch (this.mode) {
-      case 'date-only':
-        this.label = this.label.replace('Fecha y hora', 'Fecha');
-        this.placeholder = this.placeholder.replace('fecha y hora', 'fecha');
-        break;
-      case 'time-only':
-        this.label = this.label.replace('Fecha y hora', 'Hora');
-        this.placeholder = this.placeholder.replace('fecha y hora', 'hora');
-        break;
-      case 'date-time':
-      default:
-        break;
-    }
-  }
-
-  toggleCalendar(): void {
-    if (this.disabled) return;
-    if (!this.calendarOpen) {
-      this.calendarView = 'day';
-      this.isAlertText = false;
-      this.focused = true;
-      this.calendarOpen = true;
-      return;
-    }
-    this.emitSelection(true);
-    this.focused = false;
-  }
-
-  goToToday(): void {
-    const now = new Date();
-    this.selectedHour = now.getHours() % 12 || 12;
-    this.selectedMinute = now.getMinutes();
-    this.selectedPeriod = now.getHours() < 12 ? 'AM' : 'PM';
-
-    this.viewDate = now;
-
-    this.emitSelection(this.mode !== 'time-only' ? false : true);
-  }
-
-  selectTime(): void {
-    if (this.mode === 'time-only') {
-      this.emitSelection(true);
-    } else {
-      this.emitSelection(false);
-    }
-  }
-
-  getDisplayValue(): string {
-    if (!this.selectedDate) return '';
-
-    switch (this.mode) {
-      case 'date-only':
-        return this.selectedDate.toLocaleDateString('es-ES', {
-          day: '2-digit',
-          month: '2-digit',
-          year: 'numeric'
-        });
-      case 'time-only':
-        return this.selectedDate.toLocaleTimeString('es-ES', {
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: true
-        });
-      case 'date-time':
-      default:
-        return this.selectedDate.toLocaleString('es-ES', {
-          day: '2-digit',
-          month: '2-digit',
-          year: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: true
-        });
-    }
-  }
-
-  nextView(view: 'day' | 'month' | 'year'): 'day' | 'month' | 'year' {
-    return view === 'day' ? 'month' : view === 'month' ? 'year' : 'day';
-  }
-
-  prev(): void {
-    this.shiftViewDate(-1);
-    this.generateCalendarDays();
-  }
-
-  next(): void {
-    this.shiftViewDate(1);
-    this.generateCalendarDays();
-  }
-
-  private shiftViewDate(step: number): void {
-    const year = this.viewDate.getFullYear();
-    const month = this.viewDate.getMonth();
-
-    if (this.calendarView === 'day') {
-      this.viewDate = new Date(year, month + step, 1);
-    } else if (this.calendarView === 'month') {
-      this.viewDate = new Date(year + step, month, 1);
-    } else {
-      this.viewDate = new Date(year + step * 10, month, 1);
-    }
-  }
-
-  selectDate(date: Date, open: boolean): void {
-    this.viewDate = new Date(date);
-    const hour = this.selectedPeriod === 'AM'
-      ? this.selectedHour % 12
-      : (this.selectedHour % 12) + 12;
-
-    const selected = new Date(
-      date.getFullYear(),
-      date.getMonth(),
-      date.getDate(),
-      hour,
-      this.selectedMinute
-    );
-
-    this.selectedDate = selected;
-    this.focused = false;
-    this.isAlertText = false;
-
-    this.emitSelection(!open);
-
-    if (open) {
-      this.calendarOpen = true;
-    }
-  }
-
-
-  setMonth(month: number): void {
-    this.viewDate.setMonth(month);
-    this.calendarView = 'day';
-    this.generateCalendarDays();
-  }
-
-  setYear(year: number): void {
-    this.viewDate.setFullYear(year);
-    this.calendarView = 'month';
-    this.generateCalendarDays();
-  }
-
-  getMonthName(index: number): string {
-    return this.months[index];
-  }
-
-  getDecadeStart(): number {
-    return Math.floor(this.viewDate.getFullYear() / 10) * 10;
-  }
-
-  isSameDate(d1: Date, d2: Date): boolean {
-    return d1.getDate() === d2.getDate() &&
-      d1.getMonth() === d2.getMonth() &&
-      d1.getFullYear() === d2.getFullYear();
-  }
-
-  generateCalendarDays(): void {
-    const days: Date[] = [];
-    const year = this.viewDate.getFullYear();
-    const month = this.viewDate.getMonth();
-
-    const firstDay = new Date(year, month, 1);
-    const offset = firstDay.getDay();
-    const startDate = new Date(year, month, 1 - offset);
-
-    for (let i = 0; i < 42; i++) {
-      const date = new Date(startDate);
-      date.setDate(startDate.getDate() + i);
-      days.push(date);
-    }
-
-    this.calendarDays = days;
-  }
-
-  closeCalendar(): void {
-    this.calendarOpen = false;
-    this.focused = false;
-    if (!this.selectedDate && this.isRequired) {
-      this.isAlertText = true;
-    } else {
-      this.isAlertText = false;
-    }
-    this.onBlurEvent.emit();
-  }
-
-  @HostListener('document:click', ['$event'])
-  handleOutsideClick(event: MouseEvent): void {
-    if (!this.calendarOpen) return;
-    const target = event.target as HTMLElement;
-
-    // Click dentro del panel overlay → no cerrar
-    const clickedInsideOverlay = this.connectedOverlay?.overlayRef?.overlayElement?.contains(target);
-    if (clickedInsideOverlay) return;
-
-    // Click dentro del trigger (.container-textfield) → toggleCalendar() lo maneja
-    const textfield = this.elRef.nativeElement.querySelector('.container-textfield') as HTMLElement;
-    if (textfield?.contains(target)) return;
-
-    // Cualquier otro click (label, fuera del componente, etc.) → cerrar
-    this.closeCalendar();
-  }
-
-
-  private buildSelectedDateFromState(): Date {
-    if (this.mode === 'date-only') {
-      const base = this.selectedDate ?? this.viewDate;
-      return new Date(base.getFullYear(), base.getMonth(), base.getDate(), 0, 0);
-    }
-
-    if (this.mode === 'time-only') {
-      const hour = this.selectedPeriod === 'AM' ? this.selectedHour % 12 : (this.selectedHour % 12) + 12;
-      const now = new Date();
-      return new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, this.selectedMinute);
-    }
-    const hour = this.selectedPeriod === 'AM' ? this.selectedHour % 12 : (this.selectedHour % 12) + 12;
-    const base = this.viewDate ?? new Date();
-    return new Date(base.getFullYear(), base.getMonth(), base.getDate(), hour, this.selectedMinute);
-  }
-
-  private emitSelection(closeCalendar: boolean): void {
-    const selected = this.buildSelectedDateFromState();
-    this.selectedDate = selected;
-
-    if (this.mode === 'date-only') {
-      const dateString = `${selected.getFullYear()}-${(selected.getMonth() + 1).toString().padStart(2, '0')}-${selected.getDate().toString().padStart(2, '0')}`;
-      this.dateSelected.emit(dateString);
-    } else if (this.mode === 'time-only') {
-      const timeString = `${selected.getHours().toString().padStart(2, '0')}:${selected.getMinutes().toString().padStart(2, '0')}:00`;
-      this.dateSelected.emit(timeString);
-    } else {
-      const dateString = `${selected.getFullYear()}-${(selected.getMonth() + 1).toString().padStart(2, '0')}-${selected.getDate().toString().padStart(2, '0')}T${selected.getHours().toString().padStart(2, '0')}:${selected.getMinutes().toString().padStart(2, '0')}:00`;
-      this.dateSelected.emit(dateString);
-    }
-
-    if (closeCalendar) {
-      this.calendarOpen = false;
-    }
-  }
-}

package/src/lib/date-hour-picker/index.ts

@@ -1,2 +0,0 @@
-export * from './date-hour-picker.component';
-

package/src/lib/date-picker/date-picker.component.html

@@ -1,121 +0,0 @@
-<div class="date-picker" [class.disabled]="disabled">
-  <div class="text">
-    @if (isRequired) {
-    <div class="required"></div>
-    }
-
-    <label class="label">{{ label }}</label>
-
-    @if (iconHelp) {
-    <div class="help-icon">
-      <ius-icon-md iconName="icon-help"></ius-icon-md>
-    </div>
-    }
-
-    <label class="label">:</label>
-  </div>
-
-  <div class="input-wrapper">
-    <div
-      class="container-textfield"
-      [ngClass]="{
-        disabled: disabled,
-        focused: calendarOpen || focused,
-        alert: !calendarOpen && error && !disabled,
-        selected: selectedDate
-      }"
-      (click)="toggleCalendar()"
-    >
-      <div class="input">
-        <input
-          [placeholder]="placeholder"
-          [value]="selectedDate ? (selectedDate | date : 'dd/MM/yyyy') : ''"
-          readonly
-          [disabled]="disabled"
-        />
-        <div class="cnt-icon-right">
-          <ius-icon-md iconName="icon-calendar-today"></ius-icon-md>
-        </div>
-      </div>
-    </div>
-
-    @if (calendarOpen) {
-    <div class="calendar-overlay">
-      <div class="mes">
-        <div class="calendar-header">
-          <ius-button-standard-tertiary
-            iconName="icon-keyboard-arrow-left"
-            (buttonClicked)="prev()"
-          ></ius-button-standard-tertiary>
-
-          <span (click)="calendarView = nextView(calendarView)">
-            @switch (calendarView) { @case ('day') {
-            {{ getMonthName(viewDate.getMonth()) }} {{ viewDate.getFullYear() }}
-            } @case ('month') {
-            {{ viewDate.getFullYear() }}
-            } @case ('year') {
-            {{ getDecadeStart() }}-{{ getDecadeStart() + 9 }}
-            } }
-          </span>
-
-          <ius-button-standard-tertiary
-            iconName="icon-keyboard-arrow-right"
-            (buttonClicked)="next()"
-          ></ius-button-standard-tertiary>
-        </div>
-
-        <div class="calendar-body">
-          @switch (calendarView) { @case ('day') {
-          <div class="grid days">
-            @for (day of dayLabels; track day) {
-            <div class="header">{{ day }}</div>
-            } @for (date of calendarDays; track date) {
-            <div
-              class="cell"
-              [class.selected]="selectedDate && isSameDate(date, selectedDate)"
-              [class.out-of-range]="date.getMonth() !== viewDate.getMonth()"
-              (click)="selectDate(date)"
-            >
-              {{ date.getDate() }}
-            </div>
-            }
-          </div>
-          } @case ('month') {
-          <div class="grid months">
-            @for (m of months; track m; let i = $index) {
-            <div class="cell" (click)="setMonth(i)">{{ m }}</div>
-            }
-          </div>
-          } @case ('year') {
-          <div class="grid years">
-            @for (i of yearsArray; track i) {
-            <div
-              class="cell"
-              [class.out-of-range]="i === 0 || i === 11"
-              (click)="setYear(getDecadeStart() - 1 + i)"
-            >
-              {{ getDecadeStart() - 1 + i }}
-            </div>
-            }
-          </div>
-          } }
-        </div>
-      </div>
-
-      <ius-simple-divider></ius-simple-divider>
-
-      <button class="today" (click)="goToToday()">Fecha actual</button>
-    </div>
-    }
-  </div>
-  @if (helpText && focused && !error) {
-    <div class="help-text">
-      {{helpText}}
-    </div>
-  }
-  @if (helpTextError && error) {
-    <div class="help-text-error">
-      {{helpTextError}}
-    </div>
-  }
-</div>