@litigiovirtual/ius-design-components 1.0.267 → 1.0.269

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

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

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

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

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

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

@@ -1,60 +0,0 @@
-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();
-  }
-}