survery-lib 0.1.35 → 0.1.37

package/fesm2022/survery-lib.mjs

@@ -323,7 +323,9 @@ class QuestionTextTemplateComponent {
             name: value.questionName,
             title: value.questionTitle,
             typeId: value.questionTypeId,
-            description: value.questionDescription
+            description: value.questionDescription,
+            isDisabled: value.isReadOnly,
+            isShow: value.isVisable
         });
         if (value.surveyAnswers[0]?.answerId != null && value.surveyAnswers[0]?.answerId != undefined) {
             this.fCtrls.surveyAnswerId.setValue(value.surveyAnswers[0].answerId);
@@ -344,7 +346,6 @@ class QuestionTextTemplateComponent {
             }
             this.fCtrls.answer.updateValueAndValidity();
         }
-        this.isShow = value.isVisable;
         this.toggleEnableAnswer(value.isReadOnly);
     }
     set isDisabled(value) {
@@ -354,7 +355,6 @@ class QuestionTextTemplateComponent {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.emitter = new EventEmitter();
-        this.isShow = true;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -363,6 +363,8 @@ class QuestionTextTemplateComponent {
             description: [null],
             surveyAnswerId: [null],
             answer: [null],
+            isDisabled: [false],
+            isShow: [true],
             inputTypeId: [null]
         });
     }
@@ -382,6 +384,12 @@ class QuestionTextTemplateComponent {
             .subscribe(answer => {
             this.fCtrls.answer.setValue(answer.AnswerText);
         });
+        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isDisabled.setValue(x.isDisabled);
+        });
+        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isShow.setValue(x.isShow);
+        });
     }
     convertToFormControl(element) {
         return element;
@@ -396,15 +404,13 @@ class QuestionTextTemplateComponent {
         this.fCtrls.answer.updateValueAndValidity();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { 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        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <input class=\"form-control\" [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=\"5\" [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: "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: { 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        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <input class=\"form-control\" [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=\"5\" [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: "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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <input class=\"form-control\" [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=\"5\" [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\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion\">\n        <ng-container *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <input class=\"form-control\" [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=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            [disabled]=\"isDisabled\" ></textarea>\n        </ng-template>\n    </div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
-            }], isShow: [{
-                type: Input
             }], isTextArea: [{
                 type: Input
             }], setQuestion: [{
@@ -427,7 +433,9 @@ class QuestionRadioButtonTemplateComponent {
             name: value.questionName,
             title: value.questionTitle,
             typeId: value.questionTypeId,
-            description: value.questionDescription
+            description: value.questionDescription,
+            isDisabled: value.isReadOnly,
+            isShow: value.isVisable
         });
         value.surveyAnswers.forEach(surveryAnswer => {
             this.fCtrls.answerArray.push(this._formBuilder.group({
@@ -440,16 +448,12 @@ class QuestionRadioButtonTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
-        this.isShow = value.isVisable;
-        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _surveyLibService) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
-        this.isShow = true;
-        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -457,6 +461,8 @@ class QuestionRadioButtonTemplateComponent {
             typeId: [null],
             description: [null],
             answer: [null],
+            isDisabled: [false],
+            isShow: [true],
             answerArray: this._formBuilder.array([])
         });
     }
@@ -480,6 +486,12 @@ class QuestionRadioButtonTemplateComponent {
                 this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
             }
         });
+        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isDisabled.setValue(x.isDisabled);
+        });
+        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isShow.setValue(x.isShow);
+        });
     }
     onChangeAnswer(item) {
         this.fCtrls.answer.setValue(item.id);
@@ -488,17 +500,13 @@ 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: { 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        <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]=\"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: 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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\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}}\">{{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"] }] }); }
 }
 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        <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]=\"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" }]
+            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        {{fCtrls.title.value}}\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}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
-            }], isShow: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -517,7 +525,9 @@ class QuestionCheckBoxTemplateComponent {
             name: value.questionName,
             title: value.questionTitle,
             typeId: value.questionTypeId,
-            description: value.questionDescription
+            description: value.questionDescription,
+            isDisabled: value.isReadOnly,
+            isShow: value.isVisable
         });
         value.surveyAnswers.forEach(surveryAnswer => {
             this.fCtrls.answerArray.push(this._formBuilder.group({
@@ -530,16 +540,12 @@ class QuestionCheckBoxTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
-        this.isShow = value.isVisable;
-        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _surveyLibService) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
-        this.isShow = true;
-        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -547,6 +553,8 @@ class QuestionCheckBoxTemplateComponent {
             typeId: [null],
             description: [null],
             answer: [null],
+            isDisabled: [false],
+            isShow: [true],
             answerArray: this._formBuilder.array([])
         });
     }
@@ -573,6 +581,12 @@ class QuestionCheckBoxTemplateComponent {
                 }
             });
         });
