survery-lib 0.2.2 → 2.1.1

package/fesm2022/survery-lib.mjs

@@ -2,19 +2,21 @@ import * as i0 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, distinctUntilChanged, map, filter, pairwise, take } from 'rxjs';
-import * as i5 from '@angular/forms';
+import * as i1 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 i6 from '@ng-select/ng-select';
+import * as i5 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 i5$1 from 'ngx-bootstrap/rating';
+import { RatingModule } from 'ngx-bootstrap/rating';
+import * as i6 from 'ngx-bootstrap/pagination';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
 import * as i2 from '@ngrx/effects';
 import { EffectsModule } from '@ngrx/effects';
 
@@ -28,6 +30,7 @@ var QuestionTypeEnum;
     QuestionTypeEnum[QuestionTypeEnum["Matrix"] = 6] = "Matrix";
     QuestionTypeEnum[QuestionTypeEnum["DropDownMulti"] = 7] = "DropDownMulti";
     QuestionTypeEnum[QuestionTypeEnum["Cascade"] = 8] = "Cascade";
+    QuestionTypeEnum[QuestionTypeEnum["FeedBack"] = 9] = "FeedBack";
 })(QuestionTypeEnum || (QuestionTypeEnum = {}));
 
 var InputTypeEnum;
@@ -40,6 +43,8 @@ var InputTypeEnum;
     InputTypeEnum[InputTypeEnum["Password"] = 6] = "Password";
     InputTypeEnum[InputTypeEnum["Text"] = 7] = "Text";
     InputTypeEnum[InputTypeEnum["Phone"] = 8] = "Phone";
+    InputTypeEnum[InputTypeEnum["Stars"] = 20] = "Stars";
+    InputTypeEnum[InputTypeEnum["Pagination"] = 21] = "Pagination";
 })(InputTypeEnum || (InputTypeEnum = {}));
 
 function selectQuestionId(a) {
@@ -137,6 +142,12 @@ const surveyActions = {
     updatePageId,
 };
 
+var EvaluationTypeEnum;
+(function (EvaluationTypeEnum) {
+    EvaluationTypeEnum[EvaluationTypeEnum["Stars"] = 1] = "Stars";
+    EvaluationTypeEnum[EvaluationTypeEnum["Pagination"] = 2] = "Pagination";
+})(EvaluationTypeEnum || (EvaluationTypeEnum = {}));
+
 class SurveyLibService {
     get reloadSurveyObsrv() {
         return this.reloadSurveySubject.asObservable();
@@ -172,7 +183,8 @@ class SurveyLibService {
     }
     setsurveyAnswers(model) {
         model.defaultAnswers.forEach(answer => {
-            if (answer.QuestionType == QuestionTypeEnum.TextInput) {
+            if (answer.QuestionType == QuestionTypeEnum.TextInput ||
+                answer.QuestionType == QuestionTypeEnum.FeedBack) {
                 this._Store.dispatch(surveyActions.updateQuestionAnswer({
                     questionId: answer.QuestionId,
                     answer: answer.AnswerText,
@@ -200,25 +212,35 @@ class SurveyLibService {
         this.reloadSurveySubject.next(v4());
     }
     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
-            }];
+        var questionArr = [];
+        var questionNgrxModel = {
+            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.FeedBack) {
+            if (question.surveyAnswers[0].evaluationTypeId == EvaluationTypeEnum.Stars) {
+                questionNgrxModel.inputTypeId = InputTypeEnum.Stars;
+            }
+            else if (question.surveyAnswers[0].evaluationTypeId == EvaluationTypeEnum.Pagination) {
+                questionNgrxModel.inputTypeId = InputTypeEnum.Pagination;
+            }
+        }
+        questionArr.push(questionNgrxModel);
         if (question.questionTypeId == QuestionTypeEnum.Matrix) {
             question.surveySubQuestions.forEach(subQuestion => {
                 questionArr.push({
@@ -285,7 +307,7 @@ class CheckRuleExpsUsecase {
             const index = params.questions.findIndex(x => x.questionId == ruleExp.questionId);
             var questionGroupValue = params.questions.at(index);
             var result;
-            if (questionGroupValue.questionType == QuestionTypeEnum.TextInput) {
+            if (questionGroupValue.questionType == QuestionTypeEnum.TextInput || questionGroupValue.questionType == QuestionTypeEnum.FeedBack) {
                 result = this.checkRuleExpForAnswerText(ruleExp, questionGroupValue.answerText);
             }
             else if (questionGroupValue.questionType == QuestionTypeEnum.CheckBox || questionGroupValue.questionType == QuestionTypeEnum.DropDownMulti) {
@@ -296,7 +318,7 @@ class CheckRuleExpsUsecase {
             }
             useCaseResult.exprestionResultArr.push(result);
         });
-        console.log(`Questions not passed ${useCaseResult.exprestionResultArr.filter(x => x == false).length}`);
+        // console.log(`Questions not passed ${useCaseResult.exprestionResultArr.filter(x => x == false).length}`);
         return of(useCaseResult);
     }
     checkRuleExpForAnswerId(ruleExp, answerId) {
@@ -602,18 +624,18 @@ class QuestionTextTemplateComponent {
         this._Store = _Store;
         this.isArabicLang = false;
         this.rForm = this._formBuilder.group({
-            id: [null],
-            name: [null],
-            title: [null],
-            typeId: [null],
-            description: [null],
-            surveyAnswerId: [null],
-            answer: [null],
-            isDisabled: [false],
-            isShow: [true],
-            inputTypeId: [null],
-            inputMin: [null],
-            inputMax: [null]
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            surveyAnswerId: new FormControl(null),
+            answer: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
+            inputTypeId: new FormControl(null),
+            inputMin: new FormControl(null),
+            inputMax: new FormControl(null),
         });
     }
     ngOnInit() {
@@ -674,7 +696,7 @@ 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 }, { 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" }] }); }
+    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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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,
@@ -708,9 +730,9 @@ class QuestionRadioButtonTemplateComponent {
             });
             value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
                 this.fCtrls.answerArray.push(this._formBuilder.group({
-                    id: [surveryAnswer.answerId],
-                    title: [surveryAnswer.answerTitle],
-                    isSelected: [false]
+                    id: new FormControl(surveryAnswer.answerId),
+                    title: new FormControl(surveryAnswer.answerTitle),
+                    isSelected: new FormControl(false)
                 }));
             });
             if (value.isRequired == true) {
@@ -725,14 +747,14 @@ class QuestionRadioButtonTemplateComponent {
         this._Store = _Store;
         this.elemId = v4();
         this.rForm = this._formBuilder.group({
-            id: [null],
-            name: [null],
-            title: [null],
-            typeId: [null],
-            description: [null],
-            answer: [null],
-            isDisabled: [false],
-            isShow: [true],
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            answer: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
             answerArray: this._formBuilder.array([])
         });
     }
@@ -771,17 +793,17 @@ class QuestionRadioButtonTemplateComponent {
         });
     }
     onChangeAnswer(item) {
-        this.fCtrls.answer.setValue(item.id);
+        this.fCtrls.answer.setValue(item.value.id);
     }
     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 }, { 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"] }] }); }
+    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)\"  [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}\">\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" }]
+            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)\"  [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
             }] } });
@@ -807,9 +829,9 @@ class QuestionCheckBoxTemplateComponent {
             });
             value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
                 this.fCtrls.answerArray.push(this._formBuilder.group({
-                    id: [surveryAnswer.answerId],
-                    title: [surveryAnswer.answerTitle],
-                    isSelected: [false]
+                    id: new FormControl(surveryAnswer.answerId),
+                    title: new FormControl(surveryAnswer.answerTitle),
+                    isSelected: new FormControl(false)
                 }));
             });
             if (value.isRequired == true) {
@@ -824,14 +846,14 @@ class QuestionCheckBoxTemplateComponent {
         this._Store = _Store;
         this.elemId = v4();
         this.rForm = this._formBuilder.group({
-            id: [null],
-            name: [null],
-            title: [null],
-            typeId: [null],
-            description: [null],
-            answer: [null],
-            isDisabled: [false],
-            isShow: [true],
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            answer: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
             answerArray: this._formBuilder.array([])
         });
     }
@@ -875,10 +897,10 @@ class QuestionCheckBoxTemplateComponent {
     onChangeAnswer(item, event) {
         var answerArr = this.fCtrls.answer.value || [];
         if (event.target.checked == true) {
-            answerArr.push(item.id);
+            answerArr.push(item.value.id);
         }
         else {
-            answerArr = answerArr.filter(x => x != item.id);
+            answerArr = answerArr.filter(x => x != item.value.id);
         }
         answerArr = answerArr.length == 0 ? [] : answerArr;
         this.fCtrls.answer.setValue(answerArr);
@@ -887,11 +909,11 @@ class QuestionCheckBoxTemplateComponent {
         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 }, { 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"] }] }); }
+    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 ,$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}\">\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" }]
+            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 ,$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
             }] } });
