ng-ipa-library 1.0.1 → 1.2.0

package/fesm2020/ng-ipa-library.mjs

@@ -317,6 +317,7 @@ class TextInputComponent {
         this.label = 'text input';
         this.required = false;
         this.patternErrorMsg = 'invalid pattern';
+        this.onlyNumber = false;
         this.pattern = '';
         this.formControl = new FormControl('');
         this.controlDir.valueAccessor = this;
@@ -339,16 +340,27 @@ class TextInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    checkIsNumber(event) {
+        if (this.onlyNumber) {
+            const initialValue = this.formControl.value;
+            const newValue = initialValue.replace(/[^0-9]*/g, '');
+            this.formControl.patchValue(newValue);
+            this.formControl.markAsPristine();
+            if (initialValue !== this.formControl.value) {
+                event.stopPropagation();
+            }
+        }
+    }
     get errorMessage() {
         this.errorMsg = this.validationService.getErrorMessage(this.formControl, this.patternErrorMsg);
         return this.errorMsg;
     }
 }
 TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextInputComponent, deps: [{ token: IPAFormService }, { token: i2$1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component });
-TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TextInputComponent, selector: "ipa-text-input", inputs: { id: "id", type: "type", placeholder: "placeholder", label: "label", required: "required", patternErrorMsg: "patternErrorMsg", pattern: "pattern", classes: "classes", containerClasses: "containerClasses" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\">\r\n    <input #input id=\"{{id}}\" class=\"form-control {{classes}}\" [type]=\"type\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n        placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n        (blur)=\"onTouched()\"\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    <label for=\"{{id}}\">{{label}}</label>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n</div>", styles: [""], directives: [{ 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]" }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TextInputComponent, selector: "ipa-text-input", inputs: { id: "id", type: "type", placeholder: "placeholder", label: "label", required: "required", patternErrorMsg: "patternErrorMsg", onlyNumber: "onlyNumber", pattern: "pattern", classes: "classes", containerClasses: "containerClasses" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"form-floating {{containerClasses}}\">\r\n    <input #input id=\"{{id}}\" class=\"form-control {{classes}}\" [type]=\"type\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n        placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n        (blur)=\"onTouched()\" (input)=\"checkIsNumber($event)\"\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    <label for=\"{{id}}\">{{label}}</label>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n</div>", styles: [""], directives: [{ 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]" }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipa-text-input', template: "<div class=\"form-floating {{containerClasses}}\">\r\n    <input #input id=\"{{id}}\" class=\"form-control {{classes}}\" [type]=\"type\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n        placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n        (blur)=\"onTouched()\"\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    <label for=\"{{id}}\">{{label}}</label>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n</div>", styles: [""] }]
+            args: [{ selector: 'ipa-text-input', template: "<div class=\"form-floating {{containerClasses}}\">\r\n    <input #input id=\"{{id}}\" class=\"form-control {{classes}}\" [type]=\"type\" [required]=\"required\" pattern=\"{{pattern}}\"\r\n        placeholder=\"{{placeholder}}\" [formControl]=\"formControl\" (input)=\"onChange(controlDir.control?.value)\"\r\n        (blur)=\"onTouched()\" (input)=\"checkIsNumber($event)\"\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    <label for=\"{{id}}\">{{label}}</label>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n</div>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: IPAFormService }, { type: i2$1.NgControl, decorators: [{
                     type: Self
                 }] }]; }, propDecorators: { input: [{
@@ -366,6 +378,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                 type: Input
             }], patternErrorMsg: [{
                 type: Input
+            }], onlyNumber: [{
+                type: Input
             }], pattern: [{
                 type: Input
             }], classes: [{
@@ -791,7 +805,7 @@ class GenerateFormComponent {
     }
 }
 GenerateFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GenerateFormComponent, deps: [{ token: IPAFormService }], target: i0.ɵɵFactoryTarget.Component });
-GenerateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GenerateFormComponent, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", 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 [formControlName]=\"column.englishName\" [id]=\"column.englishName\"\r\n                    [label]=\"column.arabicLabel\" [required]=\"column.required\" [pattern]=\"column.validationPattern!\"\r\n                    [patternErrorMsg]=\"column.patternErrorMsg!\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\"></ipa-textarea-input>\r\n            </div>\r\n\r\n            <!-- DROP DOWN LIST -->\r\n            <div *ngSwitchCase=\"'select'\">\r\n                <ipa-dropdown-input [formControlName]=\"column.englishName\" [id]=\"column.englishName\"\r\n                    [label]=\"column.arabicLabel\" [items]=\"column.data!\" [valueField]=\"column.valueField!\"\r\n                    [textField]=\"column.textField!\" [required]=\"column.required\" [searchable]=\"column.searchable\"\r\n                    [notFoundText]=\"column.notFoundText\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\">\r\n                </ipa-dropdown-input>\r\n            </div>\r\n\r\n            <!-- CHECKBOX -->\r\n            <div *ngSwitchCase=\"'checkbox'\">\r\n                <label [for]=\"column.englishName\">{{column.arabicLabel}}</label>\r\n                <div [formArrayName]=\"'items'\" *ngFor=\"let control of formControls.controls; let i = index\">\r\n                    <div [formGroupName]=\"i\" [id]=\"column.englishName\">\r\n                        <div class=\"form-check\">\r\n                            <input [id]=\"column.englishName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n                                type=\"checkbox\" formControlName=\"checkbox\">\r\n                            <label class=\"form-check-label\"\r\n                                [for]=\"column.englishName+control.value[column.valueField!]\">\r\n                                {{control.value[column.textField!]}}\r\n                            </label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.englishName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RADIO -->\r\n            <div *ngSwitchCase=\"'radio'\">\r\n                <label [for]=\"column.englishName\">{{column.arabicLabel}}</label>\r\n                <div *ngFor=\"let item of column.data; let i = index\" [id]=\"column.englishName\">\r\n                    <div class=\"form-check\">\r\n                        <input [id]=\"column.englishName+item[column.valueField!]\" class=\"form-check-input\" type=\"radio\"\r\n                            [formControlName]=\"column.englishName\" [value]=\"item[column.valueField!]\">\r\n                        <label class=\"form-check-label\" [for]=\"column.englishName+item[column.valueField!]\">\r\n                            {{item[column.textField!]}}\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.englishName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- FILE UPLOAD -->\r\n            <div *ngSwitchCase=\"'file'\">\r\n                <ipa-file-upload [label]=\"column.arabicLabel\" [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.englishName\"\r\n                    (successUpload)=\"SuccessUpload($event)\" (fileAdded)=\"FileAdded($event, column.englishName)\"\r\n                    (fileDeleted)=\"FileDeleted($event, column.englishName)\"></ipa-file-upload>\r\n            </div>\r\n\r\n            <!-- recaptcha -->\r\n            <div *ngSwitchCase=\"'recaptcha'\">\r\n                <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"lang\" [theme]=\"theme\"\r\n                    [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n                    formControlName=\"{{column.englishName}}\"></ipa-recaptcha>\r\n            </div>\r\n\r\n            <!-- DEFAULT -->\r\n            <div *ngSwitchDefault>\r\n                <ipa-text-input [formControlName]=\"column.englishName\" [id]=\"column.englishName\" [type]=\"column.type\"\r\n                    [label]=\"column.arabicLabel\" [required]=\"column.required\" [pattern]=\"column.validationPattern!\"\r\n                    [patternErrorMsg]=\"column.patternErrorMsg!\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\"></ipa-text-input>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</form>", styles: [""], components: [{ type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["id", "placeholder", "label", "required", "patternErrorMsg", "pattern", "classes", "containerClasses"] }, { type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "label", "items", "textField", "valueField", "required", "searchable", "notFoundText", "classes", "containerClasses"] }, { type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["label", "required", "acceptedFiles", "multiple", "maxFileSize", "method", "autoUpload", "apiUrl", "authorization"], outputs: ["successUpload", "fileAdded", "fileDeleted"] }, { type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }, { type: TextInputComponent, selector: "ipa-text-input", inputs: ["id", "type", "placeholder", "label", "required", "patternErrorMsg", "pattern", "classes", "containerClasses"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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]" }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+GenerateFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GenerateFormComponent, selector: "ipa-generate-form", inputs: { generateForm: "generateForm", form: "form", 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 [formControlName]=\"column.englishName\" [id]=\"column.englishName\"\r\n                    [label]=\"column.arabicLabel\" [required]=\"column.required\" [pattern]=\"column.validationPattern!\"\r\n                    [patternErrorMsg]=\"column.patternErrorMsg!\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\"></ipa-textarea-input>\r\n            </div>\r\n\r\n            <!-- DROP DOWN LIST -->\r\n            <div *ngSwitchCase=\"'select'\">\r\n                <ipa-dropdown-input [formControlName]=\"column.englishName\" [id]=\"column.englishName\"\r\n                    [label]=\"column.arabicLabel\" [items]=\"column.data!\" [valueField]=\"column.valueField!\"\r\n                    [textField]=\"column.textField!\" [required]=\"column.required\" [searchable]=\"column.searchable\"\r\n                    [notFoundText]=\"column.notFoundText\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\">\r\n                </ipa-dropdown-input>\r\n            </div>\r\n\r\n            <!-- CHECKBOX -->\r\n            <div *ngSwitchCase=\"'checkbox'\">\r\n                <label [for]=\"column.englishName\">{{column.arabicLabel}}</label>\r\n                <div [formArrayName]=\"'items'\" *ngFor=\"let control of formControls.controls; let i = index\">\r\n                    <div [formGroupName]=\"i\" [id]=\"column.englishName\">\r\n                        <div class=\"form-check\">\r\n                            <input [id]=\"column.englishName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n                                type=\"checkbox\" formControlName=\"checkbox\">\r\n                            <label class=\"form-check-label\"\r\n                                [for]=\"column.englishName+control.value[column.valueField!]\">\r\n                                {{control.value[column.textField!]}}\r\n                            </label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.englishName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RADIO -->\r\n            <div *ngSwitchCase=\"'radio'\">\r\n                <label [for]=\"column.englishName\">{{column.arabicLabel}}</label>\r\n                <div *ngFor=\"let item of column.data; let i = index\" [id]=\"column.englishName\">\r\n                    <div class=\"form-check\">\r\n                        <input [id]=\"column.englishName+item[column.valueField!]\" class=\"form-check-input\" type=\"radio\"\r\n                            [formControlName]=\"column.englishName\" [value]=\"item[column.valueField!]\">\r\n                        <label class=\"form-check-label\" [for]=\"column.englishName+item[column.valueField!]\">\r\n                            {{item[column.textField!]}}\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.englishName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- FILE UPLOAD -->\r\n            <div *ngSwitchCase=\"'file'\">\r\n                <ipa-file-upload [label]=\"column.arabicLabel\" [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.englishName\"\r\n                    (successUpload)=\"SuccessUpload($event)\" (fileAdded)=\"FileAdded($event, column.englishName)\"\r\n                    (fileDeleted)=\"FileDeleted($event, column.englishName)\"></ipa-file-upload>\r\n            </div>\r\n\r\n            <!-- recaptcha -->\r\n            <div *ngSwitchCase=\"'recaptcha'\">\r\n                <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"lang\" [theme]=\"theme\"\r\n                    [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n                    formControlName=\"{{column.englishName}}\"></ipa-recaptcha>\r\n            </div>\r\n\r\n            <!-- DEFAULT -->\r\n            <div *ngSwitchDefault>\r\n                <ipa-text-input [formControlName]=\"column.englishName\" [id]=\"column.englishName\" [type]=\"column.type\"\r\n                    [label]=\"column.arabicLabel\" [required]=\"column.required\" [pattern]=\"column.validationPattern!\"\r\n                    [patternErrorMsg]=\"column.patternErrorMsg!\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\"></ipa-text-input>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</form>", styles: [""], components: [{ type: TextareaInputComponent, selector: "ipa-textarea-input", inputs: ["id", "placeholder", "label", "required", "patternErrorMsg", "pattern", "classes", "containerClasses"] }, { type: DropdownInputComponent, selector: "ipa-dropdown-input", inputs: ["id", "label", "items", "textField", "valueField", "required", "searchable", "notFoundText", "classes", "containerClasses"] }, { type: FileUploadComponent, selector: "ipa-file-upload", inputs: ["label", "required", "acceptedFiles", "multiple", "maxFileSize", "method", "autoUpload", "apiUrl", "authorization"], outputs: ["successUpload", "fileAdded", "fileDeleted"] }, { type: RecaptchaComponent, selector: "ipa-recaptcha", inputs: ["siteKey", "recaptchaSize", "lang", "recaptchaType", "theme", "useGlobalDomain"] }, { type: TextInputComponent, selector: "ipa-text-input", inputs: ["id", "type", "placeholder", "label", "required", "patternErrorMsg", "onlyNumber", "pattern", "classes", "containerClasses"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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]" }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GenerateFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipa-generate-form', 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 [formControlName]=\"column.englishName\" [id]=\"column.englishName\"\r\n                    [label]=\"column.arabicLabel\" [required]=\"column.required\" [pattern]=\"column.validationPattern!\"\r\n                    [patternErrorMsg]=\"column.patternErrorMsg!\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\"></ipa-textarea-input>\r\n            </div>\r\n\r\n            <!-- DROP DOWN LIST -->\r\n            <div *ngSwitchCase=\"'select'\">\r\n                <ipa-dropdown-input [formControlName]=\"column.englishName\" [id]=\"column.englishName\"\r\n                    [label]=\"column.arabicLabel\" [items]=\"column.data!\" [valueField]=\"column.valueField!\"\r\n                    [textField]=\"column.textField!\" [required]=\"column.required\" [searchable]=\"column.searchable\"\r\n                    [notFoundText]=\"column.notFoundText\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\">\r\n                </ipa-dropdown-input>\r\n            </div>\r\n\r\n            <!-- CHECKBOX -->\r\n            <div *ngSwitchCase=\"'checkbox'\">\r\n                <label [for]=\"column.englishName\">{{column.arabicLabel}}</label>\r\n                <div [formArrayName]=\"'items'\" *ngFor=\"let control of formControls.controls; let i = index\">\r\n                    <div [formGroupName]=\"i\" [id]=\"column.englishName\">\r\n                        <div class=\"form-check\">\r\n                            <input [id]=\"column.englishName+control.value[column.valueField!]\" class=\"form-check-input\"\r\n                                type=\"checkbox\" formControlName=\"checkbox\">\r\n                            <label class=\"form-check-label\"\r\n                                [for]=\"column.englishName+control.value[column.valueField!]\">\r\n                                {{control.value[column.textField!]}}\r\n                            </label>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.englishName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RADIO -->\r\n            <div *ngSwitchCase=\"'radio'\">\r\n                <label [for]=\"column.englishName\">{{column.arabicLabel}}</label>\r\n                <div *ngFor=\"let item of column.data; let i = index\" [id]=\"column.englishName\">\r\n                    <div class=\"form-check\">\r\n                        <input [id]=\"column.englishName+item[column.valueField!]\" class=\"form-check-input\" type=\"radio\"\r\n                            [formControlName]=\"column.englishName\" [value]=\"item[column.valueField!]\">\r\n                        <label class=\"form-check-label\" [for]=\"column.englishName+item[column.valueField!]\">\r\n                            {{item[column.textField!]}}\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"invalid-feedback\" style=\"display: block !important;\"\r\n                    *ngIf=\"getErrorMessage(column.englishName) !== null\">\r\n                    {{errorMsg}}\r\n                </div>\r\n            </div>\r\n\r\n            <!-- FILE UPLOAD -->\r\n            <div *ngSwitchCase=\"'file'\">\r\n                <ipa-file-upload [label]=\"column.arabicLabel\" [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.englishName\"\r\n                    (successUpload)=\"SuccessUpload($event)\" (fileAdded)=\"FileAdded($event, column.englishName)\"\r\n                    (fileDeleted)=\"FileDeleted($event, column.englishName)\"></ipa-file-upload>\r\n            </div>\r\n\r\n            <!-- recaptcha -->\r\n            <div *ngSwitchCase=\"'recaptcha'\">\r\n                <ipa-recaptcha [recaptchaSize]=\"recaptchaSize\" [lang]=\"lang\" [theme]=\"theme\"\r\n                    [recaptchaType]=\"recaptchaType\" [useGlobalDomain]=\"useGlobalDomain\"\r\n                    formControlName=\"{{column.englishName}}\"></ipa-recaptcha>\r\n            </div>\r\n\r\n            <!-- DEFAULT -->\r\n            <div *ngSwitchDefault>\r\n                <ipa-text-input [formControlName]=\"column.englishName\" [id]=\"column.englishName\" [type]=\"column.type\"\r\n                    [label]=\"column.arabicLabel\" [required]=\"column.required\" [pattern]=\"column.validationPattern!\"\r\n                    [patternErrorMsg]=\"column.patternErrorMsg!\" [classes]=\"column.inputClasses!\"\r\n                    [containerClasses]=\"column.containerClasses!\"></ipa-text-input>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</form>", styles: [""] }]
@@ -830,7 +844,7 @@ class DatepickerComponent {
         this.today = this.calendar.getToday();
         this.formControl = new FormControl('');
         this.controlDir.valueAccessor = this;
-        config.container = 'body';
+        config.container = null;
     }
     ngOnInit() {
         const control = this.controlDir.control;
@@ -848,19 +862,30 @@ class DatepickerComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    openDatepicker(event) {
+        if (!this.datepicker.isOpen()) {
+            this.datepicker.toggle();
+            event.preventDefault();
+            return;
+        }
+        this.datepicker.close();
+    }
     get errorMessage() {
         this.errorMsg = this.ipaFormService.getErrorMessage(this.formControl, this.patternErrorMsg);
         return this.errorMsg;
     }
 }
 DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DatepickerComponent, deps: [{ token: IPAFormService }, { token: i2.NgbCalendar }, { token: i2$1.NgControl, self: true }, { token: i2.NgbInputDatepickerConfig }], target: i0.ɵɵFactoryTarget.Component });
-DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DatepickerComponent, selector: "ipa-datepicker", inputs: { id: "id", label: "label", patternErrorMsg: "patternErrorMsg", required: "required", maxDate: "maxDate", minDate: "minDate", classes: "classes", containerClasses: "containerClasses" }, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"d.toggle()\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DatepickerComponent, selector: "ipa-datepicker", inputs: { id: "id", label: "label", patternErrorMsg: "patternErrorMsg", required: "required", maxDate: "maxDate", minDate: "minDate", classes: "classes", containerClasses: "containerClasses" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["d"], descendants: true }], ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n        title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipa-datepicker', template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"d.toggle()\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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', template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n        title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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: function () { return [{ type: IPAFormService }, { type: i2.NgbCalendar }, { type: i2$1.NgControl, decorators: [{
                     type: Self
-                }] }, { type: i2.NgbInputDatepickerConfig }]; }, propDecorators: { id: [{
+                }] }, { type: i2.NgbInputDatepickerConfig }]; }, propDecorators: { datepicker: [{
+                type: ViewChild,
+                args: ['d']
+            }], id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -919,13 +944,13 @@ HijriDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 HijriDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: HijriDatepickerComponent, selector: "ipa-hijri-datepicker", providers: [
         { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
         { provide: NgbDatepickerI18n, useClass: IslamicI18n },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"d.toggle()\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n        title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: HijriDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipa-hijri-datepicker', providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
                         { provide: NgbDatepickerI18n, useClass: IslamicI18n },
-                    ], template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"d.toggle()\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"] }]
+                    ], template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n        title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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 = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
@@ -969,13 +994,13 @@ GregorianDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0
 GregorianDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: GregorianDatepickerComponent, selector: "ipa-gregorian-datepicker", providers: [
         { provide: NgbCalendar, useClass: NgbCalendarGregorian },
         { provide: NgbDatepickerI18n, useClass: Gregorian18n },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"d.toggle()\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n        title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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]" }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: GregorianDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipa-gregorian-datepicker', providers: [
                         { provide: NgbCalendar, useClass: NgbCalendarGregorian },
                         { provide: NgbDatepickerI18n, useClass: Gregorian18n },
