@litigiovirtual/ius-design-components 1.0.264 → 1.0.267

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

@@ -0,0 +1,337 @@
+@use "@litigiovirtual/ius-design-styles/lib/colors" as colors;
+@use "@litigiovirtual/ius-design-styles/lib/typography" as typography;
+@use "@litigiovirtual/ius-design-styles/lib/variables" as variables;
+@use "@litigiovirtual/ius-design-styles/lib/semantic-colors" as semantic;
+
+.required {
+  width: 4px;
+  height: 4px;
+  margin-right: 4px;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  background-color: colors.$danger-500;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+}
+
+.date-picker {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .label {
+    margin: 0 4px;
+    color: semantic.$color-text-primary-on-light;
+    font: {
+      family: Rubik;
+      size: typography.$font-size-base;
+      weight: 500;
+      style: normal;
+    }
+    line-height: typography.$line-height-base;
+    letter-spacing: 0.28px;
+  }
+
+  .help-icon {
+    color: semantic.$color-text-secundary-on-light;
+  }
+
+  .container-textfield {
+    display: flex;
+    align-items: flex-start;
+    gap: variables.$spacing-xxs;
+
+    .input {
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      gap: variables.$spacing-xxs;
+      padding: variables.$spacing-sm;
+      border-radius: variables.$radius-md;
+      background: colors.$neutral-2;
+      cursor: pointer;
+      border: none;
+
+      input {
+        flex: 1;
+        outline: none;
+        border: none;
+        background: colors.$neutral-2;
+        color: semantic.$color-text-tertiary-on-light;
+        font: {
+          family: typography.$font-secondary;
+          size: typography.$font-size-base;
+          weight: 400;
+          style: normal;
+        }
+        line-height: typography.$line-height-base;
+        letter-spacing: 0.28px;
+        cursor: pointer;
+      }
+    }
+
+    .cnt-icon-right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: semantic.$color-text-primary-on-light;
+    }
+
+    &:hover .input {
+      background-color: colors.$info-100;
+
+      input {
+        background-color: colors.$info-100;
+      }
+
+      .cnt-icon-right {
+        color: colors.$info-900;
+      }
+    }
+
+    &.focused .input {
+      border: 1px solid colors.$primary-600;
+      background: colors.$info-100;
+
+      input {
+        background-color: colors.$info-100;
+        border: none;
+      }
+
+      .cnt-icon-right {
+        color: colors.$info-900;
+      }
+    }
+
+    &.alert {
+      .input {
+        border-radius: variables.$radius-md;
+        border: 1px solid colors.$danger-600;
+        background: colors.$danger-100;
+
+        input {
+          background: colors.$danger-100;
+        }
+
+        .cnt-icon-right {
+          color: colors.$danger-600;
+        }
+      }
+    }
+
+    &.selected {
+      .input {
+        background: colors.$neutral-2;
+
+        input {
+          background: colors.$neutral-2;
+          border: none;
+
+          color: semantic.$color-text-primary-on-light;
+
+          font-family: typography.$font-secondary;
+          font-size: typography.$font-size-base;
+          font-style: normal;
+          font-weight: 400;
+          line-height: typography.$line-height-base;
+          letter-spacing: 0.28px;
+        }
+
+        .cnt-icon-right {
+          color: semantic.$color-text-secundary-on-light;
+        }
+      }
+    }
+
+    &.disabled {
+      background: colors.$neutral-2;
+
+      input::placeholder {
+        color: semantic.$color-text-disabled-on-light;
+        opacity: 1;
+      }
+
+      .cnt-icon-right {
+        color: colors.$neutral-6;
+      }
+    }
+  }
+
+  .calendar-overlay {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+    min-width: 300px;
+    padding: 0;
+    gap: 0;
+    border-radius: variables.$radius-md;
+    border: 1px solid colors.$neutral-2;
+    background: colors.$neutral-white;
+
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.1);
+
+    .mes {
+      display: flex;
+      flex-direction: column;
+      padding: variables.$spacing-md variables.$spacing-sm;
+    }
+
+    .calendar-header {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+
+      span {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: semantic.$color-text-primary-on-light;
+        cursor: pointer;
+        font: {
+          family: Roboto;
+          size: typography.$font-size-large;
+          weight: 500;
+          style: normal;
+        }
+        line-height: typography.$line-height-large;
+      }
+    }
+
+    .calendar-body {
+      display: flex;
+      flex-direction: column;
+      gap: variables.$spacing-xs;
+    }
+
+    .grid {
+      display: grid;
+      gap: variables.$spacing-xs;
+
+      &.days {
+        grid-template-columns: repeat(7, 1fr);
+      }
+
+      &.months,
+      &.years {
+        margin-left: 27px;
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 2px 4px;
+        gap: variables.$spacing-md;
+        color: semantic.$color-text-primary-on-light;
+        font: {
+          family: Rubik;
+          size: typography.$font-size-sm;
+          weight: 500;
+          style: normal;
+        }
+        line-height: typography.$line-height-sm;
+        letter-spacing: 0.24px;
+      }
+
+      .cell {
+        display: flex;
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        min-height: 24px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: 1/1;
+        background: colors.$neutral-white;
+        font: {
+          family: typography.$font-secondary;
+          size: typography.$font-size-base;
+          weight: 400;
+          style: normal;
+        }
+        line-height: typography.$line-height-base;
+        letter-spacing: 0.28px;
+        cursor: pointer;
+
+        &:hover {
+          background: colors.$info-100;
+        }
+
+        &.out-of-range {
+          color: semantic.$color-text-disabled-on-light;
+        }
+
+        &.selected {
+          border-radius: variables.$radius-pill;
+          border: 1px solid colors.$info-600;
+          background: colors.$info-500;
+          color: white;
+        }
+      }
+    }
+
+    .today {
+      margin-top: variables.$spacing-xs;
+      width: 100%;
+      padding: variables.$spacing-xs;
+      border: none;
+      background: transparent;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: variables.$spacing-xxs;
+      color: semantic.$color-text-primary-on-light;
+      cursor: pointer;
+      font: {
+        family: Roboto;
+        size: typography.$font-size-large;
+        weight: 500;
+        style: normal;
+      }
+      line-height: typography.$line-height-large;
+    }
+  }
+}
+
+.help-text {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: semantic.$color-text-secundary-on-light;
+
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-sm;
+  font-style: italic;
+  font-weight: 500;
+  line-height: typography.$line-height-sm; 
+  letter-spacing: 0.24px;
+}
+
+.help-text-error {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: colors.$danger-800;
+
+  font-family: typography.$font-secondary;
+  font-size: typography.$font-size-sm;
+  font-style: italic;
+  font-weight: 500;
+  line-height: typography.$line-height-sm; 
+  letter-spacing: 0.24px;
+}

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

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

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

@@ -0,0 +1,164 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
+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-picker',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IconMdComponent,
+    SimpleDividerComponent,
+    ButtonStandardTertiaryComponent,
+  ],
+  templateUrl: './date-picker.component.html',
+  styleUrl: './date-picker.component.scss',
+})
+export class DatePickerComponent {
+  @Input() label = 'Fecha';
+  @Input() placeholder = 'Seleccione una fecha';
+  @Input() error = false;
+  @Input() iconHelp = false;
+  @Input() helpText = '';
+  @Input() helpTextError = '';
+  @Input() disabled = false;
+  @Input() isRequired = true;
+
+  @Output() dateSelected = new EventEmitter<Date>();
+
+
+  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);
+
+  selectedDate: Date | null = null;
+  viewDate = new Date();
+  calendarOpen = false;
+  focused = false;
+  calendarView: 'day' | 'month' | 'year' = 'day';
+  calendarDays: Date[] = [];
+
+  constructor(private elRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.generateCalendarDays();
+  }
+
+  toggleCalendar(): void {
+    if (this.disabled) return;
+  
+    if (!this.calendarOpen) {
+      this.calendarView = 'day';
+      this.error = false; 
+    }
+    this.focused = true;
+    this.calendarOpen = !this.calendarOpen;
+  }
+
+  goToToday(): void {
+    const today = new Date();
+    this.viewDate = today;
+    this.selectDate(today);
+  }
+
+  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 { calendarView, viewDate } = this;
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+
+    if (calendarView === 'day') {
+      this.viewDate = new Date(year, month + step, 1);
+    } else if (calendarView === 'month') {
+      this.viewDate = new Date(year + step, month, 1);
+    } else {
+      this.viewDate = new Date(year + step * 10, month, 1);
+    }
+  }
+
+  selectDate(date: Date): void {
+    this.selectedDate = date;
+    this.viewDate = new Date(date);
+    this.calendarOpen = false;
+    this.focused = false;
+    this.error = false;
+
+    this.dateSelected.emit(date);
+  }
+
+  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;
+  
+    if (!this.selectedDate) {
+      this.error = true;
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+handleOutsideClick(event: MouseEvent): void {
+  const clickedInside = this.elRef.nativeElement.contains(event.target);
+  
+  if (!clickedInside && this.calendarOpen) {
+    this.closeCalendar();
+  }
+}
+}

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

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

package/src/lib/directives/infinite-scroll.directive.ts

@@ -0,0 +1,60 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+@Directive({
+  selector: '[iusInfiniteScroll]',
+  standalone: true,
+})
+export class InfiniteScrollDirective implements OnInit, OnDestroy {
+
+  // Cuánto antes del final disparar. '200px' = 200px antes de llegar al sentinel
+  @Input() rootMargin: string = '200px';
+
+  // Qué tanto debe asomarse el sentinel para disparar (0 = apenas visible)
+  @Input() threshold: number = 0.1;
+
+  @Output() scrolledToEnd = new EventEmitter<void>();
+
+  private observer!: IntersectionObserver;
+  private sentinel!: HTMLElement;
+
+  constructor(private host: ElementRef<HTMLElement>) {}
+
+  ngOnInit(): void {
+    // 1. Crear el div centinela y ponerlo al FINAL del contenedor
+    this.sentinel = document.createElement('div');
+    this.sentinel.style.height = '1px';
+    this.host.nativeElement.appendChild(this.sentinel);
+
+    // 2. Crear el observer
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        // 3. ¿El sentinel entró al área virtual de detección?
+        if (entry.isIntersecting) {
+          this.scrolledToEnd.emit(); // ← lanza el evento al componente
+        }
+      },
+      {
+        root: this.host.nativeElement, // ← observa dentro del CONTENEDOR, no del viewport
+        rootMargin: this.rootMargin,   // ← cuánto antes disparar
+        threshold: this.threshold,
+      }
+    );
+
+    // 4. Empezar a observar el sentinel
+    this.observer.observe(this.sentinel);
+  }
+
+  ngOnDestroy(): void {
+    this.observer?.disconnect();
+    this.sentinel?.remove();
+  }
+}