survery-lib 0.1.10 → 0.1.12

package/fesm2022/survery-lib.mjs

@@ -3,11 +3,13 @@ import { Injectable, EventEmitter, Component, Output, Input, Pipe, NgModule } fr
 import { v4 } from 'uuid';
 import { Subject, of, debounceTime, map, filter } from 'rxjs';
 import * as i1 from '@ng-stack/forms';
-import { NgsFormsModule } from '@ng-stack/forms';
+import { Validators as Validators$1, NgsFormsModule } from '@ng-stack/forms';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i5 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
 import { HttpClientModule } from '@angular/common/http';
 
 var QuestionTypeEnum;
@@ -18,6 +20,7 @@ var QuestionTypeEnum;
     QuestionTypeEnum[QuestionTypeEnum["Boolean"] = 4] = "Boolean";
     QuestionTypeEnum[QuestionTypeEnum["TextInput"] = 5] = "TextInput";
     QuestionTypeEnum[QuestionTypeEnum["Matrix"] = 6] = "Matrix";
+    QuestionTypeEnum[QuestionTypeEnum["DropDownMulti"] = 7] = "DropDownMulti";
 })(QuestionTypeEnum || (QuestionTypeEnum = {}));
 
 var LogicActionEnum;
@@ -297,11 +300,11 @@ class QuestionTextTemplateComponent {
         this.fCtrls.answer.updateValueAndValidity();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionTextTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionTextTemplateComponent, selector: "lib-question-text-template", inputs: { 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\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':isShow != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n         [disabled]=\"isDisabled\"   *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n            [disabled]=\"isDisabled\" ></textarea>\r\n        </ng-template>\r\n    </div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    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\"\r\n    [ngClass]=\"{'invalid-question': fCtrls.answer.invalid , 'd-none':isShow != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <input class=\"form-control\" type=\"text\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n         [disabled]=\"isDisabled\"   *ngIf=\"isTextArea == false else textAreaTemplate\">\r\n        <ng-template #textAreaTemplate>\r\n            <textarea class=\"form-control\" rows=\"5\" [formControl]=\"convertToFormControl(fCtrls.answer)\"\r\n            [disabled]=\"isDisabled\" ></textarea>\r\n        </ng-template>\r\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: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -389,11 +392,11 @@ class QuestionRadioButtonTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionRadioButtonTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionRadioButtonTemplateComponent, selector: "lib-question-radio-button-template", inputs: { 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}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\" \r\n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"isDisabled\"\r\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    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  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"] }] }); }
 }
 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}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\" \r\n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"isDisabled\"\r\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-question-radio-button-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of  fCtrls.answerArray.controls;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\"  [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -490,11 +493,11 @@ class QuestionCheckBoxTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionCheckBoxTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionCheckBoxTemplateComponent, selector: "lib-question-check-box-template", inputs: { 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}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n\r\n    <div class=\"checkbox-button-quastion\">\r\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\r\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    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 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"] }] }); }
 }
 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}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n\r\n    <div class=\"checkbox-button-quastion\">\r\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\r\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-question-check-box-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n\n    <div class=\"checkbox-button-quastion\">\n        <div class=\"form-check check-box-form-check\"  *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{elemId}}__checkbox_{{i}}\"  [disabled]=\"isDisabled\"\n             (change)=\"onChangeAnswer(item.value ,$event)\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label  \" for=\"{{elemId}}__checkbox_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -564,11 +567,11 @@ class QuestionDropdownTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionDropdownTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionDropdownTemplateComponent, selector: "lib-question-dropdown-template", inputs: { isShow: "isShow", isDisabled: "isDisabled", setQuestion: "setQuestion" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\">\r\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\r\n        </select>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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  , 'd-none':isShow != true}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"text-quastion\">\r\n        <select class=\"form-control\" [formControl]=\"convertToFormControl(fCtrls.answer)\"  [disabled]=\"isDisabled\">\r\n            <option *ngFor=\"let item of surveyQuestion?.surveyAnswers\" [value]=\"item.answerId\">{{item.answerTitle}}</option>\r\n        </select>\r\n    </div>\r\n</div>\r\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: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -655,11 +658,11 @@ class QuestionMatrixTemplateComponent {
         return element;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: QuestionMatrixTemplateComponent, deps: [{ token: i1.FormBuilder }, { token: SurveyLibService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: QuestionMatrixTemplateComponent, selector: "lib-question-matrix-template", inputs: { 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;\"\r\n[ngClass]=\"{'d-none':isShow != true}\">\r\n  <h3 class=\"quastion-title \">\r\n    {{surveyQuestion?.questionTitle}}\r\n  </h3>\r\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\r\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\r\n      <div class=\"matrix-head-row\">\r\n        <div class=\"matrix-col\">\r\n        </div>\r\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\r\n          {{answers.answerTitle}}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"matrix-row\"\r\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\r\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\r\n        <div class=\"matrix-col matrix-sub-quastion\">\r\n          {{questionGroup.value.questionTitle}}\r\n        </div>\r\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\r\n          <div class=\"form-check form-check-radio form-check-inline\">\r\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\r\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\r\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\r\n            <label class=\"form-check-label d-md-inline d-lg-none\"\r\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: 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}}\"  [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: 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;\"\r\n[ngClass]=\"{'d-none':isShow != true}\">\r\n  <h3 class=\"quastion-title \">\r\n    {{surveyQuestion?.questionTitle}}\r\n  </h3>\r\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\r\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\r\n      <div class=\"matrix-head-row\">\r\n        <div class=\"matrix-col\">\r\n        </div>\r\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\r\n          {{answers.answerTitle}}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"matrix-row\"\r\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\r\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\r\n        <div class=\"matrix-col matrix-sub-quastion\">\r\n          {{questionGroup.value.questionTitle}}\r\n        </div>\r\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\r\n          <div class=\"form-check form-check-radio form-check-inline\">\r\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\r\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\r\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\r\n            <label class=\"form-check-label d-md-inline d-lg-none\"\r\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>" }]
+            args: [{ selector: 'lib-question-matrix-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\" style=\" border-collapse: collapse;\"\n[ngClass]=\"{'d-none':isShow != true}\">\n  <h3 class=\"quastion-title \">\n    {{surveyQuestion?.questionTitle}}\n  </h3>\n  <div class=\"matrix-question\" [formGroup]=\"rForm\">\n    <div class=\"matrix-table\" formArrayName=\"subQuestionArray\">\n      <div class=\"matrix-head-row\">\n        <div class=\"matrix-col\">\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answers of surveyQuestion?.surveyAnswers\">\n          {{answers.answerTitle}}\n        </div>\n      </div>\n\n      <div class=\"matrix-row\"\n        *ngFor=\"let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index\"\n        [ngClass]=\"{'invalid-question': questionGroup.controls.answer.invalid}\">\n        <div class=\"matrix-col matrix-sub-quastion\">\n          {{questionGroup.value.questionTitle}}\n        </div>\n        <div class=\"matrix-col\" *ngFor=\"let answer of surveyQuestion?.surveyAnswers;let answerIndex = index\">\n          <div class=\"form-check form-check-radio form-check-inline\">\n            <input class=\"form-check-input\" type=\"radio\" name=\"{{elemId}}__radio-btn-option_{{subQuestionIndex}}\"\n              id=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\" (change)=\"onChangeAnswer(questionGroup.value ,answer)\"\n              value=\"{{answer.answerId}}\"  [checked]=\"answer.answerId == questionGroup.value.answer\">\n            <label class=\"form-check-label d-md-inline d-lg-none\"\n              for=\"{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}\"> {{answer.answerTitle}}</label>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -745,11 +748,95 @@ 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}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\" \r\n        *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\" [disabled]=\"isDisabled\"\r\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    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 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"] }] }); }
 }
 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}\">\r\n    <h3 class=\"quastion-title \">\r\n        {{fCtrls.title.value}}\r\n    </h3>\r\n    <div class=\"radio-button-quastion\">\r\n        <div class=\"form-check form-check-radio form-check-inline\" \r\n        *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\r\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\" [disabled]=\"isDisabled\"\r\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\r\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-question-boolean-template', template: "<div class=\"quastion\" [attr.id]=\"'question_'+fCtrls.id.value\"  [ngClass]=\"{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}\">\n    <h3 class=\"quastion-title \">\n        {{fCtrls.title.value}}\n    </h3>\n    <div class=\"radio-button-quastion\">\n        <div class=\"form-check form-check-radio form-check-inline\" \n        *ngFor=\"let item of fCtrls.answerArray.controls ;let i = index\">\n            <input class=\"form-check-input\" type=\"radio\" (change)=\"onChangeAnswer(item.value)\" [disabled]=\"isDisabled\"\n                name=\"{{elemId}}__radio-btn-option\" id=\"{{elemId}}__radio-btn_{{i}}\" [checked]=\"item.value.isSelected == true? true : null\">\n            <label class=\"form-check-label\" for=\"{{elemId}}__radio-btn_{{i}}\">{{item.value.title}}</label>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
+                type: Output
+            }], isShow: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], setQuestion: [{
+                type: Input
+            }] } });
+
+class QuestionDropdownMultiTemplateComponent {
+    get fCtrls() {
+        return this.rForm.controls;
+    }
+    get questionTypeEnum() {
+        return QuestionTypeEnum;
+    }
+    set setQuestion(value) {
+        this.surveyQuestion = value;
+        this.rForm.patchValue({
+            id: value.questionId,
+            name: value.questionName,
+            title: value.questionTitle,
+            typeId: value.questionTypeId,
+            description: value.questionDescription
+        });
+        value.surveyAnswers.forEach(surveryAnswer => {
+            this.fCtrls.answerArray.push(this._formBuilder.group({
+                id: [surveryAnswer.answerId],
+                title: [surveryAnswer.answerTitle],
+                isSelected: [false]
+            }));
+        });
+        if (value.isRequired == true) {
+            this.fCtrls.answer.addValidators([Validators$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],
+            title: [null],
+            typeId: [null],
+            description: [null],
+            answer: [null],
+            answerArray: this._formBuilder.array([])
+        });
+    }
+    ngOnInit() {
+        this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+            const formValue = this.rForm.value;
+            this.emitter.emit({
+                QuestionId: formValue.id,
+                IsValid: this.fCtrls.answer.valid,
+                Answer: value
+            });
+        });
+        this.fCtrls.answer.setValue(null);
+        this._surveyLibService.surveyAnswersObsrv
+            .pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
+            .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
+            .subscribe(answer => {
+            const distinctArray = answer.AnswerIdArr.filter((n, i) => answer.AnswerIdArr.indexOf(n) === i);
+            this.fCtrls.answer.setValue(distinctArray);
+        });
+    }
+    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    </h3>\n    <div class=\"text-quastion\">\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: 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    </h3>\n    <div class=\"text-quastion\">\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"] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: SurveyLibService }]; }, propDecorators: { emitter: [{
                 type: Output
             }], isShow: [{
@@ -787,6 +874,17 @@ class SurveryLibComponent {
     get isLastPage() {
         return this.fCtrls.currentPageIndex.value == (this.surveyData?.surveyPages.length - 1);
     }
+    get showedSurveyPages() {
+        var pageArr = [];
+        for (let index = 0; index < this.fCtrls.questionArray.value.length; index++) {
+            const question = this.fCtrls.questionArray.value[index];
+            if (question.isShow == true) {
+                pageArr.push(question.surveyPageIndex);
+            }
+        }
+        const distinctArray = pageArr.filter((n, i) => pageArr.indexOf(n) === i);
+        return distinctArray.sort((a, b) => a - b);
+    }
     get surveyResult() {
         return {
             currentPageIndex: this.fCtrls.currentPageIndex.value,
@@ -830,18 +928,15 @@ class SurveryLibComponent {
                 this.defaultAnswers = [...value.defaultAnswers];
                 this.fCtrls.currentPageIndex.setValue(value.currentpage);
             }
-            console.log(this.reloadDefaultAnswerId);
             this.reloadDefaultAnswerId = v4();
-            console.log(this.reloadDefaultAnswerId);
         });
     }
     onPaggingNext() {
         var isHaveInvalidRecords = this.haveInValidateQuestions();
         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);
+            const nextPageIndex = this.getNextShowedPage();
+            if (nextPageIndex != null) {
+                this.fCtrls.currentPageIndex.setValue(nextPageIndex);
             }
             else {
                 var questionArr = this.fCtrls.questionArray.value.filter(x => x.isMatrixGroup != true).map(x => {
@@ -868,10 +963,9 @@ class SurveryLibComponent {
         }
     }
     onPaggingBack() {
-        var currentPageIndex = this.fCtrls.currentPageIndex.value;
-        if (currentPageIndex > 0) {
-            currentPageIndex = Number(currentPageIndex) - 1;
-            this.fCtrls.currentPageIndex.setValue(currentPageIndex);
+        const prevPageIndex = this.getPrevShowedPage();
+        if (prevPageIndex != null) {
+            this.fCtrls.currentPageIndex.setValue(prevPageIndex);
         }
     }
     onUpdateAnswers(model) {
@@ -889,7 +983,7 @@ class SurveryLibComponent {
                 answerText: model.Answer
             });
         }
-        else if (questionGroup.value.questionType == this.questionTypeEnum.CheckBox) {
+        else if (questionGroup.value.questionType == this.questionTypeEnum.CheckBox || questionGroup.value.questionType == this.questionTypeEnum.DropDownMulti) {
             questionGroup.controls.answerIdArr.setValue(model.Answer);
         }
         else {
@@ -1018,12 +1112,30 @@ class SurveryLibComponent {
             });
         });
     }
+    getNextShowedPage() {
+        var currentPageIndex = this.fCtrls.currentPageIndex.value;
+        var showedPages = this.showedSurveyPages;
+        var nextShowedPages = showedPages.filter(x => x > currentPageIndex);
+        if (nextShowedPages.length > 0) {
+            return nextShowedPages[0];
+        }
+        return null;
+    }
+    getPrevShowedPage() {
+        var currentPageIndex = this.fCtrls.currentPageIndex.value;
+        var showedPages = this.showedSurveyPages;
+        var prevShowedPages = showedPages.filter(x => x < currentPageIndex);
+        if (prevShowedPages.length > 0) {
+            return prevShowedPages[prevShowedPages.length - 1];
+        }
+        return null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibComponent, deps: [{ token: SurveyLibService }, { token: i1.FormBuilder }, { token: CheckRuleExpsUsecase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SurveryLibComponent, selector: "lib-survery-lib", outputs: { surveyResultEmit: "surveyResultEmit" }, ngImport: i0, template: "<div class=\"survay-card\" *ngIf=\"surveyData != null\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\" ></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{surveyData.surveyPages.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: 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" }] }); }
+    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\" *ngIf=\"surveyData != null\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\" ></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></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\" (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 #questionMatrixTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{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}\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: "component", type: QuestionDropdownMultiTemplateComponent, selector: "lib-question-dropdown-multi-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\" *ngIf=\"surveyData != null\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\" ></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-dropdown-template>\r\n\r\n              <lib-question-check-box-template #questionCheckBoxTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.CheckBox\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-check-box-template>\r\n\r\n              <lib-question-matrix-template #questionMatrixTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{surveyData.surveyPages.length}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".disable__btn{background-color:gray!important;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'lib-survery-lib', template: "<div class=\"survay-card\" *ngIf=\"surveyData != null\">\r\n  <div *ngFor=\"let surveyPage of surveyData?.surveyPages; let surveyPageIndex = index\"\r\n    [attr.id]=\"'survey-page_'+surveyPageIndex\" [ngClass]=\"{'d-none': surveyPageIndex != fCtrls.currentPageIndex.value}\">\r\n    <ng-container *ngFor=\"let item of surveyPage.surveyQuestionGroups\">\r\n      <div class=\"survay-card\">\r\n        <div class=\"survay-card-body\">\r\n          <div class=\"survay-group\">\r\n            <div class=\"title\">\r\n              <h2 class=\"group-title\">\r\n                {{item.questionGroupName}}\r\n              </h2>\r\n              <span class=\"group-sub-title \">\r\n                {{item.questionGroupDescription}}\r\n              </span>\r\n            </div>\r\n            <ng-container *ngFor=\"let question of item.surveyQuestions\">\r\n              <lib-question-boolean-template #questionBooleanTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Boolean\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-boolean-template>\r\n\r\n              <lib-question-text-template #questionTextTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.TextInput\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\"\r\n                [isTextArea]=\"question.isAdvanceTextArea\" ></lib-question-text-template>\r\n\r\n              <lib-question-radio-button-template #questionRadioButtonTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.RadioButton\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-radio-button-template>\r\n\r\n              <lib-question-dropdown-template #questionDropdownTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.DropDown\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></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\" (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 #questionMatrixTemplate [setQuestion]=\"question\" (emitter)=\"onUpdateAnswer($event)\"\r\n                *ngIf=\"question.questionTypeId == questionTypeEnum.Matrix\"\r\n                [isShow]=\" (question|filterQuestion : fCtrls.questionArray.value).isShow\"\r\n                [isDisabled]=\"(question|filterQuestion : fCtrls.questionArray.value).isDisabled\" ></lib-question-matrix-template>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"survay-card-footr\" *ngIf=\"surveyData != null\">\r\n    <div class=\"container\" style=\" justify-content: start;\">\r\n      <div class=\"survay-pagination fw-bold\" >\r\n        <span>{{fCtrls.currentPageIndex.value + 1}}</span>\r\n        <span class=\"ms-2 me-2\">of</span>\r\n        <span>{{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}\n"] }]
         }], ctorParameters: function () { return [{ type: SurveyLibService }, { type: i1.FormBuilder }, { type: CheckRuleExpsUsecase }]; }, propDecorators: { surveyResultEmit: [{
                 type: Output
             }] } });
@@ -1076,10 +1188,11 @@ class SurveryLibModule {
             QuestionDropdownTemplateComponent,
             QuestionMatrixTemplateComponent,
             QuestionBooleanTemplateComponent,
+            QuestionDropdownMultiTemplateComponent,
             FilterQuestionPipe,
             DefaultQuestionAnswerPipe,
-            DefaultQuestionAnswersPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule], exports: [SurveryLibComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule] }); }
+            DefaultQuestionAnswersPipe], imports: [CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule], 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, NgSelectModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SurveryLibModule, decorators: [{
             type: NgModule,
@@ -1092,12 +1205,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         QuestionDropdownTemplateComponent,
                         QuestionMatrixTemplateComponent,
                         QuestionBooleanTemplateComponent,
+                        QuestionDropdownMultiTemplateComponent,
                         FilterQuestionPipe,
                         DefaultQuestionAnswerPipe,
                         DefaultQuestionAnswersPipe
                     ],
                     imports: [
-                        CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule
+                        CommonModule, HttpClientModule, ReactiveFormsModule, FormsModule, NgsFormsModule, NgSelectModule
                     ],
                     exports: [
                         SurveryLibComponent