ng-ipa-library 6.2.9 → 6.2.10

package/fesm2022/ng-ipa-library.mjs

@@ -153,6 +153,10 @@ class IPAFormService {
         momentHijri.locale('en');
         return momentHijri().format('iYYYY/iMM/iDD');
     }
+    getCurrentHijriYear() {
+        momentHijri.locale('en');
+        return +momentHijri().format('iYYYY');
+    }
     getValidatorErrorMessage(validatorName, validatorValue, patternErrorMsg, isArabic) {
         if (validatorName === 'pattern') {
             validatorValue = this.addPatternMsg(validatorValue, patternErrorMsg);
@@ -1036,15 +1040,17 @@ class DatepickerComponent {
         this.calendar = calendar;
         this.controlDir = controlDir;
         this.cd = cd;
+        this.isPlatformCodeDesignSystem = false;
         this.label = 'datepicker';
         this.patternErrorMsg = 'invalid pattern';
         this.required = false;
         this.isArabicForm = true;
         this.today = this.calendar.getToday();
         this.formControl = new UntypedFormControl('');
+        this.years = [];
         this.controlDir.valueAccessor = this;
         config.container = null;
-        config.placement = 'bottom-center';
+        config.placement = 'bottom-end';
     }
     ngAfterContentChecked() {
         this.cd.detectChanges();
@@ -1057,6 +1063,9 @@ class DatepickerComponent {
         control?.setValidators(validators);
         control?.updateValueAndValidity();
         this.formControl = control;
+        if (this.isPlatformCodeDesignSystem) {
+            this.generateYearsRange();
+        }
     }
     onChange(event) { }
     onTouched() { }
@@ -1070,7 +1079,9 @@ class DatepickerComponent {
     openDatepicker(event) {
         if (!this.datepicker.isOpen()) {
             setTimeout(() => {
-                this.changeDatepickerTitles();
+                if (!this.isPlatformCodeDesignSystem) {
+                    this.changeDatepickerTitles();
+                }
             }, 100);
             this.datepicker.toggle();
             event.preventDefault();
@@ -1082,6 +1093,16 @@ class DatepickerComponent {
         this.errorMsg = this.ipaFormService.getErrorMessage(this.formControl, this.patternErrorMsg, this.isArabicForm);
         return this.errorMsg;
     }
+    navigate(datepicker, number) {
+        const { state, calendar } = datepicker;
+        datepicker.navigateTo(calendar.getNext(state.firstDate, 'm', number));
+    }
+    navigateYear(datepicker, year) {
+        const { state } = datepicker;
+        const newDate = { year: +year, month: state.firstDate.month, day: 1 };
+        datepicker.navigateTo(newDate);
+        this.generateYearsRange(+year);
+    }
     changeDatepickerTitles() {
         // change pervious month button title
         const arrowPre = document
@@ -1115,17 +1136,35 @@ class DatepickerComponent {
             selectList.item(1).title = 'Select year';
         }
     }
+    generateYearsRange(setYear = this.formControl.value.year
+        ? this.formControl.value.year
+        : this.isHijriDatepicker
+            ? this.ipaFormService.getCurrentHijriYear()
+            : new Date().getFullYear()) {
+        this.years = [];
+        const currentYear = setYear;
+        this.minYear = currentYear - 10;
+        this.maxYear = currentYear + 10;
+        for (let i = currentYear - 10; i < currentYear; i++) {
+            this.years.push(i);
+        }
+        for (let i = currentYear; i <= currentYear + 10; i++) {
+            this.years.push(i);
+        }
+    }
     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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatepickerComponent, isStandalone: false, selector: "ipa-datepicker", inputs: { 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}}\">\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    <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\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 btn-sm m-2\" style=\"width: auto; float: left;\"\r\n      (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n  </ng-template>\r\n</div>\r\n", 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.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"] }] }); }
+    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}}\"\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\" [required]=\"required\" style=\"outline: unset; z-index: unset !important;\"\r\n    autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\" (click)=\"openDatepicker($event)\"\r\n    [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\" [placement]=\"'bottom-end'\" [autoClose]=\"true\">\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=\"text-primary p-1 fw-bold\">\r\n          {{ dp.i18n.getMonthShortName(month.month) }}\r\n          <select class=\"form-control\" [(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          <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        <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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipa-datepicker', standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\">\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    <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\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 btn-sm m-2\" style=\"width: auto; float: left;\"\r\n      (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n  </ng-template>\r\n</div>\r\n", 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"] }]
+            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}}\"\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\" [required]=\"required\" style=\"outline: unset; z-index: unset !important;\"\r\n    autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\" (click)=\"openDatepicker($event)\"\r\n    [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\" [placement]=\"'bottom-end'\" [autoClose]=\"true\">\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=\"text-primary p-1 fw-bold\">\r\n          {{ dp.i18n.getMonthShortName(month.month) }}\r\n          <select class=\"form-control\" [(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          <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        <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"] }]
         }], ctorParameters: () => [{ type: IPAFormService }, { type: i2.NgbCalendar }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }] }, { type: i2.NgbInputDatepickerConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { datepicker: [{
                 type: ViewChild,
                 args: ['d']
+            }], isPlatformCodeDesignSystem: [{
+                type: Input
             }], id: [{
                 type: Input
             }], label: [{
@@ -1146,7 +1185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
-const WEEKDAYS$1 = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
+const WEEKDAYS$1 = ['أثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];
 const MONTHS$1 = [
     'محرم',
     'صفر',
@@ -1187,20 +1226,20 @@ class HijriDatepickerComponent extends DatepickerComponent {
         this.isHijriDatepicker = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HijriDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HijriDatepickerComponent, isStandalone: false, selector: "ipa-hijri-datepicker", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HijriDatepickerComponent, isStandalone: false, selector: "ipa-hijri-datepicker", providers: [
             { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
             { provide: NgbDatepickerI18n, useClass: IslamicI18n },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\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    <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\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 btn-sm m-2\" style=\"width: auto; float: left;\"\r\n      (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n  </ng-template>\r\n</div>\r\n", 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.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"] }] }); }
+        ], 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}}\"\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\" [required]=\"required\" style=\"outline: unset; z-index: unset !important;\"\r\n    autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\" (click)=\"openDatepicker($event)\"\r\n    [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\" [placement]=\"'bottom-end'\" [autoClose]=\"true\">\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=\"text-primary p-1 fw-bold\">\r\n          {{ dp.i18n.getMonthShortName(month.month) }}\r\n          <select class=\"form-control\" [(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          <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        <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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HijriDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipa-hijri-datepicker', providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
                         { provide: NgbDatepickerI18n, useClass: IslamicI18n },
-                    ], standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\">\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    <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\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 btn-sm m-2\" style=\"width: auto; float: left;\"\r\n      (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n  </ng-template>\r\n</div>\r\n", 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"] }]
+                    ], 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}}\"\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\" [required]=\"required\" style=\"outline: unset; z-index: unset !important;\"\r\n    autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\" (click)=\"openDatepicker($event)\"\r\n    [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\" [placement]=\"'bottom-end'\" [autoClose]=\"true\">\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=\"text-primary p-1 fw-bold\">\r\n          {{ dp.i18n.getMonthShortName(month.month) }}\r\n          <select class=\"form-control\" [(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          <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        <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"] }]
         }] });
 
