survery-lib 0.0.3 → 0.0.6

package/fesm2022/survery-lib.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Output, Input, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, debounceTime, distinctUntilChanged } from 'rxjs';
+import { Injectable, EventEmitter, Component, Output, Input, Pipe, NgModule } from '@angular/core';
+import { Subject, BehaviorSubject, debounceTime, distinctUntilChanged, of } from 'rxjs';
 import * as i1 from '@ng-stack/forms';
 import { NgsFormsModule } from '@ng-stack/forms';
 import * as i3 from '@angular/common';
@@ -20,6 +20,35 @@ var QuestionTypeEnum;
     QuestionTypeEnum[QuestionTypeEnum["Matrix"] = 6] = "Matrix";
 })(QuestionTypeEnum || (QuestionTypeEnum = {}));
 
+var LogicPropertyEnum;
+(function (LogicPropertyEnum) {
+    LogicPropertyEnum[LogicPropertyEnum["GreaterThan"] = 1] = "GreaterThan";
+    LogicPropertyEnum[LogicPropertyEnum["GreaterThanOrEqual"] = 2] = "GreaterThanOrEqual";
+    LogicPropertyEnum[LogicPropertyEnum["LessThan"] = 3] = "LessThan";
+    LogicPropertyEnum[LogicPropertyEnum["LessThanOrEqual"] = 4] = "LessThanOrEqual";
+    LogicPropertyEnum[LogicPropertyEnum["Equal"] = 5] = "Equal";
+    LogicPropertyEnum[LogicPropertyEnum["NotEqual"] = 6] = "NotEqual";
+    LogicPropertyEnum[LogicPropertyEnum["IsEmpty"] = 9] = "IsEmpty";
+    LogicPropertyEnum[LogicPropertyEnum["IsNotEmpty"] = 10] = "IsNotEmpty";
+    LogicPropertyEnum[LogicPropertyEnum["AnyOf"] = 11] = "AnyOf";
+    LogicPropertyEnum[LogicPropertyEnum["Then"] = 12] = "Then";
+})(LogicPropertyEnum || (LogicPropertyEnum = {}));
+
+var OperatorEnum;
+(function (OperatorEnum) {
+    OperatorEnum[OperatorEnum["Or"] = 7] = "Or";
+    OperatorEnum[OperatorEnum["And"] = 8] = "And";
+})(OperatorEnum || (OperatorEnum = {}));
+
+var LogicActionEnum;
+(function (LogicActionEnum) {
+    LogicActionEnum[LogicActionEnum["Show"] = 1] = "Show";
+    LogicActionEnum[LogicActionEnum["Hide"] = 2] = "Hide";
+    LogicActionEnum[LogicActionEnum["Enable"] = 3] = "Enable";
+    LogicActionEnum[LogicActionEnum["Disable"] = 4] = "Disable";
+    LogicActionEnum[LogicActionEnum["SetAnswer"] = 5] = "SetAnswer";
+})(LogicActionEnum || (LogicActionEnum = {}));
+
 class SurveyLibService {
     get surveyDataObsrv() {
         return this.surveyDataSubject.asObservable();
@@ -79,11 +108,17 @@ class QuestionTextTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
+        this.isShow = value.isVisable;
+        this.toggleEnableAnswer(value.isReadOnly);
+    }
+    set isDisabled(value) {
+        this.toggleEnableAnswer(value);
     }
     constructor(_formBuilder, _sharedDataService) {
         this._formBuilder = _formBuilder;
         this._sharedDataService = _sharedDataService;
         this.emitter = new EventEmitter();
+        this.isShow = true;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -114,18 +149,31 @@ class QuestionTextTemplateComponent {
     convertToFormControl(element) {
         return element;
     }
+    toggleEnableAnswer(isReadOnly) {
+        if (isReadOnly == true) {
+            this.fCtrls.answer.disable();
+        }
+        else {
+            this.fCtrls.answer.enable();
+        }
+        this.fCtrls.answer.updateValueAndValidity();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SharedDataService }], 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: { isTextArea: "isTextArea", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"></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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { isShow: "isShow", isTextArea: "isTextArea", setQuestion: "setQuestion", isDisabled: "isDisabled" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [formGroup]=\"rForm\" [attr.id]=\"'question_'+fCtrls.id.value\"\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n         [disabled]=\"isDisabled\"   *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            [disabled]=\"isDisabled\" ></textarea>\n        </ng-template>\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: 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"] }] }); }
 }
 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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"></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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n         [disabled]=\"isDisabled\"   *ngIf=\"isTextArea == false else textAreaTemplate\">\n        <ng-template #textAreaTemplate>\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\n            [disabled]=\"isDisabled\" ></textarea>\n        </ng-template>\n    </div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SharedDataService }]; }, propDecorators: { emitter: [{
                 type: Output
+            }], isShow: [{
+                type: Input
             }], isTextArea: [{
                 type: Input
             }], setQuestion: [{
                 type: Input
+            }], isDisabled: [{
+                type: Input
             }] } });
 
 class QuestionRadioButtonTemplateComponent {
@@ -148,12 +196,16 @@ class QuestionRadioButtonTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
+        this.isShow = value.isVisable;
+        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _sharedDataService) {
         this._formBuilder = _formBuilder;
         this._sharedDataService = _sharedDataService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
+        this.isShow = true;
+        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -188,13 +240,17 @@ 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: SharedDataService }], 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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"  [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionRadioButtonTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-radio-button-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'lib-question-radio-button-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"  [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SharedDataService }]; }, propDecorators: { emitter: [{
                 type: Output
+            }], isShow: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -219,12 +275,16 @@ class QuestionCheckBoxTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
+        this.isShow = value.isVisable;
+        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _sharedDataService) {
         this._formBuilder = _formBuilder;
         this._sharedDataService = _sharedDataService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
+        this.isShow = true;
+        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -243,7 +303,7 @@ class QuestionCheckBoxTemplateComponent {
         });
     }
     ngOnInit() {
-        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
+        this.fCtrls.answer.valueChanges.subscribe(value => {
             const formValue = this.rForm.value;
             this.emitter.emit({
                 QuestionId: formValue.id,
@@ -260,20 +320,24 @@ class QuestionCheckBoxTemplateComponent {
         else {
             answerArr = answerArr.filter(x => x != item.answerId);
         }
-        answerArr = answerArr.length == 0 ? null : answerArr;
+        answerArr = answerArr.length == 0 ? [] : answerArr;
         this.fCtrls.answer.setValue(answerArr);
     }
     convertToFormControl(element) {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCheckBoxTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SharedDataService }], 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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\" (change)=\"onChangeAnswer(item,$event)\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\n             (change)=\"onChangeAnswer(item,$event)\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCheckBoxTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-check-box-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\" (change)=\"onChangeAnswer(item,$event)\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'lib-question-check-box-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\n             (change)=\"onChangeAnswer(item,$event)\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SharedDataService }]; }, propDecorators: { emitter: [{
                 type: Output
+            }], isShow: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -298,11 +362,15 @@ class QuestionDropdownTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
+        this.isShow = value.isVisable;
+        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _sharedDataService) {
         this._formBuilder = _formBuilder;
         this._sharedDataService = _sharedDataService;
         this.emitter = new EventEmitter();
+        this.isShow = true;
+        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -334,13 +402,17 @@ class QuestionDropdownTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SharedDataService }], 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}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\">\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\n        </select>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\">\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\n        </select>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-dropdown-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\">\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\n        </select>\n    </div>\n</div>\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':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"text-quastion\">\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\">\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\n        </select>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SharedDataService }]; }, propDecorators: { emitter: [{
                 type: Output
+            }], isShow: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -370,11 +442,15 @@ class QuestionMatrixTemplateComponent {
             }
             this.fCtrls.subQuestionArray.push(group);
         });
