survery-lib 0.1.10 → 0.1.11

package/scss/style.scss

@@ -0,0 +1,88 @@
+@import "../../../node_modules/@ng-select/ng-select/scss/default.theme.scss";
+
+lib-survery-lib {
+    .survay-pagination {
+        nav {
+            ul.pagination {
+                display: flex;
+                gap: 8px;
+
+                li.page-item.next-page-item {
+                    a {
+                        &::after {
+                            content: ' ';
+                            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxOCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkFycm93IC0gTGVmdCI+CjxwYXRoIGlkPSJGaWxsIDEiIG9wYWNpdHk9IjAuNCIgZD0iTTEyLjc5NzUgNC44MDk1N0wxNi40OTY3IDQuNDgyNDJDMTcuMzI2OSA0LjQ4MjQyIDE4IDUuMTYyMDYgMTggNi4wMDAzMkMxOCA2LjgzODU4IDE3LjMyNjkgNy41MTgyMiAxNi40OTY3IDcuNTE4MjJMMTIuNzk3NSA3LjE5MTA3QzEyLjE0NjMgNy4xOTEwNyAxMS42MTgzIDYuNjU3OTMgMTEuNjE4MyA2LjAwMDMyQzExLjYxODMgNS4zNDE2MSAxMi4xNDYzIDQuODA5NTcgMTIuNzk3NSA0LjgwOTU3WiIgZmlsbD0iIzRDM0Q4RiIvPgo8cGF0aCBpZD0iRmlsbCA0IiBkPSJNMC4zNzUzNCA0Ljg2OTg0QzAuNDMzMTU3IDQuODExNDYgMC42NDkxNTUgNC41NjQ3MSAwLjg1MjA2MSA0LjM1OTgzQzIuMDM1NjggMy4wNzY1NiA1LjEyNjE5IDAuOTc4MTUzIDYuNzQyOSAwLjMzNTk2NUM2Ljk4ODM1IDAuMjMzNTIzIDcuNjA5MDcgMC4wMTU0MjEzIDcuOTQxNzkgMEM4LjI1OTI0IDAgOC41NjI1MSAwLjA3MzgwMjEgOC44NTE2IDAuMjE5MjAzQzkuMjEyNjkgMC40MjI5ODUgOS41MDA2OCAwLjc0NDYzIDkuNjU5OTUgMS4xMjM1NUM5Ljc2MTQxIDEuMzg1NzIgOS45MjA2OCAyLjE3MzMxIDkuOTIwNjggMi4xODc2M0MxMC4wNzg5IDMuMDQ3OTIgMTAuMTY1IDQuNDQ2ODUgMTAuMTY1IDUuOTkzMzlDMTAuMTY1IDcuNDY1MDMgMTAuMDc4OSA4LjgwNjY4IDkuOTQ5MDQgOS42ODEyOUM5LjkzNDg2IDkuNjk2NzEgOS43NzU1OSAxMC42NzM4IDkuNjAyMTQgMTEuMDA4NkM5LjI4NDY5IDExLjYyMTEgOC42NjM5NyAxMiA3Ljk5OTYxIDEySDcuOTQxNzlDNy41MDg3MSAxMS45ODU3IDYuNTk4OSAxMS42MDU3IDYuNTk4OSAxMS41OTI0QzUuMDY4MzcgMTAuOTUwMiAyLjA1MDk2IDguOTUzMTkgMC44Mzc4NzkgNy42MjU4NUMwLjgzNzg3OSA3LjYyNTg1IDAuNDk1MzM4IDcuMjg0MzggMC4zNDY5NzYgNy4wNzE3OEMwLjExNTcwNiA2Ljc2NTU2IDcuMTUyNTZlLTA1IDYuMzg2NjMgNy4xNTI1NmUtMDUgNi4wMDc3MUM3LjE1MjU2ZS0wNSA1LjU4NDczIDAuMTI5ODg4IDUuMTkxNDggMC4zNzUzNCA0Ljg2OTg0WiIgZmlsbD0iIzRDM0Q4RiIvPgo8L2c+Cjwvc3ZnPgo=);
+                            width: 20px;
+                            height: 20px;
+                            display: inline-block;
+                            background-repeat: no-repeat;
+                            background-position: center;
+                        }
+                    }
+                }
+
+                li.page-item.previous-page-item {
+                    a {
+                        &::before {
+                            content: ' ';
+                            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxOCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkFycm93IC0gTGVmdCI+CjxwYXRoIGlkPSJGaWxsIDEiIG9wYWNpdHk9IjAuNCIgZD0iTTUuMjAyNDggNC44MDk1N0wxLjUwMzI1IDQuNDgyNDJDMC42NzMwODMgNC40ODI0MiAwIDUuMTYyMDYgMCA2LjAwMDMyQzAgNi44Mzg1OCAwLjY3MzA4MyA3LjUxODIyIDEuNTAzMjUgNy41MTgyMkw1LjIwMjQ4IDcuMTkxMDdDNS44NTM3NSA3LjE5MTA3IDYuMzgxNzQgNi42NTc5MyA2LjM4MTc0IDYuMDAwMzJDNi4zODE3NCA1LjM0MTYxIDUuODUzNzUgNC44MDk1NyA1LjIwMjQ4IDQuODA5NTdaIiBmaWxsPSIjNEMzRDhGIi8+CjxwYXRoIGlkPSJGaWxsIDQiIGQ9Ik0xNy42MjQ3IDQuODY5ODRDMTcuNTY2OCA0LjgxMTQ2IDE3LjM1MDggNC41NjQ3MSAxNy4xNDc5IDQuMzU5ODNDMTUuOTY0MyAzLjA3NjU2IDEyLjg3MzggMC45NzgxNTMgMTEuMjU3MSAwLjMzNTk2NUMxMS4wMTE2IDAuMjMzNTIzIDEwLjM5MDkgMC4wMTU0MjEzIDEwLjA1ODIgMEM5Ljc0MDc2IDAgOS40Mzc0OSAwLjA3MzgwMjEgOS4xNDg0IDAuMjE5MjAzQzguNzg3MzEgMC40MjI5ODUgOC40OTkzMiAwLjc0NDYzIDguMzQwMDUgMS4xMjM1NUM4LjIzODU5IDEuMzg1NzIgOC4wNzkzMiAyLjE3MzMxIDguMDc5MzIgMi4xODc2M0M3LjkyMTE0IDMuMDQ3OTIgNy44MzQ5NiA0LjQ0Njg1IDcuODM0OTYgNS45OTMzOUM3LjgzNDk2IDcuNDY1MDMgNy45MjExNCA4LjgwNjY4IDguMDUwOTYgOS42ODEyOUM4LjA2NTE0IDkuNjk2NzEgOC4yMjQ0MSAxMC42NzM4IDguMzk3ODYgMTEuMDA4NkM4LjcxNTMxIDExLjYyMTEgOS4zMzYwMyAxMiAxMC4wMDA0IDEySDEwLjA1ODJDMTAuNDkxMyAxMS45ODU3IDExLjQwMTEgMTEuNjA1NyAxMS40MDExIDExLjU5MjRDMTIuOTMxNiAxMC45NTAyIDE1Ljk0OSA4Ljk1MzE5IDE3LjE2MjEgNy42MjU4NUMxNy4xNjIxIDcuNjI1ODUgMTcuNTA0NyA3LjI4NDM4IDE3LjY1MyA3LjA3MTc4QzE3Ljg4NDMgNi43NjU1NiAxNy45OTk5IDYuMzg2NjMgMTcuOTk5OSA2LjAwNzcxQzE3Ljk5OTkgNS41ODQ3MyAxNy44NzAxIDUuMTkxNDggMTcuNjI0NyA0Ljg2OTg0WiIgZmlsbD0iIzRDM0Q4RiIvPgo8L2c+Cjwvc3ZnPgo=);
+                            width: 20px;
+                            height: 20px;
+                            display: inline-block;
+                            background-repeat: no-repeat;
+                            background-position: center;
+                        }
+                    }
+                }
+
+                li.page-item {
+                    &.active {
+                        a {
+                            border-radius: 8px;
+                            background: var(--primary-100, #4C3D8F);
+                            color: #fff;
+                        }
+                    }
+
+                    &:hover {
+                        a {
+                            border-radius: 8px;
+                            background: var(--primary-100, #4C3D8F);
+                            color: #fff;
+                        }
+                    }
+
+                    a {
+                        color: var(--dark-100, #363636);
+                        /* Body/Bold */
+                        font-size: 16px;
+                        font-style: normal;
+                        font-weight: 700;
+                        line-height: 24px;
+                        /* 150% */
+                        display: flex;
+                        min-width: 50px;
+                        height: 50px;
+                        padding: 20px;
+                        justify-content: center;
+                        align-items: center;
+                        gap: 10px;
+                        border-radius: 8px;
+                        background: var(--secondary-20, #F4F5FE);
+                        border: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .survey-page_submitted .invalid-question {
+        border: 2px solid red;
+        border-radius: 5px;
+        border-bottom: 2px solid red !important;
+    }
+
+    ng-select{
+        font-size: 20px !important;
+    }
+}

package/src/lib/components/question-boolean-template/question-boolean-template.component.html

@@ -0,0 +1,13 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="radio-button-quastion">
+        <div class="form-check form-check-radio form-check-inline" 
+        *ngFor="let item of fCtrls.answerArray.controls ;let i = index">
+            <input class="form-check-input" type="radio" (change)="onChangeAnswer(item.value)" [disabled]="isDisabled"
+                name="{{elemId}}__radio-btn-option" id="{{elemId}}__radio-btn_{{i}}" [checked]="item.value.isSelected == true? true : null">
+            <label class="form-check-label" for="{{elemId}}__radio-btn_{{i}}">{{item.value.title}}</label>
+        </div>
+    </div>
+</div>

package/src/lib/components/question-boolean-template/question-boolean-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionBooleanTemplateComponent } from './question-boolean-template.component';
+
+describe('QuestionBooleanTemplateComponent', () => {
+  let component: QuestionBooleanTemplateComponent;
+  let fixture: ComponentFixture<QuestionBooleanTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionBooleanTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionBooleanTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-boolean-template/question-boolean-template.component.ts

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Validators, FormControl } from '@angular/forms';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionRadioButtonTemplateFormInterface } from '../../../shared/form-interfaces/question-radio-button-template.form-interface';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { AnswerChildOfQuestionBooleanTemplateFormInterface, QuestionBooleanTemplateFormInterface } from '../../../shared/form-interfaces/question-boolean-template.form-interface';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { v4 as guidGenerator } from 'uuid';
+import { SurveyAnswerDto } from '../../../shared/dtos/survey-answer.dto';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-boolean-template',
+  templateUrl: './question-boolean-template.component.html',
+  styleUrls: ['./question-boolean-template.component.scss']
+})
+export class QuestionBooleanTemplateComponent implements OnInit {
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionBooleanTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    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<AnswerChildOfQuestionBooleanTemplateFormInterface>({
+        id: [surveryAnswer.answerId],
+        title: [surveryAnswer.answerTitle],
+        isSelected: [false]
+      }))
+    })
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder  , private _surveyLibService:SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionBooleanTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null],
+      answerArray: this._formBuilder.array<AnswerChildOfQuestionBooleanTemplateFormInterface>([])
+    });
+  }
+
+  ngOnInit(): void {
+    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=>{
+      this.fCtrls.answer.setValue(answer.AnswerId);
+
+      const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answer.AnswerId);
+      if(groupIndex > -1){
+      this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+      }
+    })
+  }
+
+  onChangeAnswer(item: AnswerChildOfQuestionBooleanTemplateFormInterface) {
+    this.fCtrls.answer.setValue(item.id);
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-check-box-template/question-check-box-template.component.html

@@ -0,0 +1,13 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+
+    <div class="checkbox-button-quastion">
+        <div class="form-check check-box-form-check"  *ngFor="let item of fCtrls.answerArray.controls ;let i = index">
+            <input type="checkbox" class="form-check-input" id="{{elemId}}__checkbox_{{i}}"  [disabled]="isDisabled"
+             (change)="onChangeAnswer(item.value ,$event)" [checked]="item.value.isSelected == true? true : null">
+            <label class="form-check-label  " for="{{elemId}}__checkbox_{{i}}">{{item.value.title}}</label>
+        </div>
+    </div>
+</div>

package/src/lib/components/question-check-box-template/question-check-box-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionCheckBoxTemplateComponent } from './question-check-box-template.component';
+
+describe('QuestionCheckBoxTemplateComponent', () => {
+  let component: QuestionCheckBoxTemplateComponent;
+  let fixture: ComponentFixture<QuestionCheckBoxTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionCheckBoxTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionCheckBoxTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-check-box-template/question-check-box-template.component.ts

@@ -0,0 +1,124 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { SurveyAnswerDto } from '../../../shared/dtos/survey-answer.dto';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import {
+  AnswerChildOfQuestionCheckBoxTemplateFormInterface,
+  QuestionCheckBoxTemplateFormInterface
+} from '../../../shared/form-interfaces/question-check-box-template.form-interface';
+import { QuestionRadioButtonTemplateFormInterface } from '../../../shared/form-interfaces/question-radio-button-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { v4 as guidGenerator } from 'uuid';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { AnswerChildOfQuestionBooleanTemplateFormInterface } from '../../../shared/form-interfaces/question-boolean-template.form-interface';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-check-box-template',
+  templateUrl: './question-check-box-template.component.html',
+  styleUrls: ['./question-check-box-template.component.scss']
+})
+export class QuestionCheckBoxTemplateComponent implements OnInit {
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionCheckBoxTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    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<AnswerChildOfQuestionCheckBoxTemplateFormInterface>({
+        id: [surveryAnswer.answerId],
+        title: [surveryAnswer.answerTitle],
+        isSelected: [false]
+      }))
+    })
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder, private _surveyLibService: SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionCheckBoxTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null],
+      answerArray: this._formBuilder.array<AnswerChildOfQuestionCheckBoxTemplateFormInterface>([])
+    });
+  }
+
+  ngOnInit(): void {
+    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);
+
+        answer.AnswerIdArr.forEach(answerId => {
+          const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answerId);
+          if (groupIndex > -1) {
+            this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+          }
+        });
+      })
+  }
+
+  onChangeAnswer(item: AnswerChildOfQuestionBooleanTemplateFormInterface, event: Event) {
+    var answerArr: number[] = this.fCtrls.answer.value || [];
+
+    if ((event.target as any).checked == true) {
+      answerArr.push(item.id);
+    } else {
+      answerArr = answerArr.filter(x => x != item.id);
+    }
+
+    answerArr = answerArr.length == 0 ? [] : answerArr;
+    this.fCtrls.answer.setValue(answerArr);
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.html

@@ -0,0 +1,10 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="text-quastion">
+        <ng-select [items]="this.fCtrls.answerArray.value" bindValue="id" bindLabel="title"  class="form-control"
+         [formControl]="convertToFormControl(fCtrls.answer)"  [disabled]="isDisabled" [multiple]="true">
+         </ng-select>
+    </div>
+</div>

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.scss

@@ -0,0 +1,3 @@
+.text-quastion .form-control {
+    padding: 10px; 
+}

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionDropdownMultiTemplateComponent } from './question-dropdown-multi-template.component';
+
+describe('QuestionDropdownMultiTemplateComponent', () => {
+  let component: QuestionDropdownMultiTemplateComponent;
+  let fixture: ComponentFixture<QuestionDropdownMultiTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionDropdownMultiTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionDropdownMultiTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.ts

@@ -0,0 +1,100 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {  FormControl } from '@angular/forms';
+import { FormGroup, Validators , FormBuilder} from '@ng-stack/forms';
+import { QuestionCheckBoxTemplateFormInterface } from '../../../shared/form-interfaces/question-check-box-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { v4 as guidGenerator } from 'uuid';
+import { AnswerChildOfQuestionDropDownMultiTemplateFormInterface, QuestionDropDownMultiTemplateFormInterface } from '../../../shared/form-interfaces/question-dropdown-multi-template.form-interface';
+import { SurveyLibService } from '../../services/survey-lib.service';
+import { AnswerChildOfQuestionBooleanTemplateFormInterface } from '../../../shared/form-interfaces/question-boolean-template.form-interface';
+
+@Component({
+  selector: 'lib-question-dropdown-multi-template',
+  templateUrl: './question-dropdown-multi-template.component.html',
+  styleUrls: ['./question-dropdown-multi-template.component.scss']
+})
+export class QuestionDropdownMultiTemplateComponent {
+  
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionDropDownMultiTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    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<AnswerChildOfQuestionDropDownMultiTemplateFormInterface>({
+        id: [surveryAnswer.answerId],
+        title: [surveryAnswer.answerTitle],
+        isSelected: [false]
+      }))
+    })
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder, private _surveyLibService: SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionDropDownMultiTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null],
+      answerArray: this._formBuilder.array<AnswerChildOfQuestionDropDownMultiTemplateFormInterface>([])
+    });
+  }
+
+  ngOnInit(): void {
+    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: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-dropdown-template/question-dropdown-template.component.html

@@ -0,0 +1,10 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="text-quastion">
+        <select class="form-control" [formControl]="convertToFormControl(fCtrls.answer)"  [disabled]="isDisabled">
+            <option *ngFor="let item of surveyQuestion?.surveyAnswers" [value]="item.answerId">{{item.answerTitle}}</option>
+        </select>
+    </div>
+</div>

package/src/lib/components/question-dropdown-template/question-dropdown-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionDropdownTemplateComponent } from './question-dropdown-template.component';
+
+describe('QuestionDropdownTemplateComponent', () => {
+  let component: QuestionDropdownTemplateComponent;
+  let fixture: ComponentFixture<QuestionDropdownTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionDropdownTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionDropdownTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-dropdown-template/question-dropdown-template.component.ts

@@ -0,0 +1,87 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionDropdownTemplateFormInterface } from '../../../shared/form-interfaces/question-dropdown-template.form-interface';
+import { QuestionRadioButtonTemplateFormInterface } from '../../../shared/form-interfaces/question-radio-button-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-dropdown-template',
+  templateUrl: './question-dropdown-template.component.html',
+  styleUrls: ['./question-dropdown-template.component.scss']
+})
+export class QuestionDropdownTemplateComponent implements OnInit {
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionDropdownTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.surveyQuestion = value;
+    this.rForm.patchValue({
+      id: value.questionId,
+      name: value.questionName,
+      title: value.questionTitle,
+      typeId: value.questionTypeId,
+      description: value.questionDescription
+    });
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder ,private  _surveyLibService :SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionDropdownTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null] 
+    });
+  }
+
+  ngOnInit(): void {
+    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=>{
+      this.fCtrls.answer.setValue(answer.AnswerId);
+    })
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}