vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/configurations.ts

@@ -0,0 +1,8 @@
+export class Configurations {
+  public envConfig: any;
+
+  constructor() {
+    this.envConfig = {};
+  }
+
+}

package/projects/vx-workflow-engine/src/lib/confirmation-alert/confirmation-alert.component.html

@@ -0,0 +1,23 @@
+<!-- <p>confirmation-alert works!</p> -->
+<div class="confirmation-alert" [class.warning-color]="config?.isRedAlert">
+    <div class="confirmation-alert-top" >
+        <span class="icon-block">
+            <i class="icons">&#xe930;</i>
+        </span>
+        <p class="text" *ngIf="message">{{message}}</p>
+    </div>
+    <div class="confirmation-alert-bottom">
+        <p class="message">Are you sure you would like to proceed?</p>
+        <div class="button-group">
+          <ng-container *ngIf="false">
+            <button class="outline" type="button" (click)="actionTaken('NO')">NO</button>
+            <button class="fill" type="button" (click)="actionTaken('YES')">Yes</button>
+          </ng-container>
+          <ng-container >
+            <button class="fill" type="button" (click)="actionTaken('NO')">NO</button>
+            <button class="outline" type="button" (click)="actionTaken('YES')">Yes</button>
+          </ng-container>
+
+        </div>
+    </div>
+</div>

package/projects/vx-workflow-engine/src/lib/confirmation-alert/confirmation-alert.component.less

@@ -0,0 +1,118 @@
+// :root {
+//     font-size: 4px;
+// }
+
+@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');
+
+.confirmation-alert {
+    display   : block;
+    position  : absolute;
+    z-index   : 1;
+    right     : 0;
+    bottom    : 0;
+    left      : 0;
+    background: #161B2F;
+
+    &-top {
+        display        : flex;
+        align-items    : center;
+        justify-content: flex-start;
+        padding        : 20px;
+    }
+
+    &.warning-color {
+      background-color: #EB2424;
+      .confirmation-alert-bottom {
+        border-top: 1px solid #ffffff60;
+        background-color: #EB2424;
+
+        button {
+          &.fill {
+              color       : #EB2424;
+          }
+      }
+      }
+    }
+
+
+    span.icon-block {
+        height         : 36px;
+        width          : 36px;
+        border-radius  : 50%;
+        background     : #FFFFFF;
+        border         : 1px solid #DCDCDC;
+        display        : flex;
+        justify-content: center;
+        align-items    : center;
+        margin-right   : 16px;
+
+        i {
+            color    : #EB2424;
+            font-size: 12px;
+        }
+
+    }
+
+    p.text {
+        color      : #FFFFFF;
+        font-size  : 14px;
+        font-weight: 300;
+        margin     : 0;
+        width      : calc(100% - 52px);
+    }
+
+    &-bottom {
+        display        : flex;
+        align-items    : center;
+        justify-content: space-between;
+        padding        : 12px 12px 12px 20px;
+        background     : #282E48;
+
+        .button-group {
+            display: flex;
+        }
+
+        p.message {
+            font-size  : 14px;
+            font-weight: 500;
+            margin     : 0;
+            line-height: 20px;
+            color      : #FFFFFF;
+        }
+    }
+
+    button {
+        height         : 24px;
+        width          : 64px;
+        border         : 1px solid #000;
+        border-radius  : 2px;
+        display        : flex;
+        align-items    : center;
+        justify-content: center;
+        line-height    : 22px;
+        cursor         : pointer;
+        font-size      : 11px;
+        text-transform : uppercase;
+        font-weight    : 500;
+        padding        : 0;
+
+        &+button {
+            margin-left: 4px;
+        }
+
+        &.fill {
+            background  : #ffffff;
+            color       : #1e5dd3;
+            border-color: #ffffff;
+        }
+
+        &.outline {
+            background  : transparent;
+            color       : #ffffff;
+            border-color: #ffffff;
+        }
+    }
+}
+
+

package/projects/vx-workflow-engine/src/lib/confirmation-alert/confirmation-alert.component.ts

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ConfirmationAlert } from '../interfaces/confirmation-alert';
+
+@Component({
+  selector: 'app-confirmation-alert',
+  templateUrl: './confirmation-alert.component.html',
+  styleUrls: ['./confirmation-alert.component.less']
+})
+export class ConfirmationAlertComponent implements OnInit {
+  @Input() message = '';
+  @Input() config: ConfirmationAlert = {isVisible: false, isRedAlert: false};
+  @Output() action = new EventEmitter<any>();
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  actionTaken(evt: any){
+    this.action.emit({action: evt, payload: this.config});
+  }
+}

package/projects/vx-workflow-engine/src/lib/create-documents/create-documents.component.html

@@ -0,0 +1,281 @@
+<!-- <p>create-documents works!</p> -->
+<div class="create-documents">
+    <div class="create-documents-container">
+        <div class="message-box">
+            <!-- <img src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/bulb.svg" alt=""> -->
+            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480.8 480.8" style="enable-background:new 0 0 480.8 480.8;" xml:space="preserve">
+                <path style="fill:#FFD517;" d="M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6
+                                        c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z" />
+                <g>
+                    <path style="fill:#E5E5E5;" d="M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8
+                                            h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z" />
+                    <path style="fill:#E5E5E5;" d="M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8
+                                            h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z" />
+                </g>
+                <g>
+                    <path style="fill:#210B20;" d="M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6
+                                            c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4
+                                            s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2
+                                            c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4
+                                            c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z" />
+                    <path style="fill:#210B20;" d="M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2
+                                            c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z" />
+                    <path style="fill:#210B20;" d="M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4
+                                            c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2
+                                            c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z" />
+                    <path style="fill:#210B20;" d="M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2
+                                            c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2
+                                            c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z" />
+                    <path style="fill:#210B20;" d="M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6
+                                            C244.712,66.4,247.912,63.2,247.912,58.8z" />
+                    <path style="fill:#210B20;" d="M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2
+                                            c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z" />
+                    <path style="fill:#210B20;" d="M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4
+                                            c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z" />
+                    <path style="fill:#210B20;" d="M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4
+                                            l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z" />
+                    <path style="fill:#210B20;" d="M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2
+                                            l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z" />
+                </g>
+            </svg>
+            <p>There are multiple ways to create a policy on VComply. You can either draft it from scratch using
+                VComply’s online editor or upload an existing DOCX or PDF file.</p>
+        </div>
+        <ul>
+            <li>
+                <label [class.active]="selectedDocumentType=='draft'">
+                    <input type="radio" name="docType" (change)="changeDocType('draft')" [checked]="selectedDocumentType==='draft'" >
+                    <div class="wrapper" style="font-family: unset !important;">
+                        <!-- <img src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/draft.svg" alt=""> -->
+                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+                            <style type="text/css">
+                                .p1{fill:#F8F8F8;}
+                                .p2{fill:#747576;}
+                                .p3{fill:#BDBDBD;}
+                                .p4{fill:#DBDBDB;}
+                                .p5{fill:#1E5DD3;}
+                                .p6{fill:#FFFFFF;}
+                            </style>
+                            <path class="p1" d="M52,16.2V58c0,1.1-0.9,2-2,2H14c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h25.9" />
+                            <image style="overflow:visible;" width="1920" height="1080" xlink:href="94778146.jpg" transform="matrix(1 0 0 1 -8160 -8160)">
+                            </image>
+                            <path class="p2" d="M52,12v12H12V6c0-1.1,0.9-2,2-2h30" />
+                            <path class="p3" d="M44,4v6.7c0,0.7,0.6,1.3,1.3,1.3H52" />
+                            <g>
+                                <path class="p4" d="M46.2,30.1H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,30.1,46.2,30.1z" />
+                            </g>
+                            <g>
+                                <path class="p4" d="M46.2,34.5H17.9c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h28.3c0.6,0,1,0.4,1,1C47.2,34.1,46.8,34.5,46.2,34.5z" />
+                            </g>
+                            <g>
+                                <path class="p4" d="M46.2,39H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,39,46.2,39z" />
+                            </g>
+                            <g>
+                                <path class="p4" d="M46.2,43.4H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,43.4,46.2,43.4z" />
+                            </g>
+                            <g>
+                                <path class="p4" d="M46.2,47.8H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,47.8,46.2,47.8z" />
+                            </g>
+                            <g>
+                                <path class="p4" d="M46.2,52.2H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,52.2,46.2,52.2z" />
+                            </g>
+                            <g>
+                                <path class="p4" d="M46.2,56.6H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,56.6,46.2,56.6z" />
+                            </g>
+                            <g>
+                                <path class="p6" d="M24.6,16.9c-0.2,0.4-0.6,0.8-1,1s-1,0.4-1.6,0.4h-2v-5.6h2c0.6,0,1.1,0.1,1.6,0.3c0.4,0.2,0.8,0.6,1,1
+                                c0.2,0.4,0.4,0.9,0.4,1.5C24.9,16,24.8,16.5,24.6,16.9z M23.3,16.8c0.3-0.3,0.5-0.8,0.5-1.3c0-0.6-0.2-1-0.5-1.4
+                                c-0.3-0.3-0.8-0.5-1.4-0.5h-0.8v3.7h0.8C22.5,17.2,23,17.1,23.3,16.8z" />
+                                <path class="p6" d="M28.7,18.2L27.4,16h-0.5v2.2h-1.1v-5.6h2.2c0.7,0,1.2,0.2,1.5,0.5s0.5,0.7,0.5,1.3c0,0.4-0.1,0.8-0.4,1.1
+                                s-0.6,0.5-1,0.6l1.4,2.3H28.7z M26.9,15.3h0.9c0.6,0,1-0.3,1-0.9c0-0.3-0.1-0.5-0.2-0.6c-0.2-0.2-0.4-0.2-0.7-0.2h-0.9V15.3z" />
+                                <path class="p6" d="M34.1,17.1h-2.3l-0.4,1.1h-1.2l2.1-5.6h1.3l2.1,5.6h-1.2L34.1,17.1z M33.8,16.3L33,13.9l-0.8,2.4H33.8z" />
+                                <path class="p6" d="M39.8,12.6v0.9h-2.4V15h1.9v0.9h-1.9v2.4h-1.1v-5.6H39.8z" />
+                                <path class="p6" d="M44.4,12.6v0.9h-1.6v4.8h-1.1v-4.8h-1.6v-0.9H44.4z" />
+                            </g>
+                            <path class="p5" d="M32,33.1c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4C41.4,37.3,37.2,33.2,32,33.1z" />
+                            <g>
+                                <path class="p6" d="M36.1,40.8l-5.8,5.8L28,44.4l5.8-5.8c0.2-0.2,0.4-0.2,0.6,0l1.7,1.7C36.2,40.4,36.2,40.7,36.1,40.8z" />
+                                <path class="p6" d="M36.8,38c-0.5-0.5-1.3-0.5-1.7,0l-0.4,0.3c0,0,0.1,0,0.1,0.1l1.7,1.7c0,0,0,0.1,0.1,0.1l0.4-0.4
+                                c0.2-0.2,0.4-0.5,0.4-0.9C37.1,38.5,37,38.2,36.8,38L36.8,38z" />
+                                <path class="p6" d="M27.9,44.9l-1,2.6c-0.1,0.1,0,0.2,0.1,0.4c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0,0.1,0,0.1,0l2.6-1L27.9,44.9z" />
+                                <path class="p6" d="M30.2,41.3c0.1,0,0.2-0.1,0.2-0.1l2.2-2.2c0.1-0.1,0.3-0.1,0.4-0.1l0.5-0.5c-0.4-0.3-0.9-0.3-1.3,0.1L30,40.7
+                                c-0.1,0.1-0.1,0.4,0,0.5C30,41.2,30,41.3,30.2,41.3L30.2,41.3z" />
+                            </g>
+                        </svg>
+                        <div class="label-right">
+                            <div class="text"><strong>Create</strong> a Policy</div>
+                            <div class="check">
+                                <svg class="checkIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+                                    <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
+                                    <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </label>
+            </li>
+            <li>
+                <label [class.active]="selectedDocumentType=='docx'">
+                    <!-- <input type="radio" name="docType"> -->
+                    <div class="wrapper" style="font-family: unset !important;">
+                        <div class="line-progress" *ngIf="selectedDocumentType=='docx' && isUploading">
+                            <div class="line-progress-bar"></div>
+                        </div>
+                        <!-- <img src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/docx.svg" alt=""> -->
+                        <!-- <span class="text"  *ngIf="!(selectedDocumentType=='docx' && filename)">Upload a <strong>DOCX</strong></span>
+                        <span class="text" *ngIf="(selectedDocumentType=='docx') && filename">
+                            {{filename}}
+                        </span> -->
+                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+                            <style type="text/css">
+                                .d1{fill:#F8F8F8;}
+                                .d2{fill:#337DBE;}
+                                .d3{fill:#3C92DF;}
+                                .d4{fill:#DBDBDB;}
+                                .d5{fill:#F2BF19;}
+                                .d6{fill:#FAFAFA;}
+                            </style>
+                            <path class="d1" d="M52,16.2V58c0,1.1-0.9,2-2,2H14c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h25.9" />
+                            <path class="d2" d="M52,12v12H12V6c0-1.1,0.9-2,2-2h30" />
+                            <path class="d3" d="M44,4v6.7c0,0.7,0.6,1.3,1.3,1.3H52" />
+                            <g>
+                                <path class="d4" d="M46.2,30.1H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,30.1,46.2,30.1z" />
+                            </g>
+                            <g>
+                                <path class="d4" d="M46.2,34.5H17.9c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h28.3c0.6,0,1,0.4,1,1C47.2,34.1,46.8,34.5,46.2,34.5z" />
+                            </g>
+                            <g>
+                                <path class="d4" d="M46.2,39H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,39,46.2,39z" />
+                            </g>
+                            <g>
+                                <path class="d4" d="M46.2,43.4H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,43.4,46.2,43.4z" />
+                            </g>
+                            <g>
+                                <path class="d4" d="M46.2,47.8H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,47.8,46.2,47.8z" />
+                            </g>
+                            <g>
+                                <path class="d4" d="M46.2,52.2H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,52.2,46.2,52.2z" />
+                            </g>
+                            <g>
+                                <path class="d4" d="M46.2,56.6H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,56.6,46.2,56.6z" />
+                            </g>
+                            <g>
+                                <path class="d1" d="M25.4,16.9c-0.2,0.4-0.6,0.8-1,1s-1,0.4-1.6,0.4h-2v-5.6h2c0.6,0,1.1,0.1,1.6,0.3c0.4,0.2,0.8,0.6,1,1
+                                c0.2,0.4,0.4,0.9,0.4,1.5C25.7,16,25.6,16.5,25.4,16.9z M24.1,16.8c0.3-0.3,0.5-0.8,0.5-1.3c0-0.6-0.2-1-0.5-1.4
+                                c-0.3-0.3-0.8-0.5-1.4-0.5h-0.8v3.7h0.8C23.3,17.2,23.8,17.1,24.1,16.8z" />
+                                <path class="d1" d="M30.7,12.9c0.4,0.2,0.8,0.6,1,1s0.4,0.9,0.4,1.5s-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.8-1,1
+                                c-0.4,0.2-0.9,0.4-1.4,0.4c-0.5,0-1-0.1-1.4-0.4c-0.4-0.2-0.8-0.6-1-1c-0.2-0.4-0.4-0.9-0.4-1.5s0.1-1.1,0.4-1.5s0.6-0.8,1-1
+                                c0.4-0.2,0.9-0.4,1.4-0.4C29.8,12.5,30.2,12.6,30.7,12.9z M28.4,13.8c-0.3,0.1-0.4,0.4-0.6,0.6c-0.1,0.3-0.2,0.6-0.2,1
+                                c0,0.4,0.1,0.7,0.2,1c0.1,0.3,0.3,0.5,0.6,0.6c0.3,0.1,0.5,0.2,0.9,0.2c0.3,0,0.6-0.1,0.9-0.2c0.3-0.1,0.4-0.4,0.6-0.6
+                                c0.1-0.3,0.2-0.6,0.2-1c0-0.4-0.1-0.7-0.2-1c-0.1-0.3-0.3-0.5-0.6-0.6c-0.3-0.1-0.5-0.2-0.9-0.2C28.9,13.6,28.6,13.6,28.4,13.8z" />
+                                <path class="d1" d="M37.2,13.1c0.5,0.4,0.8,0.9,0.9,1.5H37c-0.1-0.3-0.3-0.5-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3
+                                c-0.3,0-0.6,0.1-0.8,0.2s-0.4,0.4-0.6,0.6c-0.1,0.3-0.2,0.6-0.2,1c0,0.4,0.1,0.7,0.2,1c0.1,0.3,0.3,0.5,0.6,0.6s0.5,0.2,0.8,0.2
+                                c0.4,0,0.7-0.1,0.9-0.3c0.3-0.2,0.4-0.4,0.6-0.7h1.2c-0.1,0.6-0.5,1.1-0.9,1.5c-0.5,0.4-1,0.5-1.8,0.5c-0.5,0-1-0.1-1.4-0.4
+                                c-0.4-0.2-0.7-0.6-1-1c-0.2-0.4-0.3-0.9-0.3-1.5c0-0.6,0.1-1.1,0.3-1.5c0.2-0.4,0.5-0.8,1-1c0.4-0.2,0.9-0.4,1.4-0.4
+                                C36.2,12.5,36.8,12.7,37.2,13.1z" />
+                                <path class="d1" d="M42.3,18.2L41,16.3l-1.1,1.9h-1.3l1.8-2.9l-1.8-2.8h1.3l1.2,1.9l1.1-1.9h1.3l-1.8,2.8l1.9,2.8H42.3z" />
+                            </g>
+                            <path class="d5" d="M32,33.1c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4C41.4,37.3,37.2,33.2,32,33.1z" />
+                            <path class="d6" d="M38,41.8l-5.7-5.7c-0.2-0.2-0.4-0.2-0.6,0L26,41.8c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.2,0.2,0.4,0.4,0.4h2.9v6.1
+                            c0,0.2,0.2,0.4,0.4,0.4h4.9c0.2,0,0.4-0.2,0.4-0.4v-6.1h2.9c0.2,0,0.3-0.1,0.4-0.3C38.1,42.1,38.1,42,38,41.8z" />
+                        </svg>
+                        <div class="label-right">
+                            <div class="text">
+                                <ng-container *ngIf="!(selectedDocumentType=='docx' && filename)">Upload a <strong>DOCX</strong></ng-container>
+                                <ng-container *ngIf="(selectedDocumentType=='docx') && filename">{{filename}}</ng-container>
+                            </div>
+                            <div class="check">
+                                <svg class="checkIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+                                    <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
+                                    <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                    <input type="file" accept=".docx" id="DOCfile" hidden
+                    (change)="handleFileInput($event.target.files)" onclick="event.stopPropagation();" #docxUploadButton>
+                </label>
+            </li>
+            <li>
+                <label [class.active]="selectedDocumentType=='pdf'">
+                    <!-- <input type="radio" name="docType"> -->
+                    <input type="file" accept=".pdf" id="PDFfile" hidden
+                    (change)="handleFileInput($event.target.files)" onclick="event.stopPropagation();" #pdfUploadButton>
+                    <div class="wrapper" style="font-family: unset !important;">
+                        <div class="line-progress" *ngIf="selectedDocumentType=='pdf' && isUploading">
+                            <div class="line-progress-bar"></div>
+                        </div>
+                        <!-- <img src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/pdf.svg" alt="">
+                        <div class="text" *ngIf="!(selectedDocumentType=='pdf' && filename)">Upload a
+                            <strong>PDF</strong>
+                        </div>
+                        <div class="text" *ngIf="(selectedDocumentType=='pdf') && filename">
+                            {{filename}}
+                        </div> -->
+                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+                            <style type="text/css">
+                                .pd1{fill:#F8F8F8;}
+                                .pd2{fill:#EE3939;}
+                                .pd3{fill:#F95858;}
+                                .pd4{fill:#DBDBDB;}
+                                .pd5{fill:#34AA44;}
+                                .pd6{fill:#FAFAFA;}
+                            </style>
+                            <path class="pd1" d="M52,16.2V58c0,1.1-0.9,2-2,2H14c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h25.9" />
+                            <path class="pd2" d="M52,12v12H12V6c0-1.1,0.9-2,2-2h30" />
+                            <path class="pd3" d="M44,4v6.7c0,0.7,0.6,1.3,1.3,1.3H52" />
+                            <g>
+                                <path class="pd4" d="M46.2,30.1H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,30.1,46.2,30.1z" />
+                            </g>
+                            <g>
+                                <path class="pd4" d="M46.2,34.5H17.9c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h28.3c0.6,0,1,0.4,1,1C47.2,34.1,46.8,34.5,46.2,34.5z" />
+                            </g>
+                            <g>
+                                <path class="pd4" d="M46.2,39H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,39,46.2,39z" />
+                            </g>
+                            <g>
+                                <path class="pd4" d="M46.2,43.4H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,43.4,46.2,43.4z" />
+                            </g>
+                            <g>
+                                <path class="pd4" d="M46.2,47.8H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,47.8,46.2,47.8z" />
+                            </g>
+                            <g>
+                                <path class="pd4" d="M46.2,52.2H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,52.2,46.2,52.2z" />
+                            </g>
+                            <g>
+                                <path class="pd4" d="M46.2,56.6H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,56.6,46.2,56.6z" />
+                            </g>
+                            <g>
+                                <path class="pd1" d="M26.2,16.2v2.1h-1.1v-5.6h2.1c0.7,0,1.2,0.2,1.5,0.5c0.3,0.3,0.5,0.8,0.5,1.3c0,0.5-0.2,1-0.5,1.3
+                                c-0.3,0.3-0.8,0.5-1.5,0.5H26.2z M28,14.4c0-0.3-0.1-0.5-0.2-0.6c-0.2-0.1-0.4-0.2-0.8-0.2h-0.8v1.7H27C27.7,15.2,28,15,28,14.4z" />
+                                <path class="pd1" d="M34.5,16.9c-0.2,0.4-0.6,0.8-1,1s-1,0.4-1.6,0.4h-2v-5.6h2c0.6,0,1.1,0.1,1.6,0.3c0.4,0.2,0.8,0.6,1,1
+                                c0.2,0.4,0.4,0.9,0.4,1.5C34.8,16,34.7,16.5,34.5,16.9z M33.2,16.8c0.3-0.3,0.5-0.8,0.5-1.3c0-0.6-0.2-1-0.5-1.4
+                                c-0.3-0.3-0.8-0.5-1.4-0.5H31v3.7h0.8C32.4,17.2,32.9,17.1,33.2,16.8z" />
+                                <path class="pd1" d="M39.2,12.6v0.9h-2.4V15h1.9v0.9h-1.9v2.4h-1.1v-5.6H39.2z" />
+                            </g>
+                            <path class="pd5" d="M32,33.1c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4C41.4,37.3,37.2,33.2,32,33.1z" />
+                            <path class="pd6" d="M38,41.8l-5.7-5.7c-0.2-0.2-0.4-0.2-0.6,0L26,41.8c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.2,0.2,0.4,0.4,0.4h2.9v6.1
+                            c0,0.2,0.2,0.4,0.4,0.4h4.9c0.2,0,0.4-0.2,0.4-0.4v-6.1h2.9c0.2,0,0.3-0.1,0.4-0.3C38.1,42.1,38.1,42,38,41.8z" />
+                        </svg>
+                        <div class="label-right">
+                            <div class="text">
+                                <ng-container *ngIf="!(selectedDocumentType=='pdf' && filename)">Upload a <strong>PDF</strong></ng-container>
+                                <ng-container *ngIf="(selectedDocumentType=='pdf') && filename">{{filename}}</ng-container>
+                            </div>
+                            <div class="check">
+                                <svg class="checkIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+                                    <circle class="checkIcon__circle" cx="26" cy="26" r="25" fill="none" />
+                                    <path class="checkIcon__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </label>
+            </li>
+        </ul>
+    </div>
+</div>
+<div class="bottom-button">
+    <button type="button" class="back" (click)="editPolicyEmit()"><i class="icons">&#xe91d;</i> Back</button>
+    <button type="button" class="next" (click)="editor(selectedDocumentType)" [class.disabled]="!selectedDocumentType">Next <i class="icons">&#xe91e;</i></button>
+</div>