@lesterarte/sefin-ui 0.0.14 → 0.0.15-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3372,19 +3372,7 @@ class DatepickerComponent {
|
|
|
3372
3372
|
return dateCompare.getTime() === selected.getTime();
|
|
3373
3373
|
}
|
|
3374
3374
|
else {
|
|
3375
|
-
|
|
3376
|
-
const start = new Date(this.rangeStart);
|
|
3377
|
-
start.setHours(0, 0, 0, 0);
|
|
3378
|
-
const end = new Date(this.rangeEnd);
|
|
3379
|
-
end.setHours(0, 0, 0, 0);
|
|
3380
|
-
return (dateCompare.getTime() === start.getTime() ||
|
|
3381
|
-
dateCompare.getTime() === end.getTime());
|
|
3382
|
-
}
|
|
3383
|
-
if (this.rangeStart) {
|
|
3384
|
-
const start = new Date(this.rangeStart);
|
|
3385
|
-
start.setHours(0, 0, 0, 0);
|
|
3386
|
-
return dateCompare.getTime() === start.getTime();
|
|
3387
|
-
}
|
|
3375
|
+
// En modo rango, no usar --selected para inicio/fin, usar --range-start y --range-end
|
|
3388
3376
|
return false;
|
|
3389
3377
|
}
|
|
3390
3378
|
}
|
|
@@ -3400,8 +3388,27 @@ class DatepickerComponent {
|
|
|
3400
3388
|
const startTime = start.getTime();
|
|
3401
3389
|
const endTime = end.getTime();
|
|
3402
3390
|
const dateTime = dateCompare.getTime();
|
|
3403
|
-
|
|
3404
|
-
|
|
3391
|
+
// No incluir inicio y fin en el rango (ya tienen su propia clase)
|
|
3392
|
+
return ((dateTime > startTime && dateTime < endTime) ||
|
|
3393
|
+
(dateTime > endTime && dateTime < startTime));
|
|
3394
|
+
}
|
|
3395
|
+
isRangeStart(date) {
|
|
3396
|
+
if (this.mode !== 'range' || !this.rangeStart)
|
|
3397
|
+
return false;
|
|
3398
|
+
const dateCompare = new Date(date);
|
|
3399
|
+
dateCompare.setHours(0, 0, 0, 0);
|
|
3400
|
+
const start = new Date(this.rangeStart);
|
|
3401
|
+
start.setHours(0, 0, 0, 0);
|
|
3402
|
+
return dateCompare.getTime() === start.getTime();
|
|
3403
|
+
}
|
|
3404
|
+
isRangeEnd(date) {
|
|
3405
|
+
if (this.mode !== 'range' || !this.rangeEnd)
|
|
3406
|
+
return false;
|
|
3407
|
+
const dateCompare = new Date(date);
|
|
3408
|
+
dateCompare.setHours(0, 0, 0, 0);
|
|
3409
|
+
const end = new Date(this.rangeEnd);
|
|
3410
|
+
end.setHours(0, 0, 0, 0);
|
|
3411
|
+
return dateCompare.getTime() === end.getTime();
|
|
3405
3412
|
}
|
|
3406
3413
|
isDisabled(date) {
|
|
3407
3414
|
const dateCompare = new Date(date);
|
|
@@ -3508,16 +3515,8 @@ class DatepickerComponent {
|
|
|
3508
3515
|
this.valueChange.emit(this.value);
|
|
3509
3516
|
this.dateSelected.emit(this.value);
|
|
3510
3517
|
});
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
this.ngZone.run(() => {
|
|
3514
|
-
if (this.isOpen) {
|
|
3515
|
-
this.closeCalendar();
|
|
3516
|
-
}
|
|
3517
|
-
this.isSelectingDate = false;
|
|
3518
|
-
});
|
|
3519
|
-
}, 150);
|
|
3520
|
-
});
|
|
3518
|
+
// En modo range, no cerrar automáticamente - solo se cierra al hacer clic fuera
|
|
3519
|
+
this.isSelectingDate = false;
|
|
3521
3520
|
}
|
|
3522
3521
|
}
|
|
3523
3522
|
}
|
|
@@ -3646,11 +3645,11 @@ class DatepickerComponent {
|
|
|
3646
3645
|
return year === this.getCurrentYear();
|
|
3647
3646
|
}
|
|
3648
3647
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
3649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", format: "format", mode: "mode", minDate: "minDate", maxDate: "maxDate", showTodayButton: "showTodayButton", showClearButton: "showClearButton", firstDayOfWeek: "firstDayOfWeek" }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "textfieldRef", first: true, predicate: ["textfieldRef"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <div\n (click)=\"onTextFieldClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n class=\"sefin-datepicker__input-wrapper\"\n >\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"\n displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n \"\n (focused)=\"onTextFieldFocus($event)\"\n (trailingIconClick)=\"onTrailingIconClick($event)\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"previousMonth($event)\"\n >\n <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__month-year-btn\"\n (click)=\"toggleViewMode($event)\"\n >\n <span *ngIf=\"viewMode === 'month'\"\n >{{ getMonthName() }} {{ getYear() }}</span\n >\n <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"nextMonth($event)\"\n >\n <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n\n <!-- Vista de Meses -->\n <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let day of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n >\n {{ day ? day.getDate() : \"\" }}\n </button>\n </div>\n </div>\n\n <!-- Vista de A\u00F1os -->\n <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n <div class=\"sefin-datepicker__years-grid\">\n <button\n *ngFor=\"let year of getYears()\"\n type=\"button\"\n class=\"sefin-datepicker__year\"\n [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n [class.sefin-datepicker__year--selected]=\"\n year === currentMonth.getFullYear()\n \"\n (click)=\"selectYear(year, $event)\"\n >\n {{ year }}\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"showTodayButton && viewMode === 'month'\"\n class=\"sefin-datepicker__footer\"\n >\n <button\n type=\"button\"\n class=\"sefin-datepicker__today\"\n (click)=\"goToToday()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:1;cursor:pointer}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:var(--sefin-color-primary-light);color:var(--sefin-color-primary);border-radius:0;cursor:pointer}.sefin-datepicker__day--in-range:first-child{border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--in-range:last-child{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }, { kind: "component", type: TextFieldComponent, selector: "sefin-textfield", inputs: ["variant", "size", "type", "placeholder", "hint", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }] });
|
|
3648
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", format: "format", mode: "mode", minDate: "minDate", maxDate: "maxDate", showTodayButton: "showTodayButton", showClearButton: "showClearButton", firstDayOfWeek: "firstDayOfWeek" }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "textfieldRef", first: true, predicate: ["textfieldRef"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <div\n (click)=\"onTextFieldClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n class=\"sefin-datepicker__input-wrapper\"\n >\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"\n displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n \"\n (focused)=\"onTextFieldFocus($event)\"\n (trailingIconClick)=\"onTrailingIconClick($event)\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"previousMonth($event)\"\n >\n <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__month-year-btn\"\n (click)=\"toggleViewMode($event)\"\n >\n <span *ngIf=\"viewMode === 'month'\"\n >{{ getMonthName() }} {{ getYear() }}</span\n >\n <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"nextMonth($event)\"\n >\n <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n\n <!-- Vista de Meses -->\n <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let day of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--range-start]=\"day && isRangeStart(day)\"\n [class.sefin-datepicker__day--range-end]=\"day && isRangeEnd(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n >\n {{ day ? day.getDate() : \"\" }}\n </button>\n </div>\n </div>\n\n <!-- Vista de A\u00F1os -->\n <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n <div class=\"sefin-datepicker__years-grid\">\n <button\n *ngFor=\"let year of getYears()\"\n type=\"button\"\n class=\"sefin-datepicker__year\"\n [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n [class.sefin-datepicker__year--selected]=\"\n year === currentMonth.getFullYear()\n \"\n (click)=\"selectYear(year, $event)\"\n >\n {{ year }}\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"showTodayButton && viewMode === 'month'\"\n class=\"sefin-datepicker__footer\"\n >\n <button\n type=\"button\"\n class=\"sefin-datepicker__today\"\n (click)=\"goToToday()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--today.sefin-datepicker__day--in-range{color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--in-range:before{background-color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start,.sefin-datepicker__day--today.sefin-datepicker__day--range-end{color:var(--sefin-color-surface)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start:before,.sefin-datepicker__day--today.sefin-datepicker__day--range-end:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:2;cursor:pointer;border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:#55c3d826;color:var(--sefin-color-primary);border-radius:0;cursor:pointer;z-index:1;position:relative;font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--in-range:before{display:none}.sefin-datepicker__day--in-range:hover{background:#55c3d840}.sefin-datepicker__day--in-range.sefin-datepicker__day--range-start,.sefin-datepicker__day--in-range.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm);border-top-right-radius:0;border-bottom-right-radius:0;cursor:pointer}.sefin-datepicker__day--range-start:before{display:none}.sefin-datepicker__day--range-start:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm);border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.sefin-datepicker__day--range-end:before{display:none}.sefin-datepicker__day--range-end:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-start.sefin-datepicker__day--range-end{border-radius:var(--sefin-radius-sm);background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));background:transparent!important}.sefin-datepicker__day--disabled:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--today{color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--today:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--in-range{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled.sefin-datepicker__day--range-start,.sefin-datepicker__day--disabled.sefin-datepicker__day--range-end{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm);font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--selected{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled:hover{background:transparent!important;cursor:not-allowed!important}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }, { kind: "component", type: TextFieldComponent, selector: "sefin-textfield", inputs: ["variant", "size", "type", "placeholder", "hint", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }] });
|
|
3650
3649
|
}
|
|
3651
3650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
3652
3651
|
type: Component,
|
|
3653
|
-
args: [{ selector: 'sefin-datepicker', standalone: true, imports: [CommonModule, IconComponent, TextFieldComponent], template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <div\n (click)=\"onTextFieldClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n class=\"sefin-datepicker__input-wrapper\"\n >\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"\n displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n \"\n (focused)=\"onTextFieldFocus($event)\"\n (trailingIconClick)=\"onTrailingIconClick($event)\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"previousMonth($event)\"\n >\n <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__month-year-btn\"\n (click)=\"toggleViewMode($event)\"\n >\n <span *ngIf=\"viewMode === 'month'\"\n >{{ getMonthName() }} {{ getYear() }}</span\n >\n <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"nextMonth($event)\"\n >\n <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n\n <!-- Vista de Meses -->\n <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let day of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n >\n {{ day ? day.getDate() : \"\" }}\n </button>\n </div>\n </div>\n\n <!-- Vista de A\u00F1os -->\n <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n <div class=\"sefin-datepicker__years-grid\">\n <button\n *ngFor=\"let year of getYears()\"\n type=\"button\"\n class=\"sefin-datepicker__year\"\n [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n [class.sefin-datepicker__year--selected]=\"\n year === currentMonth.getFullYear()\n \"\n (click)=\"selectYear(year, $event)\"\n >\n {{ year }}\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"showTodayButton && viewMode === 'month'\"\n class=\"sefin-datepicker__footer\"\n >\n <button\n type=\"button\"\n class=\"sefin-datepicker__today\"\n (click)=\"goToToday()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:1;cursor:pointer}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:var(--sefin-color-primary-light);color:var(--sefin-color-primary);border-radius:0;cursor:pointer}.sefin-datepicker__day--in-range:first-child{border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--in-range:last-child{border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\n"] }]
|
|
3652
|
+
args: [{ selector: 'sefin-datepicker', standalone: true, imports: [CommonModule, IconComponent, TextFieldComponent], template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <div\n (click)=\"onTextFieldClick($event)\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n class=\"sefin-datepicker__input-wrapper\"\n >\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"\n displayValue && showClearButton && !disabled ? 'x' : 'calendar'\n \"\n (focused)=\"onTextFieldFocus($event)\"\n (trailingIconClick)=\"onTrailingIconClick($event)\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"previousMonth($event)\"\n >\n <sefin-icon name=\"chevron-left\" size=\"sm\"></sefin-icon>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__month-year-btn\"\n (click)=\"toggleViewMode($event)\"\n >\n <span *ngIf=\"viewMode === 'month'\"\n >{{ getMonthName() }} {{ getYear() }}</span\n >\n <span *ngIf=\"viewMode === 'year'\">{{ getYear() }}</span>\n </button>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav\"\n (click)=\"nextMonth($event)\"\n >\n <sefin-icon name=\"chevron-right\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n\n <!-- Vista de Meses -->\n <div *ngIf=\"viewMode === 'month'\" class=\"sefin-datepicker__month-view\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let day of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ day }}\n </div>\n </div>\n\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); trackBy: trackByDate\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--range-start]=\"day && isRangeStart(day)\"\n [class.sefin-datepicker__day--range-end]=\"day && isRangeEnd(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (mousedown)=\"day && !isDisabled(day) && onDayMouseDown(day, $event)\"\n (click)=\"day && !isDisabled(day) && selectDate(day, $event)\"\n >\n {{ day ? day.getDate() : \"\" }}\n </button>\n </div>\n </div>\n\n <!-- Vista de A\u00F1os -->\n <div *ngIf=\"viewMode === 'year'\" class=\"sefin-datepicker__year-view\">\n <div class=\"sefin-datepicker__years-grid\">\n <button\n *ngFor=\"let year of getYears()\"\n type=\"button\"\n class=\"sefin-datepicker__year\"\n [class.sefin-datepicker__year--current]=\"isCurrentYear(year)\"\n [class.sefin-datepicker__year--selected]=\"\n year === currentMonth.getFullYear()\n \"\n (click)=\"selectYear(year, $event)\"\n >\n {{ year }}\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"showTodayButton && viewMode === 'month'\"\n class=\"sefin-datepicker__footer\"\n >\n <button\n type=\"button\"\n class=\"sefin-datepicker__today\"\n (click)=\"goToToday()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n", styles: [".sefin-datepicker{position:relative;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.sefin-datepicker *{font-family:inherit}.sefin-datepicker__wrapper{position:relative;width:100%}.sefin-datepicker__input-wrapper{width:100%;cursor:pointer;position:relative}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield{font-family:inherit;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer!important;font-family:inherit}.sefin-datepicker__input ::ng-deep .sefin-textfield__trailing-icon{cursor:pointer!important;pointer-events:auto}.sefin-datepicker__input ::ng-deep .sefin-textfield__wrapper{cursor:pointer}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:1000;background:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md);padding-bottom:var(--sefin-spacing-sm);border-bottom:1px solid var(--sefin-color-border)}.sefin-datepicker__nav{width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text);transition:all .2s ease-in-out}.sefin-datepicker__nav:hover:not(:disabled){background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__nav:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav:disabled{opacity:.4;cursor:not-allowed}.sefin-datepicker__month-year-btn{padding:var(--sefin-spacing-xs) var(--sefin-spacing-sm);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);text-transform:capitalize;cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__month-year-btn:hover{background:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-datepicker__month-year-btn:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-sm);padding-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background:var(--sefin-color-surface-hover);cursor:pointer}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--today.sefin-datepicker__day--in-range{color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--in-range:before{background-color:var(--sefin-color-primary)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start,.sefin-datepicker__day--today.sefin-datepicker__day--range-end{color:var(--sefin-color-surface)}.sefin-datepicker__day--today.sefin-datepicker__day--range-start:before,.sefin-datepicker__day--today.sefin-datepicker__day--range-end:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);z-index:2;cursor:pointer;border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--selected:hover{background:var(--sefin-color-primary-dark);cursor:pointer}.sefin-datepicker__day--in-range{background:#55c3d826;color:var(--sefin-color-primary);border-radius:0;cursor:pointer;z-index:1;position:relative;font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--in-range:before{display:none}.sefin-datepicker__day--in-range:hover{background:#55c3d840}.sefin-datepicker__day--in-range.sefin-datepicker__day--range-start,.sefin-datepicker__day--in-range.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-left-radius:var(--sefin-radius-sm);border-bottom-left-radius:var(--sefin-radius-sm);border-top-right-radius:0;border-bottom-right-radius:0;cursor:pointer}.sefin-datepicker__day--range-start:before{display:none}.sefin-datepicker__day--range-start:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-start.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-end{background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important;font-weight:var(--sefin-font-weight-semibold);z-index:2;border-top-right-radius:var(--sefin-radius-sm);border-bottom-right-radius:var(--sefin-radius-sm);border-top-left-radius:0;border-bottom-left-radius:0;cursor:pointer}.sefin-datepicker__day--range-end:before{display:none}.sefin-datepicker__day--range-end:hover{background:var(--sefin-color-primary-dark)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today{color:var(--sefin-color-surface)!important}.sefin-datepicker__day--range-end.sefin-datepicker__day--today:before{background-color:var(--sefin-color-surface)}.sefin-datepicker__day--range-start.sefin-datepicker__day--range-end{border-radius:var(--sefin-radius-sm);background:var(--sefin-color-primary)!important;color:var(--sefin-color-surface)!important}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));background:transparent!important}.sefin-datepicker__day--disabled:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--today{color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--today:before{display:none!important}.sefin-datepicker__day--disabled.sefin-datepicker__day--in-range{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm)}.sefin-datepicker__day--disabled.sefin-datepicker__day--range-start,.sefin-datepicker__day--disabled.sefin-datepicker__day--range-end{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));border-radius:var(--sefin-radius-sm);font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled.sefin-datepicker__day--selected{background:transparent!important;color:var(--sefin-color-text-disabled, var(--sefin-color-text-secondary));font-weight:var(--sefin-font-weight-normal)}.sefin-datepicker__day--disabled:hover{background:transparent!important;cursor:not-allowed!important}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__footer{display:flex;align-items:center;justify-content:center;margin-top:var(--sefin-spacing-md);padding-top:var(--sefin-spacing-md);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today:hover:not(:disabled){background:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus);color:var(--sefin-color-primary)}.sefin-datepicker__today:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__year-view{padding:var(--sefin-spacing-sm) 0}.sefin-datepicker__years-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sefin-spacing-xs);max-height:300px;overflow-y:auto}.sefin-datepicker__year{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;text-align:center}.sefin-datepicker__year:hover{background:var(--sefin-color-surface-hover)}.sefin-datepicker__year--current{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary);cursor:pointer}.sefin-datepicker__year--selected{background:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold);cursor:pointer}.sefin-datepicker__year--selected:hover{cursor:pointer}.sefin-datepicker__year:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\n"] }]
|
|
3654
3653
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { containerRef: [{
|
|
3655
3654
|
type: ViewChild,
|
|
3656
3655
|
args: ['containerRef', { static: false }]
|