survery-lib 2.1.47 → 2.1.49

package/fesm2022/survery-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, HostListener, Pipe, Component, Input, EventEmitter, Output, InjectionToken, Inject, computed, NgModule } from '@angular/core';
+import { Injectable, Directive, HostListener, Pipe, Component, Input, EventEmitter, Output, InjectionToken, Inject, computed, ViewChild, NgModule } from '@angular/core';
 import { v4 } from 'uuid';
 import { Subject, of, debounceTime, distinctUntilChanged, map, filter, pairwise, take, withLatestFrom, switchMap } from 'rxjs';
 import * as i1 from '@angular/forms';
@@ -2294,34 +2294,34 @@ class QuestionFileTemplateComponent {
                 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);
+                const answer = value.questionAllInfo.surveyAnswers[0];
+                this.rForm.patchValue({
+                    surveyAnswerId: answer.answerId,
+                    isMultiple: answer.isMultiple,
+                    acceptedTypes: answer.acceptedTypes
+                });
             }
             if (value.isRequired == true) {
-                this.fCtrls.fileName.addValidators([Validators.required]);
-                this.fCtrls.fileName.updateValueAndValidity();
+                this.fCtrls.fileArr.addValidators([Validators.required]);
+                this.fCtrls.fileArr.updateValueAndValidity();
             }
             var question = this.questionArr().find(x => x.questionId == value.questionId);
             if (question?.answerText) {
                 this.rForm.patchValue({
-                    fileName: question.answerText,
+                    fileArr: question.answerFile.map(x => ({ file: x.file, name: x.name, byteArr: null })),
                     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.MAX_FILE_SIZE = 10 * 1024 * 1024;
         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),
@@ -2329,21 +2329,21 @@ class QuestionFileTemplateComponent {
             typeId: new FormControl(null),
             description: new FormControl(null),
             surveyAnswerId: new FormControl(null),
-            file: new FormControl(null),
-            fileName: new FormControl(null),
+            fileArr: new FormControl(null),
             isDisabled: new FormControl(false),
             isShow: new FormControl(true),
+            isMultiple: new FormControl(false),
+            acceptedTypes: new FormControl(''),
         });
     }
     ngOnInit() {
-        this.fCtrls.file.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
+        this.fCtrls.fileArr.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
+                    fileArr: formValue.fileArr,
+                    isValid: this.fCtrls.fileArr.valid
                 }));
             }, 100);
         });
@@ -2352,8 +2352,8 @@ class QuestionFileTemplateComponent {
             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 });
+            if (JSON.stringify(oldValue?.answerFile) != JSON.stringify(newValue?.answerFile) && oldValue?.answerFile == null) {
+                this.fCtrls.fileArr.setValue(newValue?.answerFile.map(x => ({ file: x.file, name: x.name, byteArr: null })), { emitEvent: false });
             }
             //updated isDisabled
             if (oldValue?.isDisabled != newValue?.isDisabled) {
@@ -2363,8 +2363,7 @@ class QuestionFileTemplateComponent {
             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);
+                    this.fCtrls.fileArr.setValue(null);
                 }
             }
         });
@@ -2375,52 +2374,63 @@ class QuestionFileTemplateComponent {
     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
-                    });
-                };
+            this.fCtrls.fileArr.setValue([]);
+            for (let index = 0; index < input.files.length; index++) {
+                const file = input.files[index];
+                if (file.size > this.MAX_FILE_SIZE) {
+                    // Exceeds max length/size
+                    alert('File size exceeds the 10MB limit.');
+                }
+                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];
+                        let fileArr = [...this.fCtrls.fileArr.value || []];
+                        if (this.fCtrls.isMultiple.value == false) {
+                            fileArr = [];
+                        }
+                        fileArr.push({ file: base64Result, name: file.name, byteArr: base64Data, fileRaw: file });
+                        this.fCtrls.fileArr.setValue(fileArr);
+                        this.fileInputRef.nativeElement.value = '';
+                    };
+                }
             }
         }
     }
-    toggleEnableAnswer(isReadOnly) {
-        if (isReadOnly == true) {
-            this.fCtrls.file.disable();
-        }
-        else {
-            this.fCtrls.file.enable();
-        }
-        this.fCtrls.file.updateValueAndValidity();
+    openFileInNewTab(item) {
+        if (!item?.file)
+            return;
+        console.log('Opening file in new tab:', item);
+        const link = document.createElement('a');
+        link.href = item.file;
+        link.download = item.name || 'downloaded-file';
+        // Append to body, trigger click, and remove
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    onDeleteFile(index) {
+        const fileArr = this.fCtrls.fileArr.value || [];
+        var newFileArr = fileArr.filter((_, i) => i !== index);
+        this.fCtrls.fileArr.setValue(newFileArr);
     }
     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"] }] }); }
+    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" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.fileArr.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 #fileInput class=\"form-control\" [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"fCtrls.isMultiple.value\"\r\n            type=\"file\" (change)=\"onFileSelect($event)\">\r\n        <div class=\"d-flex flex-row gap-2 mt-2\">\r\n            <div *ngFor=\"let item of fCtrls.fileArr.value; let i = index\" class=\"me-4\">\r\n                <a href=\"javascript:void(0)\" (click)=\"openFileInNewTab(item)\">{{item.name}}</a>\r\n                <a href=\"javascript:void(0)\" class=\"text-danger ms-2\"  (click)=\"onDeleteFile(i)\">\r\n                  <i class=\"fa-solid fa-xmark\"></i>\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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>" }]
+            args: [{ selector: 'lib-question-file-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.fileArr.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 #fileInput class=\"form-control\" [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"fCtrls.isMultiple.value\"\r\n            type=\"file\" (change)=\"onFileSelect($event)\">\r\n        <div class=\"d-flex flex-row gap-2 mt-2\">\r\n            <div *ngFor=\"let item of fCtrls.fileArr.value; let i = index\" class=\"me-4\">\r\n                <a href=\"javascript:void(0)\" (click)=\"openFileInNewTab(item)\">{{item.name}}</a>\r\n                <a href=\"javascript:void(0)\" class=\"text-danger ms-2\"  (click)=\"onDeleteFile(i)\">\r\n                  <i class=\"fa-solid fa-xmark\"></i>\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { isArabicLang: [{
                 type: Input
             }], setQuestion: [{
                 type: Input
-            }], isDisabled: [{
-                type: Input
+            }], fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
             }] } });
 
 class FilterQuestionPipe {
@@ -2572,7 +2582,7 @@ 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\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" }] }); }
+    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"] }, { 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,
@@ -2698,8 +2708,8 @@ const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSu
                 id: props.questionId,
                 changes: {
                     answerId: question.questionAllInfo.surveyAnswers[0].answerId,
-                    answerText: props.fileName,
-                    answerFile: props.fileByteArr,
+                    answerText: null,
+                    answerFile: props.fileArr.map(x => ({ file: x.byteArr, name: x.name })),
                     isValid: props.isValid
                 }
             };