-const WEEKDAYS = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
+const WEEKDAYS = ['أثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];
 const MONTHS = [
     'يناير',
     'فبراير',
@@ -1241,17 +1280,17 @@ class GregorianDatepickerComponent extends DatepickerComponent {
         this.isHijriDatepicker = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GregorianDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GregorianDatepickerComponent, isStandalone: false, selector: "ipa-gregorian-datepicker", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GregorianDatepickerComponent, isStandalone: false, selector: "ipa-gregorian-datepicker", providers: [
             { provide: NgbCalendar, useClass: NgbCalendarGregorian },
             { provide: NgbDatepickerI18n, useClass: Gregorian18n },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\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    <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\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 btn-sm m-2\" style=\"width: auto; float: left;\"\r\n      (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n  </ng-template>\r\n</div>\r\n", 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.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"] }] }); }
+        ], 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}}\"\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\" [required]=\"required\" style=\"outline: unset; z-index: unset !important;\"\r\n    autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\" (click)=\"openDatepicker($event)\"\r\n    [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\" [placement]=\"'bottom-end'\" [autoClose]=\"true\">\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=\"text-primary p-1 fw-bold\">\r\n          {{ dp.i18n.getMonthShortName(month.month) }}\r\n          <select class=\"form-control\" [(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          <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        <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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GregorianDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipa-gregorian-datepicker', providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarGregorian },
                         { provide: NgbDatepickerI18n, useClass: Gregorian18n },
-                    ], standalone: false, template: "<div class=\"form-floating input-group {{containerClasses}}\">\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    <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\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 btn-sm m-2\" style=\"width: auto; float: left;\"\r\n      (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n  </ng-template>\r\n</div>\r\n", 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"] }]
+                    ], 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}}\"\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\" [required]=\"required\" style=\"outline: unset; z-index: unset !important;\"\r\n    autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\" (click)=\"openDatepicker($event)\"\r\n    [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\" [placement]=\"'bottom-end'\" [autoClose]=\"true\">\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=\"text-primary p-1 fw-bold\">\r\n          {{ dp.i18n.getMonthShortName(month.month) }}\r\n          <select class=\"form-control\" [(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          <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        <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"] }]
         }] });
 
 class ShareButtonComponent {