survery-lib 0.1.59 → 0.2.1

package/fesm2022/survery-lib.mjs

@@ -1,17 +1,22 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, HostListener, Pipe, EventEmitter, Component, Output, Input, InjectionToken, Inject, NgModule } from '@angular/core';
+import { Injectable, Directive, HostListener, Pipe, Component, Input, EventEmitter, Output, InjectionToken, Inject, NgModule } from '@angular/core';
 import { v4 } from 'uuid';
-import { Subject, of, debounceTime, map, filter, distinctUntilChanged } from 'rxjs';
+import { of, debounceTime, distinctUntilChanged, map, filter, pairwise, take } from 'rxjs';
+import * as i5 from '@angular/forms';
+import { Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i3 from '@ngrx/store';
+import { createFeatureSelector, createSelector, createAction, props, createReducer, on, StoreModule } from '@ngrx/store';
+import { createEntityAdapter } from '@ngrx/entity';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i1 from '@ng-stack/forms';
 import { Validators as Validators$1, NgsFormsModule } from '@ng-stack/forms';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
-import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i5 from '@ng-select/ng-select';
+import * as i6 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i2 from '@ngrx/effects';
+import { EffectsModule } from '@ngrx/effects';
 
 var QuestionTypeEnum;
 (function (QuestionTypeEnum) {
@@ -25,15 +30,6 @@ var QuestionTypeEnum;
     QuestionTypeEnum[QuestionTypeEnum["Cascade"] = 8] = "Cascade";
 })(QuestionTypeEnum || (QuestionTypeEnum = {}));
 
-var LogicActionEnum;
-(function (LogicActionEnum) {
-    LogicActionEnum[LogicActionEnum["Show"] = 1] = "Show";
-    LogicActionEnum[LogicActionEnum["Hide"] = 2] = "Hide";
-    LogicActionEnum[LogicActionEnum["Enable"] = 3] = "Enable";
-    LogicActionEnum[LogicActionEnum["Disable"] = 4] = "Disable";
-    LogicActionEnum[LogicActionEnum["SetAnswer"] = 5] = "SetAnswer";
-})(LogicActionEnum || (LogicActionEnum = {}));
-
 var InputTypeEnum;
 (function (InputTypeEnum) {
     InputTypeEnum[InputTypeEnum["Color"] = 1] = "Color";
@@ -46,59 +42,202 @@ var InputTypeEnum;
     InputTypeEnum[InputTypeEnum["Phone"] = 8] = "Phone";
 })(InputTypeEnum || (InputTypeEnum = {}));
 
+function selectQuestionId(a) {
+    return a.questionId;
+}
+const questionAdapter = createEntityAdapter({
+    selectId: selectQuestionId
+});
+
+function selectRuleId(a) {
+    return a.ruleId;
+}
+const ruleAdapter = createEntityAdapter({
+    selectId: selectRuleId
+});
+
+const { selectAll: selectAll$3, selectIds: selectIds$3 } = questionAdapter.getSelectors();
+const selectSurveyData$2 = createFeatureSelector('survey-lib');
+const selectedPageId = createSelector(selectSurveyData$2, (state) => state.selectedPageId);
+const showedSurveyPages = createSelector(selectSurveyData$2, (state) => {
+    var pageArr = selectAll$3(state.questionArr).filter(x => x.isShow == true).map(x => x.surveyPageId);
+    const distinctArray = pageArr.filter((n, i) => pageArr.indexOf(n) === i);
+    return distinctArray.sort((a, b) => a - b);
+});
+const selectedPageIndex = createSelector(showedSurveyPages, selectSurveyData$2, (pageArr, state) => {
+    return pageArr.findIndex(x => x == state.selectedPageId);
+});
+const isFirstPage = createSelector(showedSurveyPages, selectSurveyData$2, (pageArr, state) => {
+    if (pageArr.length > 0) {
+        return pageArr.findIndex(x => x == state.selectedPageId) == 0;
+    }
+    return true;
+});
+const isLastPage = createSelector(showedSurveyPages, selectSurveyData$2, (pageArr, state) => {
+    return pageArr.findIndex(x => x == state.selectedPageId) == (pageArr.length - 1);
+});
+const ruleArr = createSelector(selectSurveyData$2, (state) => ruleAdapter.getSelectors().selectAll(state.ruleArr));
+const surveySelectors = {
+    selectedPageId,
+    selectedPageIndex,
+    showedSurveyPages,
+    isFirstPage,
+    isLastPage,
+    ruleArr
+};
+
+function selectQuestionGroupId(a) {
+    return a.questionGroupId;
+}
+const questionGroupAdapter = createEntityAdapter({
+    selectId: selectQuestionGroupId
+});
+
+const { selectAll: selectAll$2, selectIds: selectIds$2 } = questionGroupAdapter.getSelectors();
+const selectSurveyData$1 = createFeatureSelector('survey-lib');
+const pageQuestionGroups = createSelector(selectSurveyData$1, (state) => selectAll$2(state.questionGroupArr).filter(x => x.surveyPageId == state.selectedPageId));
+const questionGroupSelectors = {
+    pageQuestionGroups
+};
+
+const { selectAll: selectAll$1, selectIds: selectIds$1 } = questionAdapter.getSelectors();
+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 => {
+    return {
+        SurveyPageIndex: x.surveyPageId,
+        QuestionId: x.questionId,
+        QuestionType: x.questionType,
+        AnswerId: x.answerId,
+        AnswerText: x.answerText,
+        AnswerIdArr: x.answerIdArr
+    };
+}));
+const questionSelectors = {
+    allQuestions,
+    pageQuestions,
+    questionAnswers
+};
+
+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 updateQuestionShow = createAction('[Survey library] Update Question Show', props());
+const updateQuestionDisable = createAction('[Survey library] Update Question Disable', props());
+const removeQuestion = createAction('[Survey library] Remove Question', props());
+const updatePageId = createAction('[Survey library] Update Page Id', props());
+const surveyActions = {
+    loadSurvey,
+    addQuestion,
+    updateQuestionAnswer,
+    updateQuestionShow,
+    updateQuestionDisable,
+    removeQuestion,
+    updatePageId,
+};
+
 class SurveyLibService {
-    get surveyDataObsrv() {
-        return this.surveyDataSubject.asObservable();
-    }
-    get surveyAnswersObsrv() {
-        return this.surveyAnswersSubject.asObservable();
-    }
-    get reloadSurveyObsrv() {
-        return this.reloadSurveySubject.asObservable();
-    }
-    get questionIsShowObsrv() {
-        return this.questionIsShowSubject.asObservable();
-    }
-    get questionIsDisabledObsrv() {
-        return this.questionIsDisabledSubject.asObservable();
-    }
-    get addQuestionObsrv() {
-        return this.addQuestionSubject.asObservable();
-    }
-    get removeQuestionObsrv() {
-        return this.removeQuestionSubject.asObservable();
-    }
-    constructor() {
-        this.surveyDataSubject = new Subject();
-        this.surveyAnswersSubject = new Subject();
-        this.reloadSurveySubject = new Subject();
-        this.questionIsShowSubject = new Subject();
-        this.questionIsDisabledSubject = new Subject();
-        this.addQuestionSubject = new Subject();
-        this.removeQuestionSubject = new Subject();
+    constructor(_Store) {
+        this._Store = _Store;
     }
     setSurveyData(survey) {
-        this.surveyDataSubject.next(survey);
+        var questionArr = [];
+        var questionGroupArr = [];
+        survey.surveyPages.forEach((page, pageIndex) => {
+            page.surveyQuestionGroups.forEach(group => {
+                questionGroupArr.push({
+                    questionGroupId: group.questionGroupId,
+                    questionGroupName: group.questionGroupName,
+                    questionGroupDescription: group.questionGroupDescription,
+                    surveyPageId: page.pageId
+                });
+                group.surveyQuestions.forEach(question => {
+                    var newQuestions = this.addQuestion(question, page.pageId, group.questionGroupId);
+                    questionArr.push(...newQuestions);
+                });
+            });
+        });
+        var pageIdArr = survey.surveyPages.map(x => x.pageId);
+        this._Store.dispatch(surveyActions.loadSurvey({
+            questionArr: questionArr,
+            ruleArr: survey.surveyRules,
+            questionGroupArr: questionGroupArr,
+            selectedPageId: Math.min(...pageIdArr)
+        }));
+    }
+    addQuestion(question, pageIndex, questionGroupId) {
+        var questionArr = [{
+                surveyPageId: pageIndex,
+                questionId: question.questionId,
+                questionType: question.questionTypeId,
+                inputTypeId: question.surveyAnswers[0].inputTypeId,
+                isMatrixGroup: question.questionTypeId == QuestionTypeEnum.Matrix,
+                answerId: null,
+                answerIdArr: null,
+                answerText: null,
+                isRequired: question.isRequired,
+                isValid: null,
+                isDisabled: question.isReadOnly,
+                isShow: question.isVisable,
+                isDisabled_default: question.isReadOnly,
+                isShow_default: question.isVisable,
+                questionGroupId: questionGroupId,
+                parentQuestionId: null,
+                questionAllInfo: question
+            }];
+        if (question.questionTypeId == QuestionTypeEnum.Matrix) {
+            question.surveySubQuestions.forEach(subQuestion => {
+                questionArr.push({
+                    surveyPageId: pageIndex,
+                    questionId: subQuestion.questionId,
+                    questionType: question.questionTypeId,
+                    inputTypeId: question.surveyAnswers[0].inputTypeId,
+                    isMatrixGroup: false,
+                    answerId: null,
+                    answerIdArr: null,
+                    answerText: null,
+                    isRequired: question.isRequired,
+                    isValid: null,
+                    isDisabled: question.isReadOnly,
+                    isShow: question.isVisable,
+                    isDisabled_default: question.isReadOnly,
+                    isShow_default: question.isVisable,
+                    parentQuestionId: question.questionId,
+                    questionGroupId: questionGroupId,
+                    questionAllInfo: question
+                });
+            });
+        }
+        return questionArr;
     }
     setsurveyAnswers(model) {
-        this.surveyAnswersSubject.next(model);
-    }
-    setQuestionIsShow(questionId, isShow) {
-        this.questionIsShowSubject.next({ questionId, isShow });
-    }
-    setQuestionIsDisabled(questionId, isDisabled) {
-        this.questionIsDisabledSubject.next({ questionId, isDisabled });
-    }
-    setReloadSurvey() {
-        this.reloadSurveySubject.next(v4());
-    }
-    setAddQuestion(question, pageIndex) {
-        this.addQuestionSubject.next({ question, pageIndex });
-    }
-    setRemoveQuestion(questionId) {
-        this.removeQuestionSubject.next({ questionId });
+        model.defaultAnswers.forEach(answer => {
+            if (answer.QuestionType == QuestionTypeEnum.TextInput) {
+                this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                    questionId: answer.QuestionId,
+                    answer: answer.AnswerText,
+                    isValid: true
+                }));
+            }
+            else if (answer.QuestionType == QuestionTypeEnum.CheckBox
+                || answer.QuestionType == QuestionTypeEnum.DropDownMulti) {
+                this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                    questionId: answer.QuestionId,
+                    answer: answer.AnswerIdArr,
+                    isValid: true
+                }));
+            }
+            else {
+                this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                    questionId: answer.QuestionId,
+                    answer: answer.AnswerId,
+                    isValid: true
+                }));
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, deps: [{ token: i3.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, decorators: [{
@@ -106,7 +245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i3.Store }]; } });
 
 var LogicPropertyEnum;
 (function (LogicPropertyEnum) {
@@ -314,11 +453,14 @@ class MaskedForMinMaxDirective {
                     inputVlaue = Number(firstPart + event.key + lastPart);
                 }
             }
-            // if (min != null) {
-            //   if (parseInt(inputVlaue) < min) {
-            //     event.preventDefault();
-            //   }
-            // }
+            if (min != null) {
+                var allowed = min.length - 1;
+                if (allowed > 0 && inputVlaue.length > allowed) {
+                    if (parseInt(inputVlaue) < min) {
+                        event.preventDefault();
+                    }
+                }
+            }
             if (max !== null) {
                 if (parseInt(inputVlaue) > max) {
                     event.preventDefault();
@@ -402,54 +544,56 @@ class QuestionTextTemplateComponent {
         return null;
     }
     set setQuestion(value) {
-        this.surveyQuestion = value;
-        this.rForm.patchValue({
-            id: value.questionId,
-            name: value.questionName,
-            title: value.questionTitle,
-            typeId: value.questionTypeId,
-            description: value.questionDescription,
-            isDisabled: value.isReadOnly,
-            isShow: value.isVisable
-        });
-        if (value.surveyAnswers[0]?.answerId != null && value.surveyAnswers[0]?.answerId != undefined) {
-            this.fCtrls.surveyAnswerId.setValue(value.surveyAnswers[0].answerId);
-            this.fCtrls.inputTypeId.setValue(value.surveyAnswers[0].inputTypeId);
-        }
-        if (value.isRequired == true) {
-            this.fCtrls.answer.addValidators([Validators.required]);
-            if (value.surveyAnswers[0].inputTypeId == InputTypeEnum.Number) {
-                if (value.surveyAnswers[0].inputMin != null) {
-                    this.fCtrls.inputMin.setValue(value.surveyAnswers[0].inputMin);
-                    this.fCtrls.answer.addValidators([Validators.min(value.surveyAnswers[0].inputMin)]);
+        if (!this.surveyQuestion) {
+            this.surveyQuestion = value.questionAllInfo;
+            this.isTextArea = value.questionAllInfo.isAdvanceTextArea;
+            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.questionAllInfo.surveyAnswers[0]?.answerId != null && value.questionAllInfo.surveyAnswers[0]?.answerId != undefined) {
+                this.fCtrls.surveyAnswerId.setValue(value.questionAllInfo.surveyAnswers[0].answerId);
+                this.fCtrls.inputTypeId.setValue(value.questionAllInfo.surveyAnswers[0].inputTypeId);
+            }
+            if (value.isRequired == true) {
+                this.fCtrls.answer.addValidators([Validators.required]);
+                if (value.questionAllInfo.surveyAnswers[0].inputTypeId == InputTypeEnum.Number) {
+                    if (value.questionAllInfo.surveyAnswers[0].inputMin != null) {
+                        this.fCtrls.inputMin.setValue(value.questionAllInfo.surveyAnswers[0].inputMin);
+                        this.fCtrls.answer.addValidators([Validators.min(value.questionAllInfo.surveyAnswers[0].inputMin)]);
+                    }
+                    if (value.questionAllInfo.surveyAnswers[0].inputMax != null) {
+                        this.fCtrls.inputMax.setValue(value.questionAllInfo.surveyAnswers[0].inputMax);
+                        this.fCtrls.answer.addValidators([Validators.max(value.questionAllInfo.surveyAnswers[0].inputMax)]);
+                    }
+                    if (value.questionAllInfo.surveyAnswers[0].inputMin != null || value.questionAllInfo.surveyAnswers[0].inputMax != null) {
+                        this.fCtrls.inputTypeId.setValue(InputTypeEnum.Text);
+                    }
                 }
-                if (value.surveyAnswers[0].inputMax != null) {
-                    this.fCtrls.inputMax.setValue(value.surveyAnswers[0].inputMax);
-                    this.fCtrls.answer.addValidators([Validators.max(value.surveyAnswers[0].inputMax)]);
+                else if (value.questionAllInfo.surveyAnswers[0].inputTypeId == InputTypeEnum.Email) {
+                    this.fCtrls.answer.addValidators([Validators.email]);
                 }
-                if (value.surveyAnswers[0].inputMin != null || value.surveyAnswers[0].inputMax != null) {
-                    this.fCtrls.inputTypeId.setValue(InputTypeEnum.Text);
+                else if (value.questionAllInfo.surveyAnswers[0].inputTypeId == InputTypeEnum.Phone) {
+                    this.fCtrls.answer.addValidators([PhoneValidator]);
                 }
+                this.fCtrls.answer.updateValueAndValidity();
             }
-            else if (value.surveyAnswers[0].inputTypeId == InputTypeEnum.Email) {
-                this.fCtrls.answer.addValidators([Validators.email]);
-            }
-            else if (value.surveyAnswers[0].inputTypeId == InputTypeEnum.Phone) {
-                this.fCtrls.answer.addValidators([PhoneValidator]);
-            }
-            this.fCtrls.answer.updateValueAndValidity();
+            this.toggleEnableAnswer(value.questionAllInfo.isReadOnly);
         }
-        this.toggleEnableAnswer(value.isReadOnly);
     }
     set isDisabled(value) {
         this.toggleEnableAnswer(value);
     }
-    constructor(_formBuilder, _surveyLibService) {
+    constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
-        this.emitter = new EventEmitter();
+        this._Store = _Store;
         this.isArabicLang = false;
-        this.isTextArea = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -466,7 +610,7 @@ class QuestionTextTemplateComponent {
         });
     }
     ngOnInit() {
-        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
             const formValue = this.rForm.value;
             if (formValue.inputTypeId == InputTypeEnum.Email) {
                 const isRequired = this.fCtrls.answer.hasValidator(Validators.required);
@@ -482,25 +626,32 @@ class QuestionTextTemplateComponent {
             }
             setTimeout(() => {
                 const formValue = this.rForm.value;
-                this.emitter.emit({
-                    QuestionId: formValue.id,
-                    IsValid: this.fCtrls.answer.valid,
-                    Answer: value,
-                    SurveyAnswerId: formValue.surveyAnswerId
-                });
+                this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                    questionId: formValue.id,
+                    answer: value,
+                    isValid: this.fCtrls.answer.valid
+                }));
             }, 100);
         });
-        this.fCtrls.answer.setValue(null);
-        this._surveyLibService.surveyAnswersObsrv.pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
-            .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
-            .subscribe(answer => {
-            this.fCtrls.answer.setValue(answer.AnswerText);
-        });
-        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isDisabled.setValue(x.isDisabled);
-        });
-        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isShow.setValue(x.isShow);
+        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) {
+                this.fCtrls.answer.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.answer.setValue(null);
+                }
+            }
         });
     }
     convertToFormControl(element) {
@@ -515,17 +666,13 @@ class QuestionTextTemplateComponent {
         }
         this.fCtrls.answer.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { isArabicLang: "isArabicLang", isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\n            <small >{{questionMinMaxIndicator}}</small>\n        </p> \n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n            <input class=\"form-control\" libMaskedForMinMax  [attr.min]=\"fCtrls.inputMin.value\"\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\"></textarea>\n        </ng-template>\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MaskedForMinMaxDirective, selector: "[libMaskedForMinMax]" }, { kind: "pipe", type: TextBoxTypeAttrPipe, name: "textBoxTypeAttr" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, 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: QuestionTextTemplateComponent, selector: "lib-question-text-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.answer.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        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\r\n            <small >{{questionMinMaxIndicator}}</small>\r\n        </p> \r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n            <input class=\"form-control\" libMaskedForMinMax  [attr.min]=\"fCtrls.inputMin.value\"\r\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n        </ng-container>\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\"></textarea>\r\n        </ng-template>\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: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MaskedForMinMaxDirective, selector: "[libMaskedForMinMax]" }, { kind: "pipe", type: TextBoxTypeAttrPipe, name: "textBoxTypeAttr" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-text-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\n            <small >{{questionMinMaxIndicator}}</small>\n        </p> \n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n            <input class=\"form-control\" libMaskedForMinMax  [attr.min]=\"fCtrls.inputMin.value\"\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\"></textarea>\n        </ng-template>\n    </div>" }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
-                type: Output
-            }], isArabicLang: [{
-                type: Input
-            }], isTextArea: [{
+            args: [{ selector: 'lib-question-text-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.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        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\r\n            <small >{{questionMinMaxIndicator}}</small>\r\n        </p> \r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n            <input class=\"form-control\" libMaskedForMinMax  [attr.min]=\"fCtrls.inputMin.value\"\r\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n        </ng-container>\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\"></textarea>\r\n        </ng-template>\r\n    </div>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { isArabicLang: [{
                 type: Input
             }], setQuestion: [{
                 type: Input
@@ -541,33 +688,35 @@ class QuestionRadioButtonTemplateComponent {
         return QuestionTypeEnum;
     }
     set setQuestion(value) {
-        this.surveyQuestion = value;
-        this.rForm.patchValue({
-            id: value.questionId,
-            name: value.questionName,
-            title: value.questionTitle,
-            typeId: value.questionTypeId,
-            description: value.questionDescription,
-            isDisabled: value.isReadOnly,
-            isShow: value.isVisable
-        });
-        value.surveyAnswers.forEach(surveryAnswer => {
-            this.fCtrls.answerArray.push(this._formBuilder.group({
-                id: [surveryAnswer.answerId],
-                title: [surveryAnswer.answerTitle],
-                isSelected: [false]
-            }));
-        });
-        if (value.isRequired == true) {
-            this.fCtrls.answer.addValidators([Validators.required]);
-            this.fCtrls.answer.updateValueAndValidity();
+        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
+            });
+            value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
+                this.fCtrls.answerArray.push(this._formBuilder.group({
+                    id: [surveryAnswer.answerId],
+                    title: [surveryAnswer.answerTitle],
+                    isSelected: [false]
+                }));
+            });
+            if (value.isRequired == true) {
+                this.fCtrls.answer.addValidators([Validators.required]);
+                this.fCtrls.answer.updateValueAndValidity();
+            }
         }
     }