@@ -927,14 +949,14 @@ class QuestionDropdownTemplateComponent {
         this._Store = _Store;
         this.emitter = new EventEmitter();
         this.rForm = this._formBuilder.group({
-            id: [null],
-            name: [null],
-            title: [null],
-            typeId: [null],
-            description: [null],
-            answer: [null],
-            isDisabled: [false],
-            isShow: [true]
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            answer: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
         });
     }
     ngOnInit() {
@@ -976,7 +998,7 @@ class QuestionDropdownTemplateComponent {
         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 }, { 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"] }] }); }
+    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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, decorators: [{
             type: Component,
@@ -1005,9 +1027,9 @@ class QuestionMatrixTemplateComponent {
             });
             value.questionAllInfo.surveySubQuestions.forEach(x => {
                 var group = this._formBuilder.group({
-                    subQuestionId: [x.questionId],
-                    questionTitle: [x.questionTitle],
-                    answer: [null],
+                    subQuestionId: new FormControl(x.questionId),
+                    questionTitle: new FormControl(x.questionTitle),
+                    answer: new FormControl(null),
                 });
                 if (value.isRequired == true) {
                     group.controls.answer.addValidators([Validators.required]);
@@ -1031,10 +1053,10 @@ class QuestionMatrixTemplateComponent {
         this._Store = _Store;
         this.elemId = v4();
         this.rForm = this._formBuilder.group({
-            id: [null],
-            typeId: [null],
-            isDisabled: [false],
-            isShow: [true],
+            id: new FormControl(null),
+            typeId: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
             subQuestionArray: this._formBuilder.array([])
         });
     }
@@ -1067,7 +1089,7 @@ class QuestionMatrixTemplateComponent {
         });
     }
     onChangeAnswer(question, answer) {
-        const index = this.fCtrls.subQuestionArray.value.findIndex(x => x.subQuestionId == question.subQuestionId);
+        const index = this.fCtrls.subQuestionArray.value.findIndex(x => x.subQuestionId == question.value.subQuestionId);
         var subQuestionGroup = this.fCtrls.subQuestionArray.controls[index];
         subQuestionGroup.controls.answer.setValue(answer.answerId);
         // this.emitter.emit({
@@ -1080,11 +1102,11 @@ class QuestionMatrixTemplateComponent {
         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 }, { 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"] }] }); }
+    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 ,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: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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;\"\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"] }]
+            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 ,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
             }] } });
@@ -1110,9 +1132,9 @@ class QuestionBooleanTemplateComponent {
             });
             value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
                 this.fCtrls.answerArray.push(this._formBuilder.group({
-                    id: [surveryAnswer.answerId],
-                    title: [surveryAnswer.answerTitle],
-                    isSelected: [false]
+                    id: new FormControl(surveryAnswer.answerId),
+                    title: new FormControl(surveryAnswer.answerTitle),
+                    isSelected: new FormControl(false)
                 }));
             });
             if (value.isRequired == true) {
@@ -1127,15 +1149,15 @@ class QuestionBooleanTemplateComponent {
         this._Store = _Store;
         this.elemId = v4();
         this.rForm = this._formBuilder.group({
-            id: [null],
-            name: [null],
-            title: [null],
-            typeId: [null],
-            description: [null],
-            answer: [null],
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            answer: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
             answerArray: this._formBuilder.array([]),
-            isDisabled: [false],
-            isShow: [true]
         });
     }
     ngOnInit() {
@@ -1169,17 +1191,17 @@ class QuestionBooleanTemplateComponent {
         });
     }
     onChangeAnswer(item) {
-        this.fCtrls.answer.setValue(item.id);
+        this.fCtrls.answer.setValue(item.value.id);
     }
     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 }, { 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"] }] }); }
+    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)\"\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\"\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>" }]
+            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)\"\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
             }] } });