+        this.isShow = value.isVisable;
+        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder) {
         this._formBuilder = _formBuilder;
         this.elemId = v4();
         this.emitter = new EventEmitter();
+        this.isShow = true;
+        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             typeId: [null],
@@ -385,9 +461,11 @@ class QuestionMatrixTemplateComponent {
         const index = this.fCtrls.subQuestionArray.value.findIndex(x => x.subQuestionId == question.subQuestionId);
         this.fCtrls.subQuestionArray.controls[index].controls.answer.setValue(answer.answerId);
         var model = this.fCtrls.subQuestionArray.value.map(x => {
-            return { QuestionId: x.subQuestionId,
+            return {
+                QuestionId: x.subQuestionId,
                 Answer: x.answer,
-                IsValid: this.fCtrls.subQuestionArray.controls[index].controls.answer.valid };
+                IsValid: this.fCtrls.subQuestionArray.controls[index].controls.answer.valid
+            };
         });
         this.emitter.emit(model);
     }
@@ -395,13 +473,17 @@ 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 }], 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  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>" }]
+            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { emitter: [{
                 type: Output
+            }], isShow: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
             }], setQuestion: [{
                 type: Input
             }] } });
@@ -426,12 +508,16 @@ class QuestionBooleanTemplateComponent {
             this.fCtrls.answer.addValidators([Validators.required]);
             this.fCtrls.answer.updateValueAndValidity();
         }