+        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isDisabled.setValue(x.isDisabled);
+        });
+        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isShow.setValue(x.isShow);
+        });
     }
     onChangeAnswer(item, event) {
         var answerArr = this.fCtrls.answer.value || [];
@@ -589,17 +603,13 @@ 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: { 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        <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]=\"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: 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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\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}}\">{{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"] }] }); }
 }
 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        <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]=\"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" }]
+            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        {{fCtrls.title.value}}\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}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
-            }], isShow: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -691,7 +701,9 @@ class QuestionMatrixTemplateComponent {
         this.surveyQuestion = value;
         this.rForm.patchValue({
             id: value.questionId,
-            typeId: value.questionTypeId
+            typeId: value.questionTypeId,
+            isDisabled: value.isReadOnly,
+            isShow: value.isVisable
         });
         value.surveySubQuestions.forEach(x => {
             var group = this._formBuilder.group({
@@ -713,19 +725,17 @@ class QuestionMatrixTemplateComponent {
             });
             this.fCtrls.subQuestionArray.push(group);
         });
-        this.isShow = value.isVisable;
-        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _surveyLibService) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
-        this.isShow = true;
-        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             typeId: [null],
+            isDisabled: [false],
+            isShow: [true],
             subQuestionArray: this._formBuilder.array([])
         });
     }
@@ -756,17 +766,13 @@ 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: { 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    <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          {{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: 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;\"\n[ngClass]=\"{'d-none':fCtrls.isShow.value != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\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          {{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: 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':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\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          {{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>" }]
+            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    {{surveyQuestion?.questionTitle}}\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          {{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 }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
-            }], isShow: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -785,8 +791,11 @@ class QuestionBooleanTemplateComponent {
             name: value.questionName,
             title: value.questionTitle,
             typeId: value.questionTypeId,
-            description: value.questionDescription
+            description: value.questionDescription,
+            isDisabled: value.isReadOnly,
+            isShow: value.isVisable
         });
+        console.log(value.surveyAnswers);
         value.surveyAnswers.forEach(surveryAnswer => {
             this.fCtrls.answerArray.push(this._formBuilder.group({
                 id: [surveryAnswer.answerId],
@@ -798,16 +807,12 @@ class QuestionBooleanTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
-        this.isShow = value.isVisable;
-        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _surveyLibService) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
-        this.isShow = true;
-        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -815,7 +820,9 @@ class QuestionBooleanTemplateComponent {
             typeId: [null],
             description: [null],
             answer: [null],
-            answerArray: this._formBuilder.array([])
+            answerArray: this._formBuilder.array([]),
+            isDisabled: [false],
+            isShow: [true]
         });
     }
     ngOnInit() {
@@ -838,6 +845,12 @@ class QuestionBooleanTemplateComponent {
                 this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
             }
         });
+        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isDisabled.setValue(x.isDisabled);
+        });
+        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isShow.setValue(x.isShow);
+        });
     }
     onChangeAnswer(item) {
         this.fCtrls.answer.setValue(item.id);
@@ -846,17 +859,13 @@ 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: { 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        <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]=\"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: 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\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':fCtrls.isShow.value != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\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}}\">{{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"] }] }); }
 }
 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        <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]=\"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" }]
+            args: [{ selector: 'lib-question-boolean-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        {{fCtrls.title.value}}\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}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
-            }], isShow: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -875,7 +884,9 @@ class QuestionDropdownMultiTemplateComponent {
             name: value.questionName,
             title: value.questionTitle,
             typeId: value.questionTypeId,
-            description: value.questionDescription
+            description: value.questionDescription,
+            isDisabled: value.isReadOnly,
+            isShow: value.isVisable
         });
         value.surveyAnswers.forEach(surveryAnswer => {
             this.fCtrls.answerArray.push(this._formBuilder.group({
@@ -888,16 +899,12 @@ class QuestionDropdownMultiTemplateComponent {
             this.fCtrls.answer.addValidators([Validators$1.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
-        this.isShow = value.isVisable;
-        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _surveyLibService) {
         this._formBuilder = _formBuilder;
         this._surveyLibService = _surveyLibService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
-        this.isShow = true;
-        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -905,6 +912,8 @@ class QuestionDropdownMultiTemplateComponent {
             typeId: [null],
             description: [null],
             answer: [null],
+            isDisabled: [false],
+            isShow: [true],
             answerArray: this._formBuilder.array([])
         });
     }
@@ -925,22 +934,24 @@ class QuestionDropdownMultiTemplateComponent {
             const distinctArray = answer.AnswerIdArr.filter((n, i) => answer.AnswerIdArr.indexOf(n) === i);
             this.fCtrls.answer.setValue(distinctArray);
         });
+        this._surveyLibService.questionIsDisabledObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isDisabled.setValue(x.isDisabled);
+        });
+        this._surveyLibService.questionIsShowObsrv.pipe(filter(x => x.questionId == this.fCtrls.id.value)).subscribe(x => {
+            this.fCtrls.isShow.setValue(x.isShow);
+        });
     }
     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: { 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        <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]=\"isDisabled\" [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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\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"] }] }); }
 }
 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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\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]=\"isDisabled\" [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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n        <span style=\"color: red;\" *ngIf=\"surveyQuestion.isRequired\">*</span>\n    </h3>\n    <div class=\"text-quastion text-quastion__dropdown\">\n        <ng-select [items]=\"this.fCtrls.answerArray.value\" bindValue=\"id\" bindLabel=\"title\"  class=\"form-control\"\n         [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"fCtrls.isDisabled.value\" [multiple]=\"true\">\n         </ng-select>\n    </div>\n</div>\n", styles: [".text-quastion .form-control{padding:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
-            }], isShow: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -1003,6 +1014,21 @@ class QuestionCascadeTemplateComponent {
         });
     }
     onUpdateAnswer(model) {
+        if (this.surveyQuestionArr.length > 1) {
+            const surveyQuestionIndex = this.surveyQuestionArr.findIndex(c => c.questionId == model.QuestionId);
+            var deletedQuestions = [];
+            for (let index = surveyQuestionIndex + 1; index < this.surveyQuestionArr.length; index++) {
+                deletedQuestions.push(index);
+            }
+            var sortDeletedArr = deletedQuestions.sort((a, b) => (a > b ? -1 : 1));
+            for (let index = 0; index < sortDeletedArr.length; index++) {
+                const elementIndex = sortDeletedArr[index];
+                const questionId = this.surveyQuestionArr[elementIndex].questionId;
+                this._surveyLibService.setRemoveQuestion(questionId);
+                this.surveyQuestionArr = this.surveyQuestionArr.filter(x => x.questionId != questionId);
+                this.questionFormArray.removeAt(elementIndex);
+            }
+        }
         if (model.Answer) {
             this._ApiService.getNextQuestion({
                 answerId: model.Answer,
@@ -1016,25 +1042,11 @@ class QuestionCascadeTemplateComponent {
                 }
             });
         }
-        else {
-            if (this.surveyQuestionArr.length > 1) {
-                const surveyQuestionIndex = this.surveyQuestionArr.findIndex(c => c.questionId == model.QuestionId);
-                var deletedQuestions = [];
-                for (let index = surveyQuestionIndex + 1; index < this.surveyQuestionArr.length; index++) {
-                    deletedQuestions.push(index);
-                }
-                var sortDeletedArr = deletedQuestions.sort((a, b) => (a > b ? -1 : 1));
-                for (let index = 0; index < sortDeletedArr.length; index++) {
-                    const elementIndex = sortDeletedArr[index];
-                    const questionId = this.surveyQuestionArr[elementIndex].questionId;
-                    this._surveyLibService.setRemoveQuestion(questionId);
-                    this.surveyQuestionArr.slice(elementIndex, 1);
-                    this.questionFormArray.removeAt(elementIndex);
-                }
-            }
-        }
         this.emitter.emit(model);
     }
+    identify(index, item) {
+        return item.id;
+    }
     setQuestions(value) {
         this.surveyQuestionArr.push(value);
         var group = this._formBuilder.group({
@@ -1049,11 +1061,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 ; 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\">\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"] }] }); }
 }
 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 ; 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\">\n    <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"surveyQuestionArr[i]\"\n        (emitter)=\"onUpdateAnswer($event)\" >\n    </lib-question-dropdown-template>\n</ng-container>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }, { type: ApiService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], pageIndex: [{
