ngx-np-datepicker 2.7.3 → 2.7.4

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.
Files changed (4) hide show
  1. package/esm2020/lib/np-datepicker.component.mjs +2 -2
  2. package/fesm2015/ngx-np-datepicker.mjs +2 -2
  3. package/fesm2020/ngx-np-datepicker.mjs +2 -2
  4. package/package.json +2 -2
package/esm2020/lib/np-datepicker.component.mjs CHANGED
@@ -251,7 +251,7 @@ NpDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
251
251
  useExisting: forwardRef(() => NpDatePickerComponent),
252
252
  multi: true,
253
253
  },
254
- ], ngImport: i0, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:56px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
254
+ ], ngImport: i0, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:45px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
255
255
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NpDatePickerComponent, decorators: [{
256
256
  type: Component,
257
257
  args: [{ selector: 'np-datepicker', providers: [
@@ -260,7 +260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
260
260
  useExisting: forwardRef(() => NpDatePickerComponent),
261
261
  multi: true,
262
262
  },
263
- ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:56px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"] }]
263
+ ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:45px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"] }]
264
264
  }], ctorParameters: function () { return [{ type: i1.NpDatePickerService }, { type: i0.ElementRef }]; }, propDecorators: { theme: [{
265
265
  type: Input
266
266
  }], language: [{
package/fesm2015/ngx-np-datepicker.mjs CHANGED
@@ -682,7 +682,7 @@ NpDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
682
682
  useExisting: forwardRef(() => NpDatePickerComponent),
683
683
  multi: true,
684
684
  },
685
- ], ngImport: i0, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:56px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
685
+ ], ngImport: i0, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:45px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
686
686
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NpDatePickerComponent, decorators: [{
687
687
  type: Component,
688
688
  args: [{ selector: 'np-datepicker', providers: [
@@ -691,7 +691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
691
691
  useExisting: forwardRef(() => NpDatePickerComponent),
692
692
  multi: true,
693
693
  },
694
- ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:56px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"] }]
694
+ ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:45px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"] }]
695
695
  }], ctorParameters: function () { return [{ type: NpDatePickerService }, { type: i0.ElementRef }]; }, propDecorators: { theme: [{
696
696
  type: Input
697
697
  }], language: [{
package/fesm2020/ngx-np-datepicker.mjs CHANGED
@@ -681,7 +681,7 @@ NpDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
681
681
  useExisting: forwardRef(() => NpDatePickerComponent),
682
682
  multi: true,
683
683
  },
684
- ], ngImport: i0, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:56px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
684
+ ], ngImport: i0, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:45px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
685
685
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NpDatePickerComponent, decorators: [{
686
686
  type: Component,
687
687
  args: [{ selector: 'np-datepicker', providers: [
@@ -690,7 +690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
690
690
  useExisting: forwardRef(() => NpDatePickerComponent),
691
691
  multi: true,
692
692
  },
693
- ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:56px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"] }]
693
+ ], encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!!mat; else notMatStyle\">\r\n <div\r\n class=\"custom-mat-field nepali-date-picker\"\r\n [class.has-value]=\"formattedDate\"\r\n [ngClass]=\"theme\"\r\n >\r\n <label *ngIf=\"!!label\" class=\"np-label\"> {{ label }} </label>\r\n\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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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-container>\r\n\r\n<ng-template #notMatStyle>\r\n <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 placeholder=\"yyyy/mm/dd\"\r\n autocomplete=\"donot_suggest_autocomplete\"\r\n autocorrect=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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>\r\n\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\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"feather feather-home\"\r\n >\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n </svg>\r\n </a>\r\n <span class=\"datepicker__options-month-container\">\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 <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 === currentNepaliDate.day &&\r\n currentNepaliDate.month === currentNepaliDate.month &&\r\n currentNepaliDate.year === currentNepaliDate.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>&nbsp;</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>&nbsp;</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:0}.datepicker__date-container{width:40px;height:40px;line-height:40px;margin: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}.custom-mat-field{position:relative;width:100%;height:45px;background:rgba(0,0,0,.04);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid rgba(0,0,0,.42);transition:background-color .2s ease}.custom-mat-field:hover{background:rgba(0,0,0,.08)}.custom-mat-field:focus-within{border-bottom:2px solid #3f51b5}.custom-mat-field .ngx_np_datepicker_input:focus-visible{outline:none}.custom-mat-field .ngx_np_datepicker_input{width:100%;height:100%;border:none;background:transparent;outline:none;padding:24px 12px 8px;font-size:16px;box-sizing:border-box}.custom-mat-field .np-label{position:absolute;left:12px;top:18px;color:#0009;font-size:16px;pointer-events:none;transform-origin:left top;transition:all .15s ease}.custom-mat-field.has-value .np-label,.custom-mat-field:focus-within .np-label,.custom-mat-field .ngx_np_datepicker_input:not(:placeholder-shown)+.np-label{top:8px;font-size:12px;color:#3f51b5}.custom-mat-field .ngx_np_datepicker_input::placeholder{opacity:0;transition:opacity .15s ease}.custom-mat-field .ngx_np_datepicker_input:focus::placeholder{opacity:1}\n"] }]
694
694
  }], ctorParameters: function () { return [{ type: NpDatePickerService }, { type: i0.ElementRef }]; }, propDecorators: { theme: [{
695
695
  type: Input
696
696
  }], language: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngx-np-datepicker",
3
- "version": "2.7.3",
3
+ "version": "2.7.4",
4
4
  "description": "A lightweight and customizable Nepali (Bikram Sambat) date picker for Angular with support for reactive forms, date conversion, and modern UI customization.",
5
5
  "homepage": "https://wwwbijay.github.io/angular-nepali-datepicker/",
6
6
  "keywords": [
@@ -47,4 +47,4 @@
47
47
  }
48
48
  },
49
49
  "sideEffects": false
50
- }
50
+ }