@lesterarte/sefin-ui 0.0.84 → 0.0.86
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.
|
@@ -4521,11 +4521,19 @@ class DatepickerComponent {
|
|
|
4521
4521
|
cdr;
|
|
4522
4522
|
ngZone;
|
|
4523
4523
|
containerRef;
|
|
4524
|
+
inputWrapperRef;
|
|
4524
4525
|
textfieldRef;
|
|
4525
4526
|
calendarRef;
|
|
4527
|
+
/** Approximate calendar popup height for placement calculation (px). */
|
|
4528
|
+
static CALENDAR_POPUP_HEIGHT = 420;
|
|
4529
|
+
/** Minimum gap from viewport edge when opening below/above (px). */
|
|
4530
|
+
static CALENDAR_VIEWPORT_GAP = 8;
|
|
4526
4531
|
value = null;
|
|
4527
4532
|
placeholder = 'Selecciona una fecha';
|
|
4528
4533
|
disabled = false;
|
|
4534
|
+
error = false;
|
|
4535
|
+
errorMessage = '';
|
|
4536
|
+
hint = '';
|
|
4529
4537
|
size = 'md';
|
|
4530
4538
|
format = 'DD/MM/YYYY';
|
|
4531
4539
|
mode = 'single';
|
|
@@ -4537,6 +4545,8 @@ class DatepickerComponent {
|
|
|
4537
4545
|
valueChange = new EventEmitter();
|
|
4538
4546
|
dateSelected = new EventEmitter();
|
|
4539
4547
|
isOpen = false;
|
|
4548
|
+
/** Placement of the calendar popup: 'below' or 'above' the input. */
|
|
4549
|
+
calendarPlacement = 'below';
|
|
4540
4550
|
currentMonth = new Date();
|
|
4541
4551
|
selectedDate = null;
|
|
4542
4552
|
rangeStart = null;
|
|
@@ -4679,22 +4689,52 @@ class DatepickerComponent {
|
|
|
4679
4689
|
openCalendar() {
|
|
4680
4690
|
if (this.disabled || this.isOpen)
|
|
4681
4691
|
return;
|
|
4682
|
-
//
|
|
4692
|
+
// Clear any previous timeout
|
|
4683
4693
|
if (this.openingTimeout) {
|
|
4684
4694
|
clearTimeout(this.openingTimeout);
|
|
4685
4695
|
}
|
|
4686
|
-
// Establecer flag ANTES de cambiar el estado para prevenir cierre inmediato
|
|
4687
4696
|
this.justOpened = true;
|
|
4688
4697
|
this.isOpen = true;
|
|
4689
|
-
// Usar NgZone para asegurar que el cambio se detecte correctamente
|
|
4690
4698
|
this.ngZone.run(() => {
|
|
4691
4699
|
this.cdr.detectChanges();
|
|
4692
4700
|
});
|
|
4693
|
-
//
|
|
4701
|
+
// After the calendar is rendered, compute placement (above/below) based on viewport space
|
|
4702
|
+
setTimeout(() => {
|
|
4703
|
+
this.updateCalendarPlacement();
|
|
4704
|
+
}, 0);
|
|
4694
4705
|
this.openingTimeout = setTimeout(() => {
|
|
4695
4706
|
this.justOpened = false;
|
|
4696
4707
|
}, 350);
|
|
4697
4708
|
}
|
|
4709
|
+
/**
|
|
4710
|
+
* Updates calendar popup placement (above or below) so it stays within viewport
|
|
4711
|
+
* (e.g. when inside a modal with no space below).
|
|
4712
|
+
*/
|
|
4713
|
+
updateCalendarPlacement() {
|
|
4714
|
+
const wrapper = this.inputWrapperRef?.nativeElement;
|
|
4715
|
+
if (!wrapper) {
|
|
4716
|
+
this.calendarPlacement = 'below';
|
|
4717
|
+
this.cdr.markForCheck();
|
|
4718
|
+
return;
|
|
4719
|
+
}
|
|
4720
|
+
const rect = wrapper.getBoundingClientRect();
|
|
4721
|
+
const spaceBelow = window.innerHeight - rect.bottom - DatepickerComponent.CALENDAR_VIEWPORT_GAP;
|
|
4722
|
+
const spaceAbove = rect.top - DatepickerComponent.CALENDAR_VIEWPORT_GAP;
|
|
4723
|
+
const needed = DatepickerComponent.CALENDAR_POPUP_HEIGHT;
|
|
4724
|
+
if (spaceBelow < needed && spaceAbove >= needed) {
|
|
4725
|
+
this.calendarPlacement = 'above';
|
|
4726
|
+
}
|
|
4727
|
+
else if (spaceAbove < needed && spaceBelow >= needed) {
|
|
4728
|
+
this.calendarPlacement = 'below';
|
|
4729
|
+
}
|
|
4730
|
+
else if (spaceAbove >= spaceBelow) {
|
|
4731
|
+
this.calendarPlacement = 'above';
|
|
4732
|
+
}
|
|
4733
|
+
else {
|
|
4734
|
+
this.calendarPlacement = 'below';
|
|
4735
|
+
}
|
|
4736
|
+
this.cdr.markForCheck();
|
|
4737
|
+
}
|
|
4698
4738
|
closeCalendar() {
|
|
4699
4739
|
if (!this.isOpen)
|
|
4700
4740
|
return;
|
|
@@ -5080,7 +5120,10 @@ class DatepickerComponent {
|
|
|
5080
5120
|
return days;
|
|
5081
5121
|
}
|
|
5082
5122
|
get containerClasses() {
|
|
5083
|
-
return `sefin-datepicker sefin-datepicker--${this.size} ${this.isOpen ? 'sefin-datepicker--open' : ''}`.trim();
|
|
5123
|
+
return `sefin-datepicker sefin-datepicker--${this.size} ${this.isOpen ? 'sefin-datepicker--open' : ''} ${this.hasErrorState ? 'sefin-datepicker--error' : ''}`.trim();
|
|
5124
|
+
}
|
|
5125
|
+
get hasErrorState() {
|
|
5126
|
+
return this.error || !!this.errorMessage;
|
|
5084
5127
|
}
|
|
5085
5128
|
getCurrentYear() {
|
|
5086
5129
|
return new Date().getFullYear();
|
|
@@ -5089,14 +5132,17 @@ class DatepickerComponent {
|
|
|
5089
5132
|
return year === this.getCurrentYear();
|
|
5090
5133
|
}
|
|
5091
5134
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
5092
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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", "borderRadius", "type", "placeholder", "hint", "error", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }] });
|
|
5135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", error: "error", errorMessage: "errorMessage", hint: "hint", 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: "inputWrapperRef", first: true, predicate: ["inputWrapperRef"], 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 #inputWrapperRef\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 [error]=\"error\"\n [errorMessage]=\"errorMessage\"\n [hint]=\"hint\"\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 [class.sefin-datepicker__calendar--above]=\"calendarPlacement === 'above'\"\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:sefin-datepicker-fadeInBelow .2s ease-in-out}.sefin-datepicker__calendar--above{top:auto;bottom:calc(100% + var(--sefin-spacing-xs));animation:sefin-datepicker-fadeInAbove .2s ease-in-out}@keyframes sefin-datepicker-fadeInBelow{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sefin-datepicker-fadeInAbove{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:not(.sefin-datepicker--error) .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", "borderRadius", "type", "placeholder", "hint", "error", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }] });
|
|
5093
5136
|
}
|
|
5094
5137
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
5095
5138
|
type: Component,
|
|
5096
|
-
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"] }]
|
|
5139
|
+
args: [{ selector: 'sefin-datepicker', standalone: true, imports: [CommonModule, IconComponent, TextFieldComponent], template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <div\n #inputWrapperRef\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 [error]=\"error\"\n [errorMessage]=\"errorMessage\"\n [hint]=\"hint\"\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 [class.sefin-datepicker__calendar--above]=\"calendarPlacement === 'above'\"\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:sefin-datepicker-fadeInBelow .2s ease-in-out}.sefin-datepicker__calendar--above{top:auto;bottom:calc(100% + var(--sefin-spacing-xs));animation:sefin-datepicker-fadeInAbove .2s ease-in-out}@keyframes sefin-datepicker-fadeInBelow{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes sefin-datepicker-fadeInAbove{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:not(.sefin-datepicker--error) .sefin-datepicker__input ::ng-deep .sefin-textfield .sefin-textfield__border{border-color:var(--sefin-color-border-focus)}\n"] }]
|
|
5097
5140
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { containerRef: [{
|
|
5098
5141
|
type: ViewChild,
|
|
5099
5142
|
args: ['containerRef', { static: false }]
|
|
5143
|
+
}], inputWrapperRef: [{
|
|
5144
|
+
type: ViewChild,
|
|
5145
|
+
args: ['inputWrapperRef', { static: false }]
|
|
5100
5146
|
}], textfieldRef: [{
|
|
5101
5147
|
type: ViewChild,
|
|
5102
5148
|
args: ['textfieldRef', { static: false }]
|
|
@@ -5109,6 +5155,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
5109
5155
|
type: Input
|
|
5110
5156
|
}], disabled: [{
|
|
5111
5157
|
type: Input
|
|
5158
|
+
}], error: [{
|
|
5159
|
+
type: Input
|
|
5160
|
+
}], errorMessage: [{
|
|
5161
|
+
type: Input
|
|
5162
|
+
}], hint: [{
|
|
5163
|
+
type: Input
|
|
5112
5164
|
}], size: [{
|
|
5113
5165
|
type: Input
|
|
5114
5166
|
}], format: [{
|