init commit

.browserslistrc

+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+# last 2 Safari major versions
+# last 2 iOS major versions
+Firefox ESR
+
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
\ No newline at end of file

.editorconfig

+# 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

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.vscode/extensions.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

+# UserTask
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+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` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+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
+
+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.

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "User-Task": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/add-user-task",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/ang-plugins.js"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "none"
+            },
+            "development": {
+              "buildOptimizer": false,
+             "optimization": true,
+             "vendorChunk": false,
+             "extractLicenses": false,
+             "sourceMap": false,
+             "namedChunks": true
+
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "User-Task:build:production"
+            },
+            "development": {
+              "browserTarget": "User-Task:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "User-Task:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+ 
+
+"cli": {
+  "cache": {
+    "enabled": false
+  },
+  "analytics": false
+}
+
+}

package.json

+{
+  "name": "user-task",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^16.2.0",
+    "@angular/cdk": "^16.2.14",
+    "@angular/common": "^16.2.0",
+    "@angular/compiler": "^16.2.0",
+    "@angular/core": "^16.2.0",
+    "@angular/forms": "^16.2.0",
+    "@angular/material": "^16.2.14",
+    "@angular/platform-browser": "^16.2.0",
+    "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular/router": "^16.2.0",
+    "hammerjs": "^2.0.8",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.2.0",
+    "@angular/cli": "~16.2.0",
+    "@angular/compiler-cli": "^16.2.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.1.3"
+  }
+}

src/ang-plugins.js

+var bbHostURL = '';
+var isMobile = window.location.pathname.indexOf('E12BROWSER') == -1;
+
+setBBHostURL();
+addCssLink("material-theme.css");
+addScript("assets/js/pluginWrapper.js");
+
+if(isMobile)
+{
+	addScript("runtime.js");
+	addScript("polyfills.js");
+	addScript("main.js");
+}
+addCssLink("foundation.min.css");
+addCssLink("styles.css");
+addCssLink("visionicon.css");
+addCssLink("dragula.css");
+
+addScript2("./visplugin/assets/flexmonster/","flexmonster.js");
+
+if( !HTMLElement.prototype.createShadowRoot ){
+	HTMLElement.prototype.createShadowRoot = function(){
+		return this;
+	}
+}
+
+function addScript(fileName)
+{
+    addScript2("./visplugin/", fileName);
+}
+
+function addScript2(path, fileName)
+{
+    var script=document.createElement('script');
+    script.type='text/javascript';
+    script.src= path + fileName;
+    document.head.appendChild(script);
+}
+
+function addCssLink( fileName)
+{
+    try {
+    var cssLink=document.createElement('link');
+    cssLink.rel='stylesheet';
+    cssLink.href= "./visplugin/assets/css/" + fileName;
+    document.head.appendChild(cssLink);
+    } 
+	catch(e){
+    console.log('Errorrr--');
+  }
+}
+
+function addCssLink2( path,fileName)
+{
+    try {
+    var cssLink=document.createElement('link');
+    cssLink.rel='stylesheet';
+    cssLink.href= path + fileName;
+    document.head.appendChild(cssLink);
+    } 
+	catch(e){
+    console.log('Errorrr--');
+  }
+}
+
+function addElement(elName){
+   var el = document.createElement(elName);
+   document.body.appendChild(el);
+}
+
+function loadAddUserTaskComponent(targetId, componentData, callback)
+{
+	var compRef;
+    setBBHostURL();
+    if( window.VisPlugin )
+    {
+	    var pluginEmitter = window.VisPlugin.pluginEvtEmitter;
+	    var pluginConfig = window.VisPlugin.pluginConfig;
+	    var evtEmit = new pluginEmitter();
+	    evtEmit.subscribe( function(pluginEvent) {
+	        (typeof callback === 'function') && callback(pluginEvent);
+	    });
+
+	    var compData = {};
+	    var componentName = "";
+	    try {
+			compData = JSON.parse(componentData);
+			componentName = compData.componentName;
+		}
+		catch(e) {
+			componentName = componentData;
+		}
+	    console.log( 'Print componentData >>', componentData, ' componentName >>', componentName );
+        if(typeof(compData.cacheComp) == "string"){
+            if(compData.cacheComp && compData.cacheComp.trim() == "true"){
+                compData.cacheComp = true;
+            }else {
+                compData.cacheComp = false;
+            }
+        }
+	    var data = {
+	    	"target-id" : compData.targetId,
+	    	"compData" : compData,
+	    	"cacheComp" : compData.cacheComp ? true : false
+	    };
+	    var angPlugin = window.VisPlugin.loadPlugin(componentName, data, window.VisPlugin.pluginMI, evtEmit);
+	    compRef = angPlugin.instance;
+    }
+
+	return compRef;
+}
+
+function destroyComponent(componentName)
+{
+	if( window.VisPlugin )
+	{
+		window.VisPlugin.destroyPlugin(componentName);
+	}
+}
+
+function detachComponent(componentName)
+{
+	if( window.VisPlugin )
+	{
+		window.VisPlugin.detachPlugin(componentName);
+	}
+}
+
+function detachPlugin(componentName)
+{
+	if( window.VisPlugin )
+	{
+		window.VisPlugin.detachPlugin(componentName);
+	}
+}
+
+function setBBHostURL()
+{
+	if(window._getHostURL)
+	{
+     	bbHostURL = window._getHostURL();
+ 	}
+ 	else
+ 	{
+		bbHostURL = localStorage.getItem('hostUrl');
+		if(bbHostURL == null){
+			bbHostURL = '';
+		}
+	}
+
+	localStorage.setItem('HOST_URL', bbHostURL);
+}
+
+function getBBHostURL()
+{
+	return bbHostURL;
+}
+

src/app/add-user-task/add-user-task.component.css

+.add-user-task-container {
+  max-width: 600px;
+  margin: 50px auto;
+  padding: 40px 30px;
+  border: 2px solid #868894;
+  border-radius: 20px;
+  background-color: #f9f9f9;
+  box-shadow: 10px 40px 80px rgba(199, 208, 209, 0.1);
+  text-align: center;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  min-height: 300px;
+  position: relative;
+}
+
+.add-user-task-container h2 {
+  margin-bottom: 30px;
+  color: #257ada;
+  font-size: 24px;
+}
+
+.add-user-task-container form {
+  display: block;
+  text-align: left;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.add-user-task-container label {
+  display: block;
+  margin-bottom: 10px;
+  color: #181818;
+  font-size: 16px;
+  transition: color 0.3s;
+}
+
+.add-user-task-container label:hover {
+  color: #be1919;
+}
+
+.add-user-task-container .form-control {
+  width: calc(100% - 40px);
+  padding: 10px;
+  margin-bottom: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 16px;
+  transition: border-color 0.3s;
+}
+
+.add-user-task-container .form-control:focus {
+  border-color: #656ec2;
+  outline: none;
+}
+
+.add-user-task-container .submit-button {
+  padding: 12px 12px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.add-user-task-container .submit-button:hover {
+  background-color: #0056b3;
+}
+
+.add-user-task-container .submit-button:active {
+  transform: scale(0.98);
+}
+
+.add-user-task-container .arrow-button {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 10px;
+  transition: background-color 0.3s;
+}
+
+.add-user-task-container .arrow-button:hover {
+  background-color: #0056b3;
+}
+
+.pophelp-panel {
+  background-color: #f9f9f9;
+  border: 1px solid #050505;
+  border-radius: 8px;
+  padding: 10px;
+  max-height: 20rem;
+  overflow-y: auto;
+  position: absolute;
+  left: 33rem;
+  top: 1rem;
+  transform: translateY(0);
+  width: 24rem;
+  z-index: 1000;
+}
+
+.pophelp-panel h3 {
+  margin-top: 0;
+  color: #257ada;
+  font-size: 18px;
+  text-align: center;
+}
+
+.pophelp-panel ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pophelp-panel ul li {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.pophelp-panel ul li:hover {
+  background-color: #ddd;
+}
+
+.close-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background-color: transparent;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #070707;
+  z-index: 1001;
+}
+
+.search-bar {
+  width: calc(100% - 20px);
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 15px;
+  transition: border-color 0.3s;
+  position: sticky;
+  top: 0; /* Stick to the top */
+  z-index: 100; /* Ensure it's above the content */
+}
+
+.search-bar:focus {
+  border-color: #131414;
+  outline: none;
+}
+
+.user-item {
+  margin-bottom: 10px;
+}
+
+hr {
+  border-top: 1px solid #ccc;
+  margin: 5px 0;
+}

src/app/add-user-task/add-user-task.component.html

+<div class="add-user-task-container">
+  <h2>Add User Task</h2>
+  <form (ngSubmit)="onSubmit()" #taskForm="ngForm">
+    <div class="form-group">
+      <label for="taskDetails">Task Details:</label>
+      <input
+        type="text"
+        id="taskDetails"
+        [(ngModel)]="taskDetails"
+        name="taskDetails"
+        required
+        class="form-control"
+      />
+    </div>
+    <div class="form-group user-code-group">
+      <label for="userCode">User Code:</label>
+      <div class="user-code-container">
+        <input
+          type="text"
+          id="userCode"
+          [(ngModel)]="userCode"
+          name="userCode"
+          required    
+          class="form-control user-code-input"
+        />
+        <button type="button" class="arrow-button" (click)="togglePanel()">&#x25B6;</button>
+      </div>
+    </div>
+    <div id="pophelp-panel" class="pophelp-panel" *ngIf="showPanel">
+      <h3>Select User Code</h3>
+      <input type="text" class="search-bar" placeholder="Search user code..." (input)="filterData($event)">
+      <ul>
+        <li *ngFor="let item of filteredData" (click)="selectUserCode(item)">
+          <div class="user-item">
+            <span>{{ item.CODE }}</span> - <span>{{ item.NAME }}</span>
+          </div>
+          <hr> <!-- Horizontal line to separate items -->
+        </li>
+      </ul>
+      <!-- Close button for the panel -->
+      <button class="close-button" (click)="closePanel()">×</button>
+    </div>
+    <button type="submit" class="btn btn-primary submit-button" [disabled]="!taskForm.form.valid">Submit</button>
+  </form>
+</div>

src/app/add-user-task/add-user-task.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddUserTaskComponent } from './add-user-task.component';
+
+describe('AddUserTaskComponent', () => {
+  let component: AddUserTaskComponent;
+  let fixture: ComponentFixture<AddUserTaskComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddUserTaskComponent]
+    });
+    fixture = TestBed.createComponent(AddUserTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/add-user-task/add-user-task.component.ts

+import { Component, OnInit } from '@angular/core';
+import { UserTaskService } from '../user-task.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-add-user-task',
+  templateUrl: './add-user-task.component.html',
+  styleUrls: ['./add-user-task.component.css']
+})
+export class AddUserTaskComponent implements OnInit {
+  taskDetails: string = '';
+  userCode: string = '';
+  tokenId: string = 'ZXlKaGJHY2lPaUpJVXpJMU5pSjkuZXlKcWRHa2lPaUl3TURBd01EQXdOREV4SWl3aVlYQndiR2xqWVhScGIyNUpaQ0k2SWtaTVZWUlVSVkpCVUZBaUxDSnlaV2RwYjI0aU9pSWlMQ0prWlhOcFoyNWhkR2x2YmlJNklpSXNJbkpsY0c5eWRGUnZRMjlrWlNJNklpSXNJbTVoYldVaU9pSWdJaXdpWkdsMmFYTnBiMjRpT2lJaUxDSmxiV0ZwYkNJNklpSXNJbWh4SWpvaUlpd2laVzUwYVhSNVZIbHdaU0k2SWtRaUxDSmxiblJwZEhsRGIyUmxJam9pUVcxdmJGTWlMQ0psYm5SbGNuQnlhWE5sSWpvaVFWQlFWa2xUSWl3aWRISmhibk5FUWlJNklrRlFVRlpKVXlJc0lteHZaMmx1VTJsMFpTSTZJbE13TURBeElpd2ljSEp2Wm1sc1pVbGtJam9pUVVSTlNVNGlMQ0psZUhBaU9qRTNORGN6TWprM01UTTBmUS5NTjRqS00xelQ1NS1OZjZrdHIyWjVHdGRmY3BocFhFeWVQemRwcGFPT2Nv'; // Example token
+  showPanel: boolean = false;
+  originalData: any[] = [];
+  filteredData: any[] = [];
+
+  constructor(private userTaskService: UserTaskService, private snackBar: MatSnackBar) {}
+
+  ngOnInit(): void {
+    document.addEventListener('click', this.handleClickOutside.bind(this));
+  }
+
+  handleClickOutside(event: MouseEvent) {
+    const panel = document.getElementById('pophelp-panel') as HTMLElement;
+    const button = event.target as HTMLElement;
+    if (panel && !panel.contains(button) && this.showPanel && !button.classList.contains('arrow-button')) {
+      this.showPanel = false;
+    }
+  }
+
+  onSubmit() {
+    if (this.taskDetails && this.userCode) {
+      const refId = 'prop-2';
+      const refSer = 'U-TASK_TEST';
+      const userIdAssigned = this.userCode;
+      const taskDescr = this.taskDetails;
+
+      this.userTaskService.addUserTask(refId, refSer, userIdAssigned, taskDescr, this.tokenId).subscribe({
+        next: (response: any) => {
+          console.log('Task added successfully', response);
+          this.snackBar.open('Task Added Successfully', 'Close', {
+            duration: 4000,
+          });
+        },
+        error: (error: any) => {
+          console.error('Error adding task', error);
+          this.snackBar.open('Failed! Please try again', 'Close', {
+            duration: 3000,
+          });
+        }
+      });
+    }
+  }
+
+  togglePanel() {
+    this.showPanel = !this.showPanel;
+    if (this.showPanel) {
+      this.fetchDynamicData();
+    }
+  }
+
+  fetchDynamicData() {
+    const fieldName = 'USER_CODE';
+    const modName = 'W_USER_TASKS';
+    this.userTaskService.getPophelpData(fieldName, modName, this.tokenId).subscribe({
+      next: (response: any) => {
+        this.originalData = response;
+        this.filteredData = response;
+      },
+      error: (error: any) => {
+        console.error('Error fetching data', error);
+        this.snackBar.open('Error fetching data', 'Close', {
+          duration: 3000,
+        });
+      }
+    });
+  }
+
+
+  filterData(event: Event) {
+    const query = (event.target as HTMLInputElement).value.toLowerCase().trim();
+    if (!query) {
+      this.filteredData = this.originalData; // Reset filter if query is empty
+      return;
+    }
+    this.filteredData = this.originalData.filter(item => 
+      (item.CODE?.toLowerCase().includes(query) || item.NAME?.toLowerCase().includes(query))
+    );
+  }
+  
+  
+  selectUserCode(item: any) {
+    this.userCode = item.CODE;
+    this.showPanel = false;
+  }
+
+  closePanel() {
+    this.showPanel = false;
+  }
+}

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

+<app-add-user-task></app-add-user-task>
\ No newline at end of file

src/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [RouterTestingModule],
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'User-Task'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('User-Task');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('User-Task app is running!');
+  });
+});

src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'User-Task';
+}

src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+import { AddUserTaskComponent } from './add-user-task/add-user-task.component';
+import { UserTaskService } from './user-task.service';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatInputModule } from '@angular/material/input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    AddUserTaskComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    MatSnackBarModule,
+    BrowserAnimationsModule,
+     MatInputModule,
+    MatAutocompleteModule,
+    MatFormFieldModule
+  ],
+  providers: [UserTaskService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/user-task.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+//import { UserTaskService } from './user-task.service';
+
+describe('UserTaskService', () => {
+  //let service: UserTaskService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+   // service = TestBed.inject(UserTaskService);
+  });
+
+  it('should be created', () => {
+   // expect(service).toBeTruthy();
+  });
+});

src/app/user-task.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserTaskService {
+  private serviceUrl = 'http://192.168.0.116:9090/ibase/rest/UserTasksService/addUserTask';
+  private pophelpUrl = 'http://192.168.0.116:9090/ibase/rest/PopHelpService/getPophelpData';
+
+  constructor(private http: HttpClient) {}
+
+  addUserTask(refId: string, refSer: string, userIdAssigned: string, taskDescr: string, tokenId: string): Observable<any> {
+    const body = new URLSearchParams();
+    body.set('REF_ID', refId);
+    body.set('REF_SER', refSer);
+    body.set('USER_ID__ASSIGNED', userIdAssigned);
+    body.set('TASK_DESCR', taskDescr);
+
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'token_id': tokenId // Adding the token_id to the headers
+    });
+
+    return this.http.post(this.serviceUrl, body.toString(), { headers });
+  }
+
+  getPophelpData(fieldName: string, modName: string, tokenId: string): Observable<any> {
+    const url = `${this.pophelpUrl}?FIELD_NAME=${fieldName}&MOD_NAME=${modName}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'token_id': tokenId // Adding the token_id to the headers
+    });
+
+    return this.http.get<any>(url, { headers });
+  }
+}

