ng-ipa-library 6.2.17 → 6.2.19

package/fesm2022/ng-ipa-library.mjs

@@ -1001,11 +1001,11 @@ class GenerateFormComponent {
         return selectedItems.length > 0 ? selectedItems : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GenerateFormComponent, deps: [{ token: IPAFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GenerateFormComponent, isStandalone: false, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", isArabicForm: "isArabicForm", isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"generateForm\">\r\n  <ng-container *ngFor=\"let column of form.columns\">\r\n    <div [ngSwitch]=\"column.type\">\r\n      <!-- TEXTAREA -->\r\n      <div *ngSwitchCase=\"'textArea'\">\r\n        <ipa-textarea-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-textarea-input>\r\n      </div>\r\n\r\n      <!-- DROP DOWN LIST -->\r\n      <div *ngSwitchCase=\"'select'\">\r\n        <ipa-dropdown-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n          [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n          [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\" [classes]=\"column.inputClasses!\"\r\n          [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n        </ipa-dropdown-input>\r\n      </div>\r\n\r\n      <!-- CHECKBOX -->\r\n      <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n          *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n            <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n              type=\"checkbox\" formControlName=\"checkbox\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n              {{control.value[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RADIO -->\r\n      <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\">\r\n            <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\" type=\"radio\"\r\n              [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n              {{item[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILE UPLOAD -->\r\n      <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n        <ipa-file-upload [isArabicForm]=\"isArabicForm\" [required]=\"column.required\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n          [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n          [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n          [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n          (successUpload)=\"SuccessUpload($event)\" (fileAdded)=\"FileAdded($event, column.formControlName)\"\r\n          (fileDeleted)=\"FileDeleted($event, column.formControlName)\">\r\n        </ipa-file-upload>\r\n      </div>\r\n\r\n      <!-- recaptcha -->\r\n      <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n        <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n          [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n          formControlName=\"{{column.formControlName}}\">\r\n        </ipa-recaptcha>\r\n      </div>\r\n\r\n      <!-- DEFAULT -->\r\n      <div *ngSwitchDefault>\r\n        <ipa-text-input  [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\" [type]=\"column.type\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\" [placeholder]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-text-input>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</form>\r\n", styles: [""], dependencies: [{ 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$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: TextInputComponent, selector: "ipa-text-input", inputs: ["isPlatformCodeDesignSystem", "id", "type", "label", "placeholder", "required", "patternErrorMsg", "onlyNumber", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["isPlatformCodeDesignSystem", "id", "label", "placeholder", "required", "patternErrorMsg", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "isPlatformCodeDesignSystem", "label", "items", "textField", "valueField", "required", "firstItemLabel", "searchable", "notFoundText", "classes", "containerClasses", "isArabicForm", "fromGenerateForm"] }, { kind: "component", type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["isArabicForm", "label", "required", "acceptedFiles", "multiple", "maxFileSize", "method", "autoUpload", "apiUrl", "authorization"], outputs: ["successUpload", "fileAdded", "fileDeleted"] }, { kind: "component", type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GenerateFormComponent, isStandalone: false, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", isArabicForm: "isArabicForm", isPlatformCodeDesignSystem: "isPlatformCodeDesignSystem", siteKey: "siteKey", recaptchaSize: "recaptchaSize", lang: "lang", recaptchaType: "recaptchaType", theme: "theme", useGlobalDomain: "useGlobalDomain" }, outputs: { successUpload: "successUpload", fileAdded: "fileAdded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"generateForm\">\r\n  <ng-container *ngFor=\"let column of form.columns\">\r\n    <div [ngSwitch]=\"column.type\">\r\n      <!-- TEXTAREA -->\r\n      <div *ngSwitchCase=\"'textArea'\">\r\n        <ipa-textarea-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\"\r\n          [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n          [placeholder]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-textarea-input>\r\n      </div>\r\n\r\n      <!-- DROP DOWN LIST -->\r\n      <div *ngSwitchCase=\"'select'\">\r\n        <ipa-dropdown-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\"\r\n          [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n          [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n          [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\" [classes]=\"column.inputClasses!\"\r\n          [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n        </ipa-dropdown-input>\r\n      </div>\r\n\r\n      <!-- CHECKBOX -->\r\n      <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n          *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n            <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n              type=\"checkbox\" formControlName=\"checkbox\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n              {{control.value[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RADIO -->\r\n      <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\">\r\n            <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\" type=\"radio\"\r\n              [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n              {{item[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILE UPLOAD -->\r\n      <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n        <ipa-file-upload [isArabicForm]=\"isArabicForm\" [required]=\"column.required\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n          [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n          [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n          [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n          (successUpload)=\"SuccessUpload($event)\" (fileAdded)=\"FileAdded($event, column.formControlName)\"\r\n          (fileDeleted)=\"FileDeleted($event, column.formControlName)\">\r\n        </ipa-file-upload>\r\n      </div>\r\n\r\n      <!-- recaptcha -->\r\n      <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n        <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n          [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n          formControlName=\"{{column.formControlName}}\">\r\n        </ipa-recaptcha>\r\n      </div>\r\n\r\n      <!-- DEFAULT -->\r\n      <div *ngSwitchDefault>\r\n        <ipa-text-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\"\r\n          [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\" [type]=\"column.type\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n          [placeholder]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-text-input>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</form>", styles: [""], dependencies: [{ 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$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: TextInputComponent, selector: "ipa-text-input", inputs: ["isPlatformCodeDesignSystem", "id", "type", "label", "placeholder", "required", "patternErrorMsg", "onlyNumber", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["isPlatformCodeDesignSystem", "id", "label", "placeholder", "required", "patternErrorMsg", "pattern", "classes", "containerClasses", "isArabicForm"] }, { kind: "component", type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "isPlatformCodeDesignSystem", "label", "items", "textField", "valueField", "required", "firstItemLabel", "searchable", "notFoundText", "classes", "containerClasses", "isArabicForm", "fromGenerateForm"] }, { kind: "component", type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["isArabicForm", "label", "required", "acceptedFiles", "multiple", "maxFileSize", "method", "autoUpload", "apiUrl", "authorization"], outputs: ["successUpload", "fileAdded", "fileDeleted"] }, { kind: "component", type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GenerateFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipa-generate-form', standalone: false, template: "<form [formGroup]=\"generateForm\">\r\n  <ng-container *ngFor=\"let column of form.columns\">\r\n    <div [ngSwitch]=\"column.type\">\r\n      <!-- TEXTAREA -->\r\n      <div *ngSwitchCase=\"'textArea'\">\r\n        <ipa-textarea-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-textarea-input>\r\n      </div>\r\n\r\n      <!-- DROP DOWN LIST -->\r\n      <div *ngSwitchCase=\"'select'\">\r\n        <ipa-dropdown-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n          [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n          [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\" [classes]=\"column.inputClasses!\"\r\n          [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n        </ipa-dropdown-input>\r\n      </div>\r\n\r\n      <!-- CHECKBOX -->\r\n      <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n          *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n            <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n              type=\"checkbox\" formControlName=\"checkbox\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n              {{control.value[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RADIO -->\r\n      <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\">\r\n            <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\" type=\"radio\"\r\n              [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n              {{item[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILE UPLOAD -->\r\n      <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n        <ipa-file-upload [isArabicForm]=\"isArabicForm\" [required]=\"column.required\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n          [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n          [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n          [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n          (successUpload)=\"SuccessUpload($event)\" (fileAdded)=\"FileAdded($event, column.formControlName)\"\r\n          (fileDeleted)=\"FileDeleted($event, column.formControlName)\">\r\n        </ipa-file-upload>\r\n      </div>\r\n\r\n      <!-- recaptcha -->\r\n      <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n        <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n          [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n          formControlName=\"{{column.formControlName}}\">\r\n        </ipa-recaptcha>\r\n      </div>\r\n\r\n      <!-- DEFAULT -->\r\n      <div *ngSwitchDefault>\r\n        <ipa-text-input  [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\" [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\" [type]=\"column.type\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\" [placeholder]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-text-input>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</form>\r\n" }]
+            args: [{ selector: 'ipa-generate-form', standalone: false, template: "<form [formGroup]=\"generateForm\">\r\n  <ng-container *ngFor=\"let column of form.columns\">\r\n    <div [ngSwitch]=\"column.type\">\r\n      <!-- TEXTAREA -->\r\n      <div *ngSwitchCase=\"'textArea'\">\r\n        <ipa-textarea-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\"\r\n          [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n          [placeholder]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-textarea-input>\r\n      </div>\r\n\r\n      <!-- DROP DOWN LIST -->\r\n      <div *ngSwitchCase=\"'select'\">\r\n        <ipa-dropdown-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\"\r\n          [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [items]=\"column.data!\"\r\n          [valueField]=\"column.valueField!\" [textField]=\"column.textField!\" [required]=\"column.required\"\r\n          [searchable]=\"column.searchable!\" [notFoundText]=\"column.notFoundText!\" [classes]=\"column.inputClasses!\"\r\n          [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\" [fromGenerateForm]=\"true\">\r\n        </ipa-dropdown-input>\r\n      </div>\r\n\r\n      <!-- CHECKBOX -->\r\n      <div *ngSwitchCase=\"'checkbox'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container [formArrayName]=\"'items'+ column.formControlName\"\r\n          *ngFor=\"let control of getFormControls(column.formControlName).controls; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\" [formGroupName]=\"i\">\r\n            <input [id]=\"column.formControlName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n              type=\"checkbox\" formControlName=\"checkbox\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+control.value[column.valueField!]\">\r\n              {{control.value[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RADIO -->\r\n      <div *ngSwitchCase=\"'radio'\" [class]=\"column.containerClasses\">\r\n        <label>\r\n          <span *ngIf=\"column.required\" class=\"text-danger\">*</span>\r\n          {{isArabicForm? column.arabicLabel : column.englishLabel}}\r\n        </label>\r\n        <ng-container *ngFor=\"let item of column.data; let i = index\">\r\n          <div class=\"form-check {{column.inputClasses}}\">\r\n            <input [id]=\"column.formControlName+item[column.valueField!]\" class=\"form-check-input\" type=\"radio\"\r\n              [formControlName]=\"column.formControlName\" [value]=\"item[column.textField!]\">\r\n            <label class=\"form-check-label\" [for]=\"column.formControlName+item[column.valueField!]\">\r\n              {{item[column.textField!]}}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n          *ngIf=\"getErrorMessage(column.formControlName) !== null\">\r\n          {{errorMsg}}\r\n        </div>\r\n      </div>\r\n\r\n      <!-- FILE UPLOAD -->\r\n      <div *ngSwitchCase=\"'file'\" [class]=\"column.containerClasses\">\r\n        <ipa-file-upload [isArabicForm]=\"isArabicForm\" [required]=\"column.required\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [acceptedFiles]=\"column.acceptedFiles!\"\r\n          [multiple]=\"column.multipleFile!\" [maxFileSize]=\"column.size!\" [method]=\"column.apiURlMethod!\"\r\n          [autoUpload]=\"column.autoUploadFile!\" [apiUrl]=\"column.apiUrl?? 'apiUrl' \"\r\n          [authorization]=\"column.authorization!\" ngDefaultControl [formControlName]=\"column.formControlName\"\r\n          (successUpload)=\"SuccessUpload($event)\" (fileAdded)=\"FileAdded($event, column.formControlName)\"\r\n          (fileDeleted)=\"FileDeleted($event, column.formControlName)\">\r\n        </ipa-file-upload>\r\n      </div>\r\n\r\n      <!-- recaptcha -->\r\n      <div *ngSwitchCase=\"'recaptcha'\" [class]=\"column.containerClasses\">\r\n        <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"isArabicForm? 'ar':'en'\" [theme]=\"theme\"\r\n          [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n          formControlName=\"{{column.formControlName}}\">\r\n        </ipa-recaptcha>\r\n      </div>\r\n\r\n      <!-- DEFAULT -->\r\n      <div *ngSwitchDefault>\r\n        <ipa-text-input [isPlatformCodeDesignSystem]=\"isPlatformCodeDesignSystem\"\r\n          [formControlName]=\"column.formControlName\" [id]=\"column.formControlName\" [type]=\"column.type\"\r\n          [label]=\"isArabicForm? column.arabicLabel : column.englishLabel\" [required]=\"column.required\"\r\n          [placeholder]=\"isArabicForm? column.arabicLabel : column.englishLabel\"\r\n          [patternErrorMsg]=\"isArabicForm? column.patternArErrorMsg! : column.patternEnErrorMsg!\"\r\n          [classes]=\"column.inputClasses!\" [containerClasses]=\"column.containerClasses!\" [isArabicForm]=\"isArabicForm\">\r\n        </ipa-text-input>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</form>" }]
         }], ctorParameters: () => [{ type: IPAFormService }], propDecorators: { generateForm: [{
                 type: Input
             }], form: [{
@@ -1056,10 +1056,8 @@ class DatepickerComponent {
         this.cd.detectChanges();
         if (this.isPlatformCodeDesignSystem) {
             this.initCustomDropdowns();
-            if (this.isPlatformCodeDesignSystem) {
-                this.years = [];
-                this.generateYearsRange();
-            }
+            this.years = [];
+            this.generateYearsRange();
         }
     }
     ngOnInit() {
@@ -1186,11 +1184,11 @@ class DatepickerComponent {
         });
     }
     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: "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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month) {\r\n        <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n          <div class=\"d-inline-flex\">\r\n            <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': +dp.state.focusedDate.year <= minYear && +dp.state.focusedDate.month <= minDate.month}\">\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 && +dp.state.focusedDate.month >= maxDate.month}\">\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"] }] }); }
+    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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month.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            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': (+dp.state.focusedDate.year <= minYear) && (minDate?.month && (+dp.state.focusedDate.month <= minDate.month))}\">\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) && (maxDate?.month && (+dp.state.focusedDate.month >= maxDate.month))}\">\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"] }] }); }
 }
 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}}\" *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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month) {\r\n        <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n          <div class=\"d-inline-flex\">\r\n            <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': +dp.state.focusedDate.year <= minYear && +dp.state.focusedDate.month <= minDate.month}\">\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 && +dp.state.focusedDate.month >= maxDate.month}\">\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"] }]
+            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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month.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            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': (+dp.state.focusedDate.year <= minYear) && (minDate?.month && (+dp.state.focusedDate.month <= minDate.month))}\">\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) && (maxDate?.month && (+dp.state.focusedDate.month >= maxDate.month))}\">\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"] }]
         }], ctorParameters: () => [{ type: IPAFormService }, { type: i2.NgbCalendar }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }] }, { type: i2.NgbInputDatepickerConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { datepicker: [{
@@ -1262,14 +1260,14 @@ class HijriDatepickerComponent extends DatepickerComponent {
     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}}\" *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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month) {\r\n        <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n          <div class=\"d-inline-flex\">\r\n            <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': +dp.state.focusedDate.year <= minYear && +dp.state.focusedDate.month <= minDate.month}\">\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 && +dp.state.focusedDate.month >= maxDate.month}\">\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"] }] }); }
+        ], 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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month.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            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': (+dp.state.focusedDate.year <= minYear) && (minDate?.month && (+dp.state.focusedDate.month <= minDate.month))}\">\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) && (maxDate?.month && (+dp.state.focusedDate.month >= maxDate.month))}\">\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"] }] }); }
 }
 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}}\" *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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month) {\r\n        <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n          <div class=\"d-inline-flex\">\r\n            <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': +dp.state.focusedDate.year <= minYear && +dp.state.focusedDate.month <= minDate.month}\">\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 && +dp.state.focusedDate.month >= maxDate.month}\">\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"] }]
+                    ], 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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month.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            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': (+dp.state.focusedDate.year <= minYear) && (minDate?.month && (+dp.state.focusedDate.month <= minDate.month))}\">\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) && (maxDate?.month && (+dp.state.focusedDate.month >= maxDate.month))}\">\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"] }]
         }] });
 
 const WEEKDAYS = ['أثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];
@@ -1316,14 +1314,14 @@ class GregorianDatepickerComponent extends DatepickerComponent {
     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}}\" *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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month) {\r\n        <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n          <div class=\"d-inline-flex\">\r\n            <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': +dp.state.focusedDate.year <= minYear && +dp.state.focusedDate.month <= minDate.month}\">\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 && +dp.state.focusedDate.month >= maxDate.month}\">\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"] }] }); }
+        ], 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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month.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            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': (+dp.state.focusedDate.year <= minYear) && (minDate?.month && (+dp.state.focusedDate.month <= minDate.month))}\">\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) && (maxDate?.month && (+dp.state.focusedDate.month >= maxDate.month))}\">\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"] }] }); }
 }
 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}}\" *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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month) {\r\n        <div class=\"d-flex justify-content-between\" style=\"height: 40px;\">\r\n          <div class=\"d-inline-flex\">\r\n            <span class=\"align-content-center me-2\">{{ dp.i18n.getMonthShortName(month.month) }}</span>\r\n            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': +dp.state.focusedDate.year <= minYear && +dp.state.focusedDate.month <= minDate.month}\">\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 && +dp.state.focusedDate.month >= maxDate.month}\">\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"] }]
+                    ], 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 class=\"form-label\" for=\"{{id}}\"><span *ngIf=\"required\" class=\"text-danger\">*</span> {{label}} </label>\r\n  <input id=\"{{id}}\" class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n    #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [required]=\"required\"\r\n    style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" placeholder=\"{{label}}\"\r\n    (click)=\"openDatepicker($event)\" [contentTemplate]=\"contentTemplate\" [navigation]=\"'none'\"\r\n    [placement]=\"'bottom-end'\" [autoClose]=\"true\" [dayTemplate]=\"dayTemplate\"\r\n    [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg}\">\r\n\r\n  <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n    {{errorMsg}}\r\n  </div>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <div ngbdatepickerdayview [class.bg-primary]=\"selected\" [class.outside]=\"date.month !== currentMonth\">\r\n      {{ date.day }}\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #contentTemplate let-dp>\r\n    <div class=\"p-2\">\r\n      <div class=\"custom-month-grid\">\r\n        @for (month of dp.state.months; track month.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            <div class=\"dropdown custom-dropdown-wrapper-{{id}}\">\r\n              <button\r\n                class=\"form-control dropdown-toggle w-100 text-end d-flex justify-content-between align-items-center\"\r\n                type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"selected-text\">{{dp.state.focusedDate.year}}</span>\r\n              </button>\r\n              <ul class=\"dropdown-menu dropdown-menu-end w-50\" style=\"max-height: 360px; overflow-y: auto;\">\r\n                <li *ngFor=\"let year of years; let i = index;\" (click)=\"navigateYear(dp, year);\">\r\n                  <span class=\"dropdown-item\" href=\"javascript:void(0);\" [attr.data-value]=\"year\"\r\n                    [ngClass]=\"{'active': dp.state.focusedDate.year === year}\">\r\n                    {{year}}\r\n                  </span>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button type=\"button\" class=\"tp-link tp-link-subtle\" (click)=\"navigate(dp, -1)\"\r\n              [ngClass]=\"{'disabled': (+dp.state.focusedDate.year <= minYear) && (minDate?.month && (+dp.state.focusedDate.month <= minDate.month))}\">\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) && (maxDate?.month && (+dp.state.focusedDate.month >= maxDate.month))}\">\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"] }]
         }] });
 
 class ShareButtonComponent {