@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,317 @@
+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

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

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

@@ -0,0 +1,121 @@
+<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>