@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.2

package/src/lib/atoms/checkbox/checkbox.component.scss

@@ -1,131 +0,0 @@
-.checkbox-wrapper {
-  width: 100%;
-  padding: 0 4px;
-
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-.checkbox-container {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-}
-
-.checkbox-label-input {
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    width: 22px;
-    height: 22px;
-    margin: 0;
-    z-index: 2;
-    top: 2px;
-    left: 0;
-  }
-
-  .checkbox-custom {
-    width: 22px;
-    height: 22px;
-    min-width: 22px;
-    border: 2.5px solid #D5D7D8;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    background: white;
-    margin-top: 2px;
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      border-radius: 4px;
-      background: #F59100;
-      opacity: 0;
-      transform: scale(0.5);
-      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    &.checked, &.indeterminate {
-      background: white;
-      border-color: #F59100;
-      border-width: 2.5px;
-      box-shadow: 0 3px 8px rgba(242, 109, 0, 0.25), 0 1px 3px rgba(242, 109, 0, 0.15);
-      transform: scale(1.05);
-
-      &::after {
-        opacity: 0;
-      }
-    }
-
-    .check-icon {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      animation: checkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-    }
-  }
-
-  &:hover .checkbox-custom:not(.checked) {
-    border-color: #F26D00;
-    transform: scale(1.05);
-  }
-}
-
-.checkbox-text {
-  flex: 1;
-  font-family: 'Quicksand', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.7;
-  user-select: none;
-  cursor: pointer;
-
-  ::ng-deep a {
-    color: #364B9F;
-    font-family: 'Quicksand', sans-serif;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1.7;
-    cursor: pointer;
-  }
-}
-
-.checkbox-wrapper.disabled .checkbox-text {
-  cursor: not-allowed;
-}
-
-@keyframes checkPop {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.field-error {
-  color: #F04438;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-  font-family: 'Quicksand', sans-serif;
-}

package/src/lib/atoms/checkbox/checkbox.component.ts

@@ -1,130 +0,0 @@
-import { Component, Input, forwardRef, ChangeDetectorRef, Output, EventEmitter, SimpleChanges, ElementRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-checkbox',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, FormsModule],
-  template: `
-    <div class="checkbox-wrapper" [class.disabled]="disabled">
-      <div class="checkbox-container">
-        <label [for]="id" class="checkbox-label-input">
-          <input
-            type="checkbox"
-            [id]="id"
-            [disabled]="disabled"
-            [checked]="value"
-            (blur)="onTouched()"
-            (change)="onCheckboxChange($event)">
-          <span class="checkbox-custom" [class.checked]="value" [class.indeterminate]="indeterminate">
-            <!-- Paloma -->
-            <svg *ngIf="value && !indeterminate" class="check-icon" width="14" height="10" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M9 1L3.5 6.5L1 4" stroke="#F59100" stroke-width="1.6666" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <!-- Guion -->
-            <svg *ngIf="indeterminate && !value" class="minus-icon" width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect width="12" height="2" rx="1" fill="#F59100"/>
-            </svg>
-          </span>
-        </label>
-        <span class="checkbox-text" (click)="onTextClick($event)">
-          <ng-content></ng-content>
-          <span *ngIf="label" [innerHTML]="label"></span>
-        </span>
-      </div>
-      <div *ngIf="hasError && errorMessage" class="field-error">
-        {{ errorMessage }}
-      </div>
-    </div>
-  `,
-  styleUrls: ['./checkbox.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CheckboxComponent),
-      multi: true
-    }
-  ]
-})
-export class CheckboxComponent implements ControlValueAccessor {
-  @Input() label = '';
-  @Input() id = '';
-  @Input() hasError = false;
-  @Input() errorMessage = '';
-  @Input() disabled = false;
-  @Input() indeterminate = false;
-  @Input()
-  set checked(value: boolean) {
-    this.value = !!value;
-    this.cdr.markForCheck();
-  }
-  get checked(): boolean {
-    return this.value;
-  }
-
-  @Output() changed = new EventEmitter<boolean>();
-
-  value = false;
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  constructor(private cdr: ChangeDetectorRef, private elRef: ElementRef) {}
-
-  ngAfterViewInit() {
-    this.updateNativeIndeterminate();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['indeterminate']) {
-      this.updateNativeIndeterminate();
-    }
-  }
-
-  private updateNativeIndeterminate() {
-    const input = this.elRef.nativeElement.querySelector('input[type="checkbox"]') as HTMLInputElement;
-    if (input) input.indeterminate = this.indeterminate;
-  }
-
-  onCheckboxChange(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    this.value = target.checked;
-    this.onChange(this.value);
-    this.changed.emit(this.value); // ← EMITE EVENTO MANUAL PARA USO EXTERNO
-    this.cdr.markForCheck();
-  }
-
-  onTextClick(event: Event): void {
-    const target = event.target as HTMLElement;
-    if (target.tagName === 'A' || target.closest('a')) {
-      return;
-    }
-
-    if (this.disabled) {
-      return;
-    }
-
-    this.value = !this.value;
-    this.onChange(this.value);
-    this.changed.emit(this.value);
-    this.cdr.markForCheck();
-  }
-
-  writeValue(value: any): void {
-    this.value = !!value;
-    this.cdr.markForCheck();
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.cdr.markForCheck();
-  }
-}

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

@@ -1,295 +0,0 @@
-<div class="date-picker-wrapper">
-  <label *ngIf="label" [for]="id">{{ label }}</label>
-
-  <div class="date-picker-container">
-    <div
-      #trigger
-      class="date-picker-input"
-      [class.error]="hasError"
-      [class.disabled]="disabled"
-      [class.open]="isOpen"
-      [class.icon-right]="iconPosition === 'right'"
-      (click)="toggleDropdown($event)">
-
-      <svg *ngIf="iconPosition === 'left'" class="calendar-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-
-      <span class="date-picker-placeholder" *ngIf="!getDisplayValue()">
-        {{ placeholder }}
-      </span>
-      <span class="date-picker-value" *ngIf="getDisplayValue()">
-        {{ getDisplayValue() }}
-      </span>
-
-      <svg *ngIf="iconPosition === 'right'" class="calendar-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6.66667 1.66667V4.16667M13.3333 1.66667V4.16667M2.5 7.5H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07953 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07953 3.24619 3.33333 4.16667 3.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    </div>
-  </div>
-
-  <div *ngIf="hasError && errorMessage" class="field-error">
-    {{ errorMessage }}
-  </div>
-</div>
-
-<!-- Dropdown content (rendered with fixed position) -->
-<div *ngIf="isOpen" class="date-picker-overlay">
-  <div #dropdown class="date-picker-dropdown" [class.open]="isOpen" [class.range-mode]="rangeMode" [ngStyle]="getDropdownStyle()">
-    <div class="date-picker-content">
-      <!-- Sidebar with filters (only for range mode) -->
-      <div class="filter-sidebar" *ngIf="rangeMode">
-        <div
-          *ngFor="let option of filterOptions"
-          class="filter-option"
-          [class.active]="selectedFilter === option.value"
-          (click)="selectFilter(option.value)">
-          {{ option.label }}
-        </div>
-      </div>
-
-      <!-- Main content (calendars + footer) -->
-      <div class="date-picker-main">
-        <!-- Calendars -->
-        <div class="calendars-container">
-          <!-- Left Calendar (or single calendar in single mode) -->
-          <div class="calendar">
-            <div class="calendar-header">
-              <button
-                type="button"
-                class="nav-button"
-                [disabled]="!canNavigatePreviousMonth()"
-                [class.disabled]="!canNavigatePreviousMonth()"
-                (click)="previousMonth()">
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M7.5 2L3.5 6L7.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </button>
-              <div class="month-year-selector">
-                <button type="button" class="month-year" (click)="toggleLeftMonthPicker($event)">
-                  {{ getMonthYear(leftMonthDate) }}
-                </button>
-
-                <!-- Month/Year Picker Dropdown -->
-                <div class="month-year-picker" *ngIf="showLeftMonthPicker" (click)="$event.stopPropagation()">
-                  <div class="picker-section">
-                    <div class="picker-title">Mes</div>
-                    <div class="months-grid">
-                      <button
-                        type="button"
-                        *ngFor="let month of months; let i = index"
-                        class="month-option"
-                        [class.active]="i === leftMonthDate.getMonth()"
-                        [class.disabled]="isMonthDisabled(i, leftMonthDate)"
-                        [disabled]="isMonthDisabled(i, leftMonthDate)"
-                        (click)="selectLeftMonth(i, $event)">
-                        {{ month.substring(0, 3) }}
-                      </button>
-                    </div>
-                  </div>
-                  <div class="picker-section">
-                    <div class="picker-header">
-                      <button
-                        type="button"
-                        class="year-nav-button"
-                        [disabled]="!canNavigateLeftYearsPrevious()"
-                        [class.disabled]="!canNavigateLeftYearsPrevious()"
-                        (click)="previousLeftYearPage($event)">
-                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M6.25 2.5L3.75 5L6.25 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                      </button>
-                      <div class="picker-title">{{ getLeftYearRangeLabel() }}</div>
-                      <button
-                        type="button"
-                        class="year-nav-button"
-                        [disabled]="!canNavigateLeftYearsNext()"
-                        [class.disabled]="!canNavigateLeftYearsNext()"
-                        (click)="nextLeftYearPage($event)">
-                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M3.75 2.5L6.25 5L3.75 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                      </button>
-                    </div>
-                    <div class="years-grid">
-                      <button
-                        type="button"
-                        *ngFor="let year of getLeftYears()"
-                        class="year-option"
-                        [class.active]="year === leftMonthDate.getFullYear()"
-                        [class.disabled]="isYearDisabled(year)"
-                        [disabled]="isYearDisabled(year)"
-                        (click)="selectLeftYear(year, $event)">
-                        {{ year }}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <button
-                type="button"
-                class="nav-button"
-                [disabled]="!canNavigateNextMonth()"
-                [class.disabled]="!canNavigateNextMonth()"
-                (click)="nextMonth()">
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </button>
-            </div>
-
-            <div class="calendar-grid">
-              <div class="weekday-header" *ngFor="let day of weekDays">
-                {{ day }}
-              </div>
-
-              <div
-                *ngFor="let day of leftCalendarDays; trackBy: trackByDate"
-                class="calendar-day"
-                [class.other-month]="!day.isCurrentMonth"
-                [class.today]="day.isToday"
-                [class.selected]="day.isSelected"
-                [class.in-range]="rangeMode && isInRange(day.date)"
-                [class.range-start]="day.isRangeStart"
-                [class.range-end]="day.isRangeEnd"
-                [class.disabled]="day.isDisabled"
-                (click)="onDayClick(day)"
-                (mouseenter)="onDayHover(day)"
-                (mouseleave)="onDayLeave()">
-                <span>{{ day.date.getDate() }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Right Calendar (only for range mode) -->
-          <div class="calendar" *ngIf="rangeMode">
-            <div class="calendar-header">
-              <div class="nav-button-placeholder"></div>
-              <div class="month-year-selector">
-                <button type="button" class="month-year" (click)="toggleRightMonthPicker($event)">
-                  {{ getMonthYear(rightMonthDate) }}
-                </button>
-
-                <!-- Month/Year Picker Dropdown -->
-                <div class="month-year-picker" *ngIf="showRightMonthPicker" (click)="$event.stopPropagation()">
-                  <div class="picker-section">
-                    <div class="picker-title">Mes</div>
-                    <div class="months-grid">
-                      <button
-                        type="button"
-                        *ngFor="let month of months; let i = index"
-                        class="month-option"
-                        [class.active]="i === rightMonthDate.getMonth()"
-                        [class.disabled]="isMonthDisabled(i, rightMonthDate)"
-                        [disabled]="isMonthDisabled(i, rightMonthDate)"
-                        (click)="selectRightMonth(i, $event)">
-                        {{ month.substring(0, 3) }}
-                      </button>
-                    </div>
-                  </div>
-                  <div class="picker-section">
-                    <div class="picker-header">
-                      <button
-                        type="button"
-                        class="year-nav-button"
-                        [disabled]="!canNavigateRightYearsPrevious()"
-                        [class.disabled]="!canNavigateRightYearsPrevious()"
-                        (click)="previousRightYearPage($event)">
-                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M6.25 2.5L3.75 5L6.25 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                      </button>
-                      <div class="picker-title">{{ getRightYearRangeLabel() }}</div>
-                      <button
-                        type="button"
-                        class="year-nav-button"
-                        [disabled]="!canNavigateRightYearsNext()"
-                        [class.disabled]="!canNavigateRightYearsNext()"
-                        (click)="nextRightYearPage($event)">
-                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                          <path d="M3.75 2.5L6.25 5L3.75 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
-                      </button>
-                    </div>
-                    <div class="years-grid">
-                      <button
-                        type="button"
-                        *ngFor="let year of getRightYears()"
-                        class="year-option"
-                        [class.active]="year === rightMonthDate.getFullYear()"
-                        [class.disabled]="isYearDisabled(year)"
-                        [disabled]="isYearDisabled(year)"
-                        (click)="selectRightYear(year, $event)">
-                        {{ year }}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <button
-                type="button"
-                class="nav-button"
-                [disabled]="!canNavigateNextMonth()"
-                [class.disabled]="!canNavigateNextMonth()"
-                (click)="nextMonth()">
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </button>
-            </div>
-
-            <div class="calendar-grid">
-              <div class="weekday-header" *ngFor="let day of weekDays">
-                {{ day }}
-              </div>
-
-              <div
-                *ngFor="let day of rightCalendarDays; trackBy: trackByDate"
-                class="calendar-day"
-                [class.other-month]="!day.isCurrentMonth"
-                [class.today]="day.isToday"
-                [class.selected]="day.isSelected"
-                [class.in-range]="isInRange(day.date)"
-                [class.range-start]="day.isRangeStart"
-                [class.range-end]="day.isRangeEnd"
-                [class.disabled]="day.isDisabled"
-                (click)="onDayClick(day)"
-                (mouseenter)="onDayHover(day)"
-                (mouseleave)="onDayLeave()">
-                <span>{{ day.date.getDate() }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Footer with dates and actions (only for range mode) -->
-        <div class="footer" *ngIf="rangeMode">
-          <div class="selected-dates">
-            <div class="date-display">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              <span class="date-text">{{ getStartDateDisplay() }}</span>
-            </div>
-            <span class="date-separator">-</span>
-            <div class="date-display">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M5.33333 1.33333V3.33333M10.6667 1.33333V3.33333M2 6H14M3.33333 2.66667H12.6667C13.403 2.66667 14 3.26362 14 4V13.3333C14 14.0697 13.403 14.6667 12.6667 14.6667H3.33333C2.59695 14.6667 2 14.0697 2 13.3333V4C2 3.26362 2.59695 2.66667 3.33333 2.66667Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              <span class="date-text">{{ getEndDateDisplay() }}</span>
-            </div>
-          </div>
-
-          <div class="action-buttons">
-            <button type="button" class="btn-cancel" (click)="cancel()">
-              Cancelar
-            </button>
-            <button type="button" class="btn-apply" (click)="apply()">
-              Aplicar
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>