@@ -1068,20 +1080,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class FilterQuestionPipe {
-    transform(value, questionArr) {
-        return questionArr.find(x => x.questionId == value.questionId);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, name: "filterQuestion" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'filterQuestion'
-                }]
-        }] });
-
 class SurveryLibComponent {
     get fCtrls() {
         return this.rForm.controls;
@@ -1368,11 +1366,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", inputs: { isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\" >\r\n  <div class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [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\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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 #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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 #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                  [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 #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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\r\n                  <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                  [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\" \r\n                  [pageIndex]=\"surveyPageIndex\"></lib-question-cascade-template>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.length}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["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: ["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: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageIndex", "isPre", "surveyLanguageId", "applicantKey", "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", inputs: { isPre: "isPre", surveyLanguageId: "surveyLanguageId", applicantKey: "applicantKey" }, outputs: { surveyResultEmit: "surveyResultEmit", selectLanguageEmit: "selectLanguageEmit" }, ngImport: i0, template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\" >\r\n  <div class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [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\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\">\r\n                </lib-question-boolean-template>\r\n\r\n                <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                  [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n                <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\">\r\n                </lib-question-radio-button-template>\r\n\r\n                <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\">\r\n                </lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\">\r\n                </lib-question-check-box-template>\r\n\r\n                <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\">\r\n                </lib-question-matrix-template>\r\n\r\n                  <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                  [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\" \r\n                  [pageIndex]=\"surveyPageIndex\"></lib-question-cascade-template>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.length}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: ["isTextArea", "setQuestion", "isDisabled"], outputs: ["emitter"] }, { kind: "component", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-template", inputs: ["setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionCascadeTemplateComponent, selector: "lib-question-cascade-template", inputs: ["pageIndex", "isPre", "surveyLanguageId", "applicantKey", "setQuestion"], outputs: ["emitter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\" >\r\n  <div class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [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\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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 #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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 #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\"\r\n                  [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                  [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                  [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 #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *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\r\n                  <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                  [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\" \r\n                  [pageIndex]=\"surveyPageIndex\"></lib-question-cascade-template>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.length}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"] }]
+            args: [{ selector: 'lib-survery-lib', template: "<div id=\"survery-card-{{surveryLibraryDivId}}\" class=\"survay-card\" >\r\n  <div class=\"alert alert-warning text-center\" role=\"alert\" *ngIf=\"isPre == true && surveyData != null\">\r\n    <h4 class=\"alert-heading mb-0\">This survey in review phase </h4>\r\n  </div>\r\n    <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n      [attr.id]=\"'survey-page_'+surveyPageIndex\"\r\n      [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\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\">\r\n                </lib-question-boolean-template>\r\n\r\n                <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                  [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n                <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\">\r\n                </lib-question-radio-button-template>\r\n\r\n                <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n\r\n                <lib-question-dropdown-multi-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                  *ngIf=\"question.questionTypeId == questionTypeEnum.DropDownMulti\">\r\n                </lib-question-dropdown-multi-template>\r\n\r\n                <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\">\r\n                </lib-question-check-box-template>\r\n\r\n                <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\">\r\n                </lib-question-matrix-template>\r\n\r\n                  <lib-question-cascade-template #questionCascadeTemplate [setQuestion]=\"question\"\r\n                  (emitter)=\"onUpdateAnswer($event)\" *ngIf=\"question.questionTypeId == questionTypeEnum.Cascade\"\r\n                  [applicantKey]=\"applicantKey\" [isPre]=\"isPre\" [surveyLanguageId]=\"surveyLanguageId\" \r\n                  [pageIndex]=\"surveyPageIndex\"></lib-question-cascade-template>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n      <div class=\"container\" style=\" justify-content: start;\">\r\n        <div class=\"survay-pagination fw-bold\">\r\n          <span>{{curruntShowedSurveyPages}}</span>\r\n          <span class=\"ms-2 me-2\">of</span>\r\n          <span>{{showedSurveyPages?.length}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}.quastion{padding:10px}.quastion .quastion-title{color:var(--dark-100, #363636);text-align:right;font-family:Almarai;font-size:18px;font-style:normal;font-weight:700;line-height:20.6px}\n"] }]
         }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { isPre: [{
                 type: Input
             }], surveyLanguageId: [{
@@ -1385,6 +1383,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
+class FilterQuestionPipe {
+    transform(value, questionArr) {
+        return questionArr.find(x => x.questionId == value.questionId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, name: "filterQuestion" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilterQuestionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterQuestion'
+                }]
+        }] });
+
 class DefaultQuestionAnswerPipe {
     transform(value, questionId, reloadId) {
         if (value != null) {