-                    ], template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\" title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"d.toggle()\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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"] }]
+                    ], template: "<div class=\"form-floating input-group {{containerClasses}}\">\r\n    <input id=\"{{id}}\"\r\n        [ngClass]=\"{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}\"\r\n        class=\"form-control {{classes}}\" [formControl]=\"formControl\" [firstDayOfWeek]=\"7\" ngbDatepicker\r\n        #d=\"ngbDatepicker\" [maxDate]=\"maxDate\" [minDate]=\"minDate\" [footerTemplate]=\"footerTemplate\"\r\n        [required]=\"required\" style=\"outline: unset; z-index: unset !important;\" autocomplete=\"off\" (blur)=\"onTouched()\"\r\n        title=\"{{label}}\">\r\n    <label for=\"{{id}}\">{{label}}</label>\r\n    <span class=\"input-group-text calenderBtn\" (click)=\"openDatepicker($event)\">\r\n        <i class=\"far fa-calendar-alt fa-lg\"></i>\r\n    </span>\r\n    <div class=\"invalid-feedback\" *ngIf=\"errorMessage !== null\">\r\n        {{errorMsg}}\r\n    </div>\r\n    <ng-template #footerTemplate style=\"text-align: center;\">\r\n        <hr>\r\n        <button type=\"button\" class=\"btn btn-primary btn-sm m-2 \" style=\"width: auto; float: right;\"\r\n            (click)=\"formControl.patchValue(today);d.navigateTo(today);\">\u0627\u0644\u064A\u0648\u0645</button>\r\n        <button type=\"button\" class=\"btn btn-secondary btn-sm m-2\" style=\"width: auto; float: left;\"\r\n            (click)=\"formControl.patchValue(null);d.close()\">\u0645\u0633\u062D</button>\r\n    </ng-template>\r\n</div>", 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 {
@@ -1272,6 +1297,21 @@ class AuthService {
             exp: decodedToken.exp,
         });
     }
+    getTokenFromHidden() {
+        return (document.querySelector('[id$=hfToken]').value ?? '');
+    }
+    getDecodedTokenFromHidden() {
+        return this.decodeJwt(this.getTokenFromHidden());
+    }
+    setCurrentUserFromHidden() {
+        const decodedToken = this.getDecodedTokenFromHidden();
+        this.currentUser.next({
+            nameid: decodedToken.nameid,
+            email: decodedToken.email,
+            given_name: decodedToken.given_name,
+            exp: decodedToken.exp,
+        });
+    }
     setCurrentUserUrl(url) {
         this.currentUserUrl = url;
     }
@@ -1297,10 +1337,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class TokenInterceptor {
-    constructor(authService, http) {
+    constructor(authService, http, loaderService) {
         this.authService = authService;
         this.http = http;
+        this.loaderService = loaderService;
         this.refresh = true;
+        this.loaderService.addExceptionUrl({
+            path: '/api/users?refresh',
+            method: 'GET',
+        });
     }
     intercept(request, next) {
         if (this.isException(request)) {
@@ -1354,11 +1399,80 @@ class TokenInterceptor {
         return false;
     }
 }
-TokenInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TokenInterceptor, deps: [{ token: AuthService }, { token: i2$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+TokenInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TokenInterceptor, deps: [{ token: AuthService }, { token: i2$4.HttpClient }, { token: LoaderService }], target: i0.ɵɵFactoryTarget.Injectable });
 TokenInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TokenInterceptor });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TokenInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: AuthService }, { type: i2$4.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: i2$4.HttpClient }, { type: LoaderService }]; } });
+
+class myIPATokenInterceptor {
+    constructor(authService, http, loaderService) {
+        this.authService = authService;
+        this.http = http;
+        this.loaderService = loaderService;
+        this.refresh = true;
+        this.loaderService.addExceptionUrl({
+            path: '/api/users?refresh',
+            method: 'GET',
+        });
+    }
+    intercept(request, next) {
+        if (this.isException(request)) {
+            return next.handle(request);
+        }
+        const token = this.authService.getTokenFromHidden();
+        if (token) {
+            this.isTokenExpired(token);
+            request = request.clone({
+                setHeaders: {
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+        }
+        return next.handle(request);
+    }
+    isTokenExpired(token) {
+        const redirectPath = location.pathname;
+        const decodedToken = this.authService.getDecodedTokenFromHidden();
+        const expDate = new Date((decodedToken.exp ?? 0) * 1000);
+        if (expDate < new Date()) {
+            location.replace('/ar/login?redirect=' + redirectPath);
+            return;
+        }
+        else {
+            if (this.authService.currentUserUrl) {
+                if (this.refresh) {
+                    this.http
+                        .get(this.authService.currentUserUrl + `/api/users?refresh`, {
+                        headers: { Authorization: `Bearer ${token}` },
+                    })
+                        .subscribe((user) => {
+                        localStorage.setItem('token', user.token);
+                        this.refresh = false;
+                        setTimeout(() => {
+                            this.refresh = true;
+                        }, 60 * 1000);
+                    });
+                }
+            }
+            else {
+                throw new Error("provide current base user api url using this function authService.setCurrentUserUrl('https://...')");
+            }
+        }
+    }
+    isException(request) {
+        if (request.url.includes('/api/users?refresh') &&
+            request.method === 'GET') {
+            return true;
+        }
+        return false;
+    }
+}
+myIPATokenInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: myIPATokenInterceptor, deps: [{ token: AuthService }, { token: i2$4.HttpClient }, { token: LoaderService }], target: i0.ɵɵFactoryTarget.Injectable });
+myIPATokenInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: myIPATokenInterceptor });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: myIPATokenInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: i2$4.HttpClient }, { type: LoaderService }]; } });
 
 class BreadcrumbsService {
     constructor() { }
@@ -1578,5 +1692,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, BreadcrumbsService, CommonService, DropdownInputComponent, ErrorInterceptor, ErrorService, FileUploadComponent, GenerateFormComponent, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, IPAFormService, LoaderComponent, LoaderService, LoadingInterceptor, NgIPALibraryModule, PipesModule, RecaptchaComponent, ShareButtonComponent, ShareButtonModule, TextInputComponent, TextareaInputComponent, TokenInterceptor };
+export { AuthService, BreadcrumbsService, CommonService, DropdownInputComponent, ErrorInterceptor, ErrorService, FileUploadComponent, GenerateFormComponent, GregorianDatepickerComponent, HijriDatePipe, HijriDatepickerComponent, IPAFormService, LoaderComponent, LoaderService, LoadingInterceptor, NgIPALibraryModule, PipesModule, RecaptchaComponent, ShareButtonComponent, ShareButtonModule, TextInputComponent, TextareaInputComponent, TokenInterceptor, myIPATokenInterceptor };
 //# sourceMappingURL=ng-ipa-library.mjs.map