ng-ipa-library 6.2.14 → 6.2.15
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.
|
@@ -1186,11 +1186,11 @@ class DatepickerComponent {
|
|
|
1186
1186
|
});
|
|
1187
1187
|
}
|
|
1188
1188
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatepickerComponent, deps: [{ token: IPAFormService }, { token: i2.NgbCalendar }, { token: i2$1.NgControl, self: true }, { token: i2.NgbInputDatepickerConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatepickerComponent, isStandalone: false, selector: "ipa-datepicker", inputs: { isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", id: "id", label: "label", patternErrorMsg: "patternErrorMsg", required: "required", maxDate: "maxDate", minDate: "minDate", classes: "classes", containerClasses: "containerClasses", isArabicForm: "isArabicForm" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"
|
|
1189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatepickerComponent, isStandalone: false, selector: "ipa-datepicker", inputs: { isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", id: "id", label: "label", patternErrorMsg: "patternErrorMsg", required: "required", maxDate: "maxDate", minDate: "minDate", classes: "classes", containerClasses: "containerClasses", isArabicForm: "isArabicForm" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n let-focused=\"focused\">\r\n <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n {{ date.day }}\r\n </div>\r\n </ng-template>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n {{year}}\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year <= minYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" style=\"transform: rotate(-180deg);\" />\r\n </button>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, 1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year >= maxYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" />\r\n </button>\r\n </div>\r\n </div>\r\n <ngb-datepicker-month [month]=\"month\"></ngb-datepicker-month>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i2.NgbDatepickerMonth, selector: "ngb-datepicker-month", inputs: ["month"] }] }); }
|
|
1190
1190
|
}
|
|
1191
1191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1192
1192
|
type: Component,
|
|
1193
|
-
args: [{ selector: 'ipa-datepicker', standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"
|
|
1193
|
+
args: [{ selector: 'ipa-datepicker', standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n let-focused=\"focused\">\r\n <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n {{ date.day }}\r\n </div>\r\n </ng-template>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n {{year}}\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year <= minYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" style=\"transform: rotate(-180deg);\" />\r\n </button>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, 1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year >= maxYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" />\r\n </button>\r\n </div>\r\n </div>\r\n <ngb-datepicker-month [month]=\"month\"></ngb-datepicker-month>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"] }]
|
|
1194
1194
|
}], ctorParameters: () => [{ type: IPAFormService }, { type: i2.NgbCalendar }, { type: i2$1.NgControl, decorators: [{
|
|
1195
1195
|
type: Self
|
|
1196
1196
|
}] }, { type: i2.NgbInputDatepickerConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { datepicker: [{
|
|
@@ -1262,14 +1262,14 @@ class HijriDatepickerComponent extends DatepickerComponent {
|
|
|
1262
1262
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HijriDatepickerComponent, isStandalone: false, selector: "ipa-hijri-datepicker", providers: [
|
|
1263
1263
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
|
|
1264
1264
|
{ provide: NgbDatepickerI18n, useClass: IslamicI18n },
|
|
1265
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"
|
|
1265
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n let-focused=\"focused\">\r\n <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n {{ date.day }}\r\n </div>\r\n </ng-template>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n {{year}}\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year <= minYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" style=\"transform: rotate(-180deg);\" />\r\n </button>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, 1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year >= maxYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" />\r\n </button>\r\n </div>\r\n </div>\r\n <ngb-datepicker-month [month]=\"month\"></ngb-datepicker-month>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i2.NgbDatepickerMonth, selector: "ngb-datepicker-month", inputs: ["month"] }] }); }
|
|
1266
1266
|
}
|
|
1267
1267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HijriDatepickerComponent, decorators: [{
|
|
1268
1268
|
type: Component,
|
|
1269
1269
|
args: [{ selector: 'ipa-hijri-datepicker', providers: [
|
|
1270
1270
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
|
|
1271
1271
|
{ provide: NgbDatepickerI18n, useClass: IslamicI18n },
|
|
1272
|
-
], standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"
|
|
1272
|
+
], standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n let-focused=\"focused\">\r\n <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n {{ date.day }}\r\n </div>\r\n </ng-template>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n {{year}}\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year <= minYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" style=\"transform: rotate(-180deg);\" />\r\n </button>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, 1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year >= maxYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" />\r\n </button>\r\n </div>\r\n </div>\r\n <ngb-datepicker-month [month]=\"month\"></ngb-datepicker-month>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"] }]
|
|
1273
1273
|
}] });
|
|
1274
1274
|
|
|
1275
1275
|
const WEEKDAYS = ['أثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];
|
|
@@ -1316,14 +1316,14 @@ class GregorianDatepickerComponent extends DatepickerComponent {
|
|
|
1316
1316
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GregorianDatepickerComponent, isStandalone: false, selector: "ipa-gregorian-datepicker", providers: [
|
|
1317
1317
|
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1318
1318
|
{ provide: NgbDatepickerI18n, useClass: Gregorian18n },
|
|
1319
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"
|
|
1319
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n let-focused=\"focused\">\r\n <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n {{ date.day }}\r\n </div>\r\n </ng-template>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n {{year}}\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year <= minYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" style=\"transform: rotate(-180deg);\" />\r\n </button>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, 1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year >= maxYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" />\r\n </button>\r\n </div>\r\n </div>\r\n <ngb-datepicker-month [month]=\"month\"></ngb-datepicker-month>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i2.NgbDatepickerMonth, selector: "ngb-datepicker-month", inputs: ["month"] }] }); }
|
|
1320
1320
|
}
|
|
1321
1321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GregorianDatepickerComponent, decorators: [{
|
|
1322
1322
|
type: Component,
|
|
1323
1323
|
args: [{ selector: 'ipa-gregorian-datepicker', providers: [
|
|
1324
1324
|
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1325
1325
|
{ provide: NgbDatepickerI18n, useClass: Gregorian18n },
|
|
1326
|
-
], standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"
|
|
1326
|
+
], standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\" *ngIf=\"!isPlatformCodeDesignSystem\">\r\n <input id=\"{{id}}\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched) && (errorMsg || controlDir.value))}\"\r\n class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker #d=\"ngbDatepicker\"\r\n [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n </span>\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #footerTemplate style=\"text-align: center;\">\r\n <hr>\r\n <div class=\"d-flex justify-content-end\">\r\n <button type=\"button\" class=\"btn btn-primary m-2 w-25\"\r\n (click)=\"formControl.patchValue(today);d.navigateTo(today);d.close()\">\u0627\u0644\u064A\u0648\u0645</button>\r\n <button type=\"button\" class=\"btn btn-secondary m-2 w-25\"\r\n (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n </div>\r\n </ng-template>\r\n</div>\r\n<div class=\"{{containerClasses}}\" *ngIf=\"isPlatformCodeDesignSystem\">\r\n <label for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n {{errorMsg}}\r\n </div>\r\n <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n let-focused=\"focused\">\r\n <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n {{ date.day }}\r\n </div>\r\n </ng-template>\r\n <ng-template #contentTemplate let-dp>\r\n <div class=\"p-2\">\r\n <div class=\"custom-month-grid\">\r\n @for (month of dp.state.months; track month) {\r\n <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n <div class=\"d-inline-flex\">\r\n <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n <!-- <select class=\"form-control w-auto\" [(ngModel)]=\"dp.state.focusedDate.year\"\r\n (ngModelChange)=\"navigateYear(dp, $event)\">\r\n <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n </select> -->\r\n <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n <button\r\n class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n </button>\r\n <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n {{year}}\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year <= minYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" style=\"transform: rotate(-180deg);\" />\r\n </button>\r\n <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, 1)\"\r\n [ngClass]=\"{'disabled': dp.state.focusedDate.year >= maxYear}\">\r\n <img src=\"https://newportal.ipa.edu.sa/_catalogs/masterpage/ar-sa/CPS/assets/img/arrow.svg\"\r\n alt=\"Calender Icon\" />\r\n </button>\r\n </div>\r\n </div>\r\n <ngb-datepicker-month [month]=\"month\"></ngb-datepicker-month>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>", styles: [".calenderBtn{cursor:pointer;background-color:transparent;color:#6c757d;border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.calenderBtn:hover{color:#fff;background-color:#6c757d;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"] }]
|
|
1327
1327
|
}] });
|
|
1328
1328
|
|
|
1329
1329
|
class ShareButtonComponent {
|