@@ -1205,13 +1227,13 @@ class QuestionDropdownMultiTemplateComponent {
             });
             value.questionAllInfo.surveyAnswers.forEach(surveryAnswer => {
                 this.fCtrls.answerArray.push(this._formBuilder.group({
-                    id: [surveryAnswer.answerId],
-                    title: [surveryAnswer.answerTitle],
-                    isSelected: [false]
+                    id: new FormControl(surveryAnswer.answerId),
+                    title: new FormControl(surveryAnswer.answerTitle),
+                    isSelected: new FormControl(false)
                 }));
             });
             if (value.isRequired == true) {
-                this.fCtrls.answer.addValidators([Validators$1.required]);
+                this.fCtrls.answer.addValidators([Validators.required]);
                 this.fCtrls.answer.updateValueAndValidity();
             }
         }
@@ -1222,14 +1244,14 @@ class QuestionDropdownMultiTemplateComponent {
         this._Store = _Store;
         this.elemId = v4();
         this.rForm = this._formBuilder.group({
-            id: [null],
-            name: [null],
-            title: [null],
-            typeId: [null],
-            description: [null],
-            answer: [null],
-            isDisabled: [false],
-            isShow: [true],
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            answer: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
             answerArray: this._formBuilder.array([])
         });
     }
@@ -1268,7 +1290,7 @@ class QuestionDropdownMultiTemplateComponent {
         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 }, { 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"] }] }); }
+    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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownMultiTemplateComponent, decorators: [{
             type: Component,
@@ -1404,14 +1426,14 @@ class QuestionCascadeTemplateComponent {
         }
     }
     identify(index, item) {
-        return item.id;
+        return item.value.id;
     }
     setQuestions(value) {
         this.surveyQuestionArr.push(value);
         var group = this._formBuilder.group({
-            id: [value.questionId],
-            typeId: [value.questionTypeId],
-            answer: null
+            id: new FormControl(value.questionId),
+            typeId: new FormControl(value.questionTypeId),
+            answer: new FormControl(null)
         });
         if (value.isRequired == true) {
             group.controls.answer.addValidators([Validators.required]);
@@ -1421,11 +1443,11 @@ class QuestionCascadeTemplateComponent {
         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 }, { 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" }] }); }
+    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.controls; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"(pageQuestions$  |async) |findQuestion :item.value.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\">\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>" }]
+            args: [{ selector: 'lib-question-cascade-template', template: "<ng-container *ngFor=\"let item of questionFormArray.controls; trackBy:identify ; let i = index\">\r\n      <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"(pageQuestions$  |async) |findQuestion :item.value.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: [{
@@ -1440,6 +1462,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class QuestionFeedbackTemplateComponent {
+    get fCtrls() {
+        return this.rForm.controls;
+    }
+    get questionTypeEnum() {
+        return QuestionTypeEnum;
+    }
+    get inputTypeEnum() {
+        return InputTypeEnum;
+    }
+    set setQuestion(value) {
+        if (!this.surveyQuestion) {
+            this.surveyQuestion = value.questionAllInfo;
+            this.rForm.patchValue({
+                id: value.questionId,
+                name: value.questionAllInfo.questionName,
+                title: value.questionAllInfo.questionTitle,
+                typeId: value.questionAllInfo.questionTypeId,
+                description: value.questionAllInfo.questionDescription,
+                isDisabled: value.questionAllInfo.isReadOnly,
+                isShow: value.questionAllInfo.isVisable
+            });
+            if (value.questionAllInfo.surveyAnswers[0]?.answerId != null && value.questionAllInfo.surveyAnswers[0]?.answerId != undefined) {
+                this.fCtrls.surveyAnswerId.setValue(value.questionAllInfo.surveyAnswers[0].answerId);
+                if (value.questionAllInfo.surveyAnswers[0].evaluationTypeId == EvaluationTypeEnum.Stars) {
+                    this.fCtrls.inputTypeId.setValue(InputTypeEnum.Stars);
+                }
+                else if (value.questionAllInfo.surveyAnswers[0].evaluationTypeId == EvaluationTypeEnum.Pagination) {
+                    this.fCtrls.inputTypeId.setValue(InputTypeEnum.Pagination);
+                }
+            }
+            if (value.isRequired == true) {
+                this.fCtrls.answer.addValidators([Validators.required]);
+                this.fCtrls.answer.updateValueAndValidity();
+            }
+            this.toggleEnableAnswer(value.questionAllInfo.isReadOnly);
+        }
+    }
+    set isDisabled(value) {
+        this.toggleEnableAnswer(value);
+    }
+    constructor(_formBuilder, _surveyLibService, _Store) {
+        this._formBuilder = _formBuilder;
+        this._surveyLibService = _surveyLibService;
+        this._Store = _Store;
+        this.isArabicLang = false;
+        this.rForm = this._formBuilder.group({
+            id: new FormControl(null),
+            name: new FormControl(null),
+            title: new FormControl(null),
+            typeId: new FormControl(null),
+            description: new FormControl(null),
+            surveyAnswerId: new FormControl(null),
+            answer: new FormControl(null),
+            isDisabled: new FormControl(false),
+            isShow: new FormControl(true),
+            inputTypeId: new FormControl(null),
+        });
+    }
+    ngOnInit() {
+        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
+            setTimeout(() => {
+                const formValue = this.rForm.value;
+                this._Store.dispatch(surveyActions.updateQuestionAnswer({
+                    questionId: formValue.id,
+                    answer: value,
+                    isValid: this.fCtrls.answer.valid
+                }));
+            }, 100);
+        });
+        this._Store.select(questionSelectors.pageQuestions).pipe(map(arr => arr.find(x => x.questionId == this.fCtrls.id.value)))
+            .pipe(filter(x => x != null), pairwise()).subscribe(value => {
+            const oldValue = value[0];
+            const newValue = value[1];
+            //updated answer
+            if (oldValue?.answerText != newValue?.answerText) {
+                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);
+                }
+            }
+        });
+    }
+    toggleEnableAnswer(isReadOnly) {
+        if (isReadOnly == true) {
+            this.fCtrls.answer.disable();
+        }
+        else {
+            this.fCtrls.answer.enable();
+        }
+        this.fCtrls.answer.updateValueAndValidity();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionFeedbackTemplateComponent, 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: QuestionFeedbackTemplateComponent, selector: "lib-question-feedback-template", inputs: { isArabicLang: "isArabicLang", setQuestion: "setQuestion", isDisabled: "isDisabled" }, 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    </h3>\n    <div class=\"text-quastion \" >\n        <ng-container *ngIf=\"fCtrls.inputTypeId.value == inputTypeEnum.Stars else paginationTemplate\">\n            <rating  [formControl]=\"fCtrls.answer\" [max]=\"surveyQuestion?.surveyAnswers[0].maxValue\"></rating>\n        </ng-container>\n        <ng-template #paginationTemplate>\n            <div style=\"margin-top: 20px;\">\n            <pagination   nextText=\">\" previousText=\"<\" [formControl]=\"fCtrls.answer\"\n                 [itemsPerPage]=\"1\" [totalItems]=\"surveyQuestion?.surveyAnswers[0].maxValue\" [maxSize]=\"10\"></pagination>\n        </div>\n        </ng-template>\n    </div>", styles: [":host ::ng-deep rating .bs-rating-star{font-size:45px;color:#ffc107}:host ::ng-deep rating .bs-rating-star.active{color:#ffc107}\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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5$1.RatingComponent, selector: "rating", inputs: ["max", "readonly", "titles", "customTemplate"], outputs: ["onHover", "onLeave"] }, { kind: "component", type: i6.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionFeedbackTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-question-feedback-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    </h3>\n    <div class=\"text-quastion \" >\n        <ng-container *ngIf=\"fCtrls.inputTypeId.value == inputTypeEnum.Stars else paginationTemplate\">\n            <rating  [formControl]=\"fCtrls.answer\" [max]=\"surveyQuestion?.surveyAnswers[0].maxValue\"></rating>\n        </ng-container>\n        <ng-template #paginationTemplate>\n            <div style=\"margin-top: 20px;\">\n            <pagination   nextText=\">\" previousText=\"<\" [formControl]=\"fCtrls.answer\"\n                 [itemsPerPage]=\"1\" [totalItems]=\"surveyQuestion?.surveyAnswers[0].maxValue\" [maxSize]=\"10\"></pagination>\n        </div>\n        </ng-template>\n    </div>", styles: [":host ::ng-deep rating .bs-rating-star{font-size:45px;color:#ffc107}:host ::ng-deep rating .bs-rating-star.active{color:#ffc107}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: i3.Store }]; }, propDecorators: { isArabicLang: [{
+                type: Input
+            }], setQuestion: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }] } });
+
 class FilterQuestionPipe {
     transform(arr, questionGroupId) {
         return arr.filter(x => x.questionGroupId == questionGroupId && x.parentQuestionId == null);
@@ -1582,13 +1718,13 @@ class SurveryLibComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i3.Store }, { token: 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i3.Store }, { token: i1.FormBuilder }, { token: CheckRuleExpsUsecase }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", inputs: { isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", isArabicLang: "isArabicLang" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of (pageQuestionGroups$ | 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-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n               <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n               *ngIf=\"question.questionType == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageId", "questionGroupId", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"] }, { kind: "component", type: QuestionFeedbackTemplateComponent, selector: "lib-question-feedback-template", inputs: ["isArabicLang", "setQuestion", "isDisabled"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\">\r\n  <div [attr.id]=\"'survey-page_'+fCtrls.currentPageId.value\">\r\n    <ng-container *ngFor=\"let item of (pageQuestionGroups$ | 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: [{
+            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-feedback-template #questionFeedTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.FeedBack\"\r\n                [isArabicLang]=\"isArabicLang\"></lib-question-feedback-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.RadioButton\">\r\n              </lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-dropdown-multi-template [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.DropDownMulti\">\r\n              </lib-question-dropdown-multi-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                *ngIf=\"question.questionType == questionTypeEnum.CheckBox\">\r\n              </lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                 *ngIf=\"question.questionType == questionTypeEnum.Matrix\">\r\n              </lib-question-matrix-template>\r\n\r\n               <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n               *ngIf=\"question.questionType == questionTypeEnum.Cascade\"\r\n                [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\"\r\n                [pageId]=\"question.surveyPageId\" [questionGroupId]=\"question.questionGroupId\"></lib-question-cascade-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"fCtrls.showedSurveyPages.value.length > 0\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\">\r\n        <span>{{ curruntShowedSurveyPages$ | async}}</span>\r\n        <span class=\"ms-2 me-2\">{{isArabicLang ? '\u0645\u0646' : 'of'}} </span>\r\n        <span>{{fCtrls.showedSurveyPages.value.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i3.Store }, { type: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
                 type: Input
             }], surveyLanguageId: [{
                 type: Input
@@ -1660,7 +1796,7 @@ const _surveyReducer = createReducer(initialSurveyState, on(surveyActions.loadSu
     const question = selectAll(state.questionArr).find(x => x.questionId == props.questionId);
     if (question) {
         var updateModel;
-        if (question.questionType == QuestionTypeEnum.TextInput) {
+        if (question.questionType == QuestionTypeEnum.TextInput || question.questionType == QuestionTypeEnum.FeedBack) {
             updateModel = {
                 id: props.questionId,
                 changes: {
@@ -1761,11 +1897,12 @@ class SurveryLibModule {
             TextBoxTypeAttrPipe,
             QuestionCascadeTemplateComponent,
             MaskedForMinMaxDirective,
-            FindQuestionPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule, i3.StoreFeatureModule, i2.EffectsFeatureModule], exports: [SurveryLibComponent,
+            FindQuestionPipe,
+            QuestionFeedbackTemplateComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule, i3.StoreFeatureModule, i2.EffectsFeatureModule, RatingModule, PaginationModule], exports: [SurveryLibComponent,
             StoreModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule,
             StoreModule.forFeature('survey-lib', surveyReducer),
-            EffectsModule.forFeature([]), StoreModule] }); }
+            EffectsModule.forFeature([]), RatingModule, PaginationModule, StoreModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, decorators: [{
             type: NgModule,
@@ -1785,12 +1922,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         TextBoxTypeAttrPipe,
                         QuestionCascadeTemplateComponent,
                         MaskedForMinMaxDirective,
-                        FindQuestionPipe
+                        FindQuestionPipe,
+                        QuestionFeedbackTemplateComponent
                     ],
                     imports: [
-                        CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule,
+                        CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgSelectModule,
                         StoreModule.forFeature('survey-lib', surveyReducer),
-                        EffectsModule.forFeature([])
+                        EffectsModule.forFeature([]), RatingModule, PaginationModule
                     ],
                     exports: [
                         SurveryLibComponent,