ngx-np-datepicker 2.3.2 → 2.3.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.
|
@@ -243,7 +243,7 @@ NpDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
243
243
|
useExisting: forwardRef(() => NpDatePickerComponent),
|
|
244
244
|
multi: true,
|
|
245
245
|
},
|
|
246
|
-
], ngImport: i0, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#e45415;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#e45415;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#e45415;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #e45415}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "toNp": i4.ToNpPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
246
|
+
], ngImport: i0, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#337ab7;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#337ab7;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#337ab7;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #337ab7}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "toNp": i4.ToNpPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
247
247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NpDatePickerComponent, decorators: [{
|
|
248
248
|
type: Component,
|
|
249
249
|
args: [{ selector: 'np-datepicker', providers: [
|
|
@@ -252,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
252
252
|
useExisting: forwardRef(() => NpDatePickerComponent),
|
|
253
253
|
multi: true,
|
|
254
254
|
},
|
|
255
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#e45415;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#e45415;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#e45415;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #e45415}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"] }]
|
|
255
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#337ab7;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#337ab7;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#337ab7;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #337ab7}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"] }]
|
|
256
256
|
}], ctorParameters: function () { return [{ type: i1.NpDatePickerService }, { type: i0.ElementRef }]; }, propDecorators: { theme: [{
|
|
257
257
|
type: Input
|
|
258
258
|
}], language: [{
|
|
@@ -674,7 +674,7 @@ NpDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
674
674
|
useExisting: forwardRef(() => NpDatePickerComponent),
|
|
675
675
|
multi: true,
|
|
676
676
|
},
|
|
677
|
-
], ngImport: i0, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#e45415;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#e45415;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#e45415;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #e45415}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "toNp": ToNpPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
677
|
+
], ngImport: i0, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#337ab7;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#337ab7;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#337ab7;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #337ab7}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "toNp": ToNpPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
678
678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NpDatePickerComponent, decorators: [{
|
|
679
679
|
type: Component,
|
|
680
680
|
args: [{ selector: 'np-datepicker', providers: [
|
|
@@ -683,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
683
683
|
useExisting: forwardRef(() => NpDatePickerComponent),
|
|
684
684
|
multi: true,
|
|
685
685
|
},
|
|
686
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#e45415;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#e45415;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#e45415;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #e45415}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"] }]
|
|
686
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#337ab7;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#337ab7;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#337ab7;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #337ab7}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"] }]
|
|
687
687
|
}], ctorParameters: function () { return [{ type: NpDatePickerService }, { type: i0.ElementRef }]; }, propDecorators: { theme: [{
|
|
688
688
|
type: Input
|
|
689
689
|
}], language: [{
|
|
@@ -673,7 +673,7 @@ NpDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
673
673
|
useExisting: forwardRef(() => NpDatePickerComponent),
|
|
674
674
|
multi: true,
|
|
675
675
|
},
|
|
676
|
-
], ngImport: i0, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#e45415;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#e45415;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#e45415;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #e45415}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "toNp": ToNpPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
676
|
+
], ngImport: i0, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#337ab7;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#337ab7;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#337ab7;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #337ab7}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "toNp": ToNpPipe }, encapsulation: i0.ViewEncapsulation.None });
|
|
677
677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NpDatePickerComponent, decorators: [{
|
|
678
678
|
type: Component,
|
|
679
679
|
args: [{ selector: 'np-datepicker', providers: [
|
|
@@ -682,7 +682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
682
682
|
useExisting: forwardRef(() => NpDatePickerComponent),
|
|
683
683
|
multi: true,
|
|
684
684
|
},
|
|
685
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#e45415;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#e45415;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#e45415;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #e45415}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"] }]
|
|
685
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"nepali-date-picker\" [ngClass]=\"theme\">\r\n <input\r\n class=\"ngx_np_datepicker_input\"\r\n type=\"text\"\r\n [value]=\"formattedDate\"\r\n (focus)=\"open()\"\r\n (keydown)=\"$event.preventDefault()\"\r\n aria-hidden=\"true\"\r\n placeholder=\"yyyy/mm/dd\"\r\n />\r\n <a\r\n class=\"form-icon\"\r\n (click)=\"toggleOpen()\"\r\n [ngClass]=\"isOpen ? 'active' : ''\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\r\n <path\r\n d=\"M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z\"\r\n />\r\n </svg>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"npdp\" *ngIf=\"isOpen\"></ng-container>\r\n</div>\r\n<ng-template #npdp>\r\n <div class=\"datepicker__container\">\r\n <div class=\"datepicker__options-container\">\r\n <a class=\"prev-month\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z\"\r\n />\r\n </svg>\r\n </a>\r\n <a class=\"select-today\" (click)=\"selectToday()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-home\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\r\n \r\n <select (change)=\"selectMonth($event)\">\r\n <option\r\n *ngFor=\"\r\n let month of monthsMapping[language][monthDisplayType];\r\n index as i\r\n \"\r\n [value]=\"month\"\r\n [selected]=\"i === currentNepaliDate?.month\"\r\n >\r\n {{ month }}\r\n </option>\r\n </select>\r\n </span>\r\n <span class=\"datepicker__options-year-container\">\r\n \r\n <select (change)=\"selectYear($event)\">\r\n <option\r\n *ngFor=\"let year of years; index as i\"\r\n [value]=\"year\"\r\n [selected]=\"year == currentNepaliDate?.year\"\r\n >\r\n {{ year | toNp: language:\"number\" }}\r\n </option>\r\n </select>\r\n </span>\r\n \r\n <a class=\"next-month\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\r\n <path\r\n d=\"M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z\"\r\n />\r\n </svg>\r\n </a>\r\n </div>\r\n <div class=\"datepicker__days-container\">\r\n <div\r\n class=\"datepicker__days\"\r\n *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\"\r\n >\r\n <div class=\"datepicker__weekday\">{{ day }}</div>\r\n <div\r\n class=\"datepicker__date-container\"\r\n *ngFor=\"let date of currentMonthData[i]\"\r\n >\r\n <div *ngIf=\"hasFuture; else noFutureDate\">\r\n <div\r\n *ngIf=\"date\"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </div>\r\n\r\n <ng-template #noFutureDate>\r\n <div\r\n *ngIf=\"\r\n date &&\r\n this.currentNepaliDate.year * 365 +\r\n this.currentNepaliDate.month * 30 +\r\n date <=\r\n nepaliDateToday.day +\r\n nepaliDateToday.month * 30 +\r\n nepaliDateToday.year * 365;\r\n else disabledDates\r\n \"\r\n class=\"datepicker__date\"\r\n [class.datepicker__date--active]=\"\r\n date === selectedDate?.day &&\r\n currentNepaliDate.month === selectedDate?.month &&\r\n currentNepaliDate.year === selectedDate?.year\r\n \"\r\n [class.datepicker__date--current-day]=\"\r\n date === nepaliDateToday.day &&\r\n currentNepaliDate.month === nepaliDateToday.month &&\r\n currentNepaliDate.year === nepaliDateToday.year\r\n \"\r\n (click)=\"selectDate(date)\"\r\n >\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n\r\n <ng-template #disabledDates>\r\n <div class=\"datepicker__date datepicker__date--disabled\">\r\n {{ date | toNp: language:\"number\" }}\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"!date\" class=\"datepicker__date--disabled\">\r\n <span> </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <!--.datepicker__date-container ends-->\r\n </div>\r\n <!--.datepicker__days ends-->\r\n </div>\r\n <!--.datepicker__days-container ends-->\r\n </div>\r\n <!--.datepicker__container ends-->\r\n</ng-template>\r\n", styles: [".nepali-date-picker.nepali-date-picker{position:relative;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:1em}.nepali-date-picker a.active svg{fill:#337ab7;opacity:.9}.nepali-date-picker .form-icon svg{width:14px;opacity:.3;position:absolute;right:8px;top:12px;cursor:pointer}.datepicker__container{border:1px solid #eee;background:#fff;width:294px;box-shadow:#0a0a0f33 0 7px 29px;position:absolute;z-index:99999}.datepicker__options-container{padding:12px 5px;border-bottom:1px solid #eee;display:flex;justify-content:space-evenly;background-color:#337ab7;color:#fff;line-height:25px;font-size:1em}.datepicker__days-container{display:flex;justify-content:center;color:#777}.datepicker__days{text-align:center;padding-bottom:10px}.datepicker__weekday{padding:8px;font-weight:700;border-bottom:1px solid #eee;margin-bottom:14px}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin:8px 0}.datepicker__date-container>div{height:100%}.datepicker__date{cursor:pointer;border-radius:4px}.datepicker__date:hover{background-color:#eee}.datepicker__date.datepicker__date--disabled{background:#f3f3f3;border-radius:0}.datepicker__date.datepicker__date--disabled:hover{background:#f3f3f3}.datepicker__date--active.datepicker__date--active{background-color:#337ab7;color:#fff}select:focus,select:focus-visible{outline:1px solid #fff}.datepicker__container select{border:none;color:#fff;background:none;font-size:inherit}select option{color:#333}.ngx_np_datepicker_input{border:1px solid #eee;padding:10px;font-size:16px;color:#777}.ngx_np_datepicker_input:focus-visible{outline:2px solid #337ab7}.prev-month,.next-month{padding:0;width:25px;height:25px;display:block;opacity:.5;border-radius:50%;background:#f3f3f3;cursor:pointer;text-align:center;line-height:23px}.next-month:hover,.prev-month:hover{background:#ccc}.prev-month svg,.next-month svg{max-width:8px;height:auto}.select-today{padding:0;width:22px;height:22px;display:block;cursor:pointer;color:#ffffffe6;text-align:center;line-height:23px}.select-today:hover{color:#ffffff80}.select-today svg{max-width:100%}.dark.nepali-date-picker a.active svg{fill:#000}.dark .datepicker__options-container{border-bottom:1px solid #000;background-color:#000;color:#fff}.dark .datepicker__container{background:#333}.dark select{color:#fff}.datepicker__date--current-day{background-color:#f3f3f3;border:2px dashed rgba(0,0,0,.2);position:relative;z-index:999;height:100%}.dark .datepicker__date--active.datepicker__date--active{background-color:#000;color:#fff}.dark .ngx_np_datepicker_input:focus-visible{outline:2px solid #000}.dark .datepicker__days{background-color:#333}.dark .datepicker__date:hover{background-color:#222;color:#fff}.dark .datepicker__days-container{color:#aaa}.dark .datepicker__weekday{border-bottom:1px solid #555}.dark .datepicker__date--current-day{background:#555;border:none}.light.nepali-date-picker a.active svg{fill:#777}.light .datepicker__options-container{border-bottom:none;background-color:#fff;color:#777}.light select{color:#777}.light .datepicker__date--active.datepicker__date--active{background-color:#aaa;color:#fff}.light .ngx_np_datepicker_input:focus-visible{outline:1px solid #ddd}.lightblue.nepali-date-picker a.active svg{fill:#38c5f0da}.lightblue .datepicker__options-container{background-color:#38c5f0da;color:#fff}.lightblue select{color:#fff}.lightblue .datepicker__date--active.datepicker__date--active{background-color:#38c5f0da;color:#fff}.lightblue .ngx_np_datepicker_input:focus-visible{outline:2px solid #38c5f0da}.lightblue .ngx_np_datepicker_input:focus-visible{outline:1px solid #38c5f0da}\n"] }]
|
|
686
686
|
}], ctorParameters: function () { return [{ type: NpDatePickerService }, { type: i0.ElementRef }]; }, propDecorators: { theme: [{
|
|
687
687
|
type: Input
|
|
688
688
|
}], language: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-np-datepicker",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.3",
|
|
4
4
|
"description": "A modern and lightweight Angular component for selecting Nepali (Bikram Sambat) dates. Ideal for forms and applications using the Nepali calendar system.",
|
|
5
5
|
"homepage": "https://wwwbijay.github.io/angular-nepali-datepicker/",
|
|
6
6
|
"keywords": [
|