survery-lib 0.1.59 → 0.1.60

package/fesm2022/survery-lib.mjs

@@ -314,11 +314,14 @@ class MaskedForMinMaxDirective {
                     inputVlaue = Number(firstPart + event.key + lastPart);
                 }
             }
-            // if (min != null) {
-            //   if (parseInt(inputVlaue) < min) {
-            //     event.preventDefault();
-            //   }
-            // }
+            if (min != null) {
+                var allowed = min.length - 1;
+                if (allowed > 0 && inputVlaue.length > allowed) {
+                    if (parseInt(inputVlaue) < min) {
+                        event.preventDefault();
+                    }
+                }
+            }
             if (max !== null) {
                 if (parseInt(inputVlaue) > max) {
                     event.preventDefault();
@@ -501,6 +504,9 @@ class QuestionTextTemplateComponent {
         });
         this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
             this.fCtrls.isShow.setValue(x.isShow);
+            if (x.isShow == false) {
+                this.fCtrls.answer.setValue(null);
+            }
         });
     }
     convertToFormControl(element) {
@@ -516,11 +522,11 @@ class QuestionTextTemplateComponent {
         this.fCtrls.answer.updateValueAndValidity();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { isArabicLang: "isArabicLang", isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\n            <small >{{questionMinMaxIndicator}}</small>\n        </p> \n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n            <input class=\"form-control\" libMaskedForMinMax  [attr.min]=\"fCtrls.inputMin.value\"\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\"></textarea>\n        </ng-template>\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MaskedForMinMaxDirective, selector: "[libMaskedForMinMax]" }, { kind: "pipe", type: TextBoxTypeAttrPipe, name: "textBoxTypeAttr" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { isArabicLang: "isArabicLang", isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MaskedForMinMaxDirective, selector: "[libMaskedForMinMax]" }, { kind: "pipe", type: TextBoxTypeAttrPipe, name: "textBoxTypeAttr" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-text-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\n            <small >{{questionMinMaxIndicator}}</small>\n        </p> \n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n            <input class=\"form-control\" libMaskedForMinMax  [attr.min]=\"fCtrls.inputMin.value\"\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\n        </ng-container>\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n                [disabled]=\"isDisabled\"></textarea>\n        </ng-template>\n    </div>" }]
+            args: [{ selector: 'lib-question-text-template', template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n        <p *ngIf=\"questionMinMaxIndicator\" class=\"text-danger\">\r\n            <small >{{questionMinMaxIndicator}}</small>\r\n        </p> \r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n            <input class=\"form-control\" libMaskedForMinMax  [attr.min]=\"fCtrls.inputMin.value\"\r\n                [attr.max]=\"fCtrls.inputMax.value\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\" [attr.type]=\"fCtrls.inputTypeId.value | textBoxTypeAttr\">\r\n        </ng-container>\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"2\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n                [disabled]=\"isDisabled\"></textarea>\r\n        </ng-template>\r\n    </div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isArabicLang: [{
@@ -582,7 +588,6 @@ class QuestionRadioButtonTemplateComponent {
     }
     ngOnInit() {
         this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
-            console.log(value);
             const formValue = this.rForm.value;
             this.emitter.emit({
                 QuestionId: formValue.id,
@@ -605,6 +610,9 @@ class QuestionRadioButtonTemplateComponent {
         });
         this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
             this.fCtrls.isShow.setValue(x.isShow);
+            if (x.isShow == false) {
+                this.fCtrls.answer.setValue(null);
+            }
         });
     }
     onChangeAnswer(item) {
@@ -614,11 +622,11 @@ class QuestionRadioButtonTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionRadioButtonTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"fCtrls.isDisabled.value\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionRadioButtonTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-radio-button-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"fCtrls.isDisabled.value\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'lib-question-radio-button-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\" \r\n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"fCtrls.isDisabled.value\"\r\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\" [innerHTML]=\"item.value.title\"></label>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
@@ -700,6 +708,9 @@ class QuestionCheckBoxTemplateComponent {
         });
         this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
             this.fCtrls.isShow.setValue(x.isShow);
+            if (x.isShow == false) {
+                this.fCtrls.answer.setValue(null);
+            }
         });
     }
     onChangeAnswer(item, event) {
@@ -717,11 +728,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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"fCtrls.isDisabled.value\"\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCheckBoxTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-check-box-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"fCtrls.isDisabled.value\"\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\" [innerHTML]=\"item.value.title\"></label>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'lib-question-check-box-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n\r\n    <div class=\"checkbox-button-quastion\">\r\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"fCtrls.isDisabled.value\"\r\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\" [innerHTML]=\"item.value.title\"></label>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
@@ -787,17 +798,20 @@ class QuestionDropdownTemplateComponent {
         });
         this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
             this.fCtrls.isShow.setValue(x.isShow);
+            if (x.isShow == false) {
+                this.fCtrls.answer.setValue(null);
+            }
         });
     }
     convertToFormControl(element) {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
+    static { this.ɵ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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-dropdown-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\n        </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
+            args: [{ selector: 'lib-question-dropdown-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion text-quastion__dropdown\">\r\n        <ng-select [items]=\"surveyQuestion?.surveyAnswers\" bindValue=\"answerId\" bindLabel=\"answerTitle\"  class=\"form-control\"\r\n        [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"false\">\r\n        </ng-select>\r\n    </div>\r\n</div>\r\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
@@ -886,11 +900,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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\n          <span [innerHTML]=\"answers.answerTitle\"></span>\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\n        </div>\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"] }]
+            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\r\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\r\n  <h3 class=\"quastion-title \">\r\n    <span [innerHTML]=\"surveyQuestion?.questionTitle\"></span>\r\n    <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n  </h3>\r\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\r\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\r\n      <div class=\"matrix-head-row\">\r\n        <div class=\"matrix-col\">\r\n        </div>\r\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\" >\r\n          <span [innerHTML]=\"answers.answerTitle\"></span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"matrix-row\"  [attr.id]=\"'question_'+questionGroup.value.subQuestionId\"\r\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\r\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\r\n        <div class=\"matrix-col matrix-sub-quastion\" [innerHTML]=\"questionGroup.value.questionTitle\">\r\n        </div>\r\n        <div class=\"matrix-col answer__container\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\r\n          <div class=\"form-check form-check-radio form-check-inline\">\r\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\r\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\r\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\r\n            <label class=\"form-check-label d-inline d-lg-none\" [innerHTML]=\"answer.answerTitle\"\r\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: ["@media (max-width: 767px){.quastion .quastion-title{position:sticky;top:150px;z-index:1000;padding:10px 20px;background-color:#4c3d8f;color:#fff;font-size:16px;box-shadow:4px 5px 5px #0000004d;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.quastion .quastion-title:last-of-type(){position:static;z-index:initial}.quastion .matrix-question .matrix-table .matrix-row .matrix-col{width:100%!important}.matrix-table .matrix-row .matrix-col .form-check{flex-direction:row}.matrix-head-row{display:none!important}.answer__container.matrix-col{padding:5px 15px!important}.answer__container.matrix-col .form-check-radio .form-check-label{padding-right:15px!important}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
@@ -970,6 +984,9 @@ class QuestionBooleanTemplateComponent {
         });
         this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
             this.fCtrls.isShow.setValue(x.isShow);
+            if (x.isShow == false) {
+                this.fCtrls.answer.setValue(null);
+            }
         });
     }
     onChangeAnswer(item) {
@@ -979,11 +996,11 @@ class QuestionBooleanTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionBooleanTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\"\n            *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"\n                [disabled]=\"fCtrls.isDisabled.value\" name=\"{{elemId}}__radio-btn-option\"\n                id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionBooleanTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\"\n            *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"\n                [disabled]=\"fCtrls.isDisabled.value\" name=\"{{elemId}}__radio-btn-option\"\n                id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\"\r\n            *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"\r\n                [disabled]=\"fCtrls.isDisabled.value\" name=\"{{elemId}}__radio-btn-option\"\r\n                id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
@@ -1059,17 +1076,20 @@ class QuestionDropdownMultiTemplateComponent {
         });
         this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
             this.fCtrls.isShow.setValue(x.isShow);
+            if (x.isShow == false) {
+                this.fCtrls.answer.setValue(null);
+            }
         });
     }
     convertToFormControl(element) {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownMultiTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\n         </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: { setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownMultiTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-dropdown-multi-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\n         </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
+            args: [{ selector: 'lib-question-dropdown-multi-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        <span [innerHTML]=\"fCtrls.title.value\"></span>\r\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\r\n    </h3>\r\n    <div class=\"text-quastion text-quastion__dropdown\">\r\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\r\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\r\n         </ng-select>\r\n    </div>\r\n</div>\r\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], setQuestion: [{
@@ -1181,11 +1201,11 @@ class QuestionCascadeTemplateComponent {
         this.fCtrls.questionArr.push(group);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCascadeTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: { pageIndex: "pageIndex", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of questionFormArray.value ; trackBy:identify ; let i = index\">\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\n        (emitter)=\"onUpdateAnswer($event)\" >\n    </lib-question-dropdown-template>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: { pageIndex: "pageIndex", isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of questionFormArray.value ; trackBy:identify ; let i = index\">\r\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\r\n        (emitter)=\"onUpdateAnswer($event)\" >\r\n    </lib-question-dropdown-template>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCascadeTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-cascade-template', template: "<ng-container *ngFor=\"let item of questionFormArray.value ; trackBy:identify ; let i = index\">\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\n        (emitter)=\"onUpdateAnswer($event)\" >\n    </lib-question-dropdown-template>\n</ng-container>" }]
+            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]=\"surveyQuestionArr[i]\"\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 }]; }, propDecorators: { emitter: [{
                 type: Output
             }], pageIndex: [{