survery-lib 2.1.6 → 2.1.8

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, NgModule } from '@angular/core';
+import { Injectable, Directive, HostListener, Pipe, Component, Input, EventEmitter, Output, InjectionToken, Inject, computed, 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';
@@ -18,6 +18,7 @@ import * as i5$1 from 'ngx-bootstrap/rating';
 import { RatingModule } from 'ngx-bootstrap/rating';
 import * as i6 from 'ngx-bootstrap/pagination';
 import { PaginationModule } from 'ngx-bootstrap/pagination';
+import { SurveyLanguageEnum } from 'projects/survery-lib/src/shared/enums/survey-language.enum';
 import * as i1$2 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 
@@ -32,6 +33,7 @@ var QuestionTypeEnum;
     QuestionTypeEnum[QuestionTypeEnum["DropDownMulti"] = 7] = "DropDownMulti";
     QuestionTypeEnum[QuestionTypeEnum["Cascade"] = 8] = "Cascade";
     QuestionTypeEnum[QuestionTypeEnum["FeedBack"] = 9] = "FeedBack";
+    QuestionTypeEnum[QuestionTypeEnum["Institutions"] = 10] = "Institutions";
 })(QuestionTypeEnum || (QuestionTypeEnum = {}));
 
 var InputTypeEnum;
@@ -83,13 +85,15 @@ const isLastPage = createSelector(showedSurveyPages, selectSurveyData$2, (pageAr
     return pageArr.findIndex(x => x == state.selectedPageId) == (pageArr.length - 1);
 });
 const ruleArr = createSelector(selectSurveyData$2, (state) => ruleAdapter.getSelectors().selectAll(state.ruleArr));
+const institutionArr = createSelector(selectSurveyData$2, (state) => state.InstitutionArr);
 const surveySelectors = {
     selectedPageId,
     selectedPageIndex,
     showedSurveyPages,
     isFirstPage,
     isLastPage,
-    ruleArr
+    ruleArr,
+    institutionArr
 };
 
 function selectQuestionGroupId(a) {
@@ -110,7 +114,7 @@ const { selectAll: selectAll$1, selectIds: selectIds$1 } = questionAdapter.getSe
 const selectSurveyData = createFeatureSelector('survey-lib');
 const allQuestions = createSelector(selectSurveyData, (state) => selectAll$1(state.questionArr));
 const pageQuestions = createSelector(selectSurveyData, (state) => selectAll$1(state.questionArr).filter(x => x.surveyPageId == state.selectedPageId));
-const questionAnswers = createSelector(selectSurveyData, (state) => selectAll$1(state.questionArr).filter(x => x.isMatrixGroup != true).map(x => {
+const questionAnswers = createSelector(selectSurveyData, (state) => selectAll$1(state.questionArr).filter(x => x.isQuestionGroup != true).map(x => {
     return {
         SurveyPageIndex: x.surveyPageId,
         QuestionId: x.questionId,
@@ -129,18 +133,26 @@ 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 updateInstitutionQuestionAnswer = createAction('[Survey library] Update Institution Question Answer', props());
 const updateQuestionShow = createAction('[Survey library] Update Question Show', props());
 const updateQuestionDisable = createAction('[Survey library] Update Question Disable', props());
+const updateQuestionRequired = createAction('[Survey library] Update Question Required', props());
 const removeQuestion = createAction('[Survey library] Remove Question', props());
 const updatePageId = createAction('[Survey library] Update Page Id', props());
+const loadInstitutionArr = createAction('[Survey library] Load Institution Arr');
+const loadInstitutionArrSuccess = createAction('[Survey library] Load Institution Arr Success', props());
 const surveyActions = {
     loadSurvey,
     addQuestion,
     updateQuestionAnswer,
+    updateInstitutionQuestionAnswer,
     updateQuestionShow,
     updateQuestionDisable,
+    updateQuestionRequired,
     removeQuestion,
     updatePageId,
+    loadInstitutionArr,
+    loadInstitutionArrSuccess
 };
 
 var EvaluationTypeEnum;
@@ -219,7 +231,7 @@ class SurveyLibService {
             questionId: question.questionId,
             questionType: question.questionTypeId,
             inputTypeId: question.surveyAnswers[0].inputTypeId,
-            isMatrixGroup: question.questionTypeId == QuestionTypeEnum.Matrix,
+            isQuestionGroup: question.questionTypeId == QuestionTypeEnum.Matrix || question.questionTypeId == QuestionTypeEnum.Institutions,
             answerId: null,
             answerIdArr: null,
             answerText: null,
@@ -231,7 +243,8 @@ class SurveyLibService {
             isShow_default: question.isVisable,
             questionGroupId: questionGroupId,
             parentQuestionId: null,
-            questionAllInfo: question
+            maxLevelValue: null,
+            questionAllInfo: question,
         };
         if (question.questionTypeId == QuestionTypeEnum.FeedBack) {
             if (question.surveyAnswers[0].evaluationTypeId == EvaluationTypeEnum.Stars) {
@@ -249,7 +262,7 @@ class SurveyLibService {
                     questionId: subQuestion.questionId,
                     questionType: question.questionTypeId,
                     inputTypeId: question.surveyAnswers[0].inputTypeId,
-                    isMatrixGroup: false,
+                    isQuestionGroup: false,
                     answerId: null,
                     answerIdArr: null,
                     answerText: null,
@@ -261,7 +274,33 @@ class SurveyLibService {
                     isShow_default: question.isVisable,
                     parentQuestionId: question.questionId,
                     questionGroupId: questionGroupId,
-                    questionAllInfo: question
+                    questionAllInfo: question,
+                    maxLevelValue: null
+                });
+            });
+        }
+        if (question.questionTypeId == QuestionTypeEnum.Institutions) {
+            questionNgrxModel.maxLevelValue = question.maxLevelValue;
+            question.surveySubQuestionLevels.forEach(subQuestion => {
+                questionArr.push({
+                    surveyPageId: pageIndex,
+                    questionId: subQuestion.questionId,
+                    questionType: question.questionTypeId,
+                    inputTypeId: question.surveyAnswers[0].inputTypeId,
+                    isQuestionGroup: false,
+                    answerId: null,
+                    answerIdArr: null,
+                    answerText: null,
+                    isRequired: subQuestion.level == 1 ? question.isRequired : false,
+                    isValid: null,
+                    isDisabled: question.isReadOnly,
+                    isShow: question.isVisable,
+                    isDisabled_default: question.isReadOnly,
+                    isShow_default: question.isVisable,
+                    parentQuestionId: question.questionId,
+                    questionGroupId: questionGroupId,
+                    questionAllInfo: question,
+                    maxLevelValue: null
                 });
             });
         }
@@ -1429,7 +1468,26 @@ class ApiService {
     }
     getNextQuestion(filter) {
         var queryString = $.param(filter);
-        return this._HttpClient.get(`${this.url}/GetNextQuestion?${queryString}`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
+        return this._HttpClient.get(`${this.url}/Survey/GetNextQuestion?${queryString}`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
+    }
+    getAllInstitutions() {
+        return this._HttpClient.get(`${this.url}/Institutions/GetAllInstitutions`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
+    }
+    getAllBranches(filter) {
+        var queryString = $.param(filter);
+        return this._HttpClient.get(`${this.url}/Institutions/GetBranches?${queryString}`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
+    }
+    getAllCollages(filter) {
+        var queryString = $.param(filter);
+        return this._HttpClient.get(`${this.url}/Institutions/GetCollages?${queryString}`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
+    }
+    getAllSections(filter) {
+        var queryString = $.param(filter);
+        return this._HttpClient.get(`${this.url}/Institutions/GetSections?${queryString}`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
+    }
+    getAllPrograms(filter) {
+        var queryString = $.param(filter);
+        return this._HttpClient.get(`${this.url}/Institutions/Programs?${queryString}`, { headers: new HttpHeaders({ 'disable-error-alert': 'true' }) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiService, deps: [{ token: i1$1.HttpClient }, { token: LibConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiService, providedIn: 'root' }); }
@@ -1474,7 +1532,14 @@ class QuestionCascadeTemplateComponent {
     set setQuestion(value) {
         if (this.surveyQuestionArr?.length == 0) {
             this.setQuestions(value.questionAllInfo);
-            console.log(value.questionAllInfo);
+            var childQuestion1 = this.pageQuestions$().find(x => x.parentQuestionId == value.questionId);
+            if (childQuestion1) {
+                this.setQuestions(childQuestion1.questionAllInfo);
+                var childQuestion2 = this.pageQuestions$().find(x => x.parentQuestionId == childQuestion1.questionId);
+                if (childQuestion2) {
+                    this.setQuestions(childQuestion2.questionAllInfo);
+                }
+            }
         }
     }
     constructor(_formBuilder, _surveyLibService, _ApiService, _Store) {
@@ -1527,7 +1592,7 @@ class QuestionCascadeTemplateComponent {
                             questionId: res.questionId,
                             questionType: res.questionTypeId,
                             inputTypeId: res.surveyAnswers[0].inputTypeId,
-                            isMatrixGroup: false,
+                            isQuestionGroup: false,
                             answerId: null,
                             answerIdArr: null,
                             answerText: null,
@@ -1705,6 +1770,244 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class QuestionInstitutionsTemplateComponent {
+    get fCtrls() {
+        return this.rForm.controls;
+    }
+    get questionTypeEnum() {
+        return QuestionTypeEnum;
+    }
+    get questionFormArray() {
+        return this.fCtrls.questionArr;
+    }
+    set setQuestion(value) {
+        if (this.institutionsQuestion == null) {
+            this.institutionsQuestion = value.questionAllInfo;
+            this.rForm.patchValue({
+                id: value.questionId,
+                title: value.questionAllInfo.questionTitle,
+                maxLevelValue: value.questionAllInfo.maxLevelValue,
+                isRequired: value.isRequired,
+                isDisabled: value.isDisabled,
+                isShow: value.isShow
+            });
+            value.questionAllInfo.surveySubQuestionLevels.forEach(surveySubQuestionLevel => {
+                var question = this.pageQuestions$().find(x => x.questionId == value.questionId);
+                this.setQuestionFormGroup(surveySubQuestionLevel, question?.isRequired, question?.answerId);
+            });
+        }
+    }
+    constructor(_Store, _formBuilder, _ApiService) {
+        this._Store = _Store;
+        this._formBuilder = _formBuilder;
+        this._ApiService = _ApiService;
+        this.institutionsQuestion = null;
+        this.pageQuestions$ = this._Store.selectSignal(questionSelectors.pageQuestions);
+        this.institutionsArr$ = this._Store.selectSignal(surveySelectors.institutionArr);
+        this.institutionsQuestionArr = computed(() => {
+            return this.institutionsArr$().map(x => {
+                return {
+                    id: x.submissionId,
+                    name: this.surveyLanguageId == SurveyLanguageEnum.Arabic ? x.institutionNameArabic : x.institutionNameEnglish
+                };
+            });
+        });
+        this.pageId = null;
+        this.questionGroupId = null;
+        this.isPre = false;
+        this.surveyLanguageId = null;
+        this.applicantKey = null;
+        this.rForm = this._formBuilder.group({
+            id: new FormControl(null),
+            title: new FormControl(null),
+            maxLevelValue: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(false),
+            isRequired: new FormControl(null),
+            institutionId: new FormControl(null),
+            branchId: new FormControl(null),
+            collageId: new FormControl(null),
+            sectionId: new FormControl(null),
+            questionArr: this._formBuilder.array([])
+        });
+    }
+    ngOnInit() {
+        this._Store.dispatch(surveyActions.loadInstitutionArr());
+    }
+    onUpdateAnswer(model, groupIndex) {
+        var group = this.fCtrls.questionArr.at(groupIndex);
+        group.patchValue({
+            answerId: model.id,
+            answerValue: model.name
+        });
+        this._Store.dispatch(surveyActions.updateInstitutionQuestionAnswer({
+            questionId: group.value.id,
+            answerId: group.value.answerId,
+            answer: group.value.answers,
+            isValid: group.controls.answerId.valid,
+            levelAnswerId: group.value.levelAnswerId,
+        }));
+    }
+    identify(index, item) {
+        return item.value.id;
+    }
+    setQuestionFormGroup(value, isRquired, answerId) {
+        var group = this._formBuilder.group({
+            id: new FormControl(value.questionId),
+            typeId: new FormControl(value.questionTypeId),
+            name: new FormControl(value.questionName),
+            description: new FormControl(value.questionDescription),
+            title: new FormControl(value.questionTitle),
+            level: new FormControl(value.level),
+            levelAnswerId: new FormControl(value.levelAnswer.answerId),
+            answerId: new FormControl(null),
+            answerValue: new FormControl(null),
+            answers: new FormControl([]),
+        });
+        if (isRquired == true) {
+            group.controls.answerId.addValidators([Validators.required]);
+            group.controls.answerId.updateValueAndValidity();
+            group.controls.answerValue.addValidators([Validators.required]);
+            group.controls.answerValue.updateValueAndValidity();
+        }
+        group.controls.answerId.valueChanges.pipe(distinctUntilChanged()).subscribe(answerId => {
+            if (answerId) {
+                if (value.level == 1) {
+                    this.rForm.patchValue({
+                        institutionId: answerId,
+                        branchId: null,
+                        collageId: null,
+                        sectionId: null
+                    }, { emitEvent: false });
+                }
+                else if (value.level == 2) {
+                    this.rForm.patchValue({
+                        branchId: answerId,
+                        collageId: null,
+                        sectionId: null
+                    }, { emitEvent: false });
+                }
+                else if (value.level == 3) {
+                    this.rForm.patchValue({
+                        collageId: answerId,
+                        sectionId: null
+                    }, { emitEvent: false });
+                }
+                else if (value.level == 4) {
+                    this.rForm.patchValue({
+                        sectionId: answerId
+                    }, { emitEvent: false });
+                }
+                const level = group.value.level;
+                this.resetAnswersOfFormGroupinHigherLevel(level);
+                var nextGroupIndex = this.fCtrls.questionArr.controls.findIndex(x => x.value.level == level + 1);
+                if (nextGroupIndex) {
+                    this.fillQuestionAnswers(nextGroupIndex);
+                }
+            }
+        });
+        group.controls.answers.valueChanges.pipe(distinctUntilChanged()).subscribe(value => {
+            const groupIndex = this.fCtrls.questionArr.controls.findIndex(x => x.value.level == group.value.level);
+            var questionGroup = this.fCtrls.questionArr.at(groupIndex);
+            if (questionGroup) {
+                if (value.length > 0) {
+                    if (this.fCtrls.isRequired.value == true) {
+                        questionGroup.controls.answerId.addValidators([Validators.required]);
+                        questionGroup.controls.answerValue.addValidators([Validators.required]);
+                        this._Store.dispatch(surveyActions.updateQuestionRequired({ questionId: group.value.id, isRequired: true }));
+                    }
+                }
+                else {
+                    questionGroup.controls.answerId.clearValidators();
+                    questionGroup.controls.answerValue.clearValidators();
+                    this._Store.dispatch(surveyActions.updateQuestionRequired({ questionId: group.value.id, isRequired: false }));
+                }
+                questionGroup.controls.answerId.updateValueAndValidity();
+                questionGroup.controls.answerValue.updateValueAndValidity();
+            }
+        });
+        if (answerId) {
+            group.controls.answerId.setValue(answerId);
+        }
+        this.fCtrls.questionArr.push(group);
+    }
+    fillQuestionAnswers(nextGroupIndex) {
+        const formValue = this.rForm.value;
+        var group = this.fCtrls.questionArr.at(nextGroupIndex);
+        if (group) {
+            if (group.value.level == 2) {
+                this._ApiService.getAllBranches({ submissionId: formValue.institutionId }).pipe(take(1)).subscribe(res => {
+                    group.controls.answers.setValue(res.responseDetails.map(x => {
+                        return {
+                            id: x.branchSubmissionId,
+                            name: this.surveyLanguageId == SurveyLanguageEnum.Arabic ? x.branchNameInArabic : x.branchNameInEnglish
+                        };
+                    }));
+                });
+            }
+            else if (group.value.level == 3) {
+                this._ApiService.getAllCollages({ submissionId: formValue.branchId, branchSubmissionId: formValue.branchId }).pipe(take(1)).subscribe(res => {
+                    group.controls.answers.setValue(res.responseDetails.map(x => {
+                        return {
+                            id: x.collageSubmissionId,
+                            name: this.surveyLanguageId == SurveyLanguageEnum.Arabic ? x.collageNameInArabic : x.collageNameInEnglish
+                        };
+                    }));
+                });
+            }
+            else if (group.value.level == 4) {
+                this._ApiService.getAllSections({ submissionId: formValue.collageId, collageSubmissionId: formValue.collageId }).pipe(take(1)).subscribe(res => {
+                    group.controls.answers.setValue(res.responseDetails.map(x => {
+                        return {
+                            id: x.sectionSubmissionId,
+                            name: this.surveyLanguageId == SurveyLanguageEnum.Arabic ? x.sectionNameInArabic : x.sectionNameInEnglish
+                        };
+                    }));
+                });
+            }
+            else if (group.value.level == 5) {
+                this._ApiService.getAllPrograms({ submissionId: formValue.sectionId, sectionGeneratedKey: formValue.sectionId }).pipe(take(1)).subscribe(res => {
+                    group.controls.answers.setValue(res.responseDetails.map(x => {
+                        return {
+                            id: x.generatedId,
+                            name: this.surveyLanguageId == SurveyLanguageEnum.Arabic ? x.programNameArabic : x.programNameEnglish
+                        };
+                    }));
+                });
+            }
+        }
+    }
+    resetAnswersOfFormGroupinHigherLevel(level) {
+        this.fCtrls.questionArr.controls.forEach((group) => {
+            if (group.value.level > level) {
+                group.patchValue({
+                    answerId: null,
+                    answerValue: null,
+                    answers: []
+                }, { emitEvent: false });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionInstitutionsTemplateComponent, deps: [{ token: i3.Store }, { token: i1.FormBuilder }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionInstitutionsTemplateComponent, selector: "lib-question-institutions-template", inputs: { pageId: "pageId", questionGroupId: "questionGroupId", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, ngImport: i0, template: "<div class=\"quastion\">\n  <h3 class=\"quastion-title mb-2\">\n    <span [innerHTML]=\"fCtrls.title.value\"></span>\n  </h3>\n  <ng-container *ngFor=\"let item of questionFormArray.controls; trackBy:identify ; let i = index\">\n    <div class=\"quastion\" [attr.id]=\"'question_'+item.value.id\"\n      *ngIf=\"item.value.level == 1 || ( item.value.level > 1 && item.value.answers.length > 0 )\"\n      [ngClass]=\"{'invalid-question': item.controls.answerId.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n      <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"item.value.title\"></span>\n        <span style=\"color: red;\" *ngIf=\"fCtrls.isRequired\">*</span>\n      </h3>\n      <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"item.value.level ==1 ? institutionsQuestionArr() : item.value.answers\" bindValue=\"id\" bindLabel=\"name\" class=\"form-control\"\n          [formControl]=\"item.controls.answerId\" [virtualScroll]=\"true\" [disabled]=\"fCtrls.isDisabled.value\" (change)=\"onUpdateAnswer($event,i)\"\n          [multiple]=\"false\">\n        </ng-select>\n      </div>\n    </div>\n\n  </ng-container>\n</div>\n\n", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionInstitutionsTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-question-institutions-template', template: "<div class=\"quastion\">\n  <h3 class=\"quastion-title mb-2\">\n    <span [innerHTML]=\"fCtrls.title.value\"></span>\n  </h3>\n  <ng-container *ngFor=\"let item of questionFormArray.controls; trackBy:identify ; let i = index\">\n    <div class=\"quastion\" [attr.id]=\"'question_'+item.value.id\"\n      *ngIf=\"item.value.level == 1 || ( item.value.level > 1 && item.value.answers.length > 0 )\"\n      [ngClass]=\"{'invalid-question': item.controls.answerId.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n      <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"item.value.title\"></span>\n        <span style=\"color: red;\" *ngIf=\"fCtrls.isRequired\">*</span>\n      </h3>\n      <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"item.value.level ==1 ? institutionsQuestionArr() : item.value.answers\" bindValue=\"id\" bindLabel=\"name\" class=\"form-control\"\n          [formControl]=\"item.controls.answerId\" [virtualScroll]=\"true\" [disabled]=\"fCtrls.isDisabled.value\" (change)=\"onUpdateAnswer($event,i)\"\n          [multiple]=\"false\">\n        </ng-select>\n      </div>\n    </div>\n\n  </ng-container>\n</div>\n\n" }]
+        }], ctorParameters: function () { return [{ type: i3.Store }, { type: i1.FormBuilder }, { type: ApiService }]; }, propDecorators: { pageId: [{
+                type: Input
+            }], questionGroupId: [{
+                type: Input
+            }], isPre: [{
+                type: Input
+            }], surveyLanguageId: [{
+                type: Input
+            }], applicantKey: [{
+                type: Input
+            }], setQuestion: [{
+                type: Input
+            }] } });
+
 class FilterQuestionPipe {
     transform(arr, questionGroupId) {
         return arr.filter(x => x.questionGroupId == questionGroupId && x.parentQuestionId == null);
@@ -1813,7 +2116,7 @@ class SurveryLibComponent {
         var invalidRecords = [];
         var arr = questionArr.filter(x => x.isDisabled == false && x.isShow == true);
         arr.map(x => {
-            if (x.isRequired == true && x.isValid != true && x.isMatrixGroup != true) {
+            if (x.isRequired == true && x.isValid != true && x.isQuestionGroup != true) {
                 invalidRecords.push(x);
             }
             else {
@@ -1851,11 +2154,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", 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\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-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", "applicantKey", "setQuestion"] }, { kind: "component", type: QuestionFeedbackTemplateComponent, selector: "lib-question-feedback-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", 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\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n\r\n                <lib-question-institutions-template  #questionInstitutionsTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Institutions\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\" ></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", "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: ["pageId", "questionGroupId", "isPre", "surveyLanguageId", "applicantKey", "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,
-            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\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-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\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n\r\n                <lib-question-institutions-template  #questionInstitutionsTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Institutions\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\" ></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"] }]
         }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i3.Store }, { type: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
                 type: Input
             }], surveyLanguageId: [{
@@ -1909,7 +2212,8 @@ const initialSurveyState = {
     selectedPageId: null,
     questionGroupArr: questionGroupAdapter.getInitialState(),
     questionArr: questionAdapter.getInitialState(),
-    ruleArr: ruleAdapter.getInitialState()
+    ruleArr: ruleAdapter.getInitialState(),
+    InstitutionArr: []
 };
 const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSurvey, (state, props) => {
     return {
@@ -1964,6 +2268,29 @@ const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSu
     return {
         ...state
     };
+}), on(surveyActions.updateInstitutionQuestionAnswer, (state, props) => {
+    const question = selectAll(state.questionArr).find(x => x.questionId == props.questionId);
+    if (question) {
+        var updateModel;
+        if (question.questionType == QuestionTypeEnum.Institutions) {
+            updateModel = {
+                id: props.questionId,
+                changes: {
+                    answerId: props.answerId,
+                    answerText: props.answer,
+                    levelAnswerId: props.levelAnswerId,
+                    isValid: props.isValid
+                }
+            };
+            return {
+                ...state,
+                questionArr: questionAdapter.updateOne(updateModel, state.questionArr)
+            };
+        }
+    }
+    return {
+        ...state
+    };
 }), on(surveyActions.updateQuestionShow, (state, props) => {
     return {
         ...state,
@@ -1985,6 +2312,17 @@ const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSu
             }
         }, state.questionArr)
     };
+}), on(surveyActions.updateQuestionRequired, (state, props) => {
+    const question = selectAll(state.questionArr).find(x => x.questionId == props.questionId);
+    return {
+        ...state,
+        questionArr: questionAdapter.updateOne({
+            id: props.questionId,
+            changes: {
+                isRequired: props.isRequired
+            }
+        }, state.questionArr)
+    };
 }), on(surveyActions.removeQuestion, (state, props) => {
     return {
         ...state,
@@ -1995,6 +2333,11 @@ const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSu
         ...state,
         selectedPageId: props.pageId
     };
+}), on(surveyActions.loadInstitutionArrSuccess, (state, props) => {
+    return {
+        ...state,
+        InstitutionArr: props.institutionArr
+    };
 }));
 function surveyReducer(state, action) {
     return _surveyReducer(state, action);
@@ -2010,10 +2353,11 @@ var LogicActionEnum;
 })(LogicActionEnum || (LogicActionEnum = {}));
 
 class SurveyEffects {
-    constructor(_actions, _store, _checkRuleExpsUsecase) {
+    constructor(_actions, _store, _checkRuleExpsUsecase, _apiService) {
         this._actions = _actions;
         this._store = _store;
         this._checkRuleExpsUsecase = _checkRuleExpsUsecase;
+        this._apiService = _apiService;
         this.updateQuestionAnswer$ = createEffect(() => this._actions.pipe(ofType(surveyActions.updateQuestionAnswer), withLatestFrom(this._store.select(surveySelectors.ruleArr), this._store.select(questionSelectors.allQuestions)), switchMap(([action, ruleArr, questionArr]) => {
             var formatedRuleArr = [];
             ruleArr.forEach(rule => {
@@ -2062,7 +2406,7 @@ class SurveyEffects {
                             }
                             const question = questionArr.find(x => x.questionId == resultQuestion.questionId);
                             //update matrix sub questions
-                            if (question.questionType == QuestionTypeEnum.Matrix && question.isMatrixGroup == true) {
+                            if (question.questionType == QuestionTypeEnum.Matrix && question.isQuestionGroup == true) {
                                 var subQuestions = questionArr.filter(x => x.parentQuestionId == question.questionId);
                                 subQuestions.forEach(subQuestion => {
                                     if (rule.logicActionId == LogicActionEnum.Show) {
@@ -2110,13 +2454,18 @@ class SurveyEffects {
             });
             return of([]);
         })), { dispatch: false });
+        this.loadInstitutionArr$ = createEffect(() => this._actions.pipe(ofType(surveyActions.loadInstitutionArr), withLatestFrom(this._store.select(surveySelectors.institutionArr)), filter(([action, institutionArr]) => institutionArr.length == 0), switchMap(() => {
+            return this._apiService.getAllInstitutions().pipe(map((res) => {
+                return surveyActions.loadInstitutionArrSuccess({ institutionArr: res.responseDetails });
+            }));
+        })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyEffects, deps: [{ token: i1$2.Actions }, { token: i3.Store }, { token: CheckRuleExpsUsecase }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyEffects, deps: [{ token: i1$2.Actions }, { token: i3.Store }, { token: CheckRuleExpsUsecase }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: i3.Store }, { type: CheckRuleExpsUsecase }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: i3.Store }, { type: CheckRuleExpsUsecase }, { type: ApiService }]; } });
 
 class SurveryLibModule {
     static forRoot(config) {
@@ -2149,7 +2498,8 @@ class SurveryLibModule {
             MaskedForMinMaxDirective,
             FindQuestionPipe,
             QuestionFeedbackTemplateComponent,
-            MaskedForMaxLengthDirective], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule, i3.StoreFeatureModule, i1$2.EffectsFeatureModule, RatingModule, PaginationModule], exports: [SurveryLibComponent,
+            MaskedForMaxLengthDirective,
+            QuestionInstitutionsTemplateComponent], 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),
@@ -2175,7 +2525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MaskedForMinMaxDirective,
                         FindQuestionPipe,
                         QuestionFeedbackTemplateComponent,
-                        MaskedForMaxLengthDirective
+                        MaskedForMaxLengthDirective,
+                        QuestionInstitutionsTemplateComponent
                     ],
                     imports: [
                         CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule,