survery-lib 0.1.4 → 0.1.6

package/fesm2022/survery-lib.mjs

@@ -33,12 +33,19 @@ class SurveyLibService {
     get surveyDataObsrv() {
         return this.surveyDataSubject.asObservable();
     }
+    get surveyAnswersObsrv() {
+        return this.surveyAnswersSubject.asObservable();
+    }
     constructor() {
         this.surveyDataSubject = new Subject();
+        this.surveyAnswersSubject = new Subject();
     }
     setSurveyData(survey) {
         this.surveyDataSubject.next(survey);
     }
+    setsurveyAnswers(model) {
+        this.surveyAnswersSubject.next(model);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveyLibService, providedIn: 'root' }); }
 }
@@ -232,9 +239,9 @@ class QuestionTextTemplateComponent {
             typeId: value.questionTypeId,
             description: value.questionDescription
         });
-        if (value.surveyAnswers[0]?.answerId != null && value.surveyAnswers[0]?.answerId != undefined) {
-            this.fCtrls.surveyAnswerId.setValue(value.surveyAnswers[0].answerId);
-        }
+        // if (value.surveyAnswers[0]?.answerId != null && value.surveyAnswers[0]?.answerId != undefined) {
+        //   this.fCtrls.surveyAnswerId.setValue(value.surveyAnswers[0].answerId);
+        // }
         if (value.isRequired == true) {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
@@ -245,6 +252,12 @@ class QuestionTextTemplateComponent {
     set isDisabled(value) {
         this.toggleEnableAnswer(value);
     }
+    set setAnswer(defaultAnswer) {
+        if (defaultAnswer != null) {
+            this.fCtrls.answer.setValue(defaultAnswer.AnswerText);
+            console.log(this.fCtrls.answer.value);
+        }
+    }
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
         this.emitter = new EventEmitter();
@@ -258,8 +271,6 @@ class QuestionTextTemplateComponent {
             surveyAnswerId: [null],
             answer: [null]
         });
-    }
-    ngOnInit() {
         this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
             const formValue = this.rForm.value;
             this.emitter.emit({
@@ -269,7 +280,8 @@ class QuestionTextTemplateComponent {
                 SurveyAnswerId: formValue.surveyAnswerId
             });
         });
-        this.fCtrls.answer.setValue(null);
+    }
+    ngOnInit() {
     }
     convertToFormControl(element) {
         return element;
@@ -284,7 +296,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 }], 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: { isShow: "isShow", isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n         [disabled]=\"isDisabled\"   *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            [disabled]=\"isDisabled\" ></textarea>\n        </ng-template>\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { isShow: "isShow", isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled", setAnswer: "setAnswer" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n         [disabled]=\"isDisabled\"   *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            [disabled]=\"isDisabled\" ></textarea>\n        </ng-template>\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, decorators: [{
             type: Component,
@@ -299,6 +311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }], isDisabled: [{
                 type: Input
+            }], setAnswer: [{
+                type: Input
             }] } });
 
 class QuestionRadioButtonTemplateComponent {
@@ -317,6 +331,13 @@ class QuestionRadioButtonTemplateComponent {
             typeId: value.questionTypeId,
             description: value.questionDescription
         });
+        value.surveyAnswers.forEach(surveryAnswer => {
+            this.fCtrls.answerArray.push(this._formBuilder.group({
+                id: [surveryAnswer.answerId],
+                title: [surveryAnswer.answerTitle],
+                isSelected: [false]
+            }));
+        });
         if (value.isRequired == true) {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
@@ -324,6 +345,13 @@ class QuestionRadioButtonTemplateComponent {
         this.isShow = value.isVisable;
         this.isDisabled = value.isReadOnly;
     }
+    set setAnswer(defaultAnswer) {
+        if (defaultAnswer != null) {
+            this.fCtrls.answer.setValue(defaultAnswer.AnswerId);
+            const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == defaultAnswer.AnswerId);
+            this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+        }
+    }
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
         this.elemId = v4();