+        this.isShow = value.isVisable;
+        this.isDisabled = value.isReadOnly;
     }
     constructor(_formBuilder, _sharedDataService) {
         this._formBuilder = _formBuilder;
         this._sharedDataService = _sharedDataService;
         this.elemId = v4();
         this.emitter = new EventEmitter();
+        this.isShow = true;
+        this.isDisabled = false;
         this.rForm = this._formBuilder.group({
             id: [null],
             name: [null],
@@ -466,17 +552,35 @@ 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: SharedDataService }], 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\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\" [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionBooleanTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of surveyQuestion?.surveyAnswers;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item)\" [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" value=\"{{item.answerId}}\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.answerTitle}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SharedDataService }]; }, propDecorators: { emitter: [{
                 type: Output
+            }], isShow: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
             }], setQuestion: [{
                 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;
@@ -494,7 +598,8 @@ class SurveryLibComponent {
         this.surveyResultEmit = new EventEmitter();
         this.rForm = this._formBuilder.group({
             currentPageIndex: [0],
-            questionArray: this._formBuilder.array([])
+            questionArray: this._formBuilder.array([]),
+            ruleQuestionArray: this._formBuilder.array([])
         });
     }
     ngOnInit() {
@@ -509,11 +614,20 @@ class SurveryLibComponent {
         });
     }
     onPaggingNext() {
-        var currentPageIndex = this.fCtrls.currentPageIndex.value;
         var isHaveInvalidRecords = this.haveInValidateQuestions();
-        if (isHaveInvalidRecords == false && currentPageIndex < (this.surveyData.surveyPages.length - 1)) {
-            currentPageIndex = Number(currentPageIndex) + 1;
-            this.fCtrls.currentPageIndex.setValue(currentPageIndex);
+        if (isHaveInvalidRecords == false) {
+            var currentPageIndex = this.fCtrls.currentPageIndex.value;
+            if (currentPageIndex < (this.surveyData.surveyPages.length - 1)) {
+                currentPageIndex = Number(currentPageIndex) + 1;
+                this.fCtrls.currentPageIndex.setValue(currentPageIndex);
+                return of(null);
+            }
+            else {
+                return of(this.fCtrls.questionArray.value);
+            }
+        }
+        else {
+            return of(null);
         }
     }
     onPaggingBack() {
@@ -530,16 +644,19 @@ class SurveryLibComponent {
     }
     onUpdateAnswer(model) {
         const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == model.QuestionId);
-        this.fCtrls.questionArray.controls[index].patchValue({
-            isValid: model.IsValid,
-            answer: model.Answer
-        });
-    }
-    onSubmit() {
-        var currentPageIndex = this.fCtrls.currentPageIndex.value;
-        var isHaveInvalidRecords = this.haveInValidateQuestions();
-        if (isHaveInvalidRecords == false && currentPageIndex == (this.surveyData.surveyPages.length - 1)) {
-            this.surveyResultEmit.emit(this.fCtrls.questionArray.value);
+        var questionGroup = this.fCtrls.questionArray.controls[index];
+        questionGroup.controls.isValid.setValue(model.IsValid);
+        if (questionGroup.value.questionType == this.questionTypeEnum.TextInput) {
+            questionGroup.controls.answerText.setValue(model.Answer);
+        }
+        else if (questionGroup.value.questionType == this.questionTypeEnum.CheckBox) {
+            questionGroup.controls.answerIdArr.setValue(model.Answer);
+        }
+        else {
+            questionGroup.controls.answerId.setValue(model.Answer);
+        }
+        if (this.fCtrls.ruleQuestionArray.value.findIndex(x => x.questionId == model.QuestionId) > -1) {
+            this.checkRules();
         }
     }
     loadQuestions(survey) {
@@ -550,40 +667,237 @@ class SurveryLibComponent {
                         this.fCtrls.questionArray.push(this._formBuilder.group({
                             surveyPageIndex: pageIndex,
                             questionId: [question.questionId],
-                            answer: [null],
+                            questionType: [question.questionTypeId],
+                            isMatrixGroup: [false],
+                            answerId: [null],
+                            answerIdArr: [null],
+                            answerText: [null],
                             isRequired: [question.isRequired],
-                            isValid: [null]
+                            isValid: [null],
+                            isDisabled: [question.isReadOnly],
+                            isShow: [question.isVisable],
+                            isDisabled_default: [question.isReadOnly],
+                            isShow_default: [question.isVisable]
                         }));
                     }
                     else {
+                        this.fCtrls.questionArray.push(this._formBuilder.group({
+                            surveyPageIndex: pageIndex,
+                            questionId: [question.questionId],
+                            questionType: [question.questionTypeId],
+                            isMatrixGroup: [true],
+                            answerId: [null],
+                            answerIdArr: [null],
+                            answerText: [null],
+                            isRequired: [question.isRequired],
+                            isValid: [null],
+                            isDisabled: [question.isReadOnly],
+                            isShow: [question.isVisable],
+                            isDisabled_default: [question.isReadOnly],
+                            isShow_default: [question.isVisable],
+                        }));
                         question.surveySubQuestions.forEach(subQuestion => {
                             this.fCtrls.questionArray.push(this._formBuilder.group({
                                 surveyPageIndex: pageIndex,
                                 questionId: [subQuestion.questionId],
-                                answer: [null],
+                                questionType: [subQuestion.questionTypeId],
+                                isMatrixGroup: [false],
+                                answerId: [null],
+                                answerIdArr: [null],
+                                answerText: [null],
                                 isRequired: [question.isRequired],
-                                isValid: [null]
+                                isValid: [null],
+                                isDisabled: [subQuestion.isReadOnly],
+                                isShow: [subQuestion.isVisable],
+                                isDisabled_default: [subQuestion.isReadOnly],
+                                isShow_default: [subQuestion.isVisable]
                             }));
                         });
                     }
                 });
             });
         });
+        survey.surveyRules.forEach(rule => {
+            rule.ruleExps.forEach(ruleExp => {
+                this.fCtrls.ruleQuestionArray.push(this._formBuilder.group({
+                    questionId: ruleExp.questionId
+                }));
+            });
+        });
     }
     haveInValidateQuestions() {
         const currentPageIndex = this.fCtrls.currentPageIndex.value;
-        var invalidRecords = this.rForm.value.questionArray.filter(x => x.surveyPageIndex == currentPageIndex && x.isValid != true);
+        var invalidRecords = this.rForm.value.questionArray.filter(x => x.surveyPageIndex == currentPageIndex && x.isValid != true && x.isMatrixGroup != true);
         if (invalidRecords.length > 0) {
             $(`#survey-page_${currentPageIndex}`).addClass('survey-page_submitted');
         }
         return invalidRecords.length > 0;
     }
+    checkRules() {
+        this.surveyData.surveyRules.forEach(rule => {
+            var exprestionResultArr = [];
+            rule.ruleExps.forEach(ruleExp => {
+                const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == ruleExp.questionId);
+                var questionGroup = this.fCtrls.questionArray.at(index);
+                var result;
+                if (questionGroup.value.questionType == this.questionTypeEnum.TextInput) {
+                    result = this.checkRuleExpForAnswerText(ruleExp, questionGroup.value.answerText);
+                }
+                else if (questionGroup.value.questionType == this.questionTypeEnum.CheckBox) {
+                    result = this.checkRuleExpForAnswerIdArr(ruleExp, questionGroup.value.answerIdArr);
+                }
+                else {
+                    result = this.checkRuleExpForAnswerId(ruleExp, questionGroup.value.answerId);
+                }
+                exprestionResultArr.push(result);
+            });
+            var isPassed = exprestionResultArr.filter(x => x == false).length == 0;
+            if (isPassed) {
+                rule.ruleResultQuestions.forEach(resultQuestion => {
+                    const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == resultQuestion.questionId);
+                    var questionGroup = this.fCtrls.questionArray.at(index);
+                    if (rule.logicActionId == LogicActionEnum.Show) {
+                        questionGroup.controls.isShow.setValue(true);
+                    }
+                    else if (rule.logicActionId == LogicActionEnum.Hide) {
+                        questionGroup.controls.isShow.setValue(false);
+                    }
+                    else if (rule.logicActionId == LogicActionEnum.Enable) {
+                        questionGroup.controls.isDisabled.setValue(false);
+                    }
+                    else if (rule.logicActionId == LogicActionEnum.Disable) {
+                        questionGroup.controls.isDisabled.setValue(true);
+                    }
+                    else if (rule.logicActionId == LogicActionEnum.SetAnswer) {
+                    }
+                });
+            }
+            else {
+                rule.ruleResultQuestions.forEach(resultQuestion => {
+                    const index = this.fCtrls.questionArray.value.findIndex(x => x.questionId == resultQuestion.questionId);
+                    var questionGroup = this.fCtrls.questionArray.at(index);
+                    questionGroup.patchValue({
+                        isShow: questionGroup.value.isShow_default,
+                        isDisabled: questionGroup.value.isDisabled_default
+                    });
+                });
+            }
+        });
+    }
+    checkRuleExpForAnswerId(ruleExp, answerId) {
+        var ruleExpResultArr = [];
+        if (ruleExp.logicPropertyId == LogicPropertyEnum.GreaterThan) {
+            ruleExp.ruleExpAnswers.forEach(answer => {
+                var result = answerId > answer.answerId;
+                ruleExpResultArr.push(result);
+            });
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.GreaterThanOrEqual) {
+            ruleExp.ruleExpAnswers.forEach(answer => {
+                var result = answerId >= answer.answerId;
+                ruleExpResultArr.push(result);
+            });
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.LessThan) {
+            ruleExp.ruleExpAnswers.forEach(answer => {
+                var result = answerId < answer.answerId;
+                ruleExpResultArr.push(result);
+            });
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.LessThanOrEqual) {
+            ruleExp.ruleExpAnswers.forEach(answer => {
+                var result = answerId <= answer.answerId;
+                ruleExpResultArr.push(result);
+            });
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.Equal) {
+            ruleExp.ruleExpAnswers.forEach(answer => {
+                var result = answerId == answer.answerId;
+                ruleExpResultArr.push(result);
+            });
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.NotEqual) {
+            ruleExp.ruleExpAnswers.forEach(answer => {
+                var result = answerId != answer.answerId;
+                ruleExpResultArr.push(result);
+            });
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.IsEmpty) {
+            var result = answerId == null;
+            ruleExpResultArr.push(result);
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.IsNotEmpty) {
+            var result = answerId != null;
+            ruleExpResultArr.push(result);
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.AnyOf) {
+            var answerIdArr = ruleExp.ruleExpAnswers.map(x => x.answerId);
+            var result = answerIdArr.findIndex(x => x == answerId) > -1;
+            ruleExpResultArr.push(result);
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.Then) {
+            var answerIdArr = ruleExp.ruleExpAnswers.map(x => x.answerId);
+            var result = answerIdArr.findIndex(x => x == answerId) == -1;
+            ruleExpResultArr.push(result);
+        }
+        if (ruleExpResultArr.length == 0) {
+            return false;
+        }
+        else if (ruleExp.ruleExpAnswers.length == 1) {
+            return ruleExpResultArr.filter(x => x == true).length > 0;
+        }
+        else if (ruleExp.opporator == OperatorEnum.Or) {
+            return ruleExpResultArr.filter(x => x == true).length > 0;
+        }
+        else {
+            return ruleExpResultArr.filter(x => x == false).length == 0;
+        }
+    }
+    checkRuleExpForAnswerIdArr(ruleExp, answerIdArr) {
+        var ruleExpResultArr = [];
+        answerIdArr?.forEach(answer => {
+            var isResult = this.checkRuleExpForAnswerId(ruleExp, answer);
+            ruleExpResultArr.push(isResult);
+        });
+        if (ruleExpResultArr.length == 0) {
+            return false;
+        }
+        else if (ruleExp.ruleExpAnswers.length == 1) {
+            return ruleExpResultArr.filter(x => x == true).length > 0;
+        }
+        else if (ruleExp.opporator == OperatorEnum.Or) {
+            return ruleExpResultArr.filter(x => x == true).length > 0;
+        }
+        else {
+            return ruleExpResultArr.filter(x => x == false).length == 0;
+        }
+    }
+    checkRuleExpForAnswerText(ruleExp, answer) {
+        var ruleExpResultArr = [];
+        if (ruleExp.logicPropertyId == LogicPropertyEnum.IsEmpty) {
+            var result = answer == null || answer == '';
+            ruleExpResultArr.push(result);
+        }
+        else if (ruleExp.logicPropertyId == LogicPropertyEnum.IsNotEmpty) {
+            var result = answer != null && answer != '';
+            ruleExpResultArr.push(result);
+        }
+        if (ruleExp.ruleExpAnswers.length == 1) {
+            return ruleExpResultArr.filter(x => x == true).length > 0;
+        }
+        else if (ruleExp.opporator == OperatorEnum.Or) {
+            return ruleExpResultArr.filter(x => x == true).length > 0;
+        }
+        else {
+            return ruleExpResultArr.filter(x => x == false).length == 0;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i1.FormBuilder }, { token: SharedDataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", outputs: { surveyResultEmit: "surveyResultEmit" }, ngImport: i0, template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n              *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"></lib-question-boolean-template>\r\n              <lib-question-text-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n              <lib-question-radio-button-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"></lib-question-radio-button-template>\r\n              <lib-question-dropdown-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n              <lib-question-check-box-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"></lib-question-check-box-template>\r\n              <lib-question-matrix-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswers($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination\">\r\n        <nav aria-label=\"Page navigation example\">\r\n          <ul class=\"pagination\">\r\n            <li class=\"page-item previous-page-item \">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingBack()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == 0}\">\u0627\u0644\u0633\u0627\u0628\u0642</a>\r\n            </li>\r\n            <li class=\"page-item active\" *ngFor=\"let item of surveyData?.surveyPages;let i = index\"\r\n              [ngClass]=\"{'active': i == fCtrls.currentPageIndex.value}\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\">{{i + 1}}</a>\r\n            </li>\r\n            <li class=\"page-item next-page-item\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingNext()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == (surveyData.surveyPages.length - 1)}\">\u0627\u0644\u062A\u0627\u0644\u064A</a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: 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"], 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", outputs: { surveyResultEmit: "surveyResultEmit" }, ngImport: i0, template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswers($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination\">\r\n        <nav aria-label=\"Page navigation example\">\r\n          <ul class=\"pagination\">\r\n            <li class=\"page-item previous-page-item \">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingBack()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == 0}\">\u0627\u0644\u0633\u0627\u0628\u0642</a>\r\n            </li>\r\n            <li class=\"page-item active\" *ngFor=\"let item of surveyData?.surveyPages;let i = index\"\r\n              [ngClass]=\"{'active': i == fCtrls.currentPageIndex.value}\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\">{{i + 1}}</a>\r\n            </li>\r\n            <li class=\"page-item next-page-item\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingNext()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == (surveyData.surveyPages.length - 1)}\">\u0627\u0644\u062A\u0627\u0644\u064A</a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: 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: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "component", type: QuestionBooleanTemplateComponent, selector: "lib-question-boolean-template", inputs: ["isShow", "isDisabled", "setQuestion"], outputs: ["emitter"] }, { kind: "pipe", type: FilterQuestionPipe, name: "filterQuestion" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-survery-lib', template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n              *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"></lib-question-boolean-template>\r\n              <lib-question-text-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n              <lib-question-radio-button-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"></lib-question-radio-button-template>\r\n              <lib-question-dropdown-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"></lib-question-dropdown-template>\r\n              <lib-question-check-box-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"></lib-question-check-box-template>\r\n              <lib-question-matrix-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswers($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination\">\r\n        <nav aria-label=\"Page navigation example\">\r\n          <ul class=\"pagination\">\r\n            <li class=\"page-item previous-page-item \">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingBack()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == 0}\">\u0627\u0644\u0633\u0627\u0628\u0642</a>\r\n            </li>\r\n            <li class=\"page-item active\" *ngFor=\"let item of surveyData?.surveyPages;let i = index\"\r\n              [ngClass]=\"{'active': i == fCtrls.currentPageIndex.value}\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\">{{i + 1}}</a>\r\n            </li>\r\n            <li class=\"page-item next-page-item\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingNext()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == (surveyData.surveyPages.length - 1)}\">\u0627\u0644\u062A\u0627\u0644\u064A</a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'lib-survery-lib', template: "<div class=\"survay-card\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\"></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template [setQuestion]=\"question\" (emitter)=\"onUpdateAnswers($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination\">\r\n        <nav aria-label=\"Page navigation example\">\r\n          <ul class=\"pagination\">\r\n            <li class=\"page-item previous-page-item \">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingBack()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == 0}\">\u0627\u0644\u0633\u0627\u0628\u0642</a>\r\n            </li>\r\n            <li class=\"page-item active\" *ngFor=\"let item of surveyData?.surveyPages;let i = index\"\r\n              [ngClass]=\"{'active': i == fCtrls.currentPageIndex.value}\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\">{{i + 1}}</a>\r\n            </li>\r\n            <li class=\"page-item next-page-item\">\r\n              <a class=\"page-link\" href=\"javascript:void(0)\" (click)=\"onPaggingNext()\"\r\n                [ngClass]=\"{'disable__btn':fCtrls.currentPageIndex.value == (surveyData.surveyPages.length - 1)}\">\u0627\u0644\u062A\u0627\u0644\u064A</a>\r\n            </li>\r\n          </ul>\r\n        </nav>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i1.FormBuilder }, { type: SharedDataService }]; }, propDecorators: { surveyResultEmit: [{
                 type: Output
             }] } });
@@ -601,7 +915,8 @@ class SurveryLibModule {
             QuestionCheckBoxTemplateComponent,
             QuestionDropdownTemplateComponent,
             QuestionMatrixTemplateComponent,
-            QuestionBooleanTemplateComponent], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule], exports: [SurveryLibComponent] }); }
+            QuestionBooleanTemplateComponent,
+            FilterQuestionPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule], exports: [SurveryLibComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, decorators: [{
@@ -614,7 +929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         QuestionCheckBoxTemplateComponent,
                         QuestionDropdownTemplateComponent,
                         QuestionMatrixTemplateComponent,
-                        QuestionBooleanTemplateComponent
+                        QuestionBooleanTemplateComponent,
+                        FilterQuestionPipe
                     ],
                     imports: [
                         CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule