vcomply-workflow-engine 2.0.4 → 2.0.167

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#e9eded",
+        "activityBar.activeBorder": "#d787d7",
+        "activityBar.background": "#e9eded",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#d787d7",
+        "activityBarBadge.foreground": "#15202b",
+        "sash.hoverBorder": "#e9eded",
+        "statusBar.background": "#ccd7d7",
+        "statusBar.foreground": "#15202b",
+        "statusBarItem.hoverBackground": "#afc1c1",
+        "statusBarItem.remoteBackground": "#ccd7d7",
+        "statusBarItem.remoteForeground": "#15202b",
+        "titleBar.activeBackground": "#ccd7d7",
+        "titleBar.activeForeground": "#15202b",
+        "titleBar.inactiveBackground": "#ccd7d799",
+        "titleBar.inactiveForeground": "#15202b99",
+        "commandCenter.border": "#15202b99"
+    },
+    "peacock.color": "#ccd7d7"
+}

package/README.md

@@ -1,23 +1,26 @@
 # VxWorkflowEngine
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name --project vx-workflow-engine` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project vx-workflow-engine`.
-> Note: Don't forget to add `--project vx-workflow-engine` or else it will be added to the default project in your `angular.json` file. 
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `ng build vx-workflow-engine` to build the project. The build artifacts will be stored in the `dist/` directory.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Publishing
+## Running unit tests
 
-After building your library with `ng build vx-workflow-engine`, go to the dist folder `cd dist/vx-workflow-engine` and run `npm publish`.
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running unit tests
+## Running end-to-end tests
 
-Run `ng test vx-workflow-engine` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
 ## Further help
 

package/angular.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": "e032ae23-9b4d-44ed-bd2a-b38627d91dab"
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "vx-workflow-engine": {
+      "projectType": "library",
+      "root": "projects/vx-workflow-engine",
+      "sourceRoot": "projects/vx-workflow-engine/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/vx-workflow-engine/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/vx-workflow-engine/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/vx-workflow-engine/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/vx-workflow-engine/src/test.ts",
+            "tsConfig": "projects/vx-workflow-engine/tsconfig.spec.json",
+            "karmaConfig": "projects/vx-workflow-engine/karma.conf.js"
+          }
+        }
+      }
+    },
+    "workflow-client": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "projects/workflow-client",
+      "sourceRoot": "projects/workflow-client/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/workflow-client",
+            "index": "projects/workflow-client/src/index.html",
+            "main": "projects/workflow-client/src/main.ts",
+            "polyfills": "projects/workflow-client/src/polyfills.ts",
+            "tsConfig": "projects/workflow-client/tsconfig.app.json",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              "projects/workflow-client/src/favicon.ico",
+              "projects/workflow-client/src/assets"
+            ],
+            "styles": [
+              "projects/workflow-client/src/styles.less"
+            ],
+            "scripts": [],
+            "allowedCommonJsDependencies": ["xlsx", "lodash"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/workflow-client/src/environments/environment.ts",
+                  "with": "projects/workflow-client/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "workflow-client:build:production"
+            },
+            "development": {
+              "browserTarget": "workflow-client:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "workflow-client:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/workflow-client/src/test.ts",
+            "polyfills": "projects/workflow-client/src/polyfills.ts",
+            "tsConfig": "projects/workflow-client/tsconfig.spec.json",
+            "karmaConfig": "projects/workflow-client/karma.conf.js",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              "projects/workflow-client/src/favicon.ico",
+              "projects/workflow-client/src/assets"
+            ],
+            "styles": [
+              "projects/workflow-client/src/styles.less"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,25 +1,59 @@
-{
-  "name": "vcomply-workflow-engine",
-  "version": "2.0.4",
-  "peerDependencies": {
-    "@angular/common": "^12.0.1",
-    "@angular/core": "^12.0.1"
-  },
-  "dependencies": {
-    "tslib": "^2.1.0",
-    "vx-design-system": "^1.0.53",
-    "vcomply-editor": "^1.0.0",
-    "karma-coverage": "2.0.3",
-    "ngx-material-timepicker": "^5.5.3",
-    "ng2-date-picker": "^11.0.0",
-    "angular-mentions": "1.3.0"
-  },
-  "main": "bundles/vcomply-workflow-engine.umd.js",
-  "module": "fesm2015/vcomply-workflow-engine.js",
-  "es2015": "fesm2015/vcomply-workflow-engine.js",
-  "esm2015": "esm2015/vcomply-workflow-engine.js",
-  "fesm2015": "fesm2015/vcomply-workflow-engine.js",
-  "typings": "vcomply-workflow-engine.d.ts",
-  "metadata": "vcomply-workflow-engine.metadata.json",
-  "sideEffects": false
-}
+{
+  "name": "vcomply-workflow-engine",
+  "version": "2.0.167",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "build:ci": "cd projects/vx-workflow-engine && npm version patch && cd.. && ng build vx-workflow-engine"
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
+    "@auth0/angular-jwt": "^5.0.2",
+    "@vcomply/authorizer": "0.0.9",
+    "@vcomply/editor": "^2.0.8",
+    "angular-mentions": "1.3.0",
+    "clean-install": "^1.0.0",
+    "crypto-es": "^1.2.7",
+    "lodash-es": "^4.17.21",
+    "lottie-web": "^5.12.2",
+    "ng2-date-picker": "^11.0.0",
+    "ngx-lottie": "9.0.0",
+    "ngx-material-timepicker": "^5.5.3",
+    "rxjs": "~7.4.0",
+    "tslib": "^2.1.0",
+    "vcomply-design-system": "^1.0.32",
+    "vx-design-system": "^1.0.101",
+    "vx-workflow-engine": "^2.0.36",
+    "xlsx": "^0.17.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.11",
+    "@angular/cli": "^14.2.11",
+    "@angular/compiler-cli": "^14.3.0",
+    "@types/jasmine": "~3.6.0",
+    "@types/lodash": "^4.14.170",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.7.0",
+    "karma": "~6.3.16",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^14.2.2",
+    "typescript": "~4.6.4"
+  }
+}

package/projects/vx-workflow-engine/README.md

@@ -0,0 +1,24 @@
+# VxWorkflowEngine
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project vx-workflow-engine` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project vx-workflow-engine`.
+> Note: Don't forget to add `--project vx-workflow-engine` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build vx-workflow-engine` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build vx-workflow-engine`, go to the dist folder `cd dist/vx-workflow-engine` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test vx-workflow-engine` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/vx-workflow-engine/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/vx-workflow-engine'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/projects/vx-workflow-engine/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/vx-workflow-engine",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "vx-design-system",
+    "vcomply-editor",
+    "karma-coverage",
+    "ngx-material-timepicker",
+    "ng2-date-picker",
+    "angular-mentions",
+    "@angular/cdk",
+    "moment"
+  ]
+}

package/projects/vx-workflow-engine/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "vcomply-workflow-engine",
+  "version": "3.4.18",
+  "peerDependencies": {
+    "@angular/common": "10.x || 11.x || 12.x || 13.x || 14.x || 15.x || 16.x",
+    "@angular/core": "10.x || 11.x || 12.x || 13.x || 14.x || 15.x || 16.x"
+  },
+  "dependencies": {
+    "tslib": "^2.1.0",
+    "vx-design-system": "^1.0.53",
+    "vcomply-editor": "^1.0.0",
+    "karma-coverage": "2.0.3",
+    "ngx-material-timepicker": "^5.5.3",
+    "ng2-date-picker": "^11.0.0",
+    "angular-mentions": "1.3.0",
+    "moment": "^2.29.1"
+  }
+}

package/projects/vx-workflow-engine/src/images/bottom-part.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="30" viewBox="0 0 6 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 30C6 12.45 0 7.2 0 0C0 0 3.30193 0 6 0V30Z" fill="white"/>
+</svg>

package/projects/vx-workflow-engine/src/images/enter-icon.svg

@@ -0,0 +1,6 @@
+<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
+	<g id="Blue">
+		<path d="m400 24a24 24 0 0 0 -24 24v272a32 32 0 0 1 -32 32h-174.059l47.03-47.029a24 24 0 0 0 -33.942-33.942l-88 88a24 24 0 0 0 0 33.942l88 88a24 24 0 0 0 33.942-33.942l-47.03-47.029h174.059a80 80 0 0 0 80-80v-272a24 24 0 0 0 -24-24z" fill="#1e5dd3" />
+		<path d="m199.99 496a31.79 31.79 0 0 1 -22.628-9.372l-88-88a32.037 32.037 0 0 1 0-45.255l88.005-88a32 32 0 0 1 45.257 45.255l-33.38 33.372h154.756a24.028 24.028 0 0 0 24-24v-272a32 32 0 0 1 64 0v272a88.1 88.1 0 0 1 -88 88h-154.756l33.374 33.372a32 32 0 0 1 -22.628 54.628zm0-224a15.892 15.892 0 0 0 -11.314 4.687l-88 88a16.018 16.018 0 0 0 0 22.627l88 88a16 16 0 1 0 22.624-22.628l-47.031-47.029a8 8 0 0 1 5.661-13.657h174.07a72.083 72.083 0 0 0 72-72v-272a16 16 0 0 0 -32 0v272a40.046 40.046 0 0 1 -40 40h-174.07a8 8 0 0 1 -5.657-13.657l47.032-47.03a16 16 0 0 0 -11.315-27.313z" fill="#1e5dd3" />
+	</g>
+</svg>

package/projects/vx-workflow-engine/src/images/name.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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">
+	.st0{fill:#F1F1F1;}
+	.st1{fill:#1C5BD1;}
+	.st2{fill:#7AA7F7;}
+	.st3{fill:#66BF72;}
+	.st4{fill:#34AA44;}
+	.st5{fill:#FFFFFF;}
+</style>
+<circle class="st0" cx="32" cy="32" r="25"/>
+<g>
+	<path class="st1" d="M32,57c7,0,13.4-2.9,18-7.6v-20c0-0.4,0-0.8-0.1-1.1h-5.7c-0.2,0-0.2-0.1-0.3-0.1l-0.1-0.1
+		c-1.5-0.3-2.6-1.7-2.6-3.3v-5c0-0.2-0.3-0.4-0.4-0.5c-0.4-0.2-0.6-0.2-0.9-0.2H17.3c-1.8,0-3.3,1.5-3.3,3.3v27
+		C18.6,54.1,25,57,32,57z"/>
+	<path class="st2" d="M49.3,27.6l-7.8-7.8c-0.2-0.2-0.5-0.4-0.7-0.5V25c0,1.8,1.5,3.3,3.3,3.3h5.8C49.8,28.1,49.5,27.8,49.3,27.6z"
+		/>
+	<path class="st2" d="M42.2,49.9H21.7c-0.4,0-0.8-0.4-0.8-0.8c0-0.4,0.4-0.8,0.8-0.8h20.5c0.4,0,0.8,0.4,0.8,0.8
+		C43,49.6,42.6,49.9,42.2,49.9z"/>
+	<path class="st2" d="M36.5,53.3h-9.2c-0.4,0-0.8-0.4-0.8-0.8c0-0.4,0.4-0.8,0.8-0.8h9.2c0.4,0,0.8,0.4,0.8,0.8S37,53.3,36.5,53.3z"
+		/>
+</g>
+<g>
+	<path class="st3" d="M32.2,43.6c-4.8,0-8.8-3.9-8.8-8.8s3.9-8.8,8.8-8.8c4.8,0,8.8,3.9,8.8,8.8C41,39.6,37.1,43.6,32.2,43.6z"/>
+	<path class="st4" d="M32.2,27c4.3,0,7.8,3.5,7.8,7.8s-3.5,7.8-7.8,7.8s-7.8-3.5-7.8-7.8C24.4,30.5,27.9,27,32.2,27 M32.2,25
+		c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S37.6,25,32.2,25L32.2,25z"/>
+</g>
+<path class="st5" d="M30.8,38.3c-0.3,0-0.5-0.1-0.7-0.3L28,35.9c-0.4-0.4-0.4-1.1,0-1.5s1.1-0.4,1.5,0l1.3,1.3l4.3-4.3
+	c0.4-0.4,1.1-0.4,1.5,0s0.4,1.1,0,1.5l-5,5C31.3,38.2,31,38.3,30.8,38.3z"/>
+</svg>

package/projects/vx-workflow-engine/src/images/responsibility-center.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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">
+	.st0{fill:#F1F1F1;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#1C5BD1;}
+	.st3{fill:#7AA7F7;}
+	.st4{fill:#34AA44;}
+	.st5{fill:#F2BF19;}
+</style>
+<circle class="st0" cx="32" cy="32" r="25"/>
+<path class="st1" d="M32,57c7,0,13.2-2.8,17.8-7.4V24.8H14.2v24.7C18.8,54.2,25,57,32,57z"/>
+<path class="st2" d="M14.2,24.9v-4.1c0-0.9,0.8-1.7,1.7-1.7h32.2c0.9,0,1.7,0.8,1.7,1.7v4.1H14.2z"/>
+<circle class="st1" cx="40.4" cy="22.3" r="0.9"/>
+<circle class="st1" cx="43" cy="22.3" r="0.9"/>
+<circle class="st1" cx="45.7" cy="22.3" r="0.9"/>
+<g>
+	<g>
+		<path class="st2" d="M41.7,49.9c-0.5-0.5-1-2.6-1.2-2.6H24.6c-0.3,0-0.8,2.2-1.2,2.6H41.7z"/>
+	</g>
+	<path class="st3" d="M37.6,39.1h2.1v5.1h-2.1V39.1z"/>
+	<path class="st3" d="M33.5,39.1h2.2v5.1h-2.1L33.5,39.1L33.5,39.1z"/>
+	<path class="st3" d="M29.4,39.1h2.1v5.1h-2.1V39.1z"/>
+	<path class="st3" d="M25.5,39.1h2.1v5.1h-2.1V39.1z"/>
+	<path class="st4" d="M40.4,37.5V37H24.8v0.5c0,0.3,0.3,0.5,0.5,0.5h14.6C40.1,38,40.4,37.8,40.4,37.5z"/>
+	<path class="st4" d="M39.9,45.3H25.3c-0.2,0-0.5,0.2-0.5,0.5v0.5h15.6v-0.5C40.4,45.5,40.1,45.3,39.9,45.3z"/>
+	<path class="st2" d="M24,35.9h17.2c0.3,0,0.5-0.1,0.5-0.4c0.1-0.3,0-0.5-0.3-0.6l-8.6-5.3c-0.1-0.1-0.4-0.1-0.5,0l-8.6,5.3
+		c-0.3,0.1-0.3,0.4-0.3,0.6C23.6,35.8,23.7,35.9,24,35.9z M32.2,32.7h0.7c0.3,0,0.5,0.3,0.5,0.5c0,0.3-0.3,0.5-0.5,0.5h-0.7
+		c-0.3,0-0.5-0.3-0.5-0.5S31.9,32.7,32.2,32.7z"/>
+	<path class="st5" d="M31.2,32.7h2.7c0.3,0,0.5,0.3,0.5,0.5c0,0.3-0.3,0.5-0.5,0.5h-2.7c-0.3,0-0.5-0.3-0.5-0.5S30.9,32.7,31.2,32.7
+		z"/>
+</g>
+</svg>

package/projects/vx-workflow-engine/src/images/risk-category.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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">
+	.st0{fill:#F1F1F1;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#1C5BD1;}
+	.st3{display:none;fill:#FFFFFF;}
+	.st4{fill:#7AA7F7;}
+	.st5{fill:#F2BF19;}
+	.st6{fill:#EB2424;}
+	.st7{fill:#34AA44;}
+</style>
+<circle class="st0" cx="32" cy="32" r="25"/>
+<g>
+	<g id="Layer_1_2_">
+		<g>
+			<g>
+				<path class="st1" d="M32,57c7,0,13.2-2.8,17.8-7.4V24.8H14.2v24.7C18.8,54.2,25,57,32,57z"/>
+			</g>
+			<path class="st2" d="M14.2,24.9v-4.1c0-0.9,0.8-1.7,1.7-1.7h32.2c0.9,0,1.7,0.8,1.7,1.7v4.1H14.2z"/>
+			<circle class="st0" cx="40.4" cy="22.3" r="0.9"/>
+			<circle class="st0" cx="43" cy="22.3" r="0.9"/>
+			<circle class="st0" cx="45.7" cy="22.3" r="0.9"/>
+		</g>
+	</g>
+	<g>
+		<path class="st3" d="M29.1,31.3c0.3,0,0.4,0.2,0.4,0.2V38c0,0-0.1,0.2-0.4,0.2h-7.9c-0.3,0-0.4-0.2-0.4-0.2v-6.5
+			c0,0,0.1-0.2,0.4-0.2H29.1 M29.1,30.3h-7.9c-0.8,0-1.4,0.5-1.4,1.2V38c0,0.7,0.6,1.2,1.4,1.2h7.9c0.8,0,1.4-0.5,1.4-1.2v-6.5
+			C30.5,30.8,29.9,30.3,29.1,30.3L29.1,30.3z"/>
+	</g>
+	<g>
+		<path class="st3" d="M29.1,42.9c0.3,0,0.4,0.2,0.4,0.2v6.5c0,0-0.1,0.2-0.4,0.2h-7.9c-0.3,0-0.4-0.2-0.4-0.2v-6.5
+			c0,0,0.1-0.2,0.4-0.2H29.1 M29.1,41.9h-7.9c-0.8,0-1.4,0.5-1.4,1.2v6.5c0,0.7,0.6,1.2,1.4,1.2h7.9c0.8,0,1.4-0.5,1.4-1.2v-6.5
+			C30.5,42.4,29.9,41.9,29.1,41.9L29.1,41.9z"/>
+	</g>
+	<g>
+		<path class="st3" d="M42.5,31.3c0.3,0,0.4,0.2,0.4,0.2V38c0,0-0.1,0.2-0.4,0.2h-7.9c-0.3,0-0.4-0.2-0.4-0.2v-6.5
+			c0,0,0.1-0.2,0.4-0.2H42.5 M42.5,30.3h-7.9c-0.8,0-1.4,0.5-1.4,1.2V38c0,0.7,0.6,1.2,1.4,1.2h7.9c0.8,0,1.4-0.5,1.4-1.2v-6.5
+			C44,30.8,43.3,30.3,42.5,30.3L42.5,30.3z"/>
+	</g>
+	<g>
+		<path class="st3" d="M42.5,42.9c0.3,0,0.4,0.2,0.4,0.2v6.5c0,0-0.1,0.2-0.4,0.2h-7.9c-0.3,0-0.4-0.2-0.4-0.2v-6.5
+			c0,0,0.1-0.2,0.4-0.2H42.5 M42.5,41.9h-7.9c-0.8,0-1.4,0.5-1.4,1.2v6.5c0,0.7,0.6,1.2,1.4,1.2h7.9c0.8,0,1.4-0.5,1.4-1.2v-6.5
+			C44,42.4,43.3,41.9,42.5,41.9L42.5,41.9z"/>
+	</g>
+</g>
+<path class="st4" d="M28.9,39.4h-6.8c-0.8,0-1.5-0.7-1.5-1.5v-6.8c0-0.8,0.7-1.5,1.5-1.5h6.8c0.8,0,1.5,0.7,1.5,1.5v6.8
+	C30.4,38.7,29.7,39.4,28.9,39.4z"/>
+<path class="st5" d="M42.4,39.4h-6.8c-0.8,0-1.5-0.7-1.5-1.5v-6.8c0-0.8,0.7-1.5,1.5-1.5h6.8c0.8,0,1.5,0.7,1.5,1.5v6.8
+	C43.9,38.7,43.2,39.4,42.4,39.4z"/>
+<path class="st6" d="M28.9,52.4h-6.8c-0.8,0-1.5-0.7-1.5-1.5v-6.8c0-0.8,0.7-1.5,1.5-1.5h6.8c0.8,0,1.5,0.7,1.5,1.5v6.8
+	C30.4,51.7,29.7,52.4,28.9,52.4z"/>
+<path class="st7" d="M39,52.4L39,52.4c-2.7,0-4.9-2.2-4.9-4.9l0,0c0-2.7,2.2-4.9,4.9-4.9l0,0c2.7,0,4.9,2.2,4.9,4.9l0,0
+	C43.9,50.2,41.7,52.4,39,52.4z"/>
+</svg>

package/projects/vx-workflow-engine/src/images/top-part.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="30" viewBox="0 0 6 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0C6 17.55 0 22.8 0 30C0 30 3.30193 30 6 30V0Z" fill="white"/>
+</svg>

package/projects/vx-workflow-engine/src/lib/add-multiple-responsibility/add-multiple-responsibility.component.html

@@ -0,0 +1,43 @@
+<!-- <div class="add-multiple-risk" [attr.id]="'scrollReference'" >
+    <!- - main container starts here - ->
+    <div class="add-multiple-risk-body">
+        <div class="add-multiple-risk-container">
+            <div class="image">
+                <img src="https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/spreadsheet-multiple-category.svg" alt="" />
+            </div>
+            <h4>You can entrust multiple responsibilities in just two easy steps:</h4>
+            <ul class="list">
+                <li>Download the template and fill in the details.</li>
+                <li>Upload the .xlsx file and you’re good to go!</li>
+            </ul>
+
+            <button class="download" *ngIf="downloadStatus === 'NOT_DOWNLOADING'"
+            (click)="downloadTemplate()" type="button"><i class="icons">&#xe91b;</i> Download Template</button>
+            <div class="bulk-btn-progress" *ngIf="downloadStatus === 'DOWNLOADING'">
+                Download in Progress
+                <app-line-loader [loaderHeight]="'2'"></app-line-loader>
+            </div>
+            <ng-container *ngIf="downloadStatus === 'DOWNLOADED'">
+                <div class="bulk-btn-progress"><i class="icons">&#xe91c;</i>Download Complete</div>
+                <div class="bulk-btn-again">
+                    Is the file not downloaded?
+                    <button (click)="downloadTemplate()">Retry Download</button>
+                </div>
+            </ng-container>
+            <p class="error-message" *ngIf="isWrongFile || isWrongFormat|| isFileEmpty"
+            >{{errorMessage}}</p>  
+        </div>
+    </div>
+</div> -->
+<app-bulk-responsibility-view *ngIf="showExcel"
+[responsibilityBulkUpload]="responsibilityBulkUpload"
+[fileName]="fileName"
+[loader]="loader"
+[defaultOwner]="defaultOwner"
+(submitResponsibilityBulkUpload)="submitResponsibilityBulkUpload()"
+(cancel)="reset()"
+[responsibilityType]="'singleTab'"></app-bulk-responsibility-view>
+<app-loader-inline *ngIf="loader"></app-loader-inline>
+
+<input type="file" [(ngModel)]="fileValue" id="fileInput" class="hidden-input" accept=".xlsx" (change)="uploadedFile($event)" multiple />
+<app-smiley-dialog-inline *ngIf="showSmiley" [message]="smileyMessage" [actionButtons]="actionButtons" (action)="action($event)" (closeSmiley)="closeSmiley($event)"></app-smiley-dialog-inline>