vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/preview-wrapper/preview-wrapper.component.ts

@@ -0,0 +1,62 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { EditorService } from '../../../services/editor.service';
+import { ValidatorService } from '../../../services/validator.service';
+
+@Component({
+  selector: 'app-preview-wrapper',
+  templateUrl: './preview-wrapper.component.html',
+  styleUrls: ['./preview-wrapper.component.less']
+})
+export class PreviewWrapperComponent implements OnInit {
+
+  @Input() question!: any;
+  @Input() questionIndex!: number;
+  @Output() makeActiveQuestion = new EventEmitter<any>();
+  @Output() validQuestionData = new EventEmitter();
+  errorPresent = false;
+  questionIndexSubscription!: Subscription;
+  viewComments!: boolean;
+  viewAttachments!: boolean;
+  viewMessage!: boolean;
+  constructor(private fd: EditorService, private validator: ValidatorService) { }
+
+  ngOnInit(): void {
+    // if (Object.values(this.question.errorArray).length === 0){
+    // if (!this.question.errorArray || Object.values(this.question.errorArray).length === 0) {
+    //   this.checkForValidationStatus('partial');
+    // }
+    this.checkForValidationStatus('partial');
+  }
+
+  editQuestion() {
+    this.makeActiveQuestion.emit(this.questionIndex);
+  }
+
+  /**
+   * Operation on click of save button
+   */
+  async checkForValidationStatus(mode?:any) {
+    const status = await this.validator.validate(this.question);
+    if (status.valid === true) {
+      this.errorPresent = false;
+      this.validator.validatedQuestions[status.question.name] = status.question;
+      // this.validQuestionData.emit(mode);
+    } else {
+      this.errorPresent = true;
+      delete this.validator.validatedQuestions[status.question.name];
+      
+    }
+  }
+  showComments() {
+    this.viewComments = !this.viewComments;
+  }
+  showAttachments() {
+    this.viewAttachments = !this.viewAttachments;
+  }
+  showMessage() {
+    this.viewMessage = !this.viewMessage;
+  }
+
+
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/preview.module.ts

@@ -0,0 +1,90 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PreviewWrapperComponent } from './preview-wrapper/preview-wrapper.component';
+import { PreviewMultipleChoiceComponent } from './preview-multiple-choice/preview-multiple-choice.component';
+import { PreviewCheckboxComponent } from './preview-checkbox/preview-checkbox.component';
+import { PreviewImageChoiceComponent } from './preview-image-choice/preview-image-choice.component';
+import { PreviewStarRatingComponent } from './preview-star-rating/preview-star-rating.component';
+import { PreviewSingleTextboxComponent } from './preview-single-textbox/preview-single-textbox.component';
+import { PreviewCommentBoxComponent } from './preview-comment-box/preview-comment-box.component';
+import { PreviewMatrixDropdownComponent } from './preview-matrix-dropdown/preview-matrix-dropdown.component';
+import { PreviewDropdownComponent } from './preview-dropdown/preview-dropdown.component';
+import { PreviewMatrixRatingScaleComponent } from './preview-matrix-rating-scale/preview-matrix-rating-scale.component';
+import { PreviewRankingComponent } from './preview-ranking/preview-ranking.component';
+import { PreviewSliderComponent } from './preview-slider/preview-slider.component';
+import { PreviewMultipleTextboxComponent } from './preview-multiple-textbox/preview-multiple-textbox.component';
+import { PreviewDateTimeComponent } from './preview-date-time/preview-date-time.component';
+import { PreviewFileUploadComponent } from './preview-file-upload/preview-file-upload.component';
+// import { TooltipModule } from 'projects/ui-components/src/lib/ui-utility/tooltip/tooltip.module';
+// import { PopoverModule } from 'projects/ui-components/src/lib/ui-utility/popover/popover.module';
+// import { FormgroupModule, UiDialogModule } from 'projects/ui-components/src';
+import { VcomplyEditorModule } from '@vcomply/editor';
+// import { NoDataModule } from 'src/app/ui-kit/no-data/no-data.module';
+import { DpDatePickerModule } from 'ng2-date-picker';
+import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
+import { WelcomeComponent } from './welcome/welcome.component';
+import { ThankYouComponent } from './thank-you/thank-you.component';
+import { TooltipModule } from '../../../../ui-kit/tooltip/tooltip.module';
+import { PopoverModule } from '../../../../ui-kit/popover/popover.module';
+import { DialogModule } from '../../../../ui-kit/dialog/dialog.module';
+import { FormgroupModule } from '../../../../ui-kit/formgroup/formgroup.module';
+import { NoDataModule } from '../../../no-data/no-data.module';
+import { SelectModule } from '../../../../formgroup/select/select.module';
+import { QuickSettingsComponent } from '../../../assessment-preview/quick-settings/quick-settings.component';
+// import { SelectModule } from 'src/app/ui-kit/select/select.module';
+
+@NgModule({
+  declarations: [
+    PreviewWrapperComponent,
+    PreviewMultipleChoiceComponent,
+    PreviewCheckboxComponent,
+    PreviewImageChoiceComponent,
+    PreviewStarRatingComponent,
+    PreviewSingleTextboxComponent,
+    PreviewCommentBoxComponent,
+    PreviewMatrixDropdownComponent,
+    PreviewDropdownComponent,
+    PreviewMatrixRatingScaleComponent,
+    PreviewRankingComponent,
+    PreviewSliderComponent,
+    PreviewMultipleTextboxComponent,
+    PreviewDateTimeComponent,
+    PreviewFileUploadComponent,
+    WelcomeComponent,
+    ThankYouComponent,
+  ],
+  imports: [
+    CommonModule,
+    TooltipModule,
+    PopoverModule,
+    DialogModule,
+    // MarxEditorModule,
+    VcomplyEditorModule,
+    FormgroupModule,
+    NoDataModule,
+    DpDatePickerModule,
+    NgxMaterialTimepickerModule,
+    SelectModule,
+    QuickSettingsComponent,
+  ],
+  exports: [
+    PreviewWrapperComponent,
+    PreviewMultipleChoiceComponent,
+    PreviewCheckboxComponent,
+    PreviewImageChoiceComponent,
+    PreviewStarRatingComponent,
+    PreviewSingleTextboxComponent,
+    PreviewCommentBoxComponent,
+    PreviewMatrixDropdownComponent,
+    PreviewDropdownComponent,
+    PreviewMatrixRatingScaleComponent,
+    PreviewRankingComponent,
+    PreviewSliderComponent,
+    PreviewMultipleTextboxComponent,
+    PreviewDateTimeComponent,
+    PreviewFileUploadComponent,
+    WelcomeComponent,
+    ThankYouComponent,
+  ],
+})
+export class PreviewModule {}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/thank-you/thank-you.component.html

