ng-ipa-library 6.2.10 → 6.2.12
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.
|
@@ -1054,6 +1054,9 @@ class DatepickerComponent {
|
|
|
1054
1054
|
}
|
|
1055
1055
|
ngAfterContentChecked() {
|
|
1056
1056
|
this.cd.detectChanges();
|
|
1057
|
+
if (this.isPlatformCodeDesignSystem) {
|
|
1058
|
+
this.initCustomDropdowns();
|
|
1059
|
+
}
|
|
1057
1060
|
}
|
|
1058
1061
|
ngOnInit() {
|
|
1059
1062
|
const control = this.controlDir.control;
|
|
@@ -1099,9 +1102,9 @@ class DatepickerComponent {
|
|
|
1099
1102
|
}
|
|
1100
1103
|
navigateYear(datepicker, year) {
|
|
1101
1104
|
const { state } = datepicker;
|
|
1102
|
-
const newDate = { year:
|
|
1105
|
+
const newDate = { year: year, month: state.firstDate.month, day: 1 };
|
|
1103
1106
|
datepicker.navigateTo(newDate);
|
|
1104
|
-
this.generateYearsRange(
|
|
1107
|
+
this.generateYearsRange(year);
|
|
1105
1108
|
}
|
|
1106
1109
|
changeDatepickerTitles() {
|
|
1107
1110
|
// change pervious month button title
|
|
@@ -1136,28 +1139,57 @@ class DatepickerComponent {
|
|
|
1136
1139
|
selectList.item(1).title = 'Select year';
|
|
1137
1140
|
}
|
|
1138
1141
|
}
|
|
1139
|
-
generateYearsRange(setYear = this.formControl.value
|
|
1142
|
+
generateYearsRange(setYear = this.formControl.value?.year
|
|
1140
1143
|
? this.formControl.value.year
|
|
1141
1144
|
: this.isHijriDatepicker
|
|
1142
1145
|
? this.ipaFormService.getCurrentHijriYear()
|
|
1143
1146
|
: new Date().getFullYear()) {
|
|
1144
1147
|
this.years = [];
|
|
1145
1148
|
const currentYear = setYear;
|
|
1146
|
-
this.minYear =
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
+
this.minYear =
|
|
1150
|
+
this.minDate && this.minDate.year ? this.minDate.year : currentYear - 10;
|
|
1151
|
+
this.maxYear =
|
|
1152
|
+
this.maxDate && this.maxDate.year ? this.maxDate.year : currentYear + 10;
|
|
1153
|
+
for (let i = this.minYear; i < currentYear; i++) {
|
|
1149
1154
|
this.years.push(i);
|
|
1150
1155
|
}
|
|
1151
|
-
for (let i = currentYear; i <=
|
|
1156
|
+
for (let i = currentYear; i <= this.maxYear; i++) {
|
|
1152
1157
|
this.years.push(i);
|
|
1153
1158
|
}
|
|
1154
1159
|
}
|
|
1160
|
+
initCustomDropdowns() {
|
|
1161
|
+
// Select all custom wrappers
|
|
1162
|
+
const wrappers = document.querySelectorAll('.custom-dropdown-wrapper-' + this.id);
|
|
1163
|
+
wrappers.forEach((wrapper) => {
|
|
1164
|
+
// Find parent container
|
|
1165
|
+
const parent = wrapper.closest('.form-group') || wrapper.parentElement;
|
|
1166
|
+
if (!parent)
|
|
1167
|
+
return;
|
|
1168
|
+
// Locate Elements
|
|
1169
|
+
const dropdownButton = wrapper.querySelector('.dropdown-toggle');
|
|
1170
|
+
const dropdownButtonSpan = dropdownButton.querySelector('span') || dropdownButton;
|
|
1171
|
+
const dropdownItems = wrapper.querySelectorAll('.dropdown-item');
|
|
1172
|
+
if (!dropdownButton)
|
|
1173
|
+
return;
|
|
1174
|
+
// Handle Item Click
|
|
1175
|
+
dropdownItems.forEach((item) => {
|
|
1176
|
+
item.addEventListener('click', (e) => {
|
|
1177
|
+
e.preventDefault();
|
|
1178
|
+
const text = item.textContent.trim();
|
|
1179
|
+
// Update UI
|
|
1180
|
+
dropdownButtonSpan.textContent = text;
|
|
1181
|
+
dropdownItems.forEach((i) => i.classList.remove('active'));
|
|
1182
|
+
item.classList.add('active');
|
|
1183
|
+
});
|
|
1184
|
+
});
|
|
1185
|
+
});
|
|
1186
|
+
}
|
|
1155
1187
|
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 }); }
|
|
1156
|
-
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}}\"
|
|
1188
|
+
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\" [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"] }] }); }
|
|
1157
1189
|
}
|
|
1158
1190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1159
1191
|
type: Component,
|
|
1160
|
-
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}}\"
|
|
1192
|
+
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\" [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"] }]
|
|
1161
1193
|
}], ctorParameters: () => [{ type: IPAFormService }, { type: i2.NgbCalendar }, { type: i2$1.NgControl, decorators: [{
|
|
1162
1194
|
type: Self
|
|
1163
1195
|
}] }, { type: i2.NgbInputDatepickerConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { datepicker: [{
|
|
@@ -1229,14 +1261,14 @@ class HijriDatepickerComponent extends DatepickerComponent {
|
|
|
1229
1261
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HijriDatepickerComponent, isStandalone: false, selector: "ipa-hijri-datepicker", providers: [
|
|
1230
1262
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
|
|
1231
1263
|
{ provide: NgbDatepickerI18n, useClass: IslamicI18n },
|
|
1232
|
-
], 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}}\"
|
|
1264
|
+
], 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\" [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"] }] }); }
|
|
1233
1265
|
}
|
|
1234
1266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HijriDatepickerComponent, decorators: [{
|
|
1235
1267
|
type: Component,
|
|
1236
1268
|
args: [{ selector: 'ipa-hijri-datepicker', providers: [
|
|
1237
1269
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
|
|
1238
1270
|
{ provide: NgbDatepickerI18n, useClass: IslamicI18n },
|
|
1239
|
-
], 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}}\"
|
|
1271
|
+
], 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\" [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"] }]
|
|
1240
1272
|
}] });
|
|
1241
1273
|
|
|
1242
1274
|
const WEEKDAYS = ['أثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];
|
|
@@ -1283,14 +1315,14 @@ class GregorianDatepickerComponent extends DatepickerComponent {
|
|
|
1283
1315
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GregorianDatepickerComponent, isStandalone: false, selector: "ipa-gregorian-datepicker", providers: [
|
|
1284
1316
|
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1285
1317
|
{ provide: NgbDatepickerI18n, useClass: Gregorian18n },
|
|
1286
|
-
], 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}}\"
|
|
1318
|
+
], 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\" [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"] }] }); }
|
|
1287
1319
|
}
|
|
1288
1320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GregorianDatepickerComponent, decorators: [{
|
|
1289
1321
|
type: Component,
|
|
1290
1322
|
args: [{ selector: 'ipa-gregorian-datepicker', providers: [
|
|
1291
1323
|
{ provide: NgbCalendar, useClass: NgbCalendarGregorian },
|
|
1292
1324
|
{ provide: NgbDatepickerI18n, useClass: Gregorian18n },
|
|
1293
|
-
], 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}}\"
|
|
1325
|
+
], 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\" [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"] }]
|
|
1294
1326
|
}] });
|
|
1295
1327
|
|
|
1296
1328
|
class ShareButtonComponent {
|