src/assets/css/dragula.css

+.gu-mirror {
+  position: fixed !important;
+  margin: 0 !important;
+  z-index: 9999 !important;
+  opacity: 0.8;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
+}
+.gu-hide {
+  display: none !important;
+}
+.gu-unselectable {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
+}
+.gu-transit {
+  opacity: 0.2;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+  filter: alpha(opacity=20);
+}

src/assets/css/theme-blue.css

+.fm-charts-color-1 
+{
+  fill: #22B8E9 !important;
+  /* fill: rgb(0, 117, 255) !important; */
+}
+
+.fm-charts-color-2
+{
+  fill: #38BFEB !important;
+}
+
+.fm-charts-color-3
+{
+  fill: #4EC6ED !important;
+}
+
+.fm-charts-color-4
+{
+  fill: #64CDF0 !important;
+}
+
+.fm-charts-color-5
+{
+  fill: #7AD4F2 !important;
+}
+
+.fm-charts-color-6
+{
+  fill: #90DBF4 !important;
+}
+
+.fm-charts-color-7
+{
+  fill: #A7E3F6 !important;
+}
+
+.fm-charts-color-8
+{
+  fill: none !important;
+}
+

src/assets/css/theme-dark-blue.css

+.fm-charts-color-1 
+{
+  fill: #0A84FF !important;
+}
+
+.fm-charts-color-2
+{
+  fill: #2290FF !important;
+}
+
+.fm-charts-color-3
+{
+  fill: #3B9DFF !important;
+}
+
+.fm-charts-color-4
+{
+  fill: #53A9FF !important;
+}
+
+.fm-charts-color-5
+{
+  fill: #6CB5FF !important;
+}
+
+.fm-charts-color-6
+{
+  fill: #84C1FF !important;
+}
+
+.fm-charts-color-7
+{
+  fill: #9DCEFF !important;
+}
+
+.fm-charts-color-8
+{
+  fill: none !important;
+}
+

src/assets/css/theme-default.css

+.fm-charts-color-1 
+{
+    fill: none !important;
+}
\ No newline at end of file

src/assets/css/theme-green.css

+.fm-charts-color-1 
+{
+  fill: #3EB390 !important;
+  /* fill: rgb(95, 222, 178) !important; */
+}
+
+.fm-charts-color-2 
+{
+  fill: #51B49B !important;
+}
+
+.fm-charts-color-3 
+{
+  fill: #65C2A6 !important;
+}
+
+.fm-charts-color-4 
+{
+  fill: #78CAB1 !important;
+}
+
+.fm-charts-color-5 
+{
+  fill: #8BD1BC !important;
+}
+
+.fm-charts-color-6 
+{
+  fill: #9ED9C7 !important;
+}
+
+.fm-charts-color-7 
+{
+  fill: #B2E1D3 !important;
+}
+
+.fm-charts-color-8
+{
+  fill: none !important;
+}
\ No newline at end of file

src/assets/css/theme-orange.css

+.fm-charts-color-1 
+{
+  fill: #ED9768 !important;
+  /* fill: rgb(223, 56, 0) !important; */
+}
+
+.fm-charts-color-2 
+{
+  fill: #EFA177 !important;
+}
+
+.fm-charts-color-3 
+{
+  fill: #F1AC86 !important;
+}
+
+.fm-charts-color-4 
+{
+  fill: #F2B695 !important;
+}
+
+.fm-charts-color-5 
+{
+  fill: #F4C1A4 !important;
+}
+
+.fm-charts-color-6 
+{
+  fill: #F6CBB3 !important;
+}
+
+.fm-charts-color-7 
+{
+  fill: #F8D5C3 !important;
+}
+
+.fm-charts-color-8 
+{
+  fill: none !important;
+}
\ No newline at end of file

