@f1softinternational/f1-nepali-date-picker 1.0.1 → 1.0.3
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.
- package/README.md +1 -1
- package/esm2022/lib/components/nepali-date-picker/nepali-date-picker.component.mjs +30 -3
- package/esm2022/lib/models/nepali-date.model.mjs +11 -4
- package/fesm2022/f1softinternational-f1-nepali-date-picker.mjs +38 -5
- package/fesm2022/f1softinternational-f1-nepali-date-picker.mjs.map +1 -1
- package/lib/components/nepali-date-picker/nepali-date-picker.component.d.ts +11 -2
- package/package.json +1 -1
|
@@ -475,15 +475,22 @@ class NepaliDate {
|
|
|
475
475
|
*/
|
|
476
476
|
format(pattern = 'YYYY-MM-DD', useNepaliDigits = false) {
|
|
477
477
|
let result = pattern;
|
|
478
|
-
//
|
|
478
|
+
// Use placeholders without M/D/Y characters to prevent regex replacement issues
|
|
479
|
+
const monthNameEn = BS_MONTHS_EN[this._month - 1];
|
|
480
|
+
const monthNameNp = BS_MONTHS_NP[this._month - 1];
|
|
481
|
+
// Replace month name patterns first with unique placeholders
|
|
482
|
+
result = result.replace(/MMMM/g, '\x00EN\x00');
|
|
483
|
+
result = result.replace(/mmmm/g, '\x00NP\x00');
|
|
484
|
+
// Replace year and numeric patterns
|
|
479
485
|
result = result.replace(/YYYY/g, String(this._year).padStart(4, '0'));
|
|
480
486
|
result = result.replace(/YY/g, String(this._year).slice(-2));
|
|
481
|
-
result = result.replace(/MMMM/g, BS_MONTHS_EN[this._month - 1]);
|
|
482
|
-
result = result.replace(/mmmm/g, BS_MONTHS_NP[this._month - 1]);
|
|
483
487
|
result = result.replace(/MM/g, String(this._month).padStart(2, '0'));
|
|
484
488
|
result = result.replace(/M/g, String(this._month));
|
|
485
489
|
result = result.replace(/DD/g, String(this._day).padStart(2, '0'));
|
|
486
490
|
result = result.replace(/D/g, String(this._day));
|
|
491
|
+
// Restore month names from placeholders
|
|
492
|
+
result = result.replace(/\x00EN\x00/g, monthNameEn);
|
|
493
|
+
result = result.replace(/\x00NP\x00/g, monthNameNp);
|
|
487
494
|
if (useNepaliDigits) {
|
|
488
495
|
result = toNepaliDigits(result);
|
|
489
496
|
}
|
|
@@ -790,6 +797,18 @@ class NepaliDatePickerComponent {
|
|
|
790
797
|
this.updateCalendarGrid();
|
|
791
798
|
}
|
|
792
799
|
ngOnDestroy() { }
|
|
800
|
+
ngOnChanges(changes) {
|
|
801
|
+
// Update month/weekday names when language changes
|
|
802
|
+
if (changes['language'] && !changes['language'].firstChange) {
|
|
803
|
+
this.monthNames = this.dateConverter.getMonthNames(this.language);
|
|
804
|
+
this.weekdayNames = this.dateConverter.getWeekdayNames(this.language);
|
|
805
|
+
this.cdr.markForCheck();
|
|
806
|
+
}
|
|
807
|
+
// Trigger change detection when useNepaliDigits changes
|
|
808
|
+
if (changes['useNepaliDigits'] && !changes['useNepaliDigits'].firstChange) {
|
|
809
|
+
this.cdr.markForCheck();
|
|
810
|
+
}
|
|
811
|
+
}
|
|
793
812
|
// ControlValueAccessor implementation
|
|
794
813
|
writeValue(value) {
|
|
795
814
|
this.selectedDate = value;
|
|
@@ -930,6 +949,20 @@ class NepaliDatePickerComponent {
|
|
|
930
949
|
trackByDay(index) {
|
|
931
950
|
return index;
|
|
932
951
|
}
|
|
952
|
+
/**
|
|
953
|
+
* Format day number based on useNepaliDigits setting
|
|
954
|
+
*/
|
|
955
|
+
formatDay(day) {
|
|
956
|
+
if (day === null)
|
|
957
|
+
return '';
|
|
958
|
+
return this.useNepaliDigits ? toNepaliDigits(day) : String(day);
|
|
959
|
+
}
|
|
960
|
+
/**
|
|
961
|
+
* Format year number based on useNepaliDigits setting
|
|
962
|
+
*/
|
|
963
|
+
formatYear(year) {
|
|
964
|
+
return this.useNepaliDigits ? toNepaliDigits(year) : String(year);
|
|
965
|
+
}
|
|
933
966
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NepaliDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DateConverterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
934
967
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NepaliDatePickerComponent, isStandalone: true, selector: "f1-nepali-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", placeholder: "placeholder", displayFormat: "displayFormat", theme: "theme", language: "language", showTodayButton: "showTodayButton", disabled: "disabled", useNepaliDigits: "useNepaliDigits" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown.escape": "onEscapeKey()" } }, providers: [
|
|
935
968
|
{
|
|
@@ -937,7 +970,7 @@ class NepaliDatePickerComponent {
|
|
|
937
970
|
useExisting: forwardRef(() => NepaliDatePickerComponent),
|
|
938
971
|
multi: true,
|
|
939
972
|
},
|
|
940
|
-
], ngImport: i0, template: "<div class=\"f1-datepicker\" [class.f1-datepicker--dark]=\"theme === 'dark'\" [class.f1-datepicker--disabled]=\"disabled\">\n <!-- Input Field -->\n <div class=\"f1-datepicker__input-wrapper\" (click)=\"toggleCalendar()\">\n <input\n type=\"text\"\n class=\"f1-datepicker__input\"\n [value]=\"displayValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n readonly\n />\n <span class=\"f1-datepicker__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n </svg>\n </span>\n <button\n *ngIf=\"selectedDate && !disabled\"\n type=\"button\"\n class=\"f1-datepicker__clear\"\n (click)=\"clearDate(); $event.stopPropagation()\"\n aria-label=\"Clear date\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown -->\n <div class=\"f1-datepicker__dropdown\" *ngIf=\"isOpen\" [@fadeIn]>\n <!-- Header -->\n <div class=\"f1-datepicker__header\">\n <button\n type=\"button\"\n class=\"f1-datepicker__nav-btn\"\n (click)=\"previousMonth()\"\n aria-label=\"Previous month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n </svg>\n </button>\n\n <div class=\"f1-datepicker__selectors\">\n <select\n class=\"f1-datepicker__select\"\n [value]=\"viewDate.month\"\n (change)=\"onMonthChange($event)\"\n >\n <option *ngFor=\"let month of monthNames; let i = index\" [value]=\"i + 1\">\n {{ month }}\n </option>\n </select>\n\n <select\n class=\"f1-datepicker__select\"\n [value]=\"viewDate.year\"\n (change)=\"onYearChange($event)\"\n >\n <option *ngFor=\"let year of years\" [value]=\"year\">\n {{ useNepaliDigits ? (year | number:'1.0-0') : year }}\n </option>\n </select>\n </div>\n\n <button\n type=\"button\"\n class=\"f1-datepicker__nav-btn\"\n (click)=\"nextMonth()\"\n aria-label=\"Next month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"f1-datepicker__weekdays\">\n <div class=\"f1-datepicker__weekday\" *ngFor=\"let day of weekdayNames\">\n {{ day }}\n </div>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"f1-datepicker__grid\">\n <div class=\"f1-datepicker__week\" *ngFor=\"let week of calendarGrid; trackBy: trackByWeek\">\n <button\n type=\"button\"\n class=\"f1-datepicker__day\"\n *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.f1-datepicker__day--empty]=\"day === null\"\n [class.f1-datepicker__day--today]=\"day !== null && isToday(day)\"\n [class.f1-datepicker__day--selected]=\"day !== null && isSelected(day)\"\n [class.f1-datepicker__day--disabled]=\"day !== null && !isDateSelectable(day)\"\n [disabled]=\"day === null || !isDateSelectable(day)\"\n (click)=\"selectDate(day)\"\n >\n {{ day !== null ? (useNepaliDigits ? day : day) : '' }}\n </button>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"f1-datepicker__footer\" *ngIf=\"showTodayButton\">\n <button\n type=\"button\"\n class=\"f1-datepicker__today-btn\"\n (click)=\"selectToday()\"\n >\n {{ language === 'np' ? '\u0906\u091C' : 'Today' }}\n </button>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block;font-family:var(--f1-datepicker-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.f1-datepicker{--f1-dp-bg: #ffffff;--f1-dp-text: #1a1a2e;--f1-dp-text-muted: #64748b;--f1-dp-border: #e2e8f0;--f1-dp-primary: #6366f1;--f1-dp-primary-hover: #4f46e5;--f1-dp-primary-text: #ffffff;--f1-dp-hover-bg: #f1f5f9;--f1-dp-today-bg: #eef2ff;--f1-dp-today-border: #6366f1;--f1-dp-disabled-text: #cbd5e1;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .12);--f1-dp-input-bg: #ffffff;--f1-dp-dropdown-bg: #ffffff;position:relative;width:280px}.f1-datepicker--dark{--f1-dp-bg: #1e1e2e;--f1-dp-text: #f8fafc;--f1-dp-text-muted: #94a3b8;--f1-dp-border: #334155;--f1-dp-primary: #818cf8;--f1-dp-primary-hover: #a5b4fc;--f1-dp-primary-text: #1e1e2e;--f1-dp-hover-bg: #2d2d44;--f1-dp-today-bg: #312e81;--f1-dp-today-border: #818cf8;--f1-dp-disabled-text: #475569;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .4);--f1-dp-input-bg: #1e1e2e;--f1-dp-dropdown-bg: #1e1e2e}.f1-datepicker--disabled{opacity:.6;cursor:not-allowed}.f1-datepicker__input-wrapper{position:relative;display:flex;align-items:center;cursor:pointer}.f1-datepicker--disabled .f1-datepicker__input-wrapper{cursor:not-allowed}.f1-datepicker__input{width:100%;padding:12px 44px 12px 14px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:var(--f1-dp-input-bg);border:2px solid var(--f1-dp-border);border-radius:10px;outline:none;cursor:pointer;transition:all .2s ease}.f1-datepicker__input::placeholder{color:var(--f1-dp-text-muted)}.f1-datepicker__input:hover:not(:disabled){border-color:var(--f1-dp-primary)}.f1-datepicker__input:focus{border-color:var(--f1-dp-primary);box-shadow:0 0 0 3px #6366f126}.f1-datepicker__input:disabled{cursor:not-allowed;background:var(--f1-dp-hover-bg)}.f1-datepicker__icon{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:var(--f1-dp-text-muted);pointer-events:none;transition:color .2s ease}.f1-datepicker__input-wrapper:hover .f1-datepicker__icon{color:var(--f1-dp-primary)}.f1-datepicker__clear{position:absolute;right:38px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--f1-dp-text-muted);background:transparent;border:none;border-radius:50%;cursor:pointer;transition:all .2s ease}.f1-datepicker__clear:hover{color:var(--f1-dp-text);background:var(--f1-dp-hover-bg)}.f1-datepicker__dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;width:100%;min-width:300px;padding:16px;background:var(--f1-dp-dropdown-bg);border:1px solid var(--f1-dp-border);border-radius:14px;box-shadow:var(--f1-dp-shadow);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.f1-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.f1-datepicker__nav-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__nav-btn:hover{background:var(--f1-dp-hover-bg);color:var(--f1-dp-primary)}.f1-datepicker__nav-btn:active{transform:scale(.95)}.f1-datepicker__selectors{display:flex;gap:8px}.f1-datepicker__select{padding:8px 28px 8px 12px;font-size:14px;font-weight:600;color:var(--f1-dp-text);background:var(--f1-dp-hover-bg);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.f1-datepicker__select:hover{background-color:var(--f1-dp-border)}.f1-datepicker__select:focus{outline:none;box-shadow:0 0 0 2px var(--f1-dp-primary)}.f1-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.f1-datepicker__weekday{padding:8px 0;font-size:12px;font-weight:600;color:var(--f1-dp-text-muted);text-align:center;text-transform:uppercase;letter-spacing:.5px}.f1-datepicker__grid{display:flex;flex-direction:column;gap:4px}.f1-datepicker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.f1-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .15s ease}.f1-datepicker__day:hover:not(:disabled):not(.f1-datepicker__day--selected):not(.f1-datepicker__day--empty){background:var(--f1-dp-hover-bg)}.f1-datepicker__day--empty{visibility:hidden;cursor:default}.f1-datepicker__day--today{background:var(--f1-dp-today-bg);border:2px solid var(--f1-dp-today-border);font-weight:700}.f1-datepicker__day--selected{background:var(--f1-dp-primary)!important;color:var(--f1-dp-primary-text)!important;font-weight:700}.f1-datepicker__day--selected:hover{background:var(--f1-dp-primary-hover)!important}.f1-datepicker__day--disabled{color:var(--f1-dp-disabled-text);cursor:not-allowed}.f1-datepicker__day--disabled:hover{background:transparent}.f1-datepicker__footer{display:flex;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--f1-dp-border)}.f1-datepicker__today-btn{padding:8px 20px;font-size:13px;font-weight:600;color:var(--f1-dp-primary);background:transparent;border:2px solid var(--f1-dp-primary);border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__today-btn:hover{background:var(--f1-dp-primary);color:var(--f1-dp-primary-text)}.f1-datepicker__today-btn:active{transform:scale(.98)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
973
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"f1-datepicker\" [class.f1-datepicker--dark]=\"theme === 'dark'\" [class.f1-datepicker--disabled]=\"disabled\">\n <!-- Input Field -->\n <div class=\"f1-datepicker__input-wrapper\" (click)=\"toggleCalendar()\">\n <input type=\"text\" class=\"f1-datepicker__input\" [value]=\"displayValue\" [placeholder]=\"placeholder\"\n [disabled]=\"disabled\" readonly />\n <span class=\"f1-datepicker__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n </svg>\n </span>\n <button *ngIf=\"selectedDate && !disabled\" type=\"button\" class=\"f1-datepicker__clear\"\n (click)=\"clearDate(); $event.stopPropagation()\" aria-label=\"Clear date\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown -->\n <div class=\"f1-datepicker__dropdown\" *ngIf=\"isOpen\" [@fadeIn]>\n <!-- Header -->\n <div class=\"f1-datepicker__header\">\n <button type=\"button\" class=\"f1-datepicker__nav-btn\" (click)=\"previousMonth()\" aria-label=\"Previous month\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n </svg>\n </button>\n\n <div class=\"f1-datepicker__selectors\">\n <select class=\"f1-datepicker__select\" [value]=\"viewDate.month\" (change)=\"onMonthChange($event)\">\n <option *ngFor=\"let month of monthNames; let i = index\" [value]=\"i + 1\">\n {{ month }}\n </option>\n </select>\n\n <select class=\"f1-datepicker__select\" [value]=\"viewDate.year\" (change)=\"onYearChange($event)\">\n <option *ngFor=\"let year of years\" [value]=\"year\">\n {{ formatYear(year) }}\n </option>\n </select>\n </div>\n\n <button type=\"button\" class=\"f1-datepicker__nav-btn\" (click)=\"nextMonth()\" aria-label=\"Next month\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"f1-datepicker__weekdays\">\n <div class=\"f1-datepicker__weekday\" *ngFor=\"let day of weekdayNames\">\n {{ day }}\n </div>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"f1-datepicker__grid\">\n <div class=\"f1-datepicker__week\" *ngFor=\"let week of calendarGrid; trackBy: trackByWeek\">\n <button type=\"button\" class=\"f1-datepicker__day\" *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.f1-datepicker__day--empty]=\"day === null\"\n [class.f1-datepicker__day--today]=\"day !== null && isToday(day)\"\n [class.f1-datepicker__day--selected]=\"day !== null && isSelected(day)\"\n [class.f1-datepicker__day--disabled]=\"day !== null && !isDateSelectable(day)\"\n [disabled]=\"day === null || !isDateSelectable(day)\" (click)=\"selectDate(day)\">\n {{ formatDay(day) }}\n </button>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"f1-datepicker__footer\" *ngIf=\"showTodayButton\">\n <button type=\"button\" class=\"f1-datepicker__today-btn\" (click)=\"selectToday()\">\n {{ language === 'np' ? '\u0906\u091C' : 'Today' }}\n </button>\n </div>\n </div>\n</div>", styles: [":host{display:inline-block;font-family:var(--f1-datepicker-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.f1-datepicker{--f1-dp-bg: #ffffff;--f1-dp-text: #1a1a2e;--f1-dp-text-muted: #64748b;--f1-dp-border: #e2e8f0;--f1-dp-primary: #6366f1;--f1-dp-primary-hover: #4f46e5;--f1-dp-primary-text: #ffffff;--f1-dp-hover-bg: #f1f5f9;--f1-dp-today-bg: #eef2ff;--f1-dp-today-border: #6366f1;--f1-dp-disabled-text: #cbd5e1;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .12);--f1-dp-input-bg: #ffffff;--f1-dp-dropdown-bg: #ffffff;position:relative;width:280px}.f1-datepicker--dark{--f1-dp-bg: #1e1e2e;--f1-dp-text: #f8fafc;--f1-dp-text-muted: #94a3b8;--f1-dp-border: #334155;--f1-dp-primary: #818cf8;--f1-dp-primary-hover: #a5b4fc;--f1-dp-primary-text: #1e1e2e;--f1-dp-hover-bg: #2d2d44;--f1-dp-today-bg: #312e81;--f1-dp-today-border: #818cf8;--f1-dp-disabled-text: #475569;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .4);--f1-dp-input-bg: #1e1e2e;--f1-dp-dropdown-bg: #1e1e2e}.f1-datepicker--disabled{opacity:.6;cursor:not-allowed}.f1-datepicker__input-wrapper{position:relative;display:flex;align-items:center;cursor:pointer}.f1-datepicker--disabled .f1-datepicker__input-wrapper{cursor:not-allowed}.f1-datepicker__input{width:100%;padding:12px 44px 12px 14px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:var(--f1-dp-input-bg);border:2px solid var(--f1-dp-border);border-radius:10px;outline:none;cursor:pointer;transition:all .2s ease}.f1-datepicker__input::placeholder{color:var(--f1-dp-text-muted)}.f1-datepicker__input:hover:not(:disabled){border-color:var(--f1-dp-primary)}.f1-datepicker__input:focus{border-color:var(--f1-dp-primary);box-shadow:0 0 0 3px #6366f126}.f1-datepicker__input:disabled{cursor:not-allowed;background:var(--f1-dp-hover-bg)}.f1-datepicker__icon{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:var(--f1-dp-text-muted);pointer-events:none;transition:color .2s ease}.f1-datepicker__input-wrapper:hover .f1-datepicker__icon{color:var(--f1-dp-primary)}.f1-datepicker__clear{position:absolute;right:38px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--f1-dp-text-muted);background:transparent;border:none;border-radius:50%;cursor:pointer;transition:all .2s ease}.f1-datepicker__clear:hover{color:var(--f1-dp-text);background:var(--f1-dp-hover-bg)}.f1-datepicker__dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;width:100%;min-width:300px;padding:16px;background:var(--f1-dp-dropdown-bg);border:1px solid var(--f1-dp-border);border-radius:14px;box-shadow:var(--f1-dp-shadow);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.f1-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.f1-datepicker__nav-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__nav-btn:hover{background:var(--f1-dp-hover-bg);color:var(--f1-dp-primary)}.f1-datepicker__nav-btn:active{transform:scale(.95)}.f1-datepicker__selectors{display:flex;gap:8px}.f1-datepicker__select{padding:8px 28px 8px 12px;font-size:14px;font-weight:600;color:var(--f1-dp-text);background:var(--f1-dp-hover-bg);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.f1-datepicker__select:hover{background-color:var(--f1-dp-border)}.f1-datepicker__select:focus{outline:none;box-shadow:0 0 0 2px var(--f1-dp-primary)}.f1-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.f1-datepicker__weekday{padding:8px 0;font-size:12px;font-weight:600;color:var(--f1-dp-text-muted);text-align:center;text-transform:uppercase;letter-spacing:.5px}.f1-datepicker__grid{display:flex;flex-direction:column;gap:4px}.f1-datepicker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.f1-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .15s ease}.f1-datepicker__day:hover:not(:disabled):not(.f1-datepicker__day--selected):not(.f1-datepicker__day--empty){background:var(--f1-dp-hover-bg)}.f1-datepicker__day--empty{visibility:hidden;cursor:default}.f1-datepicker__day--today{background:var(--f1-dp-today-bg);border:2px solid var(--f1-dp-today-border);font-weight:700}.f1-datepicker__day--selected{background:var(--f1-dp-primary)!important;color:var(--f1-dp-primary-text)!important;font-weight:700}.f1-datepicker__day--selected:hover{background:var(--f1-dp-primary-hover)!important}.f1-datepicker__day--disabled{color:var(--f1-dp-disabled-text);cursor:not-allowed}.f1-datepicker__day--disabled:hover{background:transparent}.f1-datepicker__footer{display:flex;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--f1-dp-border)}.f1-datepicker__today-btn{padding:8px 20px;font-size:13px;font-weight:600;color:var(--f1-dp-primary);background:transparent;border:2px solid var(--f1-dp-primary);border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__today-btn:hover{background:var(--f1-dp-primary);color:var(--f1-dp-primary-text)}.f1-datepicker__today-btn:active{transform:scale(.98)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
941
974
|
}
|
|
942
975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NepaliDatePickerComponent, decorators: [{
|
|
943
976
|
type: Component,
|
|
@@ -947,7 +980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
947
980
|
useExisting: forwardRef(() => NepaliDatePickerComponent),
|
|
948
981
|
multi: true,
|
|
949
982
|
},
|
|
950
|
-
], template: "<div class=\"f1-datepicker\" [class.f1-datepicker--dark]=\"theme === 'dark'\" [class.f1-datepicker--disabled]=\"disabled\">\n <!-- Input Field -->\n <div class=\"f1-datepicker__input-wrapper\" (click)=\"toggleCalendar()\">\n <input\n type=\"text\"\n class=\"f1-datepicker__input\"\n [value]=\"displayValue\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n readonly\n />\n <span class=\"f1-datepicker__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n </svg>\n </span>\n <button\n *ngIf=\"selectedDate && !disabled\"\n type=\"button\"\n class=\"f1-datepicker__clear\"\n (click)=\"clearDate(); $event.stopPropagation()\"\n aria-label=\"Clear date\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown -->\n <div class=\"f1-datepicker__dropdown\" *ngIf=\"isOpen\" [@fadeIn]>\n <!-- Header -->\n <div class=\"f1-datepicker__header\">\n <button\n type=\"button\"\n class=\"f1-datepicker__nav-btn\"\n (click)=\"previousMonth()\"\n aria-label=\"Previous month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n </svg>\n </button>\n\n <div class=\"f1-datepicker__selectors\">\n <select\n class=\"f1-datepicker__select\"\n [value]=\"viewDate.month\"\n (change)=\"onMonthChange($event)\"\n >\n <option *ngFor=\"let month of monthNames; let i = index\" [value]=\"i + 1\">\n {{ month }}\n </option>\n </select>\n\n <select\n class=\"f1-datepicker__select\"\n [value]=\"viewDate.year\"\n (change)=\"onYearChange($event)\"\n >\n <option *ngFor=\"let year of years\" [value]=\"year\">\n {{ useNepaliDigits ? (year | number:'1.0-0') : year }}\n </option>\n </select>\n </div>\n\n <button\n type=\"button\"\n class=\"f1-datepicker__nav-btn\"\n (click)=\"nextMonth()\"\n aria-label=\"Next month\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"f1-datepicker__weekdays\">\n <div class=\"f1-datepicker__weekday\" *ngFor=\"let day of weekdayNames\">\n {{ day }}\n </div>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"f1-datepicker__grid\">\n <div class=\"f1-datepicker__week\" *ngFor=\"let week of calendarGrid; trackBy: trackByWeek\">\n <button\n type=\"button\"\n class=\"f1-datepicker__day\"\n *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.f1-datepicker__day--empty]=\"day === null\"\n [class.f1-datepicker__day--today]=\"day !== null && isToday(day)\"\n [class.f1-datepicker__day--selected]=\"day !== null && isSelected(day)\"\n [class.f1-datepicker__day--disabled]=\"day !== null && !isDateSelectable(day)\"\n [disabled]=\"day === null || !isDateSelectable(day)\"\n (click)=\"selectDate(day)\"\n >\n {{ day !== null ? (useNepaliDigits ? day : day) : '' }}\n </button>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"f1-datepicker__footer\" *ngIf=\"showTodayButton\">\n <button\n type=\"button\"\n class=\"f1-datepicker__today-btn\"\n (click)=\"selectToday()\"\n >\n {{ language === 'np' ? '\u0906\u091C' : 'Today' }}\n </button>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block;font-family:var(--f1-datepicker-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.f1-datepicker{--f1-dp-bg: #ffffff;--f1-dp-text: #1a1a2e;--f1-dp-text-muted: #64748b;--f1-dp-border: #e2e8f0;--f1-dp-primary: #6366f1;--f1-dp-primary-hover: #4f46e5;--f1-dp-primary-text: #ffffff;--f1-dp-hover-bg: #f1f5f9;--f1-dp-today-bg: #eef2ff;--f1-dp-today-border: #6366f1;--f1-dp-disabled-text: #cbd5e1;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .12);--f1-dp-input-bg: #ffffff;--f1-dp-dropdown-bg: #ffffff;position:relative;width:280px}.f1-datepicker--dark{--f1-dp-bg: #1e1e2e;--f1-dp-text: #f8fafc;--f1-dp-text-muted: #94a3b8;--f1-dp-border: #334155;--f1-dp-primary: #818cf8;--f1-dp-primary-hover: #a5b4fc;--f1-dp-primary-text: #1e1e2e;--f1-dp-hover-bg: #2d2d44;--f1-dp-today-bg: #312e81;--f1-dp-today-border: #818cf8;--f1-dp-disabled-text: #475569;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .4);--f1-dp-input-bg: #1e1e2e;--f1-dp-dropdown-bg: #1e1e2e}.f1-datepicker--disabled{opacity:.6;cursor:not-allowed}.f1-datepicker__input-wrapper{position:relative;display:flex;align-items:center;cursor:pointer}.f1-datepicker--disabled .f1-datepicker__input-wrapper{cursor:not-allowed}.f1-datepicker__input{width:100%;padding:12px 44px 12px 14px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:var(--f1-dp-input-bg);border:2px solid var(--f1-dp-border);border-radius:10px;outline:none;cursor:pointer;transition:all .2s ease}.f1-datepicker__input::placeholder{color:var(--f1-dp-text-muted)}.f1-datepicker__input:hover:not(:disabled){border-color:var(--f1-dp-primary)}.f1-datepicker__input:focus{border-color:var(--f1-dp-primary);box-shadow:0 0 0 3px #6366f126}.f1-datepicker__input:disabled{cursor:not-allowed;background:var(--f1-dp-hover-bg)}.f1-datepicker__icon{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:var(--f1-dp-text-muted);pointer-events:none;transition:color .2s ease}.f1-datepicker__input-wrapper:hover .f1-datepicker__icon{color:var(--f1-dp-primary)}.f1-datepicker__clear{position:absolute;right:38px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--f1-dp-text-muted);background:transparent;border:none;border-radius:50%;cursor:pointer;transition:all .2s ease}.f1-datepicker__clear:hover{color:var(--f1-dp-text);background:var(--f1-dp-hover-bg)}.f1-datepicker__dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;width:100%;min-width:300px;padding:16px;background:var(--f1-dp-dropdown-bg);border:1px solid var(--f1-dp-border);border-radius:14px;box-shadow:var(--f1-dp-shadow);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.f1-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.f1-datepicker__nav-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__nav-btn:hover{background:var(--f1-dp-hover-bg);color:var(--f1-dp-primary)}.f1-datepicker__nav-btn:active{transform:scale(.95)}.f1-datepicker__selectors{display:flex;gap:8px}.f1-datepicker__select{padding:8px 28px 8px 12px;font-size:14px;font-weight:600;color:var(--f1-dp-text);background:var(--f1-dp-hover-bg);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.f1-datepicker__select:hover{background-color:var(--f1-dp-border)}.f1-datepicker__select:focus{outline:none;box-shadow:0 0 0 2px var(--f1-dp-primary)}.f1-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.f1-datepicker__weekday{padding:8px 0;font-size:12px;font-weight:600;color:var(--f1-dp-text-muted);text-align:center;text-transform:uppercase;letter-spacing:.5px}.f1-datepicker__grid{display:flex;flex-direction:column;gap:4px}.f1-datepicker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.f1-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .15s ease}.f1-datepicker__day:hover:not(:disabled):not(.f1-datepicker__day--selected):not(.f1-datepicker__day--empty){background:var(--f1-dp-hover-bg)}.f1-datepicker__day--empty{visibility:hidden;cursor:default}.f1-datepicker__day--today{background:var(--f1-dp-today-bg);border:2px solid var(--f1-dp-today-border);font-weight:700}.f1-datepicker__day--selected{background:var(--f1-dp-primary)!important;color:var(--f1-dp-primary-text)!important;font-weight:700}.f1-datepicker__day--selected:hover{background:var(--f1-dp-primary-hover)!important}.f1-datepicker__day--disabled{color:var(--f1-dp-disabled-text);cursor:not-allowed}.f1-datepicker__day--disabled:hover{background:transparent}.f1-datepicker__footer{display:flex;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--f1-dp-border)}.f1-datepicker__today-btn{padding:8px 20px;font-size:13px;font-weight:600;color:var(--f1-dp-primary);background:transparent;border:2px solid var(--f1-dp-primary);border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__today-btn:hover{background:var(--f1-dp-primary);color:var(--f1-dp-primary-text)}.f1-datepicker__today-btn:active{transform:scale(.98)}\n"] }]
|
|
983
|
+
], template: "<div class=\"f1-datepicker\" [class.f1-datepicker--dark]=\"theme === 'dark'\" [class.f1-datepicker--disabled]=\"disabled\">\n <!-- Input Field -->\n <div class=\"f1-datepicker__input-wrapper\" (click)=\"toggleCalendar()\">\n <input type=\"text\" class=\"f1-datepicker__input\" [value]=\"displayValue\" [placeholder]=\"placeholder\"\n [disabled]=\"disabled\" readonly />\n <span class=\"f1-datepicker__icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n </svg>\n </span>\n <button *ngIf=\"selectedDate && !disabled\" type=\"button\" class=\"f1-datepicker__clear\"\n (click)=\"clearDate(); $event.stopPropagation()\" aria-label=\"Clear date\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Dropdown -->\n <div class=\"f1-datepicker__dropdown\" *ngIf=\"isOpen\" [@fadeIn]>\n <!-- Header -->\n <div class=\"f1-datepicker__header\">\n <button type=\"button\" class=\"f1-datepicker__nav-btn\" (click)=\"previousMonth()\" aria-label=\"Previous month\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n </svg>\n </button>\n\n <div class=\"f1-datepicker__selectors\">\n <select class=\"f1-datepicker__select\" [value]=\"viewDate.month\" (change)=\"onMonthChange($event)\">\n <option *ngFor=\"let month of monthNames; let i = index\" [value]=\"i + 1\">\n {{ month }}\n </option>\n </select>\n\n <select class=\"f1-datepicker__select\" [value]=\"viewDate.year\" (change)=\"onYearChange($event)\">\n <option *ngFor=\"let year of years\" [value]=\"year\">\n {{ formatYear(year) }}\n </option>\n </select>\n </div>\n\n <button type=\"button\" class=\"f1-datepicker__nav-btn\" (click)=\"nextMonth()\" aria-label=\"Next month\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </button>\n </div>\n\n <!-- Weekday Headers -->\n <div class=\"f1-datepicker__weekdays\">\n <div class=\"f1-datepicker__weekday\" *ngFor=\"let day of weekdayNames\">\n {{ day }}\n </div>\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"f1-datepicker__grid\">\n <div class=\"f1-datepicker__week\" *ngFor=\"let week of calendarGrid; trackBy: trackByWeek\">\n <button type=\"button\" class=\"f1-datepicker__day\" *ngFor=\"let day of week; trackBy: trackByDay\"\n [class.f1-datepicker__day--empty]=\"day === null\"\n [class.f1-datepicker__day--today]=\"day !== null && isToday(day)\"\n [class.f1-datepicker__day--selected]=\"day !== null && isSelected(day)\"\n [class.f1-datepicker__day--disabled]=\"day !== null && !isDateSelectable(day)\"\n [disabled]=\"day === null || !isDateSelectable(day)\" (click)=\"selectDate(day)\">\n {{ formatDay(day) }}\n </button>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"f1-datepicker__footer\" *ngIf=\"showTodayButton\">\n <button type=\"button\" class=\"f1-datepicker__today-btn\" (click)=\"selectToday()\">\n {{ language === 'np' ? '\u0906\u091C' : 'Today' }}\n </button>\n </div>\n </div>\n</div>", styles: [":host{display:inline-block;font-family:var(--f1-datepicker-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif)}.f1-datepicker{--f1-dp-bg: #ffffff;--f1-dp-text: #1a1a2e;--f1-dp-text-muted: #64748b;--f1-dp-border: #e2e8f0;--f1-dp-primary: #6366f1;--f1-dp-primary-hover: #4f46e5;--f1-dp-primary-text: #ffffff;--f1-dp-hover-bg: #f1f5f9;--f1-dp-today-bg: #eef2ff;--f1-dp-today-border: #6366f1;--f1-dp-disabled-text: #cbd5e1;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .12);--f1-dp-input-bg: #ffffff;--f1-dp-dropdown-bg: #ffffff;position:relative;width:280px}.f1-datepicker--dark{--f1-dp-bg: #1e1e2e;--f1-dp-text: #f8fafc;--f1-dp-text-muted: #94a3b8;--f1-dp-border: #334155;--f1-dp-primary: #818cf8;--f1-dp-primary-hover: #a5b4fc;--f1-dp-primary-text: #1e1e2e;--f1-dp-hover-bg: #2d2d44;--f1-dp-today-bg: #312e81;--f1-dp-today-border: #818cf8;--f1-dp-disabled-text: #475569;--f1-dp-shadow: 0 10px 40px rgba(0, 0, 0, .4);--f1-dp-input-bg: #1e1e2e;--f1-dp-dropdown-bg: #1e1e2e}.f1-datepicker--disabled{opacity:.6;cursor:not-allowed}.f1-datepicker__input-wrapper{position:relative;display:flex;align-items:center;cursor:pointer}.f1-datepicker--disabled .f1-datepicker__input-wrapper{cursor:not-allowed}.f1-datepicker__input{width:100%;padding:12px 44px 12px 14px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:var(--f1-dp-input-bg);border:2px solid var(--f1-dp-border);border-radius:10px;outline:none;cursor:pointer;transition:all .2s ease}.f1-datepicker__input::placeholder{color:var(--f1-dp-text-muted)}.f1-datepicker__input:hover:not(:disabled){border-color:var(--f1-dp-primary)}.f1-datepicker__input:focus{border-color:var(--f1-dp-primary);box-shadow:0 0 0 3px #6366f126}.f1-datepicker__input:disabled{cursor:not-allowed;background:var(--f1-dp-hover-bg)}.f1-datepicker__icon{position:absolute;right:12px;display:flex;align-items:center;justify-content:center;color:var(--f1-dp-text-muted);pointer-events:none;transition:color .2s ease}.f1-datepicker__input-wrapper:hover .f1-datepicker__icon{color:var(--f1-dp-primary)}.f1-datepicker__clear{position:absolute;right:38px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;color:var(--f1-dp-text-muted);background:transparent;border:none;border-radius:50%;cursor:pointer;transition:all .2s ease}.f1-datepicker__clear:hover{color:var(--f1-dp-text);background:var(--f1-dp-hover-bg)}.f1-datepicker__dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;width:100%;min-width:300px;padding:16px;background:var(--f1-dp-dropdown-bg);border:1px solid var(--f1-dp-border);border-radius:14px;box-shadow:var(--f1-dp-shadow);animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.f1-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.f1-datepicker__nav-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__nav-btn:hover{background:var(--f1-dp-hover-bg);color:var(--f1-dp-primary)}.f1-datepicker__nav-btn:active{transform:scale(.95)}.f1-datepicker__selectors{display:flex;gap:8px}.f1-datepicker__select{padding:8px 28px 8px 12px;font-size:14px;font-weight:600;color:var(--f1-dp-text);background:var(--f1-dp-hover-bg);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.f1-datepicker__select:hover{background-color:var(--f1-dp-border)}.f1-datepicker__select:focus{outline:none;box-shadow:0 0 0 2px var(--f1-dp-primary)}.f1-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}.f1-datepicker__weekday{padding:8px 0;font-size:12px;font-weight:600;color:var(--f1-dp-text-muted);text-align:center;text-transform:uppercase;letter-spacing:.5px}.f1-datepicker__grid{display:flex;flex-direction:column;gap:4px}.f1-datepicker__week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.f1-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:14px;font-weight:500;color:var(--f1-dp-text);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .15s ease}.f1-datepicker__day:hover:not(:disabled):not(.f1-datepicker__day--selected):not(.f1-datepicker__day--empty){background:var(--f1-dp-hover-bg)}.f1-datepicker__day--empty{visibility:hidden;cursor:default}.f1-datepicker__day--today{background:var(--f1-dp-today-bg);border:2px solid var(--f1-dp-today-border);font-weight:700}.f1-datepicker__day--selected{background:var(--f1-dp-primary)!important;color:var(--f1-dp-primary-text)!important;font-weight:700}.f1-datepicker__day--selected:hover{background:var(--f1-dp-primary-hover)!important}.f1-datepicker__day--disabled{color:var(--f1-dp-disabled-text);cursor:not-allowed}.f1-datepicker__day--disabled:hover{background:transparent}.f1-datepicker__footer{display:flex;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--f1-dp-border)}.f1-datepicker__today-btn{padding:8px 20px;font-size:13px;font-weight:600;color:var(--f1-dp-primary);background:transparent;border:2px solid var(--f1-dp-primary);border-radius:8px;cursor:pointer;transition:all .2s ease}.f1-datepicker__today-btn:hover{background:var(--f1-dp-primary);color:var(--f1-dp-primary-text)}.f1-datepicker__today-btn:active{transform:scale(.98)}\n"] }]
|
|
951
984
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: DateConverterService }]; }, propDecorators: { minDate: [{
|
|
952
985
|
type: Input
|
|
953
986
|
}], maxDate: [{
|