-    constructor(_formBuilder, _surveyLibService) {
+    constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
         this.elemId = v4();
-        this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -582,29 +731,36 @@ class QuestionRadioButtonTemplateComponent {
     }
     ngOnInit() {
         this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
-            console.log(value);
             const formValue = this.rForm.value;
-            this.emitter.emit({
-                QuestionId: formValue.id,
-                IsValid: this.fCtrls.answer.valid,
-                Answer: value
-            });
+            this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                questionId: formValue.id,
+                answer: value,
+                isValid: this.fCtrls.answer.valid
+            }));
         });
-        this.fCtrls.answer.setValue(null);
-        this._surveyLibService.surveyAnswersObsrv.pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
-            .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
-            .subscribe(answer => {
-            this.fCtrls.answer.setValue(answer.AnswerId);
-            const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answer.AnswerId);
-            if (groupIndex > -1) {
-                this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+        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?.answerId != newValue?.answerId) {
+                this.fCtrls.answer.setValue(newValue?.answerId, { emitEvent: false });
+                const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == newValue?.answerId);
+                if (groupIndex > -1) {
+                    this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+                }
+            }
+            //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.answer.setValue(null);
+                }
             }
-        });
-        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isDisabled.setValue(x.isDisabled);
-        });
-        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isShow.setValue(x.isShow);
         });
     }
     onChangeAnswer(item) {
@@ -613,15 +769,13 @@ class QuestionRadioButtonTemplateComponent {
     convertToFormControl(element) {
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionRadioButtonTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"fCtrls.isDisabled.value\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionRadioButtonTemplateComponent, 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: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: { setQuestion: "setQuestion" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.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=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\" \r\n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"fCtrls.isDisabled.value\"\r\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\" [innerHTML]=\"item.value.title\"></label>\r\n        </div>\r\n    </div>\r\n</div>\r\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionRadioButtonTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-radio-button-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"fCtrls.isDisabled.value\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
-                type: Output
-            }], setQuestion: [{
+            args: [{ selector: 'lib-question-radio-button-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.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=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\" \r\n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"fCtrls.isDisabled.value\"\r\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\" [innerHTML]=\"item.value.title\"></label>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { setQuestion: [{
                 type: Input
             }] } });
 
@@ -633,33 +787,35 @@ class QuestionCheckBoxTemplateComponent {
         return QuestionTypeEnum;
     }
     set setQuestion(value) {
-        this.surveyQuestion = value;
-        this.rForm.patchValue({
-            id: value.questionId,
-            name: value.questionName,
-            title: value.questionTitle,
-            typeId: value.questionTypeId,
-            description: value.questionDescription,
-            isDisabled: value.isReadOnly,
-            isShow: value.isVisable
-        });
-        value.surveyAnswers.forEach(surveryAnswer => {
-            this.fCtrls.answerArray.push(this._formBuilder.group({
-                id: [surveryAnswer.answerId],
-                title: [surveryAnswer.answerTitle],
-                isSelected: [false]
-            }));
-        });
-        if (value.isRequired == true) {
-            this.fCtrls.answer.addValidators([Validators.required]);
-            this.fCtrls.answer.updateValueAndValidity();
+        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
+            });
+            value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
+                this.fCtrls.answerArray.push(this._formBuilder.group({
+                    id: [surveryAnswer.answerId],
+                    title: [surveryAnswer.answerTitle],
+                    isSelected: [false]
+                }));
+            });
+            if (value.isRequired == true) {
+                this.fCtrls.answer.addValidators([Validators.required]);
+                this.fCtrls.answer.updateValueAndValidity();
+            }
         }
     }
-    constructor(_formBuilder, _surveyLibService) {
+    constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
         this.elemId = v4();
-        this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -675,31 +831,38 @@ class QuestionCheckBoxTemplateComponent {
     ngOnInit() {
         this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
             const formValue = this.rForm.value;
-            this.emitter.emit({
-                QuestionId: formValue.id,
-                IsValid: this.fCtrls.answer.valid,
-                Answer: value
-            });
+            this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                questionId: formValue.id,
+                answer: value,
+                isValid: this.fCtrls.answer.valid
+            }));
         });
-        this.fCtrls.answer.setValue(null);
-        this._surveyLibService.surveyAnswersObsrv
-            .pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
-            .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
-            .subscribe(answer => {
-            const distinctArray = answer.AnswerIdArr.filter((n, i) => answer.AnswerIdArr.indexOf(n) === i);
-            this.fCtrls.answer.setValue(distinctArray);
-            answer.AnswerIdArr.forEach(answerId => {
-                const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answerId);
-                if (groupIndex > -1) {
-                    this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+        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?.answerIdArr != newValue?.answerIdArr) {
+                const distinctArray = newValue?.answerIdArr.filter((n, i) => newValue?.answerIdArr.indexOf(n) === i);
+                this.fCtrls.answer.setValue(distinctArray, { emitEvent: false });
+                newValue?.answerIdArr.forEach(answerId => {
+                    const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answerId);
+                    if (groupIndex > -1) {
+                        this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+                    }
+                });
+            }
+            //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.answer.setValue(null);
                 }
-            });
-        });
-        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isDisabled.setValue(x.isDisabled);
-        });
-        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isShow.setValue(x.isShow);
+            }
         });
     }
     onChangeAnswer(item, event) {
@@ -716,15 +879,13 @@ class QuestionCheckBoxTemplateComponent {
     convertToFormControl(element) {
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCheckBoxTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"fCtrls.isDisabled.value\"\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCheckBoxTemplateComponent, 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: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: { setQuestion: "setQuestion" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n\r\n    <div class=\"checkbox-button-quastion\">\r\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"fCtrls.isDisabled.value\"\r\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\" [innerHTML]=\"item.value.title\"></label>\r\n        </div>\r\n    </div>\r\n</div>\r\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCheckBoxTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-check-box-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"fCtrls.isDisabled.value\"\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
-                type: Output
-            }], setQuestion: [{
+            args: [{ selector: 'lib-question-check-box-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n\r\n    <div class=\"checkbox-button-quastion\">\r\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"fCtrls.isDisabled.value\"\r\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\" [innerHTML]=\"item.value.title\"></label>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { setQuestion: [{
                 type: Input
             }] } });
 
@@ -736,24 +897,27 @@ class QuestionDropdownTemplateComponent {
         return QuestionTypeEnum;
     }
     set setQuestion(value) {
-        this.surveyQuestion = value;
-        this.rForm.patchValue({
-            id: value.questionId,
-            name: value.questionName,
-            title: value.questionTitle,
-            typeId: value.questionTypeId,
-            description: value.questionDescription,
-            isDisabled: value.isReadOnly,
-            isShow: value.isVisable
-        });
-        if (value.isRequired == true) {
-            this.fCtrls.answer.addValidators([Validators.required]);
-            this.fCtrls.answer.updateValueAndValidity();
+        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.isRequired == true) {
+                this.fCtrls.answer.addValidators([Validators.required]);
+                this.fCtrls.answer.updateValueAndValidity();
+            }
         }
     }
-    constructor(_formBuilder, _surveyLibService) {
+    constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
         this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
             id: [null],
@@ -767,38 +931,50 @@ class QuestionDropdownTemplateComponent {
         });
     }
     ngOnInit() {
-        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
             const formValue = this.rForm.value;
+            this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                questionId: formValue.id,
+                answer: value,
+                isValid: this.fCtrls.answer.valid
+            }));
             this.emitter.emit({
                 QuestionId: formValue.id,
                 IsValid: this.fCtrls.answer.valid,
                 Answer: value
             });
         });
-        this.fCtrls.answer.setValue(null);
-        this._surveyLibService.surveyAnswersObsrv
-            .pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
-            .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
-            .subscribe(answer => {
-            this.fCtrls.answer.setValue(answer.AnswerId);
-        });
-        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isDisabled.setValue(x.isDisabled);
-        });
-        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isShow.setValue(x.isShow);
+        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?.answerId != newValue?.answerId) {
+                this.fCtrls.answer.setValue(newValue?.answerId, { 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.answer.setValue(null);
+                }
+            }
         });
     }
     convertToFormControl(element) {
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, 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: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion?.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion text-quastion__dropdown\">\r\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\r\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\r\n        </ng-select>\r\n    </div>\r\n</div>\r\n", styles: [".text-quastion .form-control{padding:10px}\n"], 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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.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: QuestionDropdownTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-dropdown-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
+            args: [{ selector: 'lib-question-dropdown-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion?.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion text-quastion__dropdown\">\r\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\r\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\r\n        </ng-select>\r\n    </div>\r\n</div>\r\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
                 type: Input
@@ -812,39 +988,41 @@ class QuestionMatrixTemplateComponent {
         return QuestionTypeEnum;
     }
     set setQuestion(value) {
-        this.surveyQuestion = value;
-        this.rForm.patchValue({
-            id: value.questionId,
-            typeId: value.questionTypeId,
-            isDisabled: value.isReadOnly,
-            isShow: value.isVisable
-        });
-        value.surveySubQuestions.forEach(x => {
-            var group = this._formBuilder.group({
-                subQuestionId: [x.questionId],
-                questionTitle: [x.questionTitle],
-                answer: [null],
+        if (!this.surveyQuestion) {
+            this.surveyQuestion = value.questionAllInfo;
+            this.rForm.patchValue({
+                id: value.questionId,
+                typeId: value.questionAllInfo.questionTypeId,
+                isDisabled: value.questionAllInfo.isReadOnly,
+                isShow: value.questionAllInfo.isVisable
             });
-            if (value.isRequired == true) {
-                group.controls.answer.addValidators([Validators.required]);
-                group.controls.answer.updateValueAndValidity();
-            }
-            group.controls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
-                const formValue = this.rForm.value;
-                this.emitter.emit({
-                    QuestionId: group.value.subQuestionId,
-                    Answer: group.value.answer,
-                    IsValid: group.controls.answer.valid
+            value.questionAllInfo.surveySubQuestions.forEach(x => {
+                var group = this._formBuilder.group({
+                    subQuestionId: [x.questionId],
+                    questionTitle: [x.questionTitle],
+                    answer: [null],
                 });
+                if (value.isRequired == true) {
+                    group.controls.answer.addValidators([Validators.required]);
+                    group.controls.answer.updateValueAndValidity();
+                }
+                group.controls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+                    const formValue = this.rForm.value;
+                    this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                        questionId: group.value.subQuestionId,
+                        answer: group.value.answer,
+                        isValid: group.controls.answer.valid
+                    }));
+                });
+                this.fCtrls.subQuestionArray.push(group);
             });
-            this.fCtrls.subQuestionArray.push(group);
-        });
+        }
     }
-    constructor(_formBuilder, _surveyLibService) {
+    constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
         this.elemId = v4();
-        this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
             id: [null],
             typeId: [null],
@@ -854,46 +1032,53 @@ class QuestionMatrixTemplateComponent {
         });
     }
     ngOnInit() {
-        this._surveyLibService.surveyAnswersObsrv
-            .pipe(map(x => x.defaultAnswers.filter(x => x.ParentQuestionId == this.fCtrls.id.value)))
-            .pipe(filter(x => x.length > 0))
-            .subscribe(answers => {
+        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 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.answer.setValue(null);
+                // }
+            }
+        });
+        this._Store.select(questionSelectors.pageQuestions).pipe(map(arr => arr.filter(x => x.parentQuestionId == this.fCtrls.id.value)))
+            .pipe(filter(x => x.length > 0)).subscribe(questions => {
+            //Update Answers
             this.fCtrls.subQuestionArray.controls.forEach(group => {
-                var answer = answers.find(x => x.QuestionId == group.value.subQuestionId);
-                if (answer != null) {
-                    group.controls.answer.setValue(answer.AnswerId);
+                var question = questions.find(x => x.questionId == group.value.subQuestionId);
+                if (question != null) {
+                    group.controls.answer.setValue(question.answerId, { emitEvent: false });
                 }
             });
         });
-        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isDisabled.setValue(x.isDisabled);
-        });
-        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isShow.setValue(x.isShow);
-        });
     }
     onChangeAnswer(question, answer) {
         const index = this.fCtrls.subQuestionArray.value.findIndex(x => x.subQuestionId == question.subQuestionId);
         var subQuestionGroup = this.fCtrls.subQuestionArray.controls[index];
         subQuestionGroup.controls.answer.setValue(answer.answerId);
-        this.emitter.emit({
-            QuestionId: subQuestionGroup.value.subQuestionId,
-            Answer: subQuestionGroup.value.answer,
-            IsValid: subQuestionGroup.controls.answer.valid
-        });
+        // this.emitter.emit({
+        //   QuestionId: subQuestionGroup.value.subQuestionId,
+        //   Answer: subQuestionGroup.value.answer,
+        //   IsValid: subQuestionGroup.controls.answer.valid
+        // });
     }
     convertToFormControl(element) {
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, 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: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: { setQuestion: "setQuestion" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\r\n[ngClass]=\"{'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=\"matrix-question\" [formGroup]=\"rForm\">\r\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\r\n      <div class=\"matrix-head-row\">\r\n        <div class=\"matrix-col\">\r\n        </div>\r\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\r\n          <span [innerHTML]=\"answers.answerTitle\"></span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\r\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\r\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\r\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\r\n        </div>\r\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\r\n          <div class=\"form-check form-check-radio form-check-inline\">\r\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\r\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\r\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\r\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\r\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"], 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: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
-                type: Output
-            }], setQuestion: [{
+            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\r\n[ngClass]=\"{'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=\"matrix-question\" [formGroup]=\"rForm\">\r\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\r\n      <div class=\"matrix-head-row\">\r\n        <div class=\"matrix-col\">\r\n        </div>\r\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\r\n          <span [innerHTML]=\"answers.answerTitle\"></span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\r\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\r\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\r\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\r\n        </div>\r\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\r\n          <div class=\"form-check form-check-radio form-check-inline\">\r\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\r\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\r\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\r\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\r\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { setQuestion: [{
                 type: Input
             }] } });
 
@@ -905,34 +1090,35 @@ class QuestionBooleanTemplateComponent {
         return QuestionTypeEnum;
     }
     set setQuestion(value) {
-        this.surveyQuestion = value;
-        this.rForm.patchValue({
-            id: value.questionId,
-            name: value.questionName,
-            title: value.questionTitle,
-            typeId: value.questionTypeId,
-            description: value.questionDescription,
-            isDisabled: value.isReadOnly,
-            isShow: value.isVisable
-        });
-        console.log(value.surveyAnswers);
-        value.surveyAnswers.forEach(surveryAnswer => {
-            this.fCtrls.answerArray.push(this._formBuilder.group({
-                id: [surveryAnswer.answerId],
-                title: [surveryAnswer.answerTitle],
-                isSelected: [false]
-            }));
-        });
-        if (value.isRequired == true) {
-            this.fCtrls.answer.addValidators([Validators.required]);
-            this.fCtrls.answer.updateValueAndValidity();
+        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
+            });
+            value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
+                this.fCtrls.answerArray.push(this._formBuilder.group({
+                    id: [surveryAnswer.answerId],
+                    title: [surveryAnswer.answerTitle],
+                    isSelected: [false]
+                }));
+            });
+            if (value.isRequired == true) {
+                this.fCtrls.answer.addValidators([Validators.required]);
+                this.fCtrls.answer.updateValueAndValidity();
+            }
         }
     }
-    constructor(_formBuilder, _surveyLibService) {
+    constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
         this.elemId = v4();
-        this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -946,30 +1132,33 @@ class QuestionBooleanTemplateComponent {
         });
     }
     ngOnInit() {
-        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
             const formValue = this.rForm.value;
-            this.emitter.emit({
-                QuestionId: formValue.id,
-                IsValid: this.fCtrls.answer.valid,
-                Answer: value
-            });
+            this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                questionId: formValue.id,
+                answer: value,
+                isValid: this.fCtrls.answer.valid
+            }));
         });
-        this.fCtrls.answer.setValue(null);
-        this._surveyLibService.surveyAnswersObsrv
-            .pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
-            .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
-            .subscribe(answer => {
-            this.fCtrls.answer.setValue(answer.AnswerId);
-            const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answer.AnswerId);
-            if (groupIndex > -1) {
-                this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+        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?.answerId != newValue?.answerId) {
+                this.fCtrls.answer.setValue(newValue?.answerId, { 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.answer.setValue(null);
+                }
             }
-        });
-        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isDisabled.setValue(x.isDisabled);
-        });
-        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isShow.setValue(x.isShow);
         });
     }
     onChangeAnswer(item) {
@@ -978,15 +1167,13 @@ class QuestionBooleanTemplateComponent {
     convertToFormControl(element) {
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionBooleanTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\"\n            *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"\n                [disabled]=\"fCtrls.isDisabled.value\" name=\"{{elemId}}__radio-btn-option\"\n                id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionBooleanTemplateComponent, 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: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: { setQuestion: "setQuestion" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\"\r\n            *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"\r\n                [disabled]=\"fCtrls.isDisabled.value\" name=\"{{elemId}}__radio-btn-option\"\r\n                id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionBooleanTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\"\n            *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"\n                [disabled]=\"fCtrls.isDisabled.value\" name=\"{{elemId}}__radio-btn-option\"\n                id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
-                type: Output
-            }], setQuestion: [{
+            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\"\r\n            *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"\r\n                [disabled]=\"fCtrls.isDisabled.value\" name=\"{{elemId}}__radio-btn-option\"\r\n                id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { setQuestion: [{
                 type: Input
             }] } });
 
@@ -998,33 +1185,35 @@ class QuestionDropdownMultiTemplateComponent {
         return QuestionTypeEnum;
     }
     set setQuestion(value) {
-        this.surveyQuestion = value;
-        this.rForm.patchValue({
-            id: value.questionId,
-            name: value.questionName,
-            title: value.questionTitle,
-            typeId: value.questionTypeId,
-            description: value.questionDescription,
-            isDisabled: value.isReadOnly,
-            isShow: value.isVisable
-        });
-        value.surveyAnswers.forEach(surveryAnswer => {
-            this.fCtrls.answerArray.push(this._formBuilder.group({
-                id: [surveryAnswer.answerId],
-                title: [surveryAnswer.answerTitle],
-                isSelected: [false]
-            }));
-        });
-        if (value.isRequired == true) {
-            this.fCtrls.answer.addValidators([Validators$1.required]);
-            this.fCtrls.answer.updateValueAndValidity();
+        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
+            });
+            value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
+                this.fCtrls.answerArray.push(this._formBuilder.group({
+                    id: [surveryAnswer.answerId],
+                    title: [surveryAnswer.answerTitle],
+                    isSelected: [false]
+                }));
+            });
+            if (value.isRequired == true) {
+                this.fCtrls.answer.addValidators([Validators$1.required]);
+                this.fCtrls.answer.updateValueAndValidity();
+            }
         }
     }
-    constructor(_formBuilder, _surveyLibService) {
+    constructor(_formBuilder, _surveyLibService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
         this.elemId = v4();
-        this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -1040,39 +1229,44 @@ class QuestionDropdownMultiTemplateComponent {
     ngOnInit() {
         this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
             const formValue = this.rForm.value;
-            this.emitter.emit({
-                QuestionId: formValue.id,
-                IsValid: this.fCtrls.answer.valid,
-                Answer: value
-            });
-        });
-        this.fCtrls.answer.setValue(null);
-        this._surveyLibService.surveyAnswersObsrv
-            .pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
-            .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
-            .subscribe(answer => {
-            const distinctArray = answer.AnswerIdArr.filter((n, i) => answer.AnswerIdArr.indexOf(n) === i);
-            this.fCtrls.answer.setValue(distinctArray);
-        });
-        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isDisabled.setValue(x.isDisabled);
+            this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                questionId: formValue.id,
+                answer: value,
+                isValid: this.fCtrls.answer.valid
+            }));
         });
-        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
-            this.fCtrls.isShow.setValue(x.isShow);
+        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?.answerIdArr != newValue?.answerIdArr) {
+                const distinctArray = newValue?.answerIdArr.filter((n, i) => newValue?.answerIdArr.indexOf(n) === i);
+                this.fCtrls.answer.setValue(distinctArray, { 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.answer.setValue(null);
+                }
+            }
         });
     }
     convertToFormControl(element) {
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownMultiTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\n         </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownMultiTemplateComponent, 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: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: { setQuestion: "setQuestion" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion text-quastion__dropdown\">\r\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\r\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\r\n         </ng-select>\r\n    </div>\r\n</div>\r\n", styles: [".text-quastion .form-control{padding:10px}\n"], 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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.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: QuestionDropdownMultiTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-dropdown-multi-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\n         </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
-                type: Output
-            }], setQuestion: [{
+            args: [{ selector: 'lib-question-dropdown-multi-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion text-quastion__dropdown\">\r\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\r\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\r\n         </ng-select>\r\n    </div>\r\n</div>\r\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { setQuestion: [{
                 type: Input
             }] } });
 
@@ -1101,6 +1295,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     args: [LibConfigService]
                 }] }]; } });
 
+class FindQuestionPipe {
+    transform(arr, questionId) {
+        if (arr) {
+            return arr.find(x => x.questionId == questionId);
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FindQuestionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FindQuestionPipe, name: "findQuestion" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FindQuestionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'findQuestion'
+                }]
+        }] });
+
 class QuestionCascadeTemplateComponent {
     get fCtrls() {
         return this.rForm.controls;
@@ -1112,15 +1323,19 @@ class QuestionCascadeTemplateComponent {
         return this.fCtrls.questionArr;
     }
     set setQuestion(value) {
-        this.setQuestions(value);
+        if (this.surveyQuestionArr?.length == 0) {
+            this.setQuestions(value.questionAllInfo);
+        }
     }
-    constructor(_formBuilder, _surveyLibService, _ApiService) {
+    constructor(_formBuilder, _surveyLibService, _ApiService, _Store) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this._ApiService = _ApiService;
+        this._Store = _Store;
         this.surveyQuestionArr = [];
-        this.emitter = new EventEmitter();
-        this.pageIndex = null;
+        this.pageQuestions$ = this._Store.select(questionSelectors.pageQuestions);
+        this.pageId = null;
+        this.questionGroupId = null;
         this.isPre = false;
         this.surveyLanguageId = null;
         this.applicantKey = null;
@@ -1129,9 +1344,9 @@ class QuestionCascadeTemplateComponent {
         });
     }
     ngOnInit() {
-        this.fCtrls.questionArr.statusChanges.subscribe(v => {
-            console.log(v);
-        });
+        // this.fCtrls.questionArr.statusChanges.subscribe(v => {
+        //   console.log(v);
+        // })
     }
     onUpdateAnswer(model) {
         if (this.surveyQuestionArr.length > 1) {
@@ -1144,7 +1359,7 @@ class QuestionCascadeTemplateComponent {
             for (let index = 0; index < sortDeletedArr.length; index++) {
                 const elementIndex = sortDeletedArr[index];
                 const questionId = this.surveyQuestionArr[elementIndex].questionId;
-                this._surveyLibService.setRemoveQuestion(questionId);
+                this._Store.dispatch(surveyActions.removeQuestion({ questionId: questionId }));
                 this.surveyQuestionArr = this.surveyQuestionArr.filter(x => x.questionId != questionId);
                 this.questionFormArray.removeAt(elementIndex);
             }
@@ -1157,12 +1372,29 @@ class QuestionCascadeTemplateComponent {
                 surveyLanguageId: this.surveyLanguageId
             }).subscribe(res => {
                 if (res.errors.filter(x => x.code == 17).length == 0) {
+                    this._Store.dispatch(surveyActions.addQuestion({ question: {
+                            surveyPageId: this.pageId,
+                            questionId: res.questionId,
+                            questionType: res.questionTypeId,
+                            inputTypeId: res.surveyAnswers[0].inputTypeId,
+                            isMatrixGroup: false,
+                            answerId: null,
+                            answerIdArr: null,
+                            answerText: null,
+                            isRequired: res.isRequired,
+                            isValid: null,
+                            isDisabled: res.isReadOnly,
+                            isShow: res.isVisable,
+                            isDisabled_default: res.isReadOnly,
+                            isShow_default: res.isVisable,
+                            questionGroupId: this.questionGroupId,
+                            parentQuestionId: model.QuestionId,
+                            questionAllInfo: res
+                        } }));
                     this.setQuestions(res);
-                    this._surveyLibService.setAddQuestion(res, this.pageIndex);
                 }
             });
         }
-        this.emitter.emit(model);
     }
     identify(index, item) {
         return item.id;
@@ -1179,16 +1411,17 @@ class QuestionCascadeTemplateComponent {
             group.controls.answer.updateValueAndValidity();
         }
         this.fCtrls.questionArr.push(group);
+        console.log(this.fCtrls.questionArr.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCascadeTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: { pageIndex: "pageIndex", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of questionFormArray.value ; trackBy:identify ; let i = index\">\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\n        (emitter)=\"onUpdateAnswer($event)\" >\n    </lib-question-dropdown-template>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCascadeTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }, { token: ApiService }, { token: i3.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: { pageId: "pageId", questionGroupId: "questionGroupId", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of questionFormArray.value ; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"(pageQuestions$  |async) |findQuestion :item.id \"\r\n        (emitter)=\"onUpdateAnswer($event)\" >\r\n    </lib-question-dropdown-template>  \r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FindQuestionPipe, name: "findQuestion" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCascadeTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-cascade-template', template: "<ng-container *ngFor=\"let item of questionFormArray.value ; trackBy:identify ; let i = index\">\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\n        (emitter)=\"onUpdateAnswer($event)\" >\n    </lib-question-dropdown-template>\n</ng-container>" }]
-        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: ApiService }]; }, propDecorators: { emitter: [{
-                type: Output
-            }], pageIndex: [{
+            args: [{ selector: 'lib-question-cascade-template', template: "<ng-container *ngFor=\"let item of questionFormArray.value ; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"(pageQuestions$  |async) |findQuestion :item.id \"\r\n        (emitter)=\"onUpdateAnswer($event)\" >\r\n    </lib-question-dropdown-template>  \r\n</ng-container>" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: ApiService }, { type: i3.Store }]; }, propDecorators: { pageId: [{
+                type: Input
+            }], questionGroupId: [{
                 type: Input
             }], isPre: [{
                 type: Input
@@ -1200,6 +1433,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class FilterQuestionPipe {
+    transform(arr, questionGroupId) {
+        return arr.filter(x => x.questionGroupId == questionGroupId && x.parentQuestionId == null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, name: "filterQuestion" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterQuestion'
+                }]
+        }] });
+
 class SurveryLibComponent {
     get fCtrls() {
         return this.rForm.controls;
@@ -1207,55 +1454,25 @@ class SurveryLibComponent {
     get questionTypeEnum() {
         return QuestionTypeEnum;
     }
-    get isFirstPage() {
-        if (this.showedSurveyPages.length > 0) {
-            return this.showedSurveyPages.findIndex(x => x == this.fCtrls.currentPageIndex.value) == 0;
-        }
-        return true;
-    }
-    get isLastPage() {
-        return this.showedSurveyPages.findIndex(x => x == this.fCtrls.currentPageIndex.value) == (this.showedSurveyPages.length - 1);
-    }
-    get showedSurveyPages() {
-        var pageArr = [];
-        for (let index = 0; index < this.fCtrls.questionArray.value.length; index++) {
-            const question = this.fCtrls.questionArray.value[index];
-            if (question.isShow == true) {
-                if (question.questionType != this.questionTypeEnum.Matrix) {
-                    pageArr.push(question.surveyPageIndex);
-                }
-                else if (question.questionType == this.questionTypeEnum.Matrix && question.isMatrixGroup == true) {
-                    pageArr.push(question.surveyPageIndex);
-                }
-            }
-        }
-        const distinctArray = pageArr.filter((n, i) => pageArr.indexOf(n) === i);
-        return distinctArray.sort((a, b) => a - b);
-    }
-    get curruntShowedSurveyPages() {
-        return this.showedSurveyPages.findIndex(x => x == this.fCtrls.currentPageIndex.value) + 1;
-    }
     get surveyResult() {
         return {
-            currentPageIndex: this.fCtrls.currentPageIndex.value,
-            answers: this.fCtrls.questionArray.value.filter(x => x.isMatrixGroup != true).map(x => {
-                return {
-                    SurveyPageIndex: x.surveyPageIndex,
-                    QuestionId: x.questionId,
-                    QuestionType: x.questionType,
-                    AnswerId: x.answerId,
-                    AnswerText: x.answerText,
-                    AnswerIdArr: x.answerIdArr
-                };
-            })
+            currentPageIndex: this.fCtrls.currentPageId.value,
+            answers: this.questionAnswerArr
         };
     }
-    constructor(_surveyLibService, _formBuilder, _checkRuleExpsUsecase) {
+    constructor(_surveyLibService, _Store, _formBuilder, _checkRuleExpsUsecase) {
         this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
         this._formBuilder = _formBuilder;
         this._checkRuleExpsUsecase = _checkRuleExpsUsecase;
         this.surveryLibraryDivId = v4();
         this.reloadDefaultAnswerId = v4();
+        this.questionAnswerArr = [];
+        this.pageQuestionGroups$ = this._Store.select(questionGroupSelectors.pageQuestionGroups);
+        this.pageQuestions$ = this._Store.select(questionSelectors.pageQuestions);
+        this.isFirstPage$ = this._Store.select(surveySelectors.isFirstPage);
+        this.isLastPage$ = this._Store.select(surveySelectors.isLastPage);
+        this.curruntShowedSurveyPages$ = this._Store.select(surveySelectors.selectedPageIndex).pipe(map(x => x + 1));
         this.isPre = false;
         this.surveyLanguageId = null;
         this.applicantKey = null;
@@ -1263,119 +1480,59 @@ class SurveryLibComponent {
         this.surveyResultEmit = new EventEmitter();
         this.selectLanguageEmit = new EventEmitter();
         this.rForm = this._formBuilder.group({
-            currentPageIndex: [0],
-            questionArray: this._formBuilder.array([]),
-            ruleQuestionArray: this._formBuilder.array([])
+            currentPageId: new FormControl(0),
+            showedSurveyPages: new FormControl([])
+        });
+        this._Store.select(questionSelectors.questionAnswers).subscribe(arr => {
+            this.questionAnswerArr = arr;
         });
     }
     ngAfterViewInit() {
     }
+    questionIdentify(index, item) {
+        return item.questionId;
+    }
     ngOnInit() {
-        this._surveyLibService.surveyDataObsrv.pipe(debounceTime(300), distinctUntilChanged()).subscribe(survey => {
-            this.fCtrls.questionArray.clear();
-            this.fCtrls.ruleQuestionArray.clear();
-            this.surveyData = null;
-            if (survey != null) {
-                this.surveyData = survey;
-                this.loadQuestions(survey);
-            }
+        this._Store.select(surveySelectors.selectedPageId).subscribe(value => {
+            this.fCtrls.currentPageId.setValue(value);
         });
-        this._surveyLibService.addQuestionObsrv.subscribe(res => {
-            this.addQuestionGroup(res.question, res.pageIndex);
-        });
-        this._surveyLibService.removeQuestionObsrv.subscribe(res => {
-            const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == res.questionId);
-            this.fCtrls.questionArray.removeAt(index);
+        this._Store.select(surveySelectors.showedSurveyPages).subscribe(value => {
+            this.fCtrls.showedSurveyPages.setValue(value);
         });
     }
     onPaggingNext() {
-        var invalidRecords = this.haveInValidateQuestions();
-        if (invalidRecords.length == 0) {
-            const nextPageIndex = this.getNextShowedPage();
-            if (nextPageIndex != null) {
-                this.fCtrls.currentPageIndex.setValue(nextPageIndex);
-                setTimeout(() => {
-                    this.loadQuestionUpdates(nextPageIndex);
-                });
-                $('html, body').animate({
-                    scrollTop: $(`#survery-card-${this.surveryLibraryDivId}`).offset().top - 120
-                }, 2000);
+        this._Store.select(questionSelectors.pageQuestions).pipe(take(1)).subscribe(arr => {
+            var invalidRecords = this.haveInValidateQuestions(arr);
+            if (invalidRecords.length == 0) {
+                const nextPageId = this.getNextShowedPage();
+                if (nextPageId != null) {
+                    this._Store.dispatch(surveyActions.updatePageId({ pageId: nextPageId }));
+                    $('html, body').animate({
+                        scrollTop: $(`#survery-card-${this.surveryLibraryDivId}`).offset().top - 30
+                    }, 300);
+                }
+                else {
+                    this.surveyResultEmit.emit(this.questionAnswerArr);
+                }
             }
             else {
-                var questionArr = this.fCtrls.questionArray.value.filter(x => x.isMatrixGroup != true).map(x => {
-                    return {
-                        SurveyPageIndex: x.surveyPageIndex,
-                        QuestionId: x.questionId,
-                        QuestionType: x.questionType,
-                        AnswerId: x.answerId,
-                        AnswerText: x.answerText,
-                        AnswerIdArr: x.answerIdArr
-                    };
-                });
-                this.surveyResultEmit.emit(questionArr);
+                var firstQuestion = $('.invalid-question')[0];
+                $('html, body').animate({
+                    scrollTop: $(firstQuestion).offset().top - 250
+                }, 300);
             }
-        }
-        else {
-            var firstQuestion = invalidRecords[0];
-            $('html, body').animate({
-                scrollTop: $(`#question_${firstQuestion.questionId}`).offset().top - 120
-            }, 2000);
-        }
-    }
-    onPaggingBack() {
-        const prevPageIndex = this.getPrevShowedPage();
-        if (prevPageIndex != null) {
-            this.fCtrls.currentPageIndex.setValue(prevPageIndex);
-        }
-    }
-    onUpdateAnswers(model) {
-        model.forEach(elem => {
-            this.onUpdateAnswer(elem);
         });
     }
-    onUpdateAnswer(model) {
-        const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == model.QuestionId);
-        if (index > -1) {
-            var questionGroup = this.fCtrls.questionArray.controls[index];
-            questionGroup.controls.isValid.setValue(model.IsValid);
-            if (questionGroup.value.questionType == this.questionTypeEnum.TextInput) {
-                questionGroup.patchValue({
-                    answerId: model.SurveyAnswerId,
-                    answerText: model.Answer
-                });
-            }
-            else if (questionGroup.value.questionType == this.questionTypeEnum.CheckBox || questionGroup.value.questionType == this.questionTypeEnum.DropDownMulti) {
-                questionGroup.controls.answerIdArr.setValue(model.Answer);
-            }
-            else {
-                questionGroup.controls.answerId.setValue(model.Answer);
-            }
-            if (this.fCtrls.ruleQuestionArray.value.findIndex(x => x.questionId == model.QuestionId) > -1) {
-                this.checkRules(questionGroup.value.questionId);
-            }
+    onPaggingBack() {
+        const prevPageId = this.getPrevShowedPage();
+        if (prevPageId != null) {
+            this._Store.dispatch(surveyActions.updatePageId({ pageId: prevPageId }));
         }
     }
-    loadQuestions(survey) {
-        survey.surveyPages.forEach((page, pageIndex) => {
-            page.surveyQuestionGroups.forEach(group => {
-                group.surveyQuestions.forEach(question => {
-                    this.addQuestionGroup(question, pageIndex);
-                });
-            });
-        });
-        survey.surveyRules.forEach(rule => {
-            rule.ruleExps.forEach(ruleExp => {
-                this.fCtrls.ruleQuestionArray.push(this._formBuilder.group({
-                    questionId: ruleExp.questionId,
-                    ruleId: rule.ruleId
-                }));
-            });
-        });
-    }
-    haveInValidateQuestions() {
-        const currentPageIndex = this.fCtrls.currentPageIndex.value;
+    haveInValidateQuestions(questionArr) {
+        const formValue = this.rForm.value;
         var invalidRecords = [];
-        var arr = this.fCtrls.questionArray.value.filter(x => x.surveyPageIndex == currentPageIndex && x.isDisabled == false && x.isShow == true);
+        var arr = questionArr.filter(x => x.isDisabled == false && x.isShow == true);
         arr.map(x => {
             if (x.isRequired == true && x.isValid != true && x.isMatrixGroup != true) {
                 invalidRecords.push(x);
@@ -1389,159 +1546,38 @@ class SurveryLibComponent {
             }
         });
         if (invalidRecords.length > 0) {
-            $(`#survey-page_${currentPageIndex}`).addClass('survey-page_submitted');
+            $(`#survey-page_${formValue.currentPageId}`).addClass('survey-page_submitted');
+        }
+        else {
+            $(`#survey-page_${formValue.currentPageId}`).removeClass('survey-page_submitted');
         }
         return invalidRecords;
     }
-    checkRules(questionId) {
-        var selectedRuleIdArr = this.rForm.value.ruleQuestionArray.filter(x => x.questionId == questionId).map(x => Number(x.ruleId));
-        var arr = this.surveyData.surveyRules.filter(x => selectedRuleIdArr.find(c => c == x.ruleId) != null);
-        arr.forEach(rule => {
-            this._checkRuleExpsUsecase.execute({
-                ruleExps: rule.ruleExps,
-                questions: this.fCtrls.questionArray.value,
-                currentPageIndex: this.fCtrls.currentPageIndex.value
-            }).subscribe(result => {
-                var isPassed = result.exprestionResultArr.filter(x => x == false).length == 0;
-                if (isPassed) {
-                    rule.ruleResultQuestions.forEach(resultQuestion => {
-                        const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == resultQuestion.questionId);
-                        var questionGroup = this.fCtrls.questionArray.at(index);
-                        if (rule.logicActionId == LogicActionEnum.Show) {
-                            questionGroup.controls.isShow.setValue(true);
-                            this._surveyLibService.setQuestionIsShow(questionGroup.value.questionId, true);
-                        }
-                        else if (rule.logicActionId == LogicActionEnum.Hide) {
-                            questionGroup.controls.isShow.setValue(false);
-                            this._surveyLibService.setQuestionIsShow(questionGroup.value.questionId, false);
-                        }
-                        else if (rule.logicActionId == LogicActionEnum.Enable) {
-                            questionGroup.controls.isDisabled.setValue(false);
-                            this._surveyLibService.setQuestionIsDisabled(questionGroup.value.questionId, false);
-                        }
-                        else if (rule.logicActionId == LogicActionEnum.Disable) {
-                            questionGroup.controls.isDisabled.setValue(true);
-                            this._surveyLibService.setQuestionIsDisabled(questionGroup.value.questionId, true);
-                        }
-                        else if (rule.logicActionId == LogicActionEnum.SetAnswer) {
-                        }
-                        if (questionGroup.value.questionType == QuestionTypeEnum.Matrix && questionGroup.value.isMatrixGroup == true) {
-                            var subQuestions = this.fCtrls.questionArray.value.filter(x => x.surveyPageIndex == questionGroup.value.surveyPageIndex && x.isMatrixGroup == false);
-                            subQuestions.forEach(subQuestion => {
-                                const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == subQuestion.questionId);
-                                var subQuestionGroup = this.fCtrls.questionArray.at(index);
-                                subQuestionGroup.patchValue({
-                                    isShow: questionGroup.value.isShow,
-                                    isDisabled: questionGroup.value.isDisabled
-                                });
-                                this._surveyLibService.setQuestionIsDisabled(subQuestion.questionId, subQuestion.isDisabled);
-                                this._surveyLibService.setQuestionIsShow(subQuestion.questionId, subQuestion.isShow);
-                            });
-                        }
-                    });
-                }
-                else {
-                    rule.ruleResultQuestions.forEach(resultQuestion => {
-                        const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == resultQuestion.questionId);
-                        var questionGroup = this.fCtrls.questionArray.at(index);
-                        questionGroup.patchValue({
-                            isShow: questionGroup.value.isShow_default,
-                            isDisabled: questionGroup.value.isDisabled_default
-                        });
-                        this._surveyLibService.setQuestionIsDisabled(questionGroup.value.questionId, questionGroup.value.isDisabled_default);
-                        this._surveyLibService.setQuestionIsShow(questionGroup.value.questionId, questionGroup.value.isShow_default);
-                    });
-                }
-            });
-        });
-    }
     getNextShowedPage() {
-        var currentPageIndex = this.fCtrls.currentPageIndex.value;
-        var showedPages = this.showedSurveyPages;
-        var nextShowedPages = showedPages.filter(x => x > currentPageIndex);
+        const formValue = this.rForm.value;
+        var showedPages = formValue.showedSurveyPages;
+        var nextShowedPages = showedPages.filter(x => x > formValue.currentPageId);
         if (nextShowedPages.length > 0) {
             return nextShowedPages[0];
         }
         return null;
     }
     getPrevShowedPage() {
-        var currentPageIndex = this.fCtrls.currentPageIndex.value;
-        var showedPages = this.showedSurveyPages;
-        var prevShowedPages = showedPages.filter(x => x < currentPageIndex);
+        const formValue = this.rForm.value;
+        var showedPages = formValue.showedSurveyPages;
+        var prevShowedPages = showedPages.filter(x => x < formValue.currentPageId);
         if (prevShowedPages.length > 0) {
             return prevShowedPages[prevShowedPages.length - 1];
         }
         return null;
     }
-    addQuestionGroup(question, pageIndex) {
-        if (question.questionTypeId != 6) {
-            this.fCtrls.questionArray.push(this._formBuilder.group({
-                surveyPageIndex: pageIndex,
-                questionId: [question.questionId],
-                questionType: [question.questionTypeId],
-                inputTypeId: [question.surveyAnswers[0].inputTypeId],
-                isMatrixGroup: [false],
-                answerId: [null],
-                answerIdArr: [null],
-                answerText: [null],
-                isRequired: [question.isRequired],
-                isValid: [null],
-                isDisabled: [question.isReadOnly],
-                isShow: [question.isVisable],
-                isDisabled_default: [question.isReadOnly],
-                isShow_default: [question.isVisable]
-            }));
-        }
-        else {
-            this.fCtrls.questionArray.push(this._formBuilder.group({
-                surveyPageIndex: pageIndex,
-                questionId: [question.questionId],
-                questionType: [question.questionTypeId],
-                inputTypeId: [question.surveyAnswers[0].inputTypeId],
-                isMatrixGroup: [true],
-                answerId: [null],
-                answerIdArr: [null],
-                answerText: [null],
-                isRequired: [question.isRequired],
-                isValid: [null],
-                isDisabled: [question.isReadOnly],
-                isShow: [question.isVisable],
-                isDisabled_default: [question.isReadOnly],
-                isShow_default: [question.isVisable],
-            }));
-            question.surveySubQuestions.forEach(subQuestion => {
-                this.fCtrls.questionArray.push(this._formBuilder.group({
-                    surveyPageIndex: pageIndex,
-                    questionId: [subQuestion.questionId],
-                    questionType: [question.questionTypeId],
-                    inputTypeId: [question.surveyAnswers[0].inputTypeId],
-                    isMatrixGroup: [false],
-                    answerId: [null],
-                    answerIdArr: [null],
-                    answerText: [null],
-                    isRequired: [question.isRequired],
-                    isValid: [null],
-                    isDisabled: [question.isReadOnly],
-                    isShow: [question.isVisable],
-                    isDisabled_default: [question.isReadOnly],
-                    isShow_default: [question.isVisable]
-                }));
-            });
-        }
-    }
-    loadQuestionUpdates(pageIndex) {
-        this.fCtrls.questionArray.value.filter(x => x.surveyPageIndex == pageIndex).forEach(question => {
-            this._surveyLibService.setQuestionIsShow(question.questionId, question.isShow);
-            this._surveyLibService.setQuestionIsDisabled(question.questionId, question.isDisabled);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { 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 *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\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 *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\" [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n              <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageIndex]=\"surveyPageIndex\"></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=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{curruntShowedSurveyPages}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{showedSurveyPages?.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isArabicLang", "isTextArea", "setQuestion", "isDisabled"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageIndex", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"], outputs: ["emitter"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i3.Store }, { token: i5.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$ | async)\">\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$|async) |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-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: "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 *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\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 *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\">\r\n              </lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\" [isArabicLang]=\"isArabicLang\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n              <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageIndex]=\"surveyPageIndex\"></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=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{curruntShowedSurveyPages}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{showedSurveyPages?.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: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
+            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$ | async)\">\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$|async) |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-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"] }]
+        }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i3.Store }, { type: i5.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
                 type: Input
             }], surveyLanguageId: [{
                 type: Input
@@ -1555,20 +1591,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class FilterQuestionPipe {
-    transform(value, questionArr) {
-        return questionArr.find(x => x.questionId == value.questionId);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, name: "filterQuestion" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'filterQuestion'
-                }]
-        }] });
-
 class DefaultQuestionAnswerPipe {
     transform(value, questionId, reloadId) {
         if (value != null) {
@@ -1603,13 +1625,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+const { selectAll, selectIds } = questionAdapter.getSelectors();
+const initialSurveyState = {
+    selectedPageId: null,
+    questionGroupArr: questionGroupAdapter.getInitialState(),
+    questionArr: questionAdapter.getInitialState(),
+    ruleArr: ruleAdapter.getInitialState()
+};
+const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSurvey, (state, props) => {
+    return {
+        ...state,
+        questionArr: questionAdapter.setAll(props.questionArr, state.questionArr),
+        questionGroupArr: questionGroupAdapter.setAll(props.questionGroupArr, state.questionGroupArr),
+        ruleArr: ruleAdapter.setAll(props.ruleArr, state.ruleArr),
+        selectedPageId: props.selectedPageId
+    };
+}), on(surveyActions.addQuestion, (state, props) => {
+    return {
+        ...state,
+        questionArr: questionAdapter.addOne(props.question, state.questionArr)
+    };
+}), on(surveyActions.updateQuestionAnswer, (state, props) => {
+    const question = selectAll(state.questionArr).find(x => x.questionId == props.questionId);
+    if (question) {
+        var updateModel;
+        if (question.questionType == QuestionTypeEnum.TextInput) {
+            updateModel = {
+                id: props.questionId,
+                changes: {
+                    answerId: question.questionAllInfo.surveyAnswers[0].answerId,
+                    answerText: props.answer,
+                    isValid: props.isValid
+                }
+            };
+        }
+        else if (question.questionType == QuestionTypeEnum.CheckBox || question.questionType == QuestionTypeEnum.DropDownMulti) {
+            updateModel = {
+                id: props.questionId,
+                changes: {
+                    answerIdArr: props.answer,
+                    isValid: props.isValid
+                }
+            };
+        }
+        else {
+            updateModel = {
+                id: props.questionId,
+                changes: {
+                    answerId: props.answer,
+                    isValid: props.isValid
+                }
+            };
+        }
+        return {
+            ...state,
+            questionArr: questionAdapter.updateOne(updateModel, state.questionArr)
+        };
+    }
+    return {
+        ...state
+    };
+}), on(surveyActions.updateQuestionShow, (state, props) => {
+    return {
+        ...state,
+        questionArr: questionAdapter.updateOne({
+            id: props.questionId,
+            changes: {
+                isShow: props.isShow
+            }
+        }, state.questionArr)
+    };
+}), on(surveyActions.updateQuestionDisable, (state, props) => {
+    const question = selectAll(state.questionArr).find(x => x.questionId == props.questionId);
+    return {
+        ...state,
+        questionArr: questionAdapter.updateOne({
+            id: props.questionId,
+            changes: {
+                isDisabled: props.isDisabled
+            }
+        }, state.questionArr)
+    };
+}), on(surveyActions.removeQuestion, (state, props) => {
+    return {
+        ...state,
+        questionArr: questionAdapter.removeOne(props.questionId, state.questionArr)
+    };
+}), on(surveyActions.updatePageId, (state, props) => {
+    return {
+        ...state,
+        selectedPageId: props.pageId
+    };
+}));
+function surveyReducer(state, action) {
+    return _surveyReducer(state, action);
+}
+
 class SurveryLibModule {
     static forRoot(config) {
         return {
             ngModule: SurveryLibModule,
             providers: [
                 { provide: LibConfigService, useValue: config }
-            ]
+            ],
         };
     }
     static forChild() {
@@ -1631,8 +1749,12 @@ class SurveryLibModule {
             DefaultQuestionAnswersPipe,
             TextBoxTypeAttrPipe,
             QuestionCascadeTemplateComponent,
-            MaskedForMinMaxDirective], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule], exports: [SurveryLibComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule] }); }
+            MaskedForMinMaxDirective,
+            FindQuestionPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule, i3.StoreFeatureModule, i2.EffectsFeatureModule], 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, NgsFormsModule, NgSelectModule,
+            StoreModule.forFeature('survey-lib', surveyReducer),
+            EffectsModule.forFeature([]), StoreModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, decorators: [{
             type: NgModule,
@@ -1651,13 +1773,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         DefaultQuestionAnswersPipe,
                         TextBoxTypeAttrPipe,
                         QuestionCascadeTemplateComponent,
-                        MaskedForMinMaxDirective
+                        MaskedForMinMaxDirective,
+                        FindQuestionPipe
                     ],
                     imports: [
-                        CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule
+                        CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule,
+                        StoreModule.forFeature('survey-lib', surveyReducer),
+                        EffectsModule.forFeature([])
                     ],
                     exports: [
-                        SurveryLibComponent
+                        SurveryLibComponent,
+                        StoreModule
                     ]
                 }]
         }] });