src/assets/css/theme-pink.css

+.fm-charts-color-1 
+{
+  fill: #FB9898 !important;
+  /* fill: rgb(206, 151, 230) !important; */
+}
+.fm-charts-color-2 
+{
+  fill: #FBA2A2 !important;
+}
+.fm-charts-color-3 
+{
+  fill: #FCADAD !important;
+}
+.fm-charts-color-4 
+{
+  fill: #FCB7B7 !important;
+}
+.fm-charts-color-5 
+{
+  fill: #FDC1C1 !important;
+}
+.fm-charts-color-6 
+{
+  fill: #FDCBCB !important;
+}
+.fm-charts-color-7
+{
+  fill: #FDD6D6 !important;
+}
+
+.fm-charts-color-8
+{
+  fill: none !important;
+}

src/assets/css/theme-purple.css

+.fm-charts-color-1 
+{
+  fill: #B29EC1 !important;
+  /* fill: rgb(109, 59, 216) !important; */
+}
+
+.fm-charts-color-2
+{
+  fill: #BAA8CF !important;
+}
+
+.fm-charts-color-3
+{
+  fill: #C1B1D5 !important;
+}
+
+.fm-charts-color-4
+{
+  fill: #C9BBDA !important;
+}
+
+.fm-charts-color-5
+{
+  fill: #D1C5DF !important;
+}
+
+.fm-charts-color-6
+{
+  fill: #D8CEE4 !important;
+}
+
+.fm-charts-color-7
+{
+  fill: #E0D8EA !important;
+}
+
+.fm-charts-color-8
+{
+  fill: none !important;
+}
\ No newline at end of file

src/assets/css/theme-yellow.css

+.fm-charts-color-1 
+{
+  fill: #F9A803 !important;
+  /* fill: rgb(255, 184, 0) !important; */
+}
+
+.fm-charts-color-2
+{
+  fill: #FAB11C !important;
+}
+
+.fm-charts-color-3
+{
+  fill: #FAB935 !important;
+}
+
+.fm-charts-color-4
+{
+  fill: #FBC24E !important;
+}
+
+.fm-charts-color-5
+{
+  fill: #FBCB68 !important;
+}
+
+.fm-charts-color-6
+{
+  fill: #FCD381 !important;
+}
+
+.fm-charts-color-7
+{
+  fill: #FDDC9A !important;
+}
+
+.fm-charts-color-8
+{
+  fill: none !important;
+}
\ No newline at end of file