@@ -336,7 +364,8 @@ class QuestionRadioButtonTemplateComponent {
             title: [null],
             typeId: [null],
             description: [null],
-            answer: [null]
+            answer: [null],
+            answerArray: this._formBuilder.array([])
         });
     }
     ngOnInit() {
@@ -351,17 +380,17 @@ class QuestionRadioButtonTemplateComponent {
         this.fCtrls.answer.setValue(null);
     }
     onChangeAnswer(item) {
-        this.fCtrls.answer.setValue(item.answerId);
+        this.fCtrls.answer.setValue(item.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 }], 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: { isShow: "isShow", isDisabled: "isDisabled", 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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"  [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion", setAnswer: "setAnswer" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"  [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -370,6 +399,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }], setQuestion: [{
                 type: Input
+            }], setAnswer: [{
+                type: Input
             }] } });
 
 class QuestionCheckBoxTemplateComponent {
@@ -388,6 +419,13 @@ class QuestionCheckBoxTemplateComponent {
             typeId: value.questionTypeId,
             description: value.questionDescription
         });
+        value.surveyAnswers.forEach(surveryAnswer => {
+            this.fCtrls.answerArray.push(this._formBuilder.group({
+                id: [surveryAnswer.answerId],
+                title: [surveryAnswer.answerTitle],
+                isSelected: [false]
+            }));
+        });
         if (value.isRequired == true) {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
@@ -395,6 +433,15 @@ class QuestionCheckBoxTemplateComponent {
         this.isShow = value.isVisable;
         this.isDisabled = value.isReadOnly;
     }
+    set setAnswer(defaultAnswer) {
+        if (defaultAnswer != null) {
+            this.fCtrls.answer.setValue(defaultAnswer.AnswerIdArr);
+            defaultAnswer.AnswerIdArr.forEach(answerId => {
+                const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == defaultAnswer.AnswerId);
+                this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+            });
+        }
+    }
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
         this.elemId = v4();
@@ -407,7 +454,8 @@ class QuestionCheckBoxTemplateComponent {
             title: [null],
             typeId: [null],
             description: [null],
-            answer: [null]
+            answer: [null],
+            answerArray: this._formBuilder.array([])
         });
     }
     ngOnInit() {
@@ -424,10 +472,10 @@ class QuestionCheckBoxTemplateComponent {
     onChangeAnswer(item, event) {
         var answerArr = this.fCtrls.answer.value || [];
         if (event.target.checked == true) {
-            answerArr.push(item.answerId);
+            answerArr.push(item.id);
         }
         else {
-            answerArr = answerArr.filter(x => x != item.answerId);
+            answerArr = answerArr.filter(x => x != item.id);
         }
         answerArr = answerArr.length == 0 ? [] : answerArr;
         this.fCtrls.answer.setValue(answerArr);
@@ -436,11 +484,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 }], 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: { isShow: "isShow", isDisabled: "isDisabled", 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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\n             (change)=\"onChangeAnswer(item,$event)\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion", setAnswer: "setAnswer" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\n             (change)=\"onChangeAnswer(item,$event)\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -449,6 +497,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }], setQuestion: [{
                 type: Input
+            }], setAnswer: [{
+                type: Input
             }] } });
 
 class QuestionDropdownTemplateComponent {
@@ -474,6 +524,11 @@ class QuestionDropdownTemplateComponent {
         this.isShow = value.isVisable;
         this.isDisabled = value.isReadOnly;
     }
+    set setAnswer(defaultAnswer) {
+        if (defaultAnswer != null) {
+            this.fCtrls.answer.setValue(defaultAnswer.AnswerId);
+        }
+    }
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
         this.emitter = new EventEmitter();
@@ -503,7 +558,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 }], 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: { isShow: "isShow", isDisabled: "isDisabled", 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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\">\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\n        </select>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion", setAnswer: "setAnswer" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\">\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\n        </select>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, decorators: [{
             type: Component,
@@ -516,6 +571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }], setQuestion: [{
                 type: Input
+            }], setAnswer: [{
+                type: Input
             }] } });
 
 class QuestionMatrixTemplateComponent {
@@ -535,7 +592,7 @@ class QuestionMatrixTemplateComponent {
             var group = this._formBuilder.group({
                 subQuestionId: [x.questionId],
                 questionTitle: [x.questionTitle],
-                answer: [null]
+                answer: [null],
             });
             if (value.isRequired == true) {
                 group.controls.answer.addValidators([Validators.required]);
@@ -546,6 +603,14 @@ class QuestionMatrixTemplateComponent {
         this.isShow = value.isVisable;
         this.isDisabled = value.isReadOnly;
     }
+    set setAnswers(defaultAnswerArr) {
+        this.fCtrls.subQuestionArray.controls.forEach(group => {
+            var answer = defaultAnswerArr.find(x => x.QuestionId == group.value.subQuestionId);
+            if (answer != null) {
+                group.controls.answer.setValue(answer.AnswerId);
+            }
+        });
+    }
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
         this.elemId = v4();
@@ -560,25 +625,23 @@ class QuestionMatrixTemplateComponent {
     }
     onChangeAnswer(question, answer) {
         const index = this.fCtrls.subQuestionArray.value.findIndex(x => x.subQuestionId == question.subQuestionId);
-        this.fCtrls.subQuestionArray.controls[index].controls.answer.setValue(answer.answerId);
-        var model = this.fCtrls.subQuestionArray.value.map(x => {
-            return {
-                QuestionId: x.subQuestionId,
-                Answer: x.answer,
-                IsValid: this.fCtrls.subQuestionArray.controls[index].controls.answer.valid
-            };
+        var subQuestionGroup = this.fCtrls.subQuestionArray.controls[index];
+        subQuestionGroup.controls.answer.setValue(answer.answerId);
+        this.emitter.emit({
+            QuestionId: subQuestionGroup.value.subQuestionId,
+            Answer: subQuestionGroup.value.answer,
+            IsValid: subQuestionGroup.controls.answer.valid
         });
-        this.emitter.emit(model);
     }
     convertToFormControl(element) {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, deps: [{ token: i1.FormBuilder }], 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: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion", setAnswers: "setAnswers" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>" }]
+            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -587,6 +650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }], setQuestion: [{
                 type: Input
+            }], setAnswers: [{
+                type: Input
             }] } });
 
 class QuestionBooleanTemplateComponent {
@@ -605,6 +670,13 @@ class QuestionBooleanTemplateComponent {
             typeId: value.questionTypeId,
             description: value.questionDescription
         });
+        value.surveyAnswers.forEach(surveryAnswer => {
+            this.fCtrls.answerArray.push(this._formBuilder.group({
+                id: [surveryAnswer.answerId],
+                title: [surveryAnswer.answerTitle],
+                isSelected: [false]
+            }));
+        });
         if (value.isRequired == true) {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
@@ -612,6 +684,13 @@ class QuestionBooleanTemplateComponent {
         this.isShow = value.isVisable;
         this.isDisabled = value.isReadOnly;
     }
+    set setAnswer(defaultAnswer) {
+        if (defaultAnswer != null) {
+            this.fCtrls.answer.setValue(defaultAnswer.AnswerId);
+            const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == defaultAnswer.AnswerId);
+            this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+        }
+    }
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
         this.elemId = v4();
@@ -624,7 +703,8 @@ class QuestionBooleanTemplateComponent {
             title: [null],
             typeId: [null],
             description: [null],
-            answer: [null]
+            answer: [null],
+            answerArray: this._formBuilder.array([])
         });
     }
     ngOnInit() {
@@ -638,18 +718,18 @@ class QuestionBooleanTemplateComponent {
         });
         this.fCtrls.answer.setValue(null);
     }
-    onChangeAnswer(answer) {
-        this.fCtrls.answer.setValue(answer);
+    onChangeAnswer(item) {
+        this.fCtrls.answer.setValue(item.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 }], 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: { isShow: "isShow", isDisabled: "isDisabled", 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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\" [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion", setAnswer: "setAnswer" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\" [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 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\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\" [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\" [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -658,6 +738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }], setQuestion: [{
                 type: Input
+            }], setAnswer: [{
+                type: Input
             }] } });
 
 class FilterQuestionPipe {
@@ -674,6 +756,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+class DefaultQuestionAnswerPipe {
+    transform(value, questionId) {
+        if (value != null) {
+            return value.find(x => x.QuestionId == questionId);
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DefaultQuestionAnswerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: DefaultQuestionAnswerPipe, name: "defaultQuestionAnswer" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DefaultQuestionAnswerPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'defaultQuestionAnswer'
+                }]
+        }] });
+
+class DefaultQuestionAnswersPipe {
+    transform(value, questionId) {
+        if (value != null) {
+            return value.filter(x => x.ParentQuestionId == questionId);
+        }
+        return [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DefaultQuestionAnswersPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: DefaultQuestionAnswersPipe, name: "defaultQuestionAnswers" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DefaultQuestionAnswersPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'defaultQuestionAnswers'
+                }]
+        }] });
+
 class SurveryLibComponent {
     get fCtrls() {
         return this.rForm.controls;
@@ -684,6 +800,21 @@ class SurveryLibComponent {
     get isLastPage() {
         return this.fCtrls.currentPageIndex.value == (this.surveyData?.surveyPages.length - 1);
     }
+    get surveyResult() {
+        return {
+            currentPageIndex: this.fCtrls.currentPageIndex.value,
+            answers: this.fCtrls.questionArray.value.filter(x => x.isMatrixGroup != true).map(x => {
+                return {
+                    SurveyPageIndex: x.surveyPageIndex,
+                    QuestionId: x.questionId,
+                    QuestionType: x.questionType,
+                    AnswerId: x.answerId,
+                    AnswerText: x.answerText,
+                    AnswerIdArr: x.answerIdArr
+                };
+            })
+        };
+    }
     constructor(_surveyLibService, _formBuilder, _checkRuleExpsUsecase) {
         this._surveyLibService = _surveyLibService;
         this._formBuilder = _formBuilder;
@@ -705,6 +836,10 @@ class SurveryLibComponent {
                 this.fCtrls.questionArray.clear();
             }
         });
+        this._surveyLibService.surveyAnswersObsrv.subscribe(value => {
+            this.defaultAnswers = value.defaultAnswers;
+            this.fCtrls.currentPageIndex.setValue(value.currentpage);
+        });
     }
     onPaggingNext() {
         var isHaveInvalidRecords = this.haveInValidateQuestions();
@@ -719,6 +854,7 @@ class SurveryLibComponent {
                     return {
                         SurveyPageIndex: x.surveyPageIndex,
                         QuestionId: x.questionId,
+                        QuestionType: x.questionType,
                         AnswerId: x.answerId,
                         AnswerText: x.answerText,
                         AnswerIdArr: x.answerIdArr
@@ -886,11 +1022,11 @@ class SurveryLibComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i1.FormBuilder }, { token: CheckRuleExpsUsecase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", outputs: { surveyResultEmit: "surveyResultEmit" }, ngImport: i0, template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswers($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{surveyData.surveyPages.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isShow", "isTextArea", "setQuestion", "isDisabled"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", outputs: { surveyResultEmit: "surveyResultEmit" }, ngImport: i0, template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswers]=\"(defaultAnswers|defaultQuestionAnswers :question.questionId)\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{surveyData.surveyPages.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isShow", "isTextArea", "setQuestion", "isDisabled", "setAnswer"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["isShow", "isDisabled", "setQuestion", "setAnswer"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["isShow", "isDisabled", "setQuestion", "setAnswer"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["isShow", "isDisabled", "setQuestion", "setAnswer"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["isShow", "isDisabled", "setQuestion", "setAnswers"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["isShow", "isDisabled", "setQuestion", "setAnswer"], outputs: ["emitter"] }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }, { kind: "pipe", type: DefaultQuestionAnswerPipe, name: "defaultQuestionAnswer" }, { kind: "pipe", type: DefaultQuestionAnswersPipe, name: "defaultQuestionAnswers" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-survery-lib', template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswers($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{surveyData.surveyPages.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'lib-survery-lib', template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswer]=\"(defaultAnswers|defaultQuestionAnswer :question.questionId)\"></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [setAnswers]=\"(defaultAnswers|defaultQuestionAnswers :question.questionId)\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{surveyData.surveyPages.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { surveyResultEmit: [{
                 type: Output
             }] } });
@@ -909,7 +1045,9 @@ class SurveryLibModule {
             QuestionDropdownTemplateComponent,
             QuestionMatrixTemplateComponent,
             QuestionBooleanTemplateComponent,
-            FilterQuestionPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule], exports: [SurveryLibComponent] }); }
+            FilterQuestionPipe,
+            DefaultQuestionAnswerPipe,
+            DefaultQuestionAnswersPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule], exports: [SurveryLibComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, decorators: [{
@@ -923,7 +1061,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         QuestionDropdownTemplateComponent,
                         QuestionMatrixTemplateComponent,
                         QuestionBooleanTemplateComponent,
-                        FilterQuestionPipe
+                        FilterQuestionPipe,
+                        DefaultQuestionAnswerPipe,
+                        DefaultQuestionAnswersPipe
                     ],
                     imports: [
                         CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule