survery-lib 2.1.44 → 2.1.46

package/fesm2022/survery-lib.mjs

@@ -33,6 +33,7 @@ var QuestionTypeEnum;
     QuestionTypeEnum[QuestionTypeEnum["Cascade"] = 8] = "Cascade";
     QuestionTypeEnum[QuestionTypeEnum["FeedBack"] = 9] = "FeedBack";
     QuestionTypeEnum[QuestionTypeEnum["Institutions"] = 10] = "Institutions";
+    QuestionTypeEnum[QuestionTypeEnum["File"] = 13] = "File";
 })(QuestionTypeEnum || (QuestionTypeEnum = {}));
 
 var InputTypeEnum;
@@ -138,6 +139,10 @@ const allRequiredQuestionsOfCurrentPageDone = createSelector(selectSurveyData, (
 });
 const questionAnswers = createSelector(selectSurveyData, (state) => selectAll$1(state.questionArr)
     .filter(x => x.isQuestionGroup != true && x.isShow == true).map(x => {
+    var answerText = x.answerText;
+    if (x.answerText !== null && x.answerText !== undefined) {
+        answerText = answerText + "";
+    }
     if (x.questionType == QuestionTypeEnum.Institutions) {
         return {
             SurveyPageIndex: x.surveyPageId,
@@ -145,12 +150,26 @@ const questionAnswers = createSelector(selectSurveyData, (state) => selectAll$1(
             QuestionName: x.questionAllInfo.questionTitle,
             QuestionType: x.questionType,
             AnswerId: x.answerLevelId,
-            AnswerText: x.answerText,
+            AnswerText: answerText,
             AnswerIdArr: x.answerIdArr,
             AnswerLevelId: x.answerId,
             PassedRuleQuestionId: x.passedRuleQuestionId
         };
     }
+    else if (x.questionType == QuestionTypeEnum.File) {
+        return {
+            SurveyPageIndex: x.surveyPageId,
+            QuestionId: x.questionId,
+            QuestionName: x.questionAllInfo.questionTitle,
+            QuestionType: x.questionType,
+            AnswerId: x.answerId,
+            AnswerText: answerText,
+            AnswerIdArr: x.answerIdArr,
+            AnswerLevelId: x.answerLevelId,
+            AnswerFile: x.answerFile,
+            PassedRuleQuestionId: x.passedRuleQuestionId
+        };
+    }
     else {
         return {
             SurveyPageIndex: x.surveyPageId,
@@ -158,27 +177,26 @@ const questionAnswers = createSelector(selectSurveyData, (state) => selectAll$1(
             QuestionName: x.questionAllInfo.questionTitle,
             QuestionType: x.questionType,
             AnswerId: x.answerId,
-            AnswerText: x.answerText,
+            AnswerText: answerText,
             AnswerIdArr: x.answerIdArr,
             AnswerLevelId: x.answerLevelId,
             PassedRuleQuestionId: x.passedRuleQuestionId
         };
     }
-})
-// .filter(res => {
-//     if (res.PassedRuleQuestionId !== null && res.PassedRuleQuestionId !== undefined) {
-//         var passedRuleQuestion = selectAll(state.questionArr).find(x => x.questionId == res.PassedRuleQuestionId);
-//         if (passedRuleQuestion) {
-//             const hasAnswerId = res.AnswerId !== null && res.AnswerId !== undefined;
-//             const hasAnswerText = res.AnswerText !== null && res.AnswerText !== undefined && res.AnswerText !== '';
-//             const hasAnswerIdArr = Array.isArray(res.AnswerIdArr) && res.AnswerIdArr?.length > 0;
-//              return hasAnswerId || hasAnswerText || hasAnswerIdArr;
-//         }
-//     }
-//     // Keep the item if at least one of them has a valid value
-//     return true;
-// })
-);
+}).filter(res => {
+    if (res.PassedRuleQuestionId !== null && res.PassedRuleQuestionId !== undefined) {
+        var passedRuleQuestion = selectAll$1(state.questionArr).find(x => x.questionId == res.PassedRuleQuestionId);
+        if (passedRuleQuestion) {
+            const hasAnswerId = res.AnswerId !== null && res.AnswerId !== undefined;
+            const hasAnswerText = res.AnswerText !== null && res.AnswerText !== undefined && res.AnswerText !== '';
+            const hasAnswerIdArr = Array.isArray(res.AnswerIdArr) && res.AnswerIdArr?.length > 0;
+            const hasAnswerFile = res.AnswerFile !== null && res.AnswerFile !== undefined;
+            return hasAnswerId || hasAnswerText || hasAnswerIdArr || hasAnswerFile;
+        }
+    }
+    // Keep the item if at least one of them has a valid value
+    return true;
+}));
 const questionSelectors = {
     allQuestions,
     pageQuestions,
@@ -189,6 +207,7 @@ const questionSelectors = {
 const loadSurvey = createAction('[Survey library] Load Survey', props());
 const addQuestion = createAction('[Survey library] Add Question', props());
 const updateQuestionAnswer = createAction('[Survey library] Update Question Answer', props());
+const updateQuestionFileAnswer = createAction('[Survey library] Update Question Answer', props());
 const updateInstitutionQuestionAnswer = createAction('[Survey library] Update Institution Question Answer', props());
 const updateQuestionShow = createAction('[Survey library] Update Question Show', props());
 const updateQuestionsShow = createAction('[Survey library] Update Questions Show', props());
@@ -204,6 +223,7 @@ const surveyActions = {
     loadSurvey,
     addQuestion,
     updateQuestionAnswer,
+    updateQuestionFileAnswer,
     updateInstitutionQuestionAnswer,
     updateQuestionShow,
     updateQuestionsShow,
@@ -309,6 +329,7 @@ class SurveyLibService {
             answerId: null,
             answerIdArr: null,
             answerText: null,
+            answerFile: null,
             isRequired: question.isRequired,
             isValid: null,
             isDisabled: question.isReadOnly,
@@ -341,6 +362,7 @@ class SurveyLibService {
                     answerId: null,
                     answerIdArr: null,
                     answerText: null,
+                    answerFile: null,
                     isRequired: question.isRequired,
                     isValid: null,
                     order: question.order,
@@ -367,6 +389,7 @@ class SurveyLibService {
                     answerId: null,
                     answerIdArr: null,
                     answerText: null,
+                    answerFile: null,
                     isRequired: subQuestion.level == 1 ? question.isRequired : false,
                     isValid: null,
                     isDisabled: question.isReadOnly,
@@ -1749,6 +1772,7 @@ class QuestionCascadeTemplateComponent {
                         answerId: null,
                         answerIdArr: null,
                         answerText: null,
+                        answerFile: null,
                         isRequired: res.isRequired,
                         isValid: null,
                         order: res.order,
@@ -1830,6 +1854,7 @@ class QuestionCascadeTemplateComponent {
                         answerId: null,
                         answerIdArr: null,
                         answerText: null,
+                        answerFile: null,
                         isRequired: res.isRequired,
                         order: res.order,
                         isValid: null,
@@ -2246,6 +2271,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class QuestionFileTemplateComponent {
+    get fCtrls() {
+        return this.rForm.controls;
+    }
+    get questionTypeEnum() {
+        return QuestionTypeEnum;
+    }
+    set setQuestion(value) {
+        if (!this.surveyQuestion) {
+            this.surveyQuestion = value.questionAllInfo;
+            this.rForm.patchValue({
+                id: value.questionId,
+                name: value.questionAllInfo.questionName,
+                title: value.questionAllInfo.questionTitle,
+                typeId: value.questionAllInfo.questionTypeId,
+                description: value.questionAllInfo.questionDescription,
+                isDisabled: value.questionAllInfo.isReadOnly,
+                isShow: value.questionAllInfo.isVisable
+            });
+            if (value.isShow == true) {
+                this.fCtrls.isShow.setValue(value.isShow);
+            }
+            if (value.questionAllInfo.surveyAnswers[0]?.answerId != null && value.questionAllInfo.surveyAnswers[0]?.answerId != undefined) {
+                this.fCtrls.surveyAnswerId.setValue(value.questionAllInfo.surveyAnswers[0].answerId);
+            }
+            if (value.isRequired == true) {
+                this.fCtrls.fileName.addValidators([Validators.required]);
+                this.fCtrls.fileName.updateValueAndValidity();
+            }
+            var question = this.questionArr().find(x => x.questionId == value.questionId);
+            if (question?.answerText) {
+                this.rForm.patchValue({
+                    fileName: question.answerText,
+                    isDisabled: question.isDisabled,
+                    isShow: question.isShow
+                }, { emitEvent: false });
+            }
+            this.toggleEnableAnswer(value.questionAllInfo.isReadOnly);
+        }
+    }
+    set isDisabled(value) {
+        this.toggleEnableAnswer(value);
+    }
+    constructor(_formBuilder, _surveyLibService, _Store) {
+        this._formBuilder = _formBuilder;
+        this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
+        this.questionArr = this._Store.selectSignal(questionSelectors.pageQuestions);
+        this.isArabicLang = false;
+        // Define maximum size in bytes (e.g., 5MB = 5 * 1024 * 1024)
+        this.MAX_FILE_SIZE = 10 * 1024 * 1024;
+        this.rForm = this._formBuilder.group({
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            surveyAnswerId: new FormControl(null),
+            file: new FormControl(null),
+            fileName: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
+        });
+    }
+    ngOnInit() {
+        this.fCtrls.file.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
+            setTimeout(() => {
+                const formValue = this.rForm.value;
+                this._Store.dispatch(surveyActions.updateQuestionFileAnswer({
+                    questionId: formValue.id,
+                    fileByteArr: formValue.file,
+                    fileName: formValue.fileName,
+                    isValid: this.fCtrls.file.valid
+                }));
+            }, 100);
+        });
+        this._Store.select(questionSelectors.pageQuestions).pipe(map(arr => arr.find(x => x.questionId == this.fCtrls.id.value)))
+            .pipe(filter(x => x != null), pairwise()).subscribe(value => {
+            const oldValue = value[0];
+            const newValue = value[1];
+            //updated answer
+            if (oldValue?.answerText != newValue?.answerText && oldValue?.answerText == null) {
+                this.fCtrls.fileName.setValue(newValue?.answerText, { emitEvent: false });
+            }
+            //updated isDisabled
+            if (oldValue?.isDisabled != newValue?.isDisabled) {
+                this.fCtrls.isDisabled.setValue(newValue?.isDisabled);
+            }
+            //updated isShow
+            if (oldValue?.isShow != newValue?.isShow) {
+                this.fCtrls.isShow.setValue(newValue?.isShow);
+                if (newValue?.isShow == false) {
+                    this.fCtrls.file.setValue(null);
+                    this.fCtrls.fileName.setValue(null);
+                }
+            }
+        });
+    }
+    convertToFormControl(element) {
+        return element;
+    }
+    onFileSelect(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            const file = input.files[0];
+            if (file.size > this.MAX_FILE_SIZE) {
+                // Exceeds max length/size
+                alert('File size exceeds the 10MB limit.');
+                // Reset the form control value
+                this.fCtrls.file.setValue(null);
+                this.fCtrls.fileName.setValue(null);
+                input.value = ''; // Clear native input
+            }
+            else {
+                const reader = new FileReader();
+                // Read the file as a Data URL (Base64)
+                reader.readAsDataURL(file);
+                reader.onload = () => {
+                    const base64Result = reader.result;
+                    // Strip the Data URL prefix (e.g., "data:image/png;base64,") to leave raw Base64 data
+                    const base64Data = base64Result.split(',')[1];
+                    this.rForm.patchValue({
+                        file: base64Data,
+                        fileName: file.name
+                    });
+                };
+            }
+        }
+    }
+    toggleEnableAnswer(isReadOnly) {
+        if (isReadOnly == true) {
+            this.fCtrls.file.disable();
+        }
+        else {
+            this.fCtrls.file.enable();
+        }
+        this.fCtrls.file.updateValueAndValidity();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionFileTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }, { token: i3.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionFileTemplateComponent, selector: "lib-question-file-template", inputs: { isArabicLang: "isArabicLang", setQuestion: "setQuestion", isDisabled: "isDisabled" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.fileName.invalid , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <input class=\"form-control\"  [disabled]=\"isDisabled\"\r\n            type=\"file\" type=\"file\" (change)=\"onFileSelect($event)\">\r\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionFileTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-question-file-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.fileName.invalid , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <input class=\"form-control\"  [disabled]=\"isDisabled\"\r\n            type=\"file\" type=\"file\" (change)=\"onFileSelect($event)\">\r\n    </div>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { isArabicLang: [{
+                type: Input
+            }], setQuestion: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }] } });
+
 class FilterQuestionPipe {
     transform(arr, questionGroupId) {
         return arr.filter(x => x.questionGroupId == questionGroupId && x.parentQuestionId == null)
@@ -2395,11 +2572,11 @@ class SurveryLibComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i3.Store }, { token: i1.FormBuilder }, { token: CheckRuleExpsUsecase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", inputs: { isPre: "isPre", surveyLanguageId: "surveyLanguageId", surveyKey: "surveyKey", applicantKey: "applicantKey", isArabicLang: "isArabicLang" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of pageQuestionGroups$(); trackBy:questionGroupIdentify\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of (pageQuestions$() |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n              <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n              <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Cascade\" [applicantKey]=\"applicantKey\" [isPre]=\"isPre\"\r\n                [surveyLanguageId]=\"surveyLanguageId\" [pageId]=\"question.surveyPageId\"\r\n                [questionGroupId]=\"question.questionGroupId\" [surveyKey]=\"surveyKey\"\r\n                [surveyLanguageId]=\"surveyLanguageId\"></lib-question-cascade-template>\r\n\r\n              <lib-question-institutions-template #questionInstitutionsTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Institutions\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-institutions-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageId", "questionGroupId", "isPre", "surveyLanguageId", "surveyKey", "applicantKey", "setQuestion"] }, { kind: "component", type: QuestionFeedbackTemplateComponent, selector: "lib-question-feedback-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "component", type: QuestionInstitutionsTemplateComponent, selector: "lib-question-institutions-template", inputs: ["isArabicLang", "setQuestion"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", inputs: { isPre: "isPre", surveyLanguageId: "surveyLanguageId", surveyKey: "surveyKey", applicantKey: "applicantKey", isArabicLang: "isArabicLang" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of pageQuestionGroups$(); trackBy:questionGroupIdentify\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of (pageQuestions$() |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n              <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n              <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Cascade\" [applicantKey]=\"applicantKey\" [isPre]=\"isPre\"\r\n                [surveyLanguageId]=\"surveyLanguageId\" [pageId]=\"question.surveyPageId\"\r\n                [questionGroupId]=\"question.questionGroupId\" [surveyKey]=\"surveyKey\"\r\n                [surveyLanguageId]=\"surveyLanguageId\"></lib-question-cascade-template>\r\n\r\n              <lib-question-institutions-template #questionInstitutionsTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Institutions\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-institutions-template>\r\n\r\n                <lib-question-file-template #questionFileTemplate [setQuestion]=\"question\"\r\n                  *ngIf=\"question.questionType == questionTypeEnum.File\">\r\n                </lib-question-file-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageId", "questionGroupId", "isPre", "surveyLanguageId", "surveyKey", "applicantKey", "setQuestion"] }, { kind: "component", type: QuestionFeedbackTemplateComponent, selector: "lib-question-feedback-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "component", type: QuestionInstitutionsTemplateComponent, selector: "lib-question-institutions-template", inputs: ["isArabicLang", "setQuestion"] }, { kind: "component", type: QuestionFileTemplateComponent, selector: "lib-question-file-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of pageQuestionGroups$(); trackBy:questionGroupIdentify\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of (pageQuestions$() |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n              <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n              <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Cascade\" [applicantKey]=\"applicantKey\" [isPre]=\"isPre\"\r\n                [surveyLanguageId]=\"surveyLanguageId\" [pageId]=\"question.surveyPageId\"\r\n                [questionGroupId]=\"question.questionGroupId\" [surveyKey]=\"surveyKey\"\r\n                [surveyLanguageId]=\"surveyLanguageId\"></lib-question-cascade-template>\r\n\r\n              <lib-question-institutions-template #questionInstitutionsTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Institutions\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-institutions-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"] }]
+            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of pageQuestionGroups$(); trackBy:questionGroupIdentify\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\" [innerHTML]=\"item.questionGroupName\">\r\n              </h2>\r\n              <span class=\"group-sub-title \" [innerHTML]=\"item.questionGroupDescription\">\r\n              </span>\r\n            </div>\r\n            <ng-container\r\n              *ngFor=\"let question of (pageQuestions$() |filterQuestion : item.questionGroupId); trackBy:questionIdentify\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.TextInput\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n              <lib-question-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n              <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Cascade\" [applicantKey]=\"applicantKey\" [isPre]=\"isPre\"\r\n                [surveyLanguageId]=\"surveyLanguageId\" [pageId]=\"question.surveyPageId\"\r\n                [questionGroupId]=\"question.questionGroupId\" [surveyKey]=\"surveyKey\"\r\n                [surveyLanguageId]=\"surveyLanguageId\"></lib-question-cascade-template>\r\n\r\n              <lib-question-institutions-template #questionInstitutionsTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.Institutions\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-institutions-template>\r\n\r\n                <lib-question-file-template #questionFileTemplate [setQuestion]=\"question\"\r\n                  *ngIf=\"question.questionType == questionTypeEnum.File\">\r\n                </lib-question-file-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"] }]
         }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i3.Store }, { type: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
                 type: Input
             }], surveyLanguageId: [{
@@ -2512,6 +2689,29 @@ const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSu
     return {
         ...state
     };
+}), on(surveyActions.updateQuestionFileAnswer, (state, props) => {
+    const question = selectAll(state.questionArr).find(x => x.questionId == props.questionId);
+    if (question) {
+        var updateModel;
+        if (question.questionType == QuestionTypeEnum.File) {
+            updateModel = {
+                id: props.questionId,
+                changes: {
+                    answerId: question.questionAllInfo.surveyAnswers[0].answerId,
+                    answerText: props.fileName,
+                    answerFile: props.fileByteArr,
+                    isValid: props.isValid
+                }
+            };
+        }
+        return {
+            ...state,
+            questionArr: questionAdapter.updateOne(updateModel, state.questionArr)
+        };
+    }
+    return {
+        ...state
+    };
 }), on(surveyActions.updateInstitutionQuestionAnswer, (state, props) => {
     const question = selectAll(state.questionArr).find(x => x.questionId == props.questionId);
     if (question) {
@@ -2808,7 +3008,8 @@ class SurveryLibModule {
             FindQuestionPipe,
             QuestionFeedbackTemplateComponent,
             MaskedForMaxLengthDirective,
-            QuestionInstitutionsTemplateComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule, i3.StoreFeatureModule, i1$2.EffectsFeatureModule, RatingModule, PaginationModule], exports: [SurveryLibComponent,
+            QuestionInstitutionsTemplateComponent,
+            QuestionFileTemplateComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule, i3.StoreFeatureModule, i1$2.EffectsFeatureModule, RatingModule, PaginationModule], exports: [SurveryLibComponent,
             StoreModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule,
             StoreModule.forFeature('survey-lib', surveyReducer),
@@ -2835,7 +3036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         FindQuestionPipe,
                         QuestionFeedbackTemplateComponent,
                         MaskedForMaxLengthDirective,
-                        QuestionInstitutionsTemplateComponent
+                        QuestionInstitutionsTemplateComponent,
+                        QuestionFileTemplateComponent
                     ],
                     imports: [
                         CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule,