vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-ranking/logic-ranking.component.spec.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-ranking/logic-ranking.component.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-single-textbox/logic-single-textbox.component.html

@@ -0,0 +1,4 @@
+<div class="logic-single-textbox">
+    <input type="text"  [(ngModel)]="selectedValue"
+    [placeholder]="'Please enter a response'" (ngModelChange)="dataChanged()"/>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-single-textbox/logic-single-textbox.component.less

@@ -0,0 +1,39 @@
+@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");
+
+.logic-single-textbox {
+    input {
+        border: 1px solid #DBDBDB;
+        border-radius: 0.25rem;
+        color:#747576;
+        font-size: 13px;
+        height: 2.5rem;
+        padding: 0.5rem 0.75rem;
+        width: 37.5rem;
+        outline: none;
+        transition: all 0.2s ease-in-out;
+
+        &:hover,
+        &:focus {
+            border: 1px solid #1e5dd3;
+            box-shadow: 0 0 5px rgba(30, 93, 211, 0.27);
+        }
+    }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-single-textbox/logic-single-textbox.component.spec.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-single-textbox/logic-single-textbox.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-logic-single-textbox',
+  templateUrl: './logic-single-textbox.component.html',
+  styleUrls: ['./logic-single-textbox.component.less']
+})
+export class LogicSingleTextboxComponent implements OnInit {
+
+  @Input() question!: any;
+  @Output() changeEvent = new EventEmitter<any>();
+  constructor() { }
+  selectedValue!:any;
+
+  ngOnInit(): void {
+  }
+
+  dataChanged(){
+    this.changeEvent.emit(this.selectedValue)
+  }
+
+
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-slider/logic-slider.component.html

@@ -0,0 +1,14 @@
+<div class="logic-slider vx-d-flex vx-align-center vx-p-4 vx-bg-white ">
+    <div class="slider-left vx-mr-2">
+        <div class="range-slider">
+         <input type="range" min="1" max="100" value="50" class="vx-slider">
+        </div>
+        <div class="labels vx-justify-between vx-d-flex vx-fs-12">
+            <span >0</span>
+            <span>100</span>
+        </div>
+    </div>
+    <div class="slider-right">
+        <input type="text" value='50' class="vx-text-center">
+    </div>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-slider/logic-slider.component.less

@@ -0,0 +1,48 @@
+@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");
+@import url("https://cdn.v-comply.com/design-system/css/forms/range-slider.css");
+
+
+::ng-deep .logic-slider{
+    width: 37.5rem;
+    box-shadow: 0 0 10px 0#F1F1F1;
+    border: 1px solid #DBDBDB;
+    border-radius: .125rem;
+
+    .slider-left{
+        width: calc(100% - 3.125rem);
+        
+    }
+    .slider-right{
+        width: 3.125rem;
+
+        input{
+            display: block;
+            border-radius: .125rem;
+            border: 1px solid #F1F1F1;
+            color: #161B2F;
+            font-size: 12px;
+            width: 100%;
+            height: 2.5rem;
+            line-height: 2.5rem;
+            outline: none;
+        }
+    }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-slider/logic-slider.component.spec.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-slider/logic-slider.component.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-star-rating/logic-star-rating.component.html

@@ -0,0 +1,18 @@
+<div class="logic-star-rating">
+    <ul class="vx-d-flex vx-p-0 vx-m-0">
+        <li class="vx-mr-2" *ngFor="let data of [1, 1, 1, 1, 1, 1, 1]">
+            <button class="vx-fs-14 vx-label-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center" style="color: #1e5dd3;" [appTooltip]="'Information details here...'" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="true">
+                <!-- Smiley -->
+                <i *ngIf="true" class="icons">&#xea66;</i>
+                <!-- Thumb -->
+                <i *ngIf="false" class="icons">&#xea84;</i>
+                <!-- Star -->
+                <i *ngIf="false" class="icons">&#xea70;</i>
+                <!-- Heart -->
+                <i *ngIf="false" class="icons">&#xe9ea;</i>
+                <!-- Number -->
+                <span *ngIf="false">10</span>
+            </button>
+        </li>
+    </ul>
+</div>

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-star-rating/logic-star-rating.component.less

@@ -0,0 +1,38 @@
+@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");
+
+::ng-deep .logic-star-rating {
+    ul {
+        list-style-type: none;
+        
+        li {
+            border: 1px solid #F1F1F1;
+            border-radius: .25rem;
+
+            button {
+                background: transparent;
+                border: none;
+                border-radius: 0;
+                width: 2rem;
+                height: 2rem;
+            }
+        }
+    }
+}

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-star-rating/logic-star-rating.component.spec.ts

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

package/projects/vx-workflow-engine/src/lib/sharedComponents/assessment-editor/components/logic-questions/logic-star-rating/logic-star-rating.component.ts

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

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

@@ -0,0 +1,63 @@
+<div class="move-area">
+    <div class="move-heading vx-fs-13 vx-paragraph-txt vx-mb-4">Move the question to</div>
+    <div class="vx-d-flex">
+        <div *ngIf="openPortal !== 'RESPONSIBILITY_CHECKPOINT'"  class="move-item vx-mr-3">
+            <div class="heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1">SELECT PAGE</div>
+            <div class="select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3" appPopover (click)="pageAction.popover()" placement="right">
+                <span class="value vx-fs-13 vx-paragraph-txt">{{currentPage}}</span>
+                <i class="icons vx-fs-10 vx-paragraph-txt">&#xe9e8;</i>
+            </div>
+            <app-popover #pageAction>
+                <div class="move-popup">
+                    <ul class="vx-p-0 vx-m-0">
+                        <li *ngFor="let data of service?.allPages">
+                            <button  (click)="onPageChange(data);changePage(data)" class="vx-fs-13 vx-paragraph-txt vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100">{{data}}</button>
+                        </li>
+                    </ul>
+                </div>
+            </app-popover>
+        </div>
+        <div class="move-item vx-mr-3">
+            <div class="heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1">SELECT POSITION</div>
+            <div class="select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3" appPopover (click)="positionAction.popover()" placement="right">
+                <span class="value vx-fs-13 vx-paragraph-txt">{{position}}</span>
+                <i class="icons vx-fs-10 vx-paragraph-txt">&#xe9e8;</i>
+            </div>
+            <app-popover #positionAction>
+                <div class="move-popup">
+                    <ul class="vx-p-0 vx-m-0">
+                        <li *ngFor ="let position of positions">
+                            <button (click)="changePosition(position)" class="vx-fs-13 vx-paragraph-txt vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100">{{position}}</button>
+                        </li>
+
+                    </ul>
+                </div>
+            </app-popover>
+        </div>
+        <div class="move-item vx-mr-3">
+            <div class="heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1">SELECT QUESTION</div>
+            <div class="select-box vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3" appPopover (click)="questionAction.popover()" placement="right">
+                <span class="value vx-fs-13 vx-paragraph-txt"> {{questionDetail?.title ? questionDetail?.title:'Select question'}}</span>
+                <i class="icons vx-fs-10 vx-paragraph-txt">&#xe9e8;</i>
+            </div>
+            <app-popover #questionAction>
+                <div class="move-popup">
+                    <ul class="vx-p-0 vx-m-0">
+                        <li *ngFor="let data of (service.formsPage.elements  | questionPageFilter : currentPage)">
+                            <button class="vx-p-2 vx-pl-3 vx-m-0 vx-d-flex vx-align-center vx-w-100" (click)="setSelectedQuestion(data?.name)">
+                                <span class="vx-fs-13 vx-paragraph-txt" [appTooltip]="data?.title" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{data?.title}}</span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </app-popover>
+        </div>
+        <div class="move-item vx-mr-3">
+            <div class="heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5"></div>
+            <button class="move" appRipple (click)="move()">Move</button>
+        </div>
+        <p class="error-mgs" *ngIf="emptyPage===true">
+            Selected page doesn't contains any question.
+        </p>
+</div>
+</div>

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

@@ -0,0 +1,90 @@
+@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");
+
+.move-area {
+    .move-item {
+        width: 15rem;
+
+        .select-box {
+            border: 1px solid #DBDBDB;
+            border-radius: .25rem;
+            height: 2.25rem;
+            cursor: pointer;
+        }
+    }
+}
+
+.move-popup {
+    background:  #FFFFFF;
+    box-shadow: 0px 3px 6px #1c5bd140;
+    border-radius: 0.25rem;
+    width: 15rem;
+    -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+
+    ul {
+        list-style-type: none;
+        max-height: 10rem;
+        overflow-y: auto;
+
+        li {
+            border-bottom: 1px solid #F1F1F1;
+
+            &:only-child,
+            &:last-of-type {
+                border-bottom: none;
+            }
+
+            button {
+                background: transparent;
+                border: none;
+                border-radius: 0;
+                text-align: left;
+                
+                span {
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+                }
+            }
+
+            &:hover {
+                background:#F1F1F1;
+            }
+        }
+    }
+}
+.error-mgs {
+	font-size:12px;
+	color     : #d93b41;
+	margin-top: 5px !important;
+}
+.move{
+    height: 36px;
+                padding: 0 25px;
+                border-radius: 4px;
+                border: 1px solid #1e5dd3;
+                background: #1e5dd3;
+                cursor: pointer;
+                outline: none;
+                color: #FFFFFF;
+                font-weight: 500;
+                font-size: 11px;
+}

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

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

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

@@ -0,0 +1,95 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { SnackBarService } from '../../../../ui-kit/snack-bar/snack-bar.service';
+
+
+
+@Component({
+  selector: 'app-move',
+  templateUrl: './move.component.html',
+  styleUrls: ['./move.component.less']
+})
+export class MoveComponent implements OnInit {
+
+  constructor( private snackbar :SnackBarService) { }
+
+  @Input() questionIndex !: string;
+  @Input() question!: string;
+  @Input() service !:any;
+  @Input() openPortal :'ASSESSMENT_IMPORT' | 'RESPONSIBILITY_CHECKPOINT'|'' = '';
+  @ViewChild('moveTemplate') moveElement !: ElementRef;
+  currentPage = 1;
+  position = 'After';
+  selectedQuestion !:any;
+  emptyPage!: boolean;
+  public questionDetail: any;
+  positions = ['After', 'Before'];
+  ngOnInit(): void {
+  }
+  setSelectedQuestion(evt:any){
+
+    this.selectedQuestion = this.service.formsPage.elements.findIndex((x:any) => x.name === evt);
+    if(this.selectedQuestion > -1){
+      this.questionDetail = this.service.formsPage.elements[this.selectedQuestion];
+    }
+
+  }
+  move() {
+    let nextIndex;
+    const message = 'The question has been moved.';
+    if (this.selectedQuestion !== undefined) {
+      if (this.position === 'Before') {
+              if (this.questionIndex >= this.selectedQuestion) {
+                nextIndex = this.selectedQuestion;
+                this.service.activeQuestion = nextIndex;
+                if (nextIndex === 0) {
+                  // ' of page ' ${this.currentPage}
+                  // message = `Question moved to position ' ${nextIndex + 1}  `;
+                } else {
+                  // message = `Question moved to position ' ${nextIndex}`;
+                }
+              } else {
+                nextIndex = this.selectedQuestion - 1;
+                this.service.activeQuestion = nextIndex;
+                // message = `Question moved to position ' ${nextIndex + 1}`;
+              }
+          }
+      if (this.position === 'After') {
+          if (this.questionIndex > this.selectedQuestion) {
+            nextIndex = this.selectedQuestion + 1;
+            this.service.activeQuestion = nextIndex;
+            // message = `Question moved to position ' ${nextIndex + 1}`;
+          } else {
+            nextIndex = this.selectedQuestion;
+            this.service.activeQuestion = nextIndex;
+            // message = `Question moved to position ' ${nextIndex + 1}`;
+          }
+        }
+      this.service.formsPage.elements[this.questionIndex].page = this.currentPage;
+      this.service.moveQuestion(this.questionIndex, nextIndex);
+    //  this.snackbar.snackbar.next(message);
+      this.snackbar.show(message, 'success');
+      setTimeout(() => {
+           this.moveElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+         }, 400);
+    } else {
+      this.snackbar.show('Please select a reference question to move', 'alert');
+    }
+}
+onPageChange(evt:any) {
+
+if (![...new Set(this.service.formsPage.elements.map((element:any) => element.page))].includes(evt)) {
+   this.emptyPage = true;
+ } else {
+   this.emptyPage = false;
+ }
+}
+
+changePage(evt:any){
+  this.currentPage =  evt;
+}
+
+changePosition(evt:any){
+   this.position = evt;
+}
+
+}

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

@@ -0,0 +1,6 @@
+<div class="page-editor-header vx-mb-5 vx-p-4">
+    <button (click)="edit.emit()" class="edit-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-align-center vx-justify-center vx-lh-6"><i class="icons vx-mr-2">&#xe9ba;</i> EDIT</button>
+    <div *ngIf="pageName" class="page-name vx-fs-14 vx-label-txt vx-mb-2" [innerHTML]="pageName" > sadsad</div>
+    <div *ngIf="pageDescription" class="page-details vx-fs-12 vx-paragraph-txt" [innerHTML]="pageDescription">dsadasdsa</div>
+</div>
+