@oneluiz/dual-datepicker 1.0.2 → 2.0.0

package/dist/dual-datepicker.component.js

@@ -1,292 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DualDatepickerComponent = void 0;
-const core_1 = require("@angular/core");
-const common_1 = require("@angular/common");
-const forms_1 = require("@angular/forms");
-let DualDatepickerComponent = class DualDatepickerComponent {
-    elementRef;
-    placeholder = 'Select date range';
-    fechaInicio = '';
-    fechaFin = '';
-    showPresets = true;
-    closeOnSelection = true;
-    closeOnPresetSelection = true;
-    closeOnClickOutside = true;
-    presets = [
-        { label: 'Last month', daysAgo: 30 },
-        { label: 'Last 6 months', daysAgo: 180 },
-        { label: 'Last year', daysAgo: 365 }
-    ];
-    inputBackgroundColor = '#fff';
-    inputTextColor = '#495057';
-    inputBorderColor = '#ced4da';
-    inputBorderColorHover = '#ced4da';
-    inputBorderColorFocus = '#80bdff';
-    inputPadding = '0.375rem 0.75rem';
-    dateRangeChange = new core_1.EventEmitter();
-    dateRangeSelected = new core_1.EventEmitter();
-    mostrarDatePicker = false;
-    rangoFechas = '';
-    fechaSeleccionandoInicio = true;
-    mesActual = new Date();
-    mesAnterior = new Date();
-    diasMesActual = [];
-    diasMesAnterior = [];
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    onClickOutside(event) {
-        if (this.mostrarDatePicker && this.closeOnClickOutside) {
-            const clickedInside = this.elementRef.nativeElement.contains(event.target);
-            if (!clickedInside) {
-                this.cerrarDatePicker();
-            }
-        }
-    }
-    ngOnInit() {
-        if (this.fechaInicio && this.fechaFin) {
-            this.actualizarRangoFechasTexto();
-            this.generarCalendarios();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes['fechaInicio'] || changes['fechaFin']) {
-            if (this.fechaInicio && this.fechaFin) {
-                this.actualizarRangoFechasTexto();
-                this.generarCalendarios();
-            }
-            else if (!this.fechaInicio && !this.fechaFin) {
-                this.rangoFechas = '';
-            }
-        }
-    }
-    formatearFecha(fecha) {
-        const year = fecha.getFullYear();
-        const month = String(fecha.getMonth() + 1).padStart(2, '0');
-        const day = String(fecha.getDate()).padStart(2, '0');
-        return `${year}-${month}-${day}`;
-    }
-    formatearFechaDisplay(fechaStr) {
-        if (!fechaStr)
-            return '';
-        const fecha = new Date(fechaStr + 'T00:00:00');
-        const meses = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-        return `${fecha.getDate()} ${meses[fecha.getMonth()]}`;
-    }
-    actualizarRangoFechasTexto() {
-        if (this.fechaInicio && this.fechaFin) {
-            const inicio = this.formatearFechaDisplay(this.fechaInicio);
-            const fin = this.formatearFechaDisplay(this.fechaFin);
-            this.rangoFechas = `${inicio} - ${fin}`;
-        }
-        else {
-            this.rangoFechas = '';
-        }
-    }
-    toggleDatePicker() {
-        this.mostrarDatePicker = !this.mostrarDatePicker;
-        if (this.mostrarDatePicker) {
-            this.fechaSeleccionandoInicio = true;
-            this.mesAnterior = new Date(this.mesActual.getFullYear(), this.mesActual.getMonth() - 1, 1);
-            this.generarCalendarios();
-        }
-    }
-    cerrarDatePicker() {
-        this.mostrarDatePicker = false;
-    }
-    generarCalendarios() {
-        this.diasMesAnterior = this.generarCalendarioMes(this.mesAnterior);
-        this.diasMesActual = this.generarCalendarioMes(this.mesActual);
-    }
-    generarCalendarioMes(fecha) {
-        const año = fecha.getFullYear();
-        const mes = fecha.getMonth();
-        const primerDia = new Date(año, mes, 1);
-        const ultimoDia = new Date(año, mes + 1, 0);
-        const diasEnMes = ultimoDia.getDate();
-        const primerDiaSemana = primerDia.getDay();
-        const diasMes = [];
-        for (let i = 0; i < primerDiaSemana; i++) {
-            diasMes.push({ dia: null, esMesActual: false });
-        }
-        for (let dia = 1; dia <= diasEnMes; dia++) {
-            const fechaDia = new Date(año, mes, dia);
-            const fechaStr = this.formatearFecha(fechaDia);
-            diasMes.push({
-                dia: dia,
-                fecha: fechaStr,
-                esMesActual: true,
-                esInicio: this.fechaInicio === fechaStr,
-                esFin: this.fechaFin === fechaStr,
-                enRango: this.estaEnRango(fechaStr)
-            });
-        }
-        return diasMes;
-    }
-    estaEnRango(fechaStr) {
-        if (!this.fechaInicio || !this.fechaFin)
-            return false;
-        return fechaStr >= this.fechaInicio && fechaStr <= this.fechaFin;
-    }
-    seleccionarDia(diaObj) {
-        if (!diaObj.esMesActual)
-            return;
-        if (this.fechaSeleccionandoInicio) {
-            this.fechaInicio = diaObj.fecha;
-            this.fechaFin = '';
-            this.fechaSeleccionandoInicio = false;
-            this.emitirCambio();
-        }
-        else {
-            if (diaObj.fecha < this.fechaInicio) {
-                this.fechaFin = this.fechaInicio;
-                this.fechaInicio = diaObj.fecha;
-            }
-            else {
-                this.fechaFin = diaObj.fecha;
-            }
-            this.actualizarRangoFechasTexto();
-            if (this.closeOnSelection) {
-                this.mostrarDatePicker = false;
-            }
-            this.fechaSeleccionandoInicio = true;
-            this.emitirSeleccion();
-        }
-        this.generarCalendarios();
-    }
-    cambiarMes(direccion) {
-        this.mesActual = new Date(this.mesActual.getFullYear(), this.mesActual.getMonth() + direccion, 1);
-        this.mesAnterior = new Date(this.mesActual.getFullYear(), this.mesActual.getMonth() - 1, 1);
-        this.generarCalendarios();
-    }
-    getNombreMes(fecha) {
-        const meses = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-        return `${meses[fecha.getMonth()]} ${fecha.getFullYear()}`;
-    }
-    seleccionarRangoPredefinido(preset) {
-        const hoy = new Date();
-        const fechaInicio = new Date(hoy);
-        fechaInicio.setDate(hoy.getDate() - preset.daysAgo);
-        this.fechaInicio = this.formatearFecha(fechaInicio);
-        this.fechaFin = this.formatearFecha(hoy);
-        this.actualizarRangoFechasTexto();
-        this.generarCalendarios();
-        if (this.closeOnPresetSelection) {
-            this.mostrarDatePicker = false;
-        }
-        this.emitirSeleccion();
-    }
-    limpiar() {
-        this.fechaInicio = '';
-        this.fechaFin = '';
-        this.rangoFechas = '';
-        this.mostrarDatePicker = false;
-        this.fechaSeleccionandoInicio = true;
-        this.emitirCambio();
-    }
-    emitirCambio() {
-        this.dateRangeChange.emit({
-            fechaInicio: this.fechaInicio,
-            fechaFin: this.fechaFin,
-            rangoTexto: this.rangoFechas
-        });
-    }
-    emitirSeleccion() {
-        this.dateRangeSelected.emit({
-            fechaInicio: this.fechaInicio,
-            fechaFin: this.fechaFin,
-            rangoTexto: this.rangoFechas
-        });
-    }
-};
-exports.DualDatepickerComponent = DualDatepickerComponent;
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "placeholder", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "fechaInicio", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "fechaFin", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", Boolean)
-], DualDatepickerComponent.prototype, "showPresets", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", Boolean)
-], DualDatepickerComponent.prototype, "closeOnSelection", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", Boolean)
-], DualDatepickerComponent.prototype, "closeOnPresetSelection", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", Boolean)
-], DualDatepickerComponent.prototype, "closeOnClickOutside", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", Array)
-], DualDatepickerComponent.prototype, "presets", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "inputBackgroundColor", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "inputTextColor", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "inputBorderColor", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "inputBorderColorHover", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "inputBorderColorFocus", void 0);
-__decorate([
-    (0, core_1.Input)(),
-    __metadata("design:type", String)
-], DualDatepickerComponent.prototype, "inputPadding", void 0);
-__decorate([
-    (0, core_1.Output)(),
-    __metadata("design:type", Object)
-], DualDatepickerComponent.prototype, "dateRangeChange", void 0);
-__decorate([
-    (0, core_1.Output)(),
-    __metadata("design:type", Object)
-], DualDatepickerComponent.prototype, "dateRangeSelected", void 0);
-__decorate([
-    (0, core_1.HostListener)('document:click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", void 0)
-], DualDatepickerComponent.prototype, "onClickOutside", null);
-exports.DualDatepickerComponent = DualDatepickerComponent = __decorate([
-    (0, core_1.Component)({
-        selector: 'ngx-dual-datepicker',
-        standalone: true,
-        imports: [common_1.CommonModule, forms_1.FormsModule],
-        templateUrl: './dual-datepicker.component.html',
-        styleUrl: './dual-datepicker.component.scss'
-    }),
-    __metadata("design:paramtypes", [core_1.ElementRef])
-], DualDatepickerComponent);

package/dist/dual-datepicker.component.scss

@@ -1,256 +0,0 @@
-// Dual Datepicker Component Styles
-.datepicker-wrapper {
-  position: relative;
-  width: 100%;
-
-  .datepicker-input {
-    display: block;
-    width: 100%;
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #ced4da;
-    border-radius: 0.25rem;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    cursor: pointer;
-    
-    &:hover {
-      border-color: var(--input-border-hover, #ced4da);
-    }
-    
-    &:focus {
-      border-color: var(--input-border-focus, #80bdff);
-      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-      outline: 0;
-    }
-
-    &::placeholder {
-      color: #6c757d;
-      opacity: 1;
-    }
-
-    &:disabled,
-    &[readonly] {
-      background-color: #e9ecef;
-      opacity: 1;
-    }
-  }
-}
-
-.date-picker-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
-  background: white;
-  border: 1px solid #e1e4e8;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  z-index: 1060;
-  min-width: 680px;
-
-  @media (max-width: 768px) {
-    min-width: 100%;
-    left: 0;
-    right: 0;
-  }
-}
-
-.date-picker-header-only-close {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 12px;
-
-  .btn-close-calendar {
-    background-color: transparent;
-    border: 1px solid transparent;
-    color: #6b7280;
-    padding: 6px 10px;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-size: 1.5rem;
-    line-height: 1;
-    
-    &:hover {
-      background-color: #fee;
-      border-color: #fcc;
-      color: #dc2626;
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: none;
-    }
-  }
-}
-
-.date-picker-presets {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #e5e7eb;
-  align-items: center;
-
-  @media (max-width: 768px) {
-    flex-wrap: wrap;
-  }
-
-  button {
-    font-size: 0.75rem;
-    padding: 6px 14px;
-    border: none;
-    background-color: #f9fafb;
-    color: #374151;
-    border-radius: 6px;
-    transition: all 0.15s ease;
-    font-weight: 500;
-    cursor: pointer;
-    border: 1px solid #e5e7eb;
-
-    &:hover {
-      background-color: #f3f4f6;
-      border-color: #d1d5db;
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: none;
-    }
-  }
-
-  .btn-close-calendar {
-    margin-left: auto;
-    background-color: transparent;
-    border: 1px solid transparent;
-    color: #6b7280;
-    padding: 6px 10px;
-    font-size: 1.5rem;
-    line-height: 1;
-    
-    &:hover {
-      background-color: #fee;
-      border-color: #fcc;
-      color: #dc2626;
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: none;
-    }
-  }
-}
-
-.date-picker-calendars {
-  display: flex;
-  gap: 32px;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 16px;
-  }
-}
-
-.date-picker-calendar {
-  flex: 1;
-}
-
-.date-picker-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding: 0 4px;
-
-  span {
-    font-size: 0.813rem;
-    font-weight: 600;
-    color: #111827;
-  }
-
-  button {
-    padding: 4px;
-    color: #6b7280;
-    text-decoration: none;
-    border-radius: 6px;
-    transition: all 0.15s ease;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #f3f4f6;
-      color: #111827;
-    }
-  }
-}
-
-.date-picker-weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-  margin-bottom: 4px;
-
-  span {
-    text-align: center;
-    font-size: 0.625rem;
-    font-weight: 600;
-    color: #6b7280;
-    padding: 6px;
-  }
-}
-
-.date-picker-days {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-}
-
-.date-picker-day {
-  aspect-ratio: 1;
-  border: none;
-  background: transparent;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  color: #374151;
-  font-weight: 400;
-
-  &:hover:not(:disabled):not(.selected) {
-    background-color: #f3f4f6;
-    color: #111827;
-  }
-
-  &.empty {
-    visibility: hidden;
-  }
-
-  &.selected {
-    background-color: #222;
-    color: white;
-    font-weight: 600;
-  }
-
-  &.in-range {
-    background-color: #f9fafb;
-    border-radius: 0;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-  }
-}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/index.esm.js

@@ -1,5 +0,0 @@
-/**
- * Public API Surface of @ngx-tools/dual-datepicker
- */
-
-export { DualDatepickerComponent } from './dual-datepicker.component.js';

package/dist/index.js

@@ -1,8 +0,0 @@
-"use strict";
-/**
- * Public API Surface of @oneluiz/dual-datepicker
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DualDatepickerComponent = void 0;
-var dual_datepicker_component_1 = require("./dual-datepicker.component");
-Object.defineProperty(exports, "DualDatepickerComponent", { enumerable: true, get: function () { return dual_datepicker_component_1.DualDatepickerComponent; } });