@@ -0,0 +1,5 @@
+<div class="thank-you-preview vx-text-center vx-mt-5">
+    <div class="image"><img src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/o/5e481a5d61ca5e14f5731049/survey/61ee3c97a973170009458150/welcome/202011270933381643024815820.png" /></div>
+    <div class="heading vx-fs-16 vx-paragraph-txt vx-lih-6 vx-mb-5">Thank you heading</div>
+    <div class="details vx-fs-14 vx-label-txt vx-pb-3 vx-mb-5">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.</div>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/thank-you/thank-you.component.less

@@ -0,0 +1,32 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/mixin/mixin.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url( "https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+
+.thank-you-preview {
+    .image {
+        width: 30rem;
+        margin: 0 auto 2rem;
+
+        img {
+            border-radius: .625rem;
+            width: 100%;
+        }
+    }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/thank-you/thank-you.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThankYouComponent } from './thank-you.component';
+
+describe('ThankYouComponent', () => {
+  let component: ThankYouComponent;
+  let fixture: ComponentFixture<ThankYouComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ThankYouComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThankYouComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/thank-you/thank-you.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-thank-you',
+  templateUrl: './thank-you.component.html',
+  styleUrls: ['./thank-you.component.less']
+})
+export class ThankYouComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/welcome/welcome.component.html

@@ -0,0 +1,5 @@
+<div class="welcome-preview vx-text-center vx-mb-5">
+    <div class="image"><img src="https://s3-eu-west-1.amazonaws.com/eu.v-comply.com/o/5e481a5d61ca5e14f5731049/survey/61ee3c97a973170009458150/welcome/202011270933381643024815820.png" /></div>
+    <div class="heading vx-fs-16 vx-paragraph-txt vx-lih-6 vx-mb-5">Welcome heading</div>
+    <div class="details vx-fs-14 vx-label-txt vx-pb-3 vx-mb-5">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.</div>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/welcome/welcome.component.less

@@ -0,0 +1,32 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/mixin/mixin.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url( "https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+
+.welcome-preview {
+    .image {
+        width: 30rem;
+        margin: 0 auto 2rem;
+
+        img {
+            border-radius: .625rem;
+            width: 100%;
+        }
+    }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/welcome/welcome.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WelcomeComponent } from './welcome.component';
+
+describe('WelcomeComponent', () => {
+  let component: WelcomeComponent;
+  let fixture: ComponentFixture<WelcomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WelcomeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WelcomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/preview/welcome/welcome.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-preview-welcome',
+  templateUrl: './welcome.component.html',
+  styleUrls: ['./welcome.component.less']
+})
+export class WelcomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/question-type/question-type.component.html

@@ -0,0 +1,100 @@
+<div class="question-type">
+    <ul class="vx-d-flex vx-flex-wrap vx-p-0 vx-m-0 vx-justify-center">
+        <li *ngIf="false">
+            <button  class="vx-m-0 vx-text-center vx-w-100" (click)="addQuestion.emit('welcome')">
+                <div class="question-icon welcome-screen vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab3;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">WELCOME SCREEN</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('thankyou')">
+                <div class="question-icon thank-you-screen vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab2;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">THANK YOU SCREEN</div>
+            </button>
+        </li>
+        <li>
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('multiple-choice')">
+                <div class="question-icon multiple-choice vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeabd;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">MULTIPLE CHOICE</div>
+            </button>
+        </li>
+        <li>
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('checkbox')">
+                <div class="question-icon checkboxes vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeabb;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">CHECKBOXES</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('image-choice')">
+                <div class="question-icon image-choice vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xea29;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">IMAGE CHOICE</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('star-rating')">
+                <div class="question-icon star-rating vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xea71;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">STAR RATINGS</div>
+            </button>
+        </li>
+        <li>
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('single-textbox')">
+                <div class="question-icon single-textbox vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab5;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">SINGLE TEXTBOX</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('comment-box')">
+                <div class="question-icon comment-box vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xe9a6;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">COMMENT BOX</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('matrix-dropdown')">
+                <div class="question-icon matrix-dropdown vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab7;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">MATRIX OF DROPDOWNS</div>
+            </button>
+        </li>
+        <li>
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('dropdown')">
+                <div class="question-icon dropdown-icon vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab9;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">DROPDOWN</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('rating-scale')">
+                <div class="question-icon matrix-rating vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab8;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">MATRIX & RATING SCALE</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('ranking')">
+                <div class="question-icon ranking vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeb03;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">RANKING</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('slider')">
+                <div class="question-icon slider vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab6;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">SLIDER</div>
+            </button>
+        </li>
+        <li  *ngIf="false">
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('multiple-textbox')">
+                <div class="question-icon multiple-textbox vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeab4;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">MULTIPLE TEXTBOXES</div>
+            </button>
+        </li>
+        <li >
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('date-time')">
+                <div class="question-icon date-time vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xeaba;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">DATE & TIME</div>
+            </button>
+        </li>
+        <li>
+            <button class="vx-m-0 vx-text-center vx-w-100"  (click)="addQuestion.emit('file-upload')">
+                <div class="question-icon file-upload vx-d-flex vx-align-center vx-justify-center vx-mb-4"><i class="icons vx-fs-16 vx-txt-white">&#xea97;</i></div>
+                <div class="name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">FILE UPLOAD</div>
+            </button>
+        </li>
+    </ul>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/question-type/question-type.component.less

@@ -0,0 +1,120 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/mixin/mixin.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url( "https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+.question-type {
+    ul {
+        list-style-type: none;
+        position: relative;
+        left: 10rem;
+        width: calc(100% - 20rem);
+        // width: calc(100% - 24rem);
+        // left: -.375rem;
+        // width: calc(100% + .75rem);
+
+        li {
+            width: 12rem;
+            height: 7rem;
+            margin: .375rem;
+
+            button {
+                background:  #FFFFFF;
+                border: 1px solid #F1F1F1;
+                border-radius: .25rem;
+                padding: 1.5rem 0;
+
+                .question-icon {
+                    background: #EE5DAF;
+                    border-radius: .125rem;
+                    width: 2rem;
+                    height: 2rem;
+                    margin: 0 auto;
+
+                    &.welcome-screen {
+                        background: #EE5DAF;
+                    }
+
+                    &.thank-you-screen {
+                        background: #EE3939;
+                    }
+
+                    &.multiple-choice {
+                        background: #D1C131;
+                    }
+
+                    &.checkboxes {
+                        background: #6F81FC;
+                    }
+
+                    &.image-choice {
+                        background: #4681EF;
+                    }
+
+                    &.star-rating {
+                        background: #E8C247;
+                    }
+
+                    &.single-textbox {
+                        background: #2FD2CD;
+                    }
+
+                    &.comment-box {
+                        background: #ACBB7E;
+                    }
+
+                    &.matrix-dropdown {
+                        background: #66BF72;
+                    }
+
+                    &.dropdown-icon {
+                        background: #9D9FE1;
+                    }
+
+                    &.matrix-rating {
+                        background: #67D2CD;
+                    }
+
+                    &.ranking {
+                        background: #EE9F24;
+                    }
+
+                    &.slider {
+                        background: #D1C131;
+                    }
+
+                    &.multiple-textbox {
+                        background: #66BF72;
+                    }
+
+                    &.date-time {
+                        background: #ACBB7E;
+                    }
+
+                    &.file-upload {
+                        background: #4681EF;
+                    }
+                }
+
+                &:hover {
+                    box-shadow: 0 .5rem 1rem #1E5DD326;
+                }
+            }
+        }
+    }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/question-type/question-type.component.spec.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/question-type/question-type.component.ts

@@ -0,0 +1,16 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+
+@Component({
+  selector: 'app-question-type',
+  templateUrl: './question-type.component.html',
+  styleUrls: ['./question-type.component.less']
+})
+export class QuestionTypeComponent implements OnInit {
+@Output() addQuestion = new EventEmitter();
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/quick-settings/quick-settings.component.html

@@ -0,0 +1,46 @@
+<div class="quick-settings">
+    <div class="heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2">QUESTION TYPE</div>
+    <div class="settings-option vx-d-flex vx-align-center vx-justify-between vx-pb-2" appPopover (click)="questionOption.popover()" placement="right">
+        <div class="content vx-d-flex vx-align-center">
+            <div class="question-icon vx-d-flex vx-align-center vx-justify-center vx-mr-2" [ngClass]="selectedQuestionDetails.questionClass">
+                <i class="icons vx-fs-16 vx-txt-white" [innerHTML]='selectedQuestionDetails.questionIcon'></i></div>
+            <div class="name vx-fs-14 vx-label-txt">{{selectedQuestionDetails.questionName}}</div>
+        </div>
+        <i class="icons vx-fs-10 vx-paragraph-txt">&#xe9e8;</i>
+    </div>
+    <app-popover #questionOption>
+        <div class="select-option vx-p-2 vx-pb-1">
+            <ul class="vx-p-0 vx-m-0 vx-d-flex vx-flex-wrap">
+                <li class="vx-d-flex vx-align-center vx-mt-1 vx-mb-1" *ngFor="let menu of questionTypeDropdown">
+                    <button class="vx-m-0 vx-p-0 vx-text-left vx-w-100 vx-d-flex vx-align-center" (click)='changeQuestionType(menu)'>
+                        <div [ngClass]="menu.questionClass" class="question-icon vx-d-flex vx-align-center vx-justify-center vx-mr-1"><i class="icons vx-fs-16 vx-txt-white" [innerHTML]="menu?.questionIcon">&#xeabd;</i></div>
+                        <div class="name vx-fs-12 vx-label-txt">{{menu?.questionName}}</div>
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </app-popover>
+    <div class="title vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-2">QUICK SETTINGS</div>
+    <div class="settings-list">
+        <ul class="vx-p-0 vx-m-0">
+            <li class="vx-pt-3 vx-pb-3" *ngFor='let quickSetting of quickSettingsList'>
+                <app-cs-switch 
+                [ngValue]="fd.formsPage.elements[questionIndex][quickSetting.toggleValue]"
+                (ngValueChange)="toggle($event,quickSetting);"
+                [disabled]='quickSetting.title === "Is required" && fd.formsPage.elements[questionIndex].visibilityLogic.length > 0'>
+                    <div class="vx-d-flex vx-align-center vx-justify-between vx-w-100">
+                        <div class="settings-name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">{{quickSetting.title}}</div>
+                        <i class="icons info vx-fs-14 vx-txt-blue" *ngIf="quickSetting.toolTip.length>0" [appTooltip]="quickSetting.toolTip" placement="bottom" delay="0" type="white" [tooltipMandatory]="true">&#xeb16;</i>
+                    </div>
+                </app-cs-switch>
+            </li>
+           
+        </ul>
+    </div>
+    <div class="max-min-field vx-d-flex vx-align-center vx-mt-3 vx-mb-2" *ngIf="fd.formsPage.elements[questionIndex].hasCharacterLength">
+        <input type="number"  [(ngModel)]="fd.formsPage.elements[questionIndex].minCharacterLength"/>
+        <span class="vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-5">Min</span>
+        <input type="number"  [(ngModel)]="fd.formsPage.elements[questionIndex].maxCharacterLength"/>
+        <span class="vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase">Max</span>
+    </div>
+</div>