src/assets/css/videogular/videogular.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="tt-icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe006;" glyph-name="closed_caption" d="M768 468.667v44q0 18-12 30t-30 12h-128q-18 0-31-12t-13-30v-172q0-18 13-30t31-12h128q18 0 30 12t12 30v44h-64v-22h-86v128h86v-22h64zM470 468.667v44q0 18-13 30t-31 12h-128q-18 0-30-12t-12-30v-172q0-18 12-30t30-12h128q18 0 31 12t13 30v44h-64v-22h-86v128h86v-22h64zM810 768.667q34 0 60-26t26-60v-512q0-34-26-60t-60-26h-596q-36 0-61 26t-25 60v512q0 34 25 60t61 26h596z" />
+<glyph unicode="&#xe018;" glyph-name="pause" d="M598 724.667h170v-596h-170v596zM256 128.667v596h170v-596h-170z" />
+<glyph unicode="&#xe01b;" glyph-name="play_arrow" d="M342 724.667l468-298-468-298v596z" />
+<glyph unicode="&#xe023;" glyph-name="repeat" d="M726 212.667v172h84v-256h-512v-128l-170 170 170 170v-128h428zM298 640.667v-172h-84v256h512v128l170-170-170-170v128h-428z" />
+<glyph unicode="&#xe025;" glyph-name="replay" d="M512 724.667q142 0 242-100t100-240q0-142-101-242t-241-100-241 100-101 242h86q0-106 75-181t181-75 181 75 75 181-75 181-181 75v-172l-214 214 214 214v-172z" />
+<glyph unicode="&#xe027;" glyph-name="skip_next" d="M682 682.667h86v-512h-86v512zM256 170.667v512l362-256z" />
+<glyph unicode="&#xe028;" glyph-name="skip_previous" d="M406 426.667l362 256v-512zM256 682.667h86v-512h-86v512z" />
+<glyph unicode="&#xe02a;" glyph-name="stop" d="M256 682.667h512v-512h-512v512z" />
+<glyph unicode="&#xe030;" glyph-name="volume_down" d="M214 554.667h170l214 214v-684l-214 214h-170v256zM790 426.667q0-118-108-172v344q108-54 108-172z" />
+<glyph unicode="&#xe031;" glyph-name="volume_mute" d="M298 554.667h172l212 214v-684l-212 214h-172v256z" />
+<glyph unicode="&#xe032;" glyph-name="volume_off" d="M512 768.667v-180l-90 90zM182 810.667l714-714-54-54-88 88q-74-58-156-78v88q50 14 96 50l-182 182v-288l-214 214h-170v256h202l-202 202zM810 426.667q0 102-59 180t-153 106v88q130-28 214-133t84-241q0-96-44-178l-64 66q22 54 22 112zM704 426.667q0-18-2-26l-104 104v94q106-52 106-172z" />
+<glyph unicode="&#xe033;" glyph-name="volume_up" d="M598 800.667q130-28 214-133t84-241-84-241-214-133v88q94 28 153 106t59 180-59 180-153 106v88zM704 426.667q0-120-106-172v344q106-52 106-172zM128 554.667h170l214 214v-684l-214 214h-170v256z" />
+<glyph unicode="&#xe035;" glyph-name="hd" d="M618 362.667v128h86v-128h-86zM554 554.667v-256h172q18 0 30 12t12 30v172q0 18-12 30t-30 12h-172zM470 298.667v256h-64v-106h-86v106h-64v-256h64v86h86v-86h64zM810 810.667q34 0 60-26t26-60v-596q0-34-26-60t-60-26h-596q-36 0-61 26t-25 60v596q0 34 25 60t61 26h596z" />
+<glyph unicode="&#xe038;" glyph-name="forward_10" d="M564 290.667q0-14 20-14 10 0 14 4l8 10q4 8 4 12v86q-4 8-4 12t-9 9-13 5q-6 0-12-6l-8-8q-6-8-6-12v-86q6-8 6-12zM644 332.667q0-26-4-34l-12-26q-14-12-22-12-4 0-13-2t-13-2q-18 0-26 4-4 2-10 6t-10 6q-18 10-18 60v30q0 26 4 34l14 26q12 12 20 12 4 0 13 2t13 2q18 0 26-4 4-2 11-6t11-6 12-26q4-12 4-34v-30zM466 256.667h-40v140l-42-12v30l76 24h6v-182zM170 384.667q0 140 100 240t242 100v172l214-214-214-214v172q-104 0-180-75t-76-181 76-181 180-75 180 75 76 181h86q0-142-101-242t-241-100-241 100-101 242z" />
+<glyph unicode="&#xe039;" glyph-name="forward_30" d="M170 384.667q0 140 100 240t242 100v172l214-214-214-214v172q-104 0-180-75t-76-181 76-181 180-75 180 75 76 181h86q0-142-101-242t-241-100-241 100-101 242zM568 290.667q0-14 20-14 10 0 14 4l8 10q4 8 4 12v86q-4 8-4 12t-9 9-13 5q-6 0-12-6l-8-8q-4-8-4-12v-86q4-8 4-12zM652 332.667q0-26-4-34l-12-26q-14-12-22-12-4 0-13-2t-13-2q-14 0-46 16-4 2-12 26-6 18-6 34v30q0 22 6 34l12 26q14 12 22 12 4 0 12 2t12 2q18 0 26-4 4-2 11-6t11-6 12-26q4-12 4-34v-30zM426 362.667q30 0 30 26v8q-4 4-4 8t-8 4h-22q-4-4-8-4t-4-8v-8h-44q0 16 11 31t25 15q2 0 10 2t10 2q24 0 48-12 16-8 16-38v-14q-4-8-4-12 0-8-8-8-4 0-14-10 18-10 22-16 8-16 8-26 0-18-4-22-2-2-6-8t-6-8q-8-8-22-8-4 0-13-2t-13-2q-16 0-20 4-2 2-10 4t-12 4q-18 10-18 42h36v-8q4-4 4-8t8-4h22q4 4 8 4t4 8v22q-4 4-4 8t-8 4h-26v30h16z" />
+<glyph unicode="&#xe03b;" glyph-name="replay_10" d="M564 290.667q0-14 20-14 10 0 14 4l8 10q4 8 4 12v86q-4 8-4 12t-9 9-13 5q-6 0-12-6l-8-8q-6-8-6-12v-86q6-8 6-12zM648 332.667q0-26-4-34l-12-26q-14-12-22-12-4 0-13-2t-13-2q-18 0-26 4-4 2-10 6t-10 6q-18 10-18 60v30q0 26 4 34l14 26q12 12 20 12 4 0 13 2t13 2q18 0 26-4 4-2 11-6t11-6 12-26q4-12 4-34v-30zM466 256.667h-40v140l-42-12v30l76 24h6v-182zM512 724.667q142 0 242-100t100-240q0-142-101-242t-241-100-241 100-101 242h86q0-106 76-181t180-75 180 75 76 181-76 181-180 75v-172l-214 214 214 214v-172z" />
+<glyph unicode="&#xe03c;" glyph-name="replay_30" d="M572 290.667q0-14 22-14 8 0 12 4l8 10q4 8 4 12v86q0 2-2 6t-2 6q0 4-8 9t-12 5q-8 0-14-6l-8-8q-4-8-4-12v-86q4-8 4-12zM652 332.667q0-26-4-34l-12-26q-14-12-22-12-4 0-13-2t-13-2q-14 0-46 16-4 2-12 26-6 18-6 34v30q0 22 6 34l12 26q14 12 22 12 4 0 12 2t12 2q18 0 26-4 4-2 11-6t11-6 12-26q4-12 4-34v-30zM426 362.667q30 0 30 26v8q-4 4-4 8t-8 4h-22q-4-4-8-4t-4-8v-8h-44q0 16 11 31t25 15q2 0 10 2t10 2q24 0 48-12 16-8 16-38v-14q-4-8-4-12 0-8-8-8-4 0-14-10 18-10 22-16 8-16 8-26 0-18-4-22-2-2-6-8t-6-8q-8-8-22-8-4 0-13-2t-13-2q-16 0-20 4-2 2-10 4t-12 4q-18 10-18 42h36v-8q4-4 4-8t8-4h22q4 4 8 4t4 8v22q-4 4-4 8t-8 4h-26v30h16zM512 724.667q142 0 242-100t100-240q0-142-101-242t-241-100-241 100-101 242h86q0-106 76-181t180-75 180 75 76 181-76 181-180 75v-172l-214 214 214 214v-172z" />
+<glyph unicode="&#xe20c;" glyph-name="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe20d;" glyph-name="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
+</font></defs></svg>
\ No newline at end of file

src/assets/flexmonster/LICENSE.md

+## Flexmonster License
+
+This commercial software is distributed based on the [Flexmonster Terms and Conditions](https://www.flexmonster.com/terms/Flexmonster-Terms-and-Conditions.pdf "Flexmonster Terms and Conditions").
+
+By using this software without a commercial Flexmonster license, you consent to be bound by the [Flexmonster Trial License Terms and Conditions](https://www.flexmonster.com/terms/Flexmonster-Terms-and-Conditions-Trial-License.pdf "Flexmonster Trial License Terms and Conditions").
+
+To purchase a license refer to the [Flexmonster Pricing page](https://www.flexmonster.com/pivot-table-editions-and-pricing/ "Pricing page").
\ No newline at end of file

src/assets/flexmonster/README.md

+
+# What is JS Pivot Table by Flexmonster?
+
+Flexmonster Pivot Table & Charts is a component for interactive pivot reports that can be [inserted to a web page or a web application](https://www.flexmonster.com/demos/pivot-table-js/?r=npm). It’s a powerful JavaScript tool to visualize your business data.
+
+Flexmonster Pivot is a cross-platform web component that seamlessly works on any browser (Chrome, Firefox, Internet Explorer, Safari or Opera) across Windows, macOS, Linux, iOS or Android. 
+
+Moreover, you have no limitation on server-side technology, no matter whether your website runs on .NET, Java, PHP, Ruby, etc.
+
+# Installation and usage
+Start by installing Flexmonster as a node module and save it as a dependency in your package.json:
+```
+npm i flexmonster
+```
+
+Then, include the `flexmonster.full.js` and `flexmonster.css` files (for example, in the .html):
+```html
+<link href="node_modules/flexmonster/flexmonster.css" rel="stylesheet"/>
+<script src="node_modules/flexmonster/flexmonster.full.js" type="text/javascript"></script>
+```
+
+Now, you can create an instance of Pivot Table:
+```html
+<div id="pivot-сontainer">The component will appear here</div>
+<script>
+	var pivot = new Flexmonster({
+		container: "#pivot-сontainer",
+		toolbar: true
+	});
+</script>
+```
+Refer to the [Quick Start](https://www.flexmonster.com/doc/how-to-create-js-pivottable/?r=npm) guide for more details.
+
+**Note:** to use Flexmonster in production you need a license key. If you don’t have a license key, please visit [www.flexmonster.com](https://www.flexmonster.com/pivot-table-editions-and-pricing/?r=npm) to obtain an appropriate license. Then, you can specify `licenseKey` in the configuration:
+```js
+var pivot = new Flexmonster({
+	licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
+	container: "#pivot-сontainer",
+	toolbar: true
+});
+```
+
+# Why use Flexmonster Pivot Table & Charts component?
+
+## Easy to integrate
+
+Flexmonster Pivot can be natively used with JavaScript or [TypeScript](https://www.flexmonster.com/doc/integration-with-typescript/?r=npm) and perfectly integrates with the following client-side frameworks: 
+
+- [AngularJS](https://www.flexmonster.com/doc/integration-with-angularjs/?r=npm)
+- [Angular](https://www.flexmonster.com/doc/integration-with-angular/?r=npm)
+- [React](https://www.flexmonster.com/doc/integration-with-react/?r=npm)
+- [Webpack](https://www.flexmonster.com/doc/integration-with-webpack/?r=npm)
+
+## Supports the most common data sources
+
+- [JSON](https://www.flexmonster.com/doc/json-data-source/?r=npm)
+- [SQL databases: MS SQL, MySQL, and others](https://www.flexmonster.com/doc/connect-to-relational-database/?r=npm)
+- [CSV](https://www.flexmonster.com/doc/csv-data-source/?r=npm)
+- [Elasticsearch](https://www.flexmonster.com/doc/connecting-to-elasticsearch/?r=npm)
+- [Microsoft Analysis Services OLAP cubes](https://www.flexmonster.com/doc/connecting-to-microsoft-analysis-services/?r=npm)
+- [Mondrian](https://www.flexmonster.com/doc/connecting-to-pentaho-mondrian/?r=npm)
+
+## High speed in visualizing your data 
+
+This solution allows you to work extremely fast with really [large data volumes](https://www.flexmonster.com/demos/?r=npm) (huge OLAP cubes, data sets from SQL DBs or files up to 140 MB).
+
+Maximum data size is limited only by your end-users’ browsers and the capacity of their devices. The table renders multiple millions of cells immediately. If the user’s browser can handle it, we’ll display it.
+
+Working with OLAP cubes, a browser component can communicate with the server via XMLA protocol or you can use [Flexmonster Accelerator for OLAP cubes](https://www.flexmonster.com/doc/getting-started-with-accelerator-ssas/?r=npm). It’s a special server-side proxy that helps you to increase data loading speed from server to customer’s browser tenfold.
+
+## Smart features to analyze and manage your data
+
+Our pivot component provides Excel-like features which give users the interface they have always been used to. The users can easily and quickly analyze data and produce a report using different options such as:
+
+- Filtering
+- Sorting
+- Grouping fields in rows and columns
+- Drill-down
+- Drill-through
+- Calculated fields
+- Number formatting
+- Aggregations
+- Conditional formatting
+
+You can find [all list of the set of tools](https://www.flexmonster.com/user-interface/?r=npm).
+
+# Customizable & flexible
+## Extensive API
+  
+Our component has convenient full-functional JavaScript API to embed the component into web applications. Being a developer, you can:
+- Define what features you want to enable/disable
+- Build your own scenarios around the component.
+
+[API Reference](https://www.flexmonster.com/api/?r=npm)
+
+## Localizing component
+  
+Flexmonster Pivot can be easily localized:
+First of all, if you use one of the offered languages below, you can download the already prepared JSON files :
+
+- [English](https://github.com/flexmonster/pivot-localizations/blob/master/en.json)
+- [Español](https://github.com/flexmonster/pivot-localizations/blob/master/es.json)
+- [Français](https://github.com/flexmonster/pivot-localizations/blob/master/fr.json)
+- [Português](https://github.com/flexmonster/pivot-localizations/blob/master/pr.json)
+- [Chinese](https://github.com/flexmonster/pivot-localizations/blob/master/ch.json)
+- [Українська](https://github.com/flexmonster/pivot-localizations/blob/master/ua.json)
+- [Italiano](https://github.com/flexmonster/pivot-localizations/blob/master/it.json)
+- [Hungarian](https://github.com/flexmonster/pivot-localizations/blob/master/hu.json)
+- [German](https://github.com/flexmonster/pivot-localizations/blob/master/de.json)
+- [Dutch](https://github.com/flexmonster/pivot-localizations/blob/master/nl.json)
+- [Turkish](https://github.com/flexmonster/pivot-localizations/blob/master/tr.json)
+- [Thai](https://github.com/flexmonster/pivot-localizations/blob/master/th.json)
+- [Indonesian](https://github.com/flexmonster/pivot-localizations/blob/master/id.json)
+
+[Set localization for Pivot Table](https://www.flexmonster.com/doc/localizing-component/?r=npm)
+
+## Compose report layout
+Select which dimensions & values to show.
+Users can easily change a report’s layout visually and examine the data from a different perspective. The power of Pivot report composing allows you to stop guessing all possible report scenarios your end-users might require. The user will be able to tune it to their own needs on the fly.
+
+## Save & load reports
+Users can create their own reports and save them to their local drive or the server and load previously saved reports with exactly the same layout, number formatting, filters, sorting and all the other settings.
+
+This allows users to work with a predefined set of reports or create & save their own reports. Once the user has composed a report to reveal the precise data views that they need, they may want to save it for the future or share it with others.
+
+
+## Export & print
+
+All table views (compact/classic/flat form) and charts view can be printed or exported.
+Users can export the reports into a variety of formats:
+
+- Microsoft Excel 7
+- PDF
+- Web page (HTML page)
+- CSV (comma separated text format)
+- Image (PNG)   
+
+You can control where to save the export data, the following methods are supported:
+
+- Save to local file
+- Save to server (to remote file-storage or database)
+
+# Resources
+- [Demos](https://www.flexmonster.com/demos/?r=npm)
+- [Documentation](https://www.flexmonster.com/doc/?r=npm)
+- [User interface](https://www.flexmonster.com/user-interface/?r=npm)
+- [Blog](https://www.flexmonster.com/blog/?r=npm)
+
+You can also get support from our Tech team by raising a ticket via [Flexmonster Help Center](http://www.flexmonster.com/help-center/?r=npm).
\ No newline at end of file

src/assets/flexmonster/lib/sha1.min.js

+/**
+ * A JavaScript implementation of the SHA family of hashes - defined in FIPS PUB 180-4, FIPS PUB 202,
+ * and SP 800-185 - as well as the corresponding HMAC implementation as defined in FIPS PUB 198-1.
+ *
+ * Copyright 2008-2020 Brian Turek, 1998-2009 Paul Johnston & Contributors
+ * Distributed under the BSD License
+ * See http://caligatio.github.com/jsSHA/ for more information
+ *
+ * Two ECMAScript polyfill functions carry the following license:
+ *
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED,
+ * INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+ * MERCHANTABLITY OR NON-INFRINGEMENT.
+ *
+ * See the Apache Version 2.0 License for specific language governing permissions and limitations under the License.
+ */
+!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?t["jsSHA"]=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).jsSHA=r()}(window,(function(){"use strict";var t=function(r,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])})(r,n)};var r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function n(t,r,n,i){var e,o,s,u=r||[0],f=(n=n||0)>>>3,h=-1===i?3:0;for(e=0;e<t.length;e+=1)o=(s=e+f)>>>2,u.length<=o&&u.push(0),u[o]|=t[e]<<8*(h+i*(s%4));return{value:u,binLen:8*t.length+n}}function i(t,i,e){switch(i){case"UTF8":case"UTF16BE":case"UTF16LE":break;default:throw new Error("encoding must be UTF8, UTF16BE, or UTF16LE")}switch(t){case"HEX":return function(t,r,n){return function(t,r,n,i){var e,o,s,u;if(0!=t.length%2)throw new Error("String of HEX type must be in byte increments");var f=r||[0],h=(n=n||0)>>>3,a=-1===i?3:0;for(e=0;e<t.length;e+=2){if(o=parseInt(t.substr(e,2),16),isNaN(o))throw new Error("String of HEX type contains invalid characters");for(s=(u=(e>>>1)+h)>>>2;f.length<=s;)f.push(0);f[s]|=o<<8*(a+i*(u%4))}return{value:f,binLen:4*t.length+n}}(t,r,n,e)};case"TEXT":return function(t,r,n){return function(t,r,n,i,e){var o,s,u,f,h,a,c,w,E=0,v=n||[0],A=(i=i||0)>>>3;if("UTF8"===r)for(c=-1===e?3:0,u=0;u<t.length;u+=1)for(s=[],128>(o=t.charCodeAt(u))?s.push(o):2048>o?(s.push(192|o>>>6),s.push(128|63&o)):55296>o||57344<=o?s.push(224|o>>>12,128|o>>>6&63,128|63&o):(u+=1,o=65536+((1023&o)<<10|1023&t.charCodeAt(u)),s.push(240|o>>>18,128|o>>>12&63,128|o>>>6&63,128|63&o)),f=0;f<s.length;f+=1){for(h=(a=E+A)>>>2;v.length<=h;)v.push(0);v[h]|=s[f]<<8*(c+e*(a%4)),E+=1}else for(c=-1===e?2:0,w="UTF16LE"===r&&1!==e||"UTF16LE"!==r&&1===e,u=0;u<t.length;u+=1){for(o=t.charCodeAt(u),!0===w&&(o=(f=255&o)<<8|o>>>8),h=(a=E+A)>>>2;v.length<=h;)v.push(0);v[h]|=o<<8*(c+e*(a%4)),E+=2}return{value:v,binLen:8*E+i}}(t,i,r,n,e)};case"B64":return function(t,n,i){return function(t,n,i,e){var o,s,u,f,h,a,c=0,w=n||[0],E=(i=i||0)>>>3,v=-1===e?3:0,A=t.indexOf("=");if(-1===t.search(/^[a-zA-Z0-9=+/]+$/))throw new Error("Invalid character in base-64 string");if(t=t.replace(/=/g,""),-1!==A&&A<t.length)throw new Error("Invalid '=' found in base-64 string");for(o=0;o<t.length;o+=4){for(f=t.substr(o,4),u=0,s=0;s<f.length;s+=1)u|=r.indexOf(f.charAt(s))<<18-6*s;for(s=0;s<f.length-1;s+=1){for(h=(a=c+E)>>>2;w.length<=h;)w.push(0);w[h]|=(u>>>16-8*s&255)<<8*(v+e*(a%4)),c+=1}}return{value:w,binLen:8*c+i}}(t,n,i,e)};case"BYTES":return function(t,r,n){return function(t,r,n,i){var e,o,s,u,f=r||[0],h=(n=n||0)>>>3,a=-1===i?3:0;for(o=0;o<t.length;o+=1)e=t.charCodeAt(o),s=(u=o+h)>>>2,f.length<=s&&f.push(0),f[s]|=e<<8*(a+i*(u%4));return{value:f,binLen:8*t.length+n}}(t,r,n,e)};case"ARRAYBUFFER":try{new ArrayBuffer(0)}catch(t){throw new Error("ARRAYBUFFER not supported by this environment")}return function(t,r,i){return function(t,r,i,e){return n(new Uint8Array(t),r,i,e)}(t,r,i,e)};case"UINT8ARRAY":try{new Uint8Array(0)}catch(t){throw new Error("UINT8ARRAY not supported by this environment")}return function(t,r,i){return n(t,r,i,e)};default:throw new Error("format must be HEX, TEXT, B64, BYTES, ARRAYBUFFER, or UINT8ARRAY")}}function e(t,n,i,e){switch(t){case"HEX":return function(t){return function(t,r,n,i){var e,o,s="",u=r/8,f=-1===n?3:0;for(e=0;e<u;e+=1)o=t[e>>>2]>>>8*(f+n*(e%4)),s+="0123456789abcdef".charAt(o>>>4&15)+"0123456789abcdef".charAt(15&o);return i.outputUpper?s.toUpperCase():s}(t,n,i,e)};case"B64":return function(t){return function(t,n,i,e){var o,s,u,f,h,a="",c=n/8,w=-1===i?3:0;for(o=0;o<c;o+=3)for(f=o+1<c?t[o+1>>>2]:0,h=o+2<c?t[o+2>>>2]:0,u=(t[o>>>2]>>>8*(w+i*(o%4))&255)<<16|(f>>>8*(w+i*((o+1)%4))&255)<<8|h>>>8*(w+i*((o+2)%4))&255,s=0;s<4;s+=1)a+=8*o+6*s<=n?r.charAt(u>>>6*(3-s)&63):e.b64Pad;return a}(t,n,i,e)};case"BYTES":return function(t){return function(t,r,n){var i,e,o="",s=r/8,u=-1===n?3:0;for(i=0;i<s;i+=1)e=t[i>>>2]>>>8*(u+n*(i%4))&255,o+=String.fromCharCode(e);return o}(t,n,i)};case"ARRAYBUFFER":try{new ArrayBuffer(0)}catch(t){throw new Error("ARRAYBUFFER not supported by this environment")}return function(t){return function(t,r,n){var i,e=r/8,o=new ArrayBuffer(e),s=new Uint8Array(o),u=-1===n?3:0;for(i=0;i<e;i+=1)s[i]=t[i>>>2]>>>8*(u+n*(i%4))&255;return o}(t,n,i)};case"UINT8ARRAY":try{new Uint8Array(0)}catch(t){throw new Error("UINT8ARRAY not supported by this environment")}return function(t){return function(t,r,n){var i,e=r/8,o=-1===n?3:0,s=new Uint8Array(e);for(i=0;i<e;i+=1)s[i]=t[i>>>2]>>>8*(o+n*(i%4))&255;return s}(t,n,i)};default:throw new Error("format must be HEX, B64, BYTES, ARRAYBUFFER, or UINT8ARRAY")}}function o(t){var r={outputUpper:!1,b64Pad:"=",outputLen:-1},n=t||{},i="Output length must be a multiple of 8";if(r.outputUpper=n.outputUpper||!1,n.b64Pad&&(r.b64Pad=n.b64Pad),n.outputLen){if(n.outputLen%8!=0)throw new Error(i);r.outputLen=n.outputLen}else if(n.shakeLen){if(n.shakeLen%8!=0)throw new Error(i);r.outputLen=n.shakeLen}if("boolean"!=typeof r.outputUpper)throw new Error("Invalid outputUpper formatting option");if("string"!=typeof r.b64Pad)throw new Error("Invalid b64Pad formatting option");return r}function s(t,r){return t<<r|t>>>32-r}function u(t,r,n){return t^r^n}function f(t,r,n){return t&r^t&n^r&n}function h(t,r){var n=(65535&t)+(65535&r);return(65535&(t>>>16)+(r>>>16)+(n>>>16))<<16|65535&n}function a(t,r,n,i,e){var o=(65535&t)+(65535&r)+(65535&n)+(65535&i)+(65535&e);return(65535&(t>>>16)+(r>>>16)+(n>>>16)+(i>>>16)+(e>>>16)+(o>>>16))<<16|65535&o}function c(t){return[1732584193,4023233417,2562383102,271733878,3285377520]}function w(t,r){var n,i,e,o,c,w,E,v,A=[];for(n=r[0],i=r[1],e=r[2],o=r[3],c=r[4],E=0;E<80;E+=1)A[E]=E<16?t[E]:s(A[E-3]^A[E-8]^A[E-14]^A[E-16],1),w=E<20?a(s(n,5),(v=i)&e^~v&o,c,1518500249,A[E]):E<40?a(s(n,5),u(i,e,o),c,1859775393,A[E]):E<60?a(s(n,5),f(i,e,o),c,2400959708,A[E]):a(s(n,5),u(i,e,o),c,3395469782,A[E]),c=o,o=e,e=s(i,30),i=n,n=w;return r[0]=h(n,r[0]),r[1]=h(i,r[1]),r[2]=h(e,r[2]),r[3]=h(o,r[3]),r[4]=h(c,r[4]),r}function E(t,r,n,i){for(var e,o=15+(r+65>>>9<<4),s=r+n;t.length<=o;)t.push(0);for(t[r>>>5]|=128<<24-r%32,t[o]=4294967295&s,t[o-1]=s/4294967296|0,e=0;e<t.length;e+=16)i=w(t.slice(e,e+16),i);return i}return function(r){function n(t,n,e){var o=this;if("SHA-1"!==t)throw new Error("Chosen SHA variant is not supported");var s=e||{};return(o=r.call(this,t,n,e)||this).t=!0,o.i=o.o,o.s=-1,o.u=i(o.h,o.v,o.s),o.A=w,o.p=function(t){return t.slice()},o.l=c,o.R=E,o.U=[1732584193,4023233417,2562383102,271733878,3285377520],o.T=512,o.m=160,o.F=!1,s.hmacKey&&o.B(function(t,r,n,e){var o=t+" must include a value and format";if(!r){if(!e)throw new Error(o);return e}if(void 0===r.value||!r.format)throw new Error(o);return i(r.format,r.encoding||"UTF8",n)(r.value)}("hmacKey",s.hmacKey,o.s)),o}return function(r,n){function i(){this.constructor=r}t(r,n),r.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}(n,r),n}(function(){function t(t,r,n){var i=n||{};if(this.h=r,this.v=i.encoding||"UTF8",this.numRounds=i.numRounds||1,isNaN(this.numRounds)||this.numRounds!==parseInt(this.numRounds,10)||1>this.numRounds)throw new Error("numRounds must a integer >= 1");this.g=t,this.Y=[],this.I=0,this.C=!1,this.H=0,this.L=!1,this.N=[],this.S=[]}return t.prototype.update=function(t){var r,n=0,i=this.T>>>5,e=this.u(t,this.Y,this.I),o=e.binLen,s=e.value,u=o>>>5;for(r=0;r<u;r+=i)n+this.T<=o&&(this.U=this.A(s.slice(r,r+i),this.U),n+=this.T);this.H+=n,this.Y=s.slice(n>>>5),this.I=o%this.T,this.C=!0},t.prototype.getHash=function(t,r){var n,i,s=this.m,u=o(r);if(this.F){if(-1===u.outputLen)throw new Error("Output length must be specified in options");s=u.outputLen}var f=e(t,s,this.s,u);if(this.L&&this.i)return f(this.i(u));for(i=this.R(this.Y.slice(),this.I,this.H,this.p(this.U),s),n=1;n<this.numRounds;n+=1)this.F&&s%32!=0&&(i[i.length-1]&=16777215>>>24-s%32),i=this.R(i,s,0,this.l(this.g),s);return f(i)},t.prototype.setHMACKey=function(t,r,n){if(!this.t)throw new Error("Variant does not support HMAC");if(this.C)throw new Error("Cannot set MAC key after calling update");var e=i(r,(n||{}).encoding||"UTF8",this.s);this.B(e(t))},t.prototype.B=function(t){var r,n=this.T>>>3,i=n/4-1;if(1!==this.numRounds)throw new Error("Cannot set numRounds with MAC");if(this.L)throw new Error("MAC key already set");for(n<t.binLen/8&&(t.value=this.R(t.value,t.binLen,0,this.l(this.g),this.m));t.value.length<=i;)t.value.push(0);for(r=0;r<=i;r+=1)this.N[r]=909522486^t.value[r],this.S[r]=1549556828^t.value[r];this.U=this.A(this.N,this.U),this.H=this.T,this.L=!0},t.prototype.getHMAC=function(t,r){var n=o(r);return e(t,this.m,this.s,n)(this.o())},t.prototype.o=function(){var t;if(!this.L)throw new Error("Cannot call getHMAC without first setting MAC key");var r=this.R(this.Y.slice(),this.I,this.H,this.p(this.U),this.m);return t=this.A(this.S,this.l(this.g)),t=this.R(r,this.m,this.T,t,this.m)},t}())}));