Initial 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

.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

Dockerfile

+FROM node:14 as build 
+COPY ./bhc_ui /code
+WORKDIR /code/
+RUN ls -l
+#RUN npm update
+RUN npm install 
+RUN npm install -g @angular/cli
+RUN ng build #--prod
+RUN ls -l bhc-metatagging-build-files 
+#Stage
+FROM nginx:1.17.1-alpine
+COPY --from=build /code/bhc-metatagging-build-files/ /usr/share/nginx/html

README.md

+# BHCMetatagging
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.1.
+
+## 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": {
+        "BHC_metatagging": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "bhc-metatagging-build-files",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss",
+                            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "./node_modules/font-awesome/css/font-awesome.min.css",
+                            "node_modules/toastr/build/toastr.min.css",
+                            "node_modules/font-awesome/css/font-awesome.css",
+                            "node_modules/angular2-toaster/toaster.css",
+                            "node_modules/@ng-select/ng-select/themes/default.theme.css",
+                            "node_modules/datatables.net-dt/css/jquery.dataTables.css",
+                            "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
+                        ],
+                        "scripts": [
+                            "node_modules/jquery/dist/jquery.js",
+                            "node_modules/bootstrap/dist/js/bootstrap.min.js",
+                            "node_modules/datatables.net/js/jquery.dataTables.js",
+                            "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
+                            "node_modules/datatables.net-buttons/js/buttons.colVis.js",
+                            "node_modules/datatables.net-buttons/js/buttons.flash.js",
+                            "node_modules/datatables.net-buttons/js/buttons.html5.js",
+                            "node_modules/datatables.net-buttons/js/buttons.print.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [],
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "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": "BHC_metatagging:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "BHC_metatagging:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    }
+                }
+            }
+        }
+    },
+    "cli": {
+        "analytics": false
+    }
+}
\ No newline at end of file

karma.conf.js

+// 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/bhc-metatagging'),
+      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.json

+{
+  "name": "bhc-metatagging",
+  "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": "^14.0.0",
+    "@angular/cdk": "^14.2.4",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/localize": "^14.2.7",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/router": "^14.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
+    "@ng-select/ng-select": "^9.0.2",
+    "@popperjs/core": "^2.11.6",
+    "@types/datatables.net": "^1.10.24",
+    "@types/toastr": "^2.1.40",
+    "angular-datatables": "^14.0.0",
+    "angular2-toaster": "^11.0.1",
+    "bootstrap": "^5.2.1",
+    "crypto-js": "^4.1.1",
+    "datatables.net": "^1.12.1",
+    "datatables.net-bs4": "^1.12.1",
+    "datatables.net-buttons": "^2.2.3",
+    "datatables.net-buttons-dt": "^2.2.3",
+    "datatables.net-dt": "^1.12.1",
+    "echarts": "^5.4.0",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.6.1",
+    "ng-pick-datetime": "^7.0.0",
+    "ngx-annotate-text": "^13.0.0",
+    "ngx-echarts": "^14.0.0",
+    "rxjs": "~7.5.0",
+    "toastr": "^2.1.4",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.1",
+    "@angular/cli": "~14.2.1",
+    "@angular/compiler-cli": "^14.0.0",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.3.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.7.2"
+  }
+}

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'p',
+    pathMatch: 'full'
+  },
+  {
+    path: 'p',
+    loadChildren: ()=> import('./pages/pages.module').then(module => module.PagesModule)
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

+<div class="app-container">
+    <app-toastr></app-toastr>
+    <app-loader></app-loader>
+    <div>
+        <div class="text-center main-header">
+            <h6 class="m-0">BHC Meta Tagging</h6>
+        </div>
+    </div>
+    <router-outlet></router-outlet>
+    <!-- <app-footer></app-footer> -->
+</div>
\ 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(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'BHC_metatagging'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('BHC_metatagging');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('BHC_metatagging app is running!');
+  });
+});

src/app/app.component.ts

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

src/app/app.module.ts

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { NgxAnnotateTextModule } from "ngx-annotate-text";
+import { CommonComponentsModule } from './common-components/common-components.module';
+import { ToasterModule, ToasterService } from 'angular2-toaster';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpLayerService } from './services/http-layer.service';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { HttpRequestInterceptor } from './services/http-interceptors';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    CommonComponentsModule,
+    NgxAnnotateTextModule,
+    ToasterModule,
+    HttpClientModule,   
+     BrowserModule,
+    BrowserAnimationsModule,
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+    HttpLayerService, ToasterService,
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/common-components/annotate-text/annotate-text.component.html

+<div class="annotate-container">
+    <ngx-annotate-text [(annotations)]="annotations" [removable]="true" [text]="inputData.text" annotationClass="my-annotation" #annotateText>
+    </ngx-annotate-text>
+</div>
+<div class="row mt-3">
+    <div class="col-12 ">
+        <h6>Tags:</h6>
+        <div class="tags-container pb-1">
+            <button *ngFor="let data of inputData.class_details" type="button" class="btn btn-primary m-1 " (click)="addAnnotation(data)">
+                {{data}}
+            </button>
+        </div>
+    </div>
+    <div class="col-md-12 mt-3">
+        <button class="btn btn-secondary" *ngIf="showAddTag" (click)="showNewTags()"><i class="fa fa-plus-circle"> Add Tag</i></button>
+        <div class="d-flex" *ngIf="!showAddTag">
+            <!-- <label for="" class="grey-label mt-2 me-2"> Select Tag:  </label> -->
+            <ng-select name="typeofElement" [items]="tagsList" class="pl-4 col-md-3 me-5" placeholder="Select Tag" [clearable]="false" dropdownPosition="top" [(ngModel)]="selectedTag" bindValue="value" bindLabel="label">
+            </ng-select>
+            <button class="btn btn-primary me-2" [disabled]="!selectedTag" (click)="addTag()">Add Tag</button>
+            <button class="btn btn-secondary" (click)="showAddTag = true; selectedTag = null">Cancel</button>
+        </div>
+
+    </div>
+</div>
+<div class="float-end mb-2">
+    <button type="button" class="btn btn-primary me-2" (click)="saveAnnotations()">Save</button>
+    <button type="button" class="btn btn-secondary" (click)="closePopupEmitter()">Close</button>
+</div>
\ No newline at end of file

src/app/common-components/annotate-text/annotate-text.component.scss

+.tags-container {
+    max-height: 8rem;
+    overflow-y: auto;
+    border-bottom: 1px solid #dee2e6 !important;
+}
+
+.annotate-container {
+    overflow-y: auto;
+    max-height: 16rem;
+    border-bottom: 1px solid #dee2e6 !important;
+    padding: 1rem;
+}
\ No newline at end of file

src/app/common-components/annotate-text/annotate-text.component.spec.ts

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

src/app/common-components/annotate-text/annotate-text.component.ts

+import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
+import { Annotation, NgxAnnotateTextComponent } from 'ngx-annotate-text';
+import { CommonServiceLayerService, RequestPayLoadFormat } from 'src/app/services/common-service-layer.service';
+import { SessionService } from 'src/app/services/session.service';
+import { ToastrService } from '../toastr/toastr.service';
+
+@Component({
+  selector: 'app-annotate-text',
+  templateUrl: './annotate-text.component.html',
+  styleUrls: ['./annotate-text.component.scss']
+})
+export class AnnotateTextComponent implements OnInit {
+  @ViewChild("annotateText") ngxAnnotateText?: NgxAnnotateTextComponent;
+  @Input() inputData;
+  @Output() closePopup = new EventEmitter();
+  @Output() saveData = new EventEmitter();
+  annotations: Annotation[] = [];
+  showAddTag = true;
+  tagsList;
+  selectedTag;
+  constructor(
+    private _toast: ToastrService,
+    private http: CommonServiceLayerService,
+    private session: SessionService
+  ) {
+
+  }
+
+  ngOnInit(): void {
+    this.inputData.annotation_details.forEach((e) => {
+      this.annotations = this.annotations.concat(
+        new Annotation(
+          e.startIndex,
+          e.endIndex,
+          e.tag,
+          "#499bbc"
+        )
+      );
+    });
+  }
+  /**
+   * Method to handle text selection and annotation addition.
+   */
+  addAnnotation(label: string): void {
+    if (!this.ngxAnnotateText) {
+      return;
+    }
+    const selection = this.ngxAnnotateText.getCurrentTextSelection();
+    if (!selection) {
+      return;
+    }
+
+    if (this.ngxAnnotateText.isOverlappingWithExistingAnnotations(selection)) {
+      alert("The selected text is already annotated.");
+      return;
+    }
+
+    this.annotations = this.annotations.concat(
+      new Annotation(selection.startIndex, selection.endIndex, label, '#499bbc')
+    );
+  }
+  /**
+   * Method to put annotations into JSON format and emit to parent.
+   */
+  saveAnnotations() {
+    try {
+      this.inputData.annotation_details = [];
+      this.annotations.forEach(element => {
+        this.inputData.annotation_details = this.inputData.annotation_details.concat({
+          "startIndex": element.startIndex,
+          "endIndex": element.endIndex,
+          "tag": element.label,
+          "keyword": this.inputData.text.substring(element.startIndex, element.endIndex)
+        })
+      });
+      this.saveData.emit(this.inputData);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  /**
+   * Method to get new tags.
+   */
+  showNewTags() {
+    try {
+      const request: RequestPayLoadFormat = {
+        api: 'TAGS_LIST',
+        // method: 'post',
+        // type: 'API',
+        method: 'get',
+        type: 'JSON',
+        loader: true,
+        payLoad: {},
+        hideErrorMessage: false
+      };
+
+      this.tagsList = [];
+      this.http.API_REQUEST(request).subscribe((response) => {
+        if (response.status === 'SUCCESS' && response.data) {
+          this.tagsList = response.data;
+          this.showAddTag = false;
+        } else {
+          this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);
+        }
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  addTag() {
+    try {
+      let i = this.tagsList.findIndex((e) => e.value === this.selectedTag);
+      this.inputData.class_details.push(this.tagsList[i].label);
+      this.showAddTag = true;
+      this.selectedTag = null;
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  closePopupEmitter() {
+    try {
+      this.closePopup.emit(true);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+}

src/app/common-components/common-components.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SimpleTableWithPaginationModule } from './simple-table-with-pagination/simple-table-with-pagination.module';
+import { LoaderComponent } from './loader/loader.component';
+import { ToastrComponent } from './toastr/toastr.component';
+import { ToasterModule, ToasterService } from 'angular2-toaster';
+import { LoaderServiceService } from './loader/loader-service.service';
+import { TableServerSideModule } from './table-server-side/table-server-side.module';
+import { AnnotateTextComponent } from './annotate-text/annotate-text.component';
+import { NgxAnnotateTextModule } from 'ngx-annotate-text';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    LoaderComponent,
+    ToastrComponent,
+    AnnotateTextComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgSelectModule,
+    SimpleTableWithPaginationModule,
+    ToasterModule,
+    TableServerSideModule,
+    NgxAnnotateTextModule
+  ],
+  exports:[
+    SimpleTableWithPaginationModule,
+    ToastrComponent,
+    LoaderComponent,
+    TableServerSideModule,
+    AnnotateTextComponent
+  ],
+  providers: [ToasterService, LoaderServiceService],
+
+})
+export class CommonComponentsModule { }

src/app/common-components/loader/loader-service.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import { LoaderState } from './loader-state';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderServiceService {
+  private loaderSubject = new Subject<LoaderState>();
+  public loaderState = this.loaderSubject.asObservable();
+
+  constructor() { }
+
+  show() {
+    this.loaderSubject.next(<LoaderState>{ show: true });
+  }
+  hide() {
+    this.loaderSubject.next(<LoaderState>{ show: false });
+  }
+}

src/app/common-components/loader/loader-state.ts

+export interface LoaderState {
+    show: boolean;
+}
\ No newline at end of file

src/app/common-components/loader/loader.component.html

+<div [class.loader-hidden]="!show" id="loader-wrapper">
+    <div id="loader-spin"></div>
+    <!-- <div class="loader-container">
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+    </div> -->
+</div>
\ No newline at end of file

src/app/common-components/loader/loader.component.scss

+.loader-hidden {
+    visibility: hidden;
+}
+
+#loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2002;
+}
+
+#loader-spin {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #4C94AF;
+    -webkit-animation: spin 2s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: spin 2s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+#loader-spin:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #4C94AF;
+    -webkit-animation: spin 3s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: spin 3s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+#loader-spin:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #4C94AF;
+    -webkit-animation: spin 1.5s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: spin 1.5s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+}
+
+@keyframes scaling {
+    0%,
+    100% {
+        transform: scale(0.2);
+        background-color: #0099c9;
+    }
+    40% {
+        transform: scale(1);
+        background-color: #45afcf;
+    }
+    50% {
+        transform: scale(1);
+        background-color: #4C94AF;
+    }
+}
+
+.loader-container {
+    left: 45%;
+    top: 50%;
+    position: absolute;
+}
+
+.circle {
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: scaling 1.5s ease-in-out infinite;
+    display: inline-block;
+    margin: .3rem;
+}
+
+.circle:nth-child(0) {
+    animation-delay: 0s;
+}
+
+.circle:nth-child(1) {
+    animation-delay: 0.2s;
+}
+
+.circle:nth-child(2) {
+    animation-delay: 0.4s;
+}
+
+.circle:nth-child(3) {
+    animation-delay: 0.6s;
+}
+
+.circle:nth-child(4) {
+    animation-delay: 0.8s;
+}
+
+.circle:nth-child(5) {
+    animation-delay: 1s;
+}
\ No newline at end of file

src/app/common-components/loader/loader.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { LoaderServiceService } from './loader-service.service';
+import { LoaderState } from './loader-state';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+  public show = false;
+  private subscription: Subscription;
+
+  constructor(
+    private loaderService: LoaderServiceService
+  ) { }
+
+  ngOnInit() {
+    this.subscription = this.loaderService.loaderState
+      .subscribe((state: LoaderState) => {
+        this.show = state.show;
+      });
+  }
+  // tslint:disable-next-line:use-life-cycle-interface
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}

src/app/common-components/simple-table-with-pagination/filter-table.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+// tslint:disable:ter-prefer-arrow-callback no-parameter-reassignment align
+
+@Pipe({
+  name: 'filterTable',
+  pure: false,
+})
+export class FilterTablePipe implements PipeTransform {
+
+  transform(items: any, filter: any): any {
+    if (!filter) {
+      return items;
+    }
+    if (!Array.isArray(items)) {
+      return items;
+    }
+    if (filter && Array.isArray(items)) {
+      const filterKeys = Object.keys(filter);
+      if (!filterKeys.length) {
+        return items;
+      }
+      return items.filter((item) => {
+        return filterKeys.some((keyName) => {
+          return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] === '';
+        });
+      });
+
+    }
+  }
+}

src/app/common-components/simple-table-with-pagination/simple-table-with-pagination.component.html

+<div class="row">
+    <div class="col-12 custom-table-with-pagination">
+        <ng-container *ngIf="tableDataWithActions?.tableData?.headerContent.length > 0">
+            <!--header buttons -->
+            <div class="row">
+                <div class="col-md-12 mb-2">
+                    <div class="row filter-table-padding">
+                        <div class="col">
+                            <div class="d-flex filter-column pt-1 pb-2">
+                                <ng-container *ngIf="tableDataWithActions?.tableActions?.itemsPerPage?.top">
+                                    <span class="pt-2">Items Per Page</span>
+                                    <ng-select name="typeofElement" [items]="metaData['display_options']" class="ml-2 mr-2" placeholder="Select No of items to display" [clearable]="false" dropdownPosition="bottom" [(ngModel)]="metaData['no_of_items_to_display']" bindValue="value" bindLabel="label"
+                                        (ngModelChange)="onChangeInDisplay(metaData['no_of_items_to_display'])">
+                                    </ng-select>
+                                </ng-container>
+                                <ng-container *ngIf="tableDataWithActions?.tableActions?.columnFilter?.show">
+                                    <ng-select name="columnSelect" [items]="this.headerData" placeholder="Select Columns" [clearable]="false" dropdownPosition="bottom" [(ngModel)]="filteredColumns" bindLabel="label" [multiple]="true" (ngModelChange)="setHeaderData()" [closeOnSelect]="false">
+                                        <ng-template ng-header-tmp>
+                                            <div>
+                                                <button class="btn btn-link" (click)="onSelectAll()">Select All</button>
+                                                <button class="btn btn-link" (click)="onClearAll()">Clear All</button>
+                                            </div>
+                                        </ng-template>
+                                        <!-- <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
+                                            <div class="ng-value" *ngFor="let item of items | slice:0:2">
+                                                <span class="ng-value-label">{{item.label}}</span>
+                                                <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
+                                            </div>
+                                            <div class="ng-value" *ngIf="items.length > 2">
+                                                <span class="ng-value-label">{{items.length - 2}} more...</span>
+                                            </div>
+                                        </ng-template> -->
+                                    </ng-select>
+                                    &nbsp;&nbsp;<span class="fs-18"><i class="fa fa-info-circle info-clr"
+                                            aria-hidden="true" container="body"
+                                            [ngbTooltip]="'Filter Columns'"></i></span>
+                                </ng-container>
+                            </div>
+                        </div>
+                        <div class="show-mobile col-md-6 py-2">
+                            <div ngbDropdown display="dynamic" placement="bottom-right">
+                                <button class="action-btn ml-2" id="dropdownAction" ngbDropdownToggle>
+                                    <i class="fa fa-ellipsis-v"></i>
+                                </button>
+                                <div ngbDropdownMenu aria-labelledby="dropdownAction">
+                                    <ng-container *ngIf="tableDataWithActions?.tableActions?.externalActions.length > 0">
+                                        <button class="btn btn-basic" *ngFor="let btn of tableDataWithActions.tableActions.externalActions" (click)="emitAction(btn)" [ngClass]="btn.class" ngbDropdownItem>{{btn.label}}</button>
+                                    </ng-container>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col py-2 show-web">
+                            <ng-container *ngIf="tableDataWithActions?.tableActions?.externalActions.length > 0">
+                                <div *ngFor="let btn of tableDataWithActions.tableActions.externalActions" [attr.title]="btn.label" class="action-btn ml-2 btn" (click)="emitAction(btn)" [ngClass]="btn.class">
+                                    <i aria-hidden="true" [ngClass]="btn.icon"></i> {{btn.label}}
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- table -->
+            <div class="col-md-12 p-0">
+                <div class="dataTables_scroll">
+                    <div class="dataTables_scrollHead" [ngStyle]="{'overflow' : emptyTableNotify && scrollTableHeader ? 'auto' : 'hidden'}" #scrollHeader>
+                        <div class="dataTables_scrollHeadInner">
+                            <!-- table scroll head-->
+                            <table class="table dataTable table-hover table-stripped" role="grid" [ngClass]="{'table-with-actions': tableDataWithActions?.tableActions?.enableActions}">
+                                <thead class="th-header table-cell-width-header">
+                                    <tr role="row">
+                                        <th *ngIf="tableDataWithActions?.tableActions?.enableActions && 
+                      (tableDataWithActions?.tableActions?.actionPosition?.left || tableDataWithActions?.tableActions?.actionPosition?.fixedLeft) &&
+                      tableDataWithActions?.tableActions?.actions?.length" class="th-header" class="table-action-width" [style.width.px]="tableDataWithActions?.tableActions.width">
+                                        </th>
+                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                            <th class="table-coloum-serial-no-header th-header text-center">
+                                                <div [ngStyle]="{'height' : tableDataWithActions?.tableActions?.columnSearch?.enable ? '50px' : ''}">
+                                                    Sl. No.</div>
+                                            </th>
+                                        </ng-container>
+                                        <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']">
+                                            <th class="th-header table-cell-width-header" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                      tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']">
+                                                <span>{{eachHeader['label']}}</span>
+
+                                                <span class="sort" *ngIf="tableDataWithActions?.tableActions?.columnSort?.enable">
+                                                    <span (click)="sort(eachHeader.key)"
+                                                        [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSort?.sortExceptions ||
+                        (tableDataWithActions?.tableActions?.columnSort?.sortExceptions.indexOf(eachHeader.key)===-1))">
+                                                        <i class="fa" [ngClass]="{'fa-sort': column != eachHeader.key, 
+                        'fa-sort-asc': (column == eachHeader.key && !isDesc), 
+                        'fa-sort-desc': (column == eachHeader.key && isDesc) }" aria-hidden="true"> </i>
+                                                    </span>
+                                                </span>
+                                                <!-- <span (click)="$event.stopPropagation();" class="search" *ngIf="tableDataWithActions?.tableActions?.columnSearch?.enable">
+                                                    <ng-container>
+                                                        <input
+                                                            [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSearch?.searchExceptions ||
+                          (tableDataWithActions?.tableActions?.columnSearch?.searchExceptions.indexOf(eachHeader.key)===-1))"
+                                                            type="text" class="form-control" placeholder="Search"
+                                                            (focus)="$event.stopPropagation()"
+                                                            [(ngModel)]="columnSearchModel[eachHeader.key]"
+                                                            (ngModelChange)="searchColumn()" />
+                                                    </ng-container>
+                                                </span> -->
+                                            </th>
+                                        </ng-container>
+                                        <th *ngIf="tableDataWithActions?.tableActions?.enableActions  &&
+                      (tableDataWithActions?.tableActions?.actionPosition?.right || tableDataWithActions?.tableActions?.actionPosition?.fixedRight)  &&
+                       tableDataWithActions?.tableActions?.actions?.length" class="th-header" class="table-action-width table-cell-width-header" [ngClass]="tableDataWithActions?.tableActions?.actionPosition?.fixedRight ? 'right_fixed_header' : ''" [style.width.px]="tableDataWithActions?.tableActions.width">
+                                        </th>
+                                    </tr>
+                                    <tr role="row" class="searchRow" *ngIf="tableDataWithActions?.tableActions?.columnSearch?.enable">
+                                        <th *ngIf="tableDataWithActions?.tableActions?.enableActions && 
+                                        (tableDataWithActions?.tableActions?.actionPosition?.left || tableDataWithActions?.tableActions?.actionPosition?.fixedLeft) &&
+                                        tableDataWithActions?.tableActions?.actions?.length" class="th-header" class="table-action-width" [style.width.px]="tableDataWithActions?.tableActions.width">
+                                        </th>
+                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                            <th class="table-coloum-serial-no-header th-header text-center">
+                                                <div [ngStyle]="{'height' : tableDataWithActions?.tableActions?.columnSearch?.enable ? '50px' : ''}">
+                                                    Sl. No.</div>
+                                            </th>
+                                        </ng-container>
+                                        <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']">
+                                            <th class="th-header table-cell-width-header" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                  tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']">
+                                                <span (click)="$event.stopPropagation();" class="search" *ngIf="tableDataWithActions?.tableActions?.columnSearch?.enable">
+                                                    <ng-container>
+                                                        <input
+                                                            [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSearch?.searchExceptions ||
+                      (tableDataWithActions?.tableActions?.columnSearch?.searchExceptions.indexOf(eachHeader.key)===-1))"
+                                                            type="text" class="form-control" placeholder="Search"
+                                                            (focus)="$event.stopPropagation()"
+                                                            [(ngModel)]="columnSearchModel[eachHeader.key]"
+                                                            (ngModelChange)="searchColumn()" />
+                                                    </ng-container>
+                                                </span>
+                                            </th>
+                                        </ng-container>
+                                        <th *ngIf="tableDataWithActions?.tableActions?.enableActions  &&
+                  (tableDataWithActions?.tableActions?.actionPosition?.right || tableDataWithActions?.tableActions?.actionPosition?.fixedRight)  &&
+                   tableDataWithActions?.tableActions?.actions?.length" class="th-header" class="table-action-width table-cell-width-header" [ngClass]="tableDataWithActions?.tableActions?.actionPosition?.fixedRight ? 'right_fixed_header' : ''" [style.width.px]="tableDataWithActions?.tableActions.width">
+                                        </th>
+                                    </tr>
+                                </thead>
+                            </table>
+                        </div>
+                    </div>
+                    <div class="dataTables_scrollBody border-bottom" [ngStyle]="{'max-height':tableDataWithActions && tableDataWithActions?.tableActions?.stylings?.height ? tableDataWithActions?.tableActions?.stylings.height : 'calc(100vh - 300px)',
+                'overflow' : !emptyTableNotify || !scrollTableHeader ? 'auto' : 'hidden'}" (scroll)="scrollOnToRight($event)" #scrollBody>
+                        <!-- table scroll body with collapsed head-->
+                        <table class="table dataTable table-hover table-stripped bordered-table" [ngClass]="{'table-with-actions': tableDataWithActions['tableActions']['enableActions']}">
+                            <thead style="visibility: collapse !important" class="th-header table-cell-width-header">
+                                <tr role="row">
+                                    <th *ngIf="tableDataWithActions?.tableActions?.enableActions  &&
+                    (tableDataWithActions?.tableActions?.actionPosition?.left || tableDataWithActions?.tableActions?.actionPosition?.fixedLeft) &&
+                      tableDataWithActions?.tableActions?.actions?.length" class="th-header" class="table-action-width table-cell-width-header" [style.width.px]="tableDataWithActions?.tableActions.width">
+                                    </th>
+                                    <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                        <th class="table-coloum-serial-no-header th-header text-center">
+                                            <div [ngStyle]="{'height' : tableDataWithActions?.tableActions?.columnSearch?.enable ? '50px' : ''}">
+                                                Sl. No.</div>
+                                        </th>
+                                    </ng-container>
+                                    <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']">
+                                        <th [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                    tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']">
+                                            <span>{{eachHeader['label']}}</span>
+                                            <span class="sort" *ngIf="tableDataWithActions?.tableActions?.columnSort?.enable">
+                                                <span (click)="sort(eachHeader.key)" [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSort?.sortExceptions ||
+                      (tableDataWithActions?.tableActions?.columnSort?.sortExceptions.indexOf(eachHeader.key)===-1))">
+                                                    <i class="fa" [ngClass]="{'fa-sort': column != eachHeader.key, 
+                      'fa-sort-asc': (column == eachHeader.key && !isDesc), 
+                      'fa-sort-desc': (column == eachHeader.key && isDesc) }" aria-hidden="true"> </i>
+                                                </span>
+                                            </span>
+                                            <span (click)="$event.stopPropagation();" class="search" *ngIf="tableDataWithActions?.tableActions?.columnSearch?.enable">
+                                                <ng-container>
+                                                    <input
+                                                        [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSearch?.searchExceptions ||
+                        (tableDataWithActions?.tableActions?.columnSearch?.searchExceptions.indexOf(eachHeader.key)===-1))"
+                                                        type="text" class="form-control" placeholder="Search"
+                                                        (focus)="$event.stopPropagation()"
+                                                        [(ngModel)]="columnSearchModel[eachHeader.key]"
+                                                        (ngModelChange)="searchColumn()" />
+                                                </ng-container>
+                                            </span>
+                                        </th>
+                                    </ng-container>
+                                    <th *ngIf="tableDataWithActions['tableActions']['enableActions']  &&
+                    (tableDataWithActions?.tableActions?.actionPosition?.right || tableDataWithActions?.tableActions?.actionPosition?.fixedRight) &&
+                      tableDataWithActions['tableActions']['actions'].length" class="th-header" class="table-action-width table-cell-width-header" [style.width.px]="tableDataWithActions?.tableActions.width">
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <ng-container *ngIf="seggregatedTableContent[metaData['counter'] - 1]">
+                                    <ng-container *ngFor="let eachItem of seggregatedTableContent[metaData['counter'] - 1]; let rowIndex=index">
+                                        <tr [ngClass]="eachItem.classList">
+
+                                            <ng-container *ngIf="tableDataWithActions?.tableActions?.enableActions &&
+                        (tableDataWithActions?.tableActions?.actionPosition?.left || tableDataWithActions?.tableActions?.actionPosition?.fixedLeft) && 
+                         tableDataWithActions?.tableActions?.actions.length >0">
+
+                                                <td [style.width.px]="tableDataWithActions?.tableActions.width" class="table-action-width">
+                                                    <span>
+                                                        <ng-container
+                                                            *ngFor="let action of tableDataWithActions?.tableActions?.actions">
+                                                            <ng-container
+                                                                *ngIf="!eachItem[action.hiddenKey] else noIcon">
+                                                                <ng-container
+                                                                    *ngIf="action.basedOnRowChange else normalAction">
+                                                                    <ng-container
+                                                                        *ngIf="action.rowKey && eachItem[action.rowKey] else inactiveButtons">
+                                                                        <a href="javascript:void(0)"
+                                                                            class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}"
+                                                                            [ngClass]="action.class"
+                                                                            *ngIf="action.onlyIcon"
+                                                                            [ngbTooltip]="action.activeLabel"
+                                                                            container="body"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)">
+                                                                            <i aria-hidden="true" class="fa"
+                                                                                [ngClass]="action.activeIcon"></i></a>
+                                                                        <button *ngIf="!action.onlyIcon"
+                                                                            class="btn btn-sm"
+                                                                            [ngClass]="action.activeClass"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)"
+                                                                            [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                                                            {{action.activeLabel}} <i aria-hidden="true"
+                                                                                class="fa"
+                                                                                [ngClass]="action.activeIcon"></i>
+                                                                        </button>
+                                                                    </ng-container>
+                                                                    <ng-template #inactiveButtons>
+                                                                        <a href="javascript:void(0)"
+                                                                            class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}"
+                                                                            [ngClass]="action.class"
+                                                                            *ngIf="action.onlyIcon"
+                                                                            [ngbTooltip]="action.inactiveLabel"
+                                                                            container="body"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)">
+                                                                            <i aria-hidden="true" class="fa"
+                                                                                [ngClass]="action.inactiveIcon"></i></a>
+                                                                        <button *ngIf="!action.onlyIcon"
+                                                                            class="btn btn-sm"
+                                                                            [ngClass]="action.inactiveClass"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)"
+                                                                            [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                                                            {{action.inactiveLabel}} <i
+                                                                                aria-hidden="true" class="fa"
+                                                                                [ngClass]="action.inactiveIcon"></i>
+                                                                        </button>
+                                                                    </ng-template>
+                                                                </ng-container>
+                                                                <ng-template #normalAction>
+                                                                    <a href="javascript:void(0)"
+                                                                        class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}"
+                                                                        [ngClass]="action.class" *ngIf="action.onlyIcon"
+                                                                        [ngbTooltip]="action.label" container="body"
+                                                                        (click)="emitAction(action, eachItem,rowIndex)">
+                                                                        <i aria-hidden="true" class="fa"
+                                                                            [ngClass]="action.icon"></i></a>
+                                                                    <button *ngIf="!action.onlyIcon" class="btn btn-sm"
+                                                                        [ngClass]="action.class"
+                                                                        (click)="emitAction(action, eachItem,rowIndex)"
+                                                                        [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                                                        {{action.label}} <i aria-hidden="true"
+                                                                            class="fa" [ngClass]="action.icon"></i>
+                                                                    </button>
+                                                                </ng-template>
+                                                            </ng-container>
+                                                            <ng-template #noIcon>
+                                                                <span class="pc-4"></span>
+                                                    </ng-template>
+                                            </ng-container>
+                                            </span>
+                                            </td>
+                                    </ng-container>
+                                    <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                        <td class="table-coloum-serial-no-body text-center">
+                                            <span>
+                                                        {{(rowIndex + 1)+((metaData['counter'] -
+                                                        1)*metaData['no_of_items_to_display'])}}
+                                                    </span>
+                                        </td>
+                                    </ng-container>
+                                    <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']; let ind = index">
+
+                                        <td class="row-item" class="table-cell-width" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                          tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']"
+                                            [ngStyle]="{'background' : (tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.tdStyles?eachItem.color:''), 'color' : (tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.tdStyles ?eachItem.font:'')}">
+                                            <ng-container *ngIf="!['check-box'].includes(eachHeader['type'])">
+                                                <ng-container *ngIf="(tableDataWithActions.clickableColumns && tableDataWithActions.clickableColumns.list && tableDataWithActions.clickableColumns.list.indexOf(eachHeader.key) > -1) then clickableCell else plainText">
+                                                </ng-container>
+                                                <ng-template #clickableCell>
+                                                    <ng-container *ngIf="(tableDataWithActions.clickableColumns.iconList && tableDataWithActions.clickableColumns.iconList.indexOf(eachHeader.key) > -1) then clickableCellWithIcon else plainClickableCell">
+                                                    </ng-container>
+                                                    <ng-template #clickableCellWithIcon>
+                                                        <span>
+                                                         <i [ngClass]="eachItem['class']"></i>&nbsp;
+                                                            <span class="clickable-element" [ngClass]="tableDataWithActions?.clickableColumns?.class" (click)="emitAction({'type': 'cellClick'}, eachItem,rowIndex , eachHeader['key'],'cellKey')">
+                                                                {{eachItem[eachHeader['key']]}}</span>
+                                                        </span>
+                                                    </ng-template>
+                                                    <ng-template #plainClickableCell>
+                                                        <span class="clickable-element" [ngClass]="tableDataWithActions?.clickableColumns?.class" (click)="emitAction({'type': 'cellClick'}, eachItem,rowIndex , eachHeader['key'],'cellKey')">
+                                                            {{eachItem[eachHeader['key']]}}</span>
+                                                    </ng-template>
+
+
+                                                </ng-template>
+
+                                                <ng-template #plainText>
+
+                                                    <ng-container *ngIf="tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.innerHtml else normalText">
+                                                        <span class="plain-text" [innerHtml]="eachItem[eachHeader['key']]"></span>
+                                                    </ng-container>
+                                                    <ng-template #normalText>
+                                                        <ng-container *ngIf="tableDataWithActions.chartColumns && tableDataWithActions.chartColumns.list && tableDataWithActions.chartColumns.list.indexOf(eachHeader.key) > -1 then chartCell else textPlain">
+                                                        </ng-container>
+                                                        <ng-template #chartCell>
+                                                            <div echarts [options]="eachItem[eachHeader['key']]" class="chart"></div>
+                                                        </ng-template>
+                                                        <ng-template #textPlain>
+                                                            <span class="plain-text" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.spanStyles ? 'status-colored' : '' , tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.valueAsClass && eachItem && eachHeader['key'] && eachItem[eachHeader['key']] ? eachItem[eachHeader['key']] :'']">{{eachItem[eachHeader['key']]
+                                                                        }}</span>
+                                                        </ng-template>
+                                                    </ng-template>
+                                                </ng-template>
+                                            </ng-container>
+                                            <ng-container *ngIf="['check-box'].includes(eachHeader['type'])">
+                                                <input type="checkbox" name="check-box" class="check-mark" (change)="emitAction({'type': 'check-box-change'}, eachItem, rowIndex, $event)" [checked]="eachItem[eachHeader['key']]">
+                                            </ng-container>
+                                        </td>
+
+                                    </ng-container>
+                                    <ng-container *ngIf="tableDataWithActions?.tableActions?.enableActions &&
+                        (tableDataWithActions?.tableActions?.actionPosition?.right || tableDataWithActions?.tableActions?.actionPosition?.fixedRight) &&
+                          tableDataWithActions?.tableActions?.actions.length >0">
+
+                                        <td [style.width.px]="tableDataWithActions?.tableActions.width" [ngClass]="tableDataWithActions?.tableActions?.actionPosition?.fixedRight ? 'right_fixed_body' : ''" class="table-action-width">
+                                            <span>
+                                                        <ng-container
+                                                            *ngFor="let action of tableDataWithActions?.tableActions?.actions">
+                                                            <ng-container
+                                                                *ngIf="!eachItem[action.hiddenKey] else noIcon">
+                                                                <ng-container
+                                                                    *ngIf="action.basedOnRowChange else normalAction">
+                                                                    <ng-container
+                                                                        *ngIf="action.rowKey && eachItem[action.rowKey] else inactiveButtons">
+                                                                        <a href="javascript:void(0)"
+                                                                            class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}"
+                                                                            [ngClass]="action.class"
+                                                                            *ngIf="action.onlyIcon"
+                                                                            [ngbTooltip]="action.activeLabel"
+                                                                            container="body"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)">
+                                                                            <i aria-hidden="true" class="fa"
+                                                                                [ngClass]="action.activeIcon"></i></a>
+                                                                        <button *ngIf="!action.onlyIcon"
+                                                                            class="btn btn-sm"
+                                                                            [ngClass]="action.activeClass"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)"
+                                                                            [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                                                            {{action.activeLabel}} <i aria-hidden="true"
+                                                                                class="fa"
+                                                                                [ngClass]="action.activeIcon"></i>
+                                                                        </button>
+                                                                    </ng-container>
+                                                                    <ng-template #inactiveButtons>
+                                                                        <a href="javascript:void(0)"
+                                                                            class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}"
+                                                                            [ngClass]="action.class"
+                                                                            *ngIf="action.onlyIcon"
+                                                                            [ngbTooltip]="action.inactiveLabel"
+                                                                            container="body"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)">
+                                                                            <i aria-hidden="true" class="fa"
+                                                                                [ngClass]="action.inactiveIcon"></i></a>
+                                                                        <button *ngIf="!action.onlyIcon"
+                                                                            class="btn btn-sm"
+                                                                            [ngClass]="action.inactiveClass"
+                                                                            (click)="emitAction(action, eachItem,rowIndex)"
+                                                                            [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                                                            {{action.inactiveLabel}} <i
+                                                                                aria-hidden="true" class="fa"
+                                                                                [ngClass]="action.inactiveIcon"></i>
+                                                                        </button>
+                                                                    </ng-template>
+                                                                </ng-container>
+                                                                <ng-template #normalAction>
+                                                                    <a href="javascript:void(0)"
+                                                                        class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}"
+                                                                        [ngClass]="action.class" *ngIf="action.onlyIcon"
+                                                                        [ngbTooltip]="action.label" container="body"
+                                                                        (click)="emitAction(action, eachItem,rowIndex)">
+                                                                        <i aria-hidden="true" class="fa"
+                                                                            [ngClass]="action.icon" *ngIf="!action.svg"></i>
+                                                                            
+                                                                        <img  height="15"
+                                                                        src="./assets/images/svg/{{action.icon}}" *ngIf="action.svg">
+                                                                        </a>
+                                                                    <button *ngIf="!action.onlyIcon" class="btn btn-sm"
+                                                                        [ngClass]="action.class"
+                                                                        (click)="emitAction(action, eachItem,rowIndex)"
+                                                                        [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                                                        {{action.label}}
+                                                                        <i aria-hidden="true" class="fa"
+                                                                            [ngClass]="action.icon"></i>
+                                                                    </button>
+                                                                </ng-template>
+                                                            </ng-container>
+                                                            <ng-template #noIcon>
+                                                                <span class="pc-4"></span>
+                                            </ng-template>
+                                    </ng-container>
+                                    </span>
+                                    </td>
+                                </ng-container>
+                                </tr>
+        </ng-container>
+        </ng-container>
+        </tbody>
+        </table>
+        </div>
+        <!--- Table Left action button fixed-->
+        <ng-container *ngIf="tableDataWithActions?.tableActions?.enableActions  && tableDataWithActions?.tableActions?.actionPosition?.fixedLeft && tableDataWithActions?.tableActions?.actions?.length">
+            <div style="width:138px; overflow: hidden;" class="clone clone-left">
+                <div style="position:relative; overflow:hidden;" aria-hidden="true">
+                    <table class="table dataTable table-stripped table-bordered" [ngClass]="{'table-with-actions': tableDataWithActions['tableActions']['enableActions']}">
+                        <thead class="th-header table-cell-width-header">
+                            <tr role="row">
+                                <!-- <th [ngStyle]="{'height': tableDataWithActions?.tableActions?.columnSearch?.enable ? '50px': '20px'}" *ngIf="tableDataWithActions?.tableActions?.enableActions  && tableDataWithActions?.tableActions?.actionPosition?.fixedLeft && tableDataWithActions?.tableActions?.actions?.length"
+                                                class="th-header fixed-side table-action-width">
+                                            </th> -->
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <!-- <div style="position: relative; overflow: hidden;">
+                                <div style="width:148px;overflow-x:hidden;" class="scroll_LeftBody" [ngStyle]="{'max-height':tableDataWithActions && tableDataWithActions?.tableActions?.stylings?.height ? 
+                'calc('+tableDataWithActions?.tableActions?.stylings.height+' - calc( 8px ))' : 'calc(100vh - 300px - 8px)',
+           'overflow-y' : !emptyTableNotify || !scrollTableHeader ? 'auto' : 'hidden'}" (scroll)="scrollToBody($event)" #scrollLeftBody>
+                                    <table class="table dataTable table-stripped table-bordered" [ngClass]="{'table-with-actions': tableDataWithActions['tableActions']['enableActions']}">
+                                        <thead class="th-header table-cell-width-header" style="visibility: collapse!important;">
+                                            <tr role="row">
+                                                <th *ngIf="tableDataWithActions?.tableActions?.enableActions  && tableDataWithActions?.tableActions?.actionPosition?.fixedLeft && tableDataWithActions?.tableActions?.actions?.length" class="th-header table-action-width fixed-side">
+                                                </th>
+                                                <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                                    <th class="table-coloum-serial-no-header th-header text-center">
+                                                        <div [ngStyle]="{'height' : tableDataWithActions?.tableActions?.columnSearch?.enable ? '50px' : ''}">
+                                                            Sl. No.</div>
+                                                    </th>
+                                                </ng-container>
+                                                <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']">
+                                                    <th [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                  tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']">
+                                                        <span>{{eachHeader['label']}}</span>
+                                                        <span class="sort" *ngIf="tableDataWithActions?.tableActions?.columnSort?.enable">
+                              <span (click)="sort(eachHeader.key)" [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSort?.sortExceptions ||
+                    (tableDataWithActions?.tableActions?.columnSort?.sortExceptions.indexOf(eachHeader.key)===-1))">
+                                <i class="fa" [ngClass]="{'fa-sort': column != eachHeader.key, 
+                    'fa-sort-asc': (column == eachHeader.key && !isDesc), 
+                    'fa-sort-desc': (column == eachHeader.key && isDesc) }" aria-hidden="true"> </i>
+                              </span>
+                                                        </span>
+                                                        <span (click)="$event.stopPropagation();" class="search" *ngIf="tableDataWithActions?.tableActions?.columnSearch?.enable">
+                              <ng-container>
+                                <input
+                                  [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSearch?.searchExceptions ||
+                      (tableDataWithActions?.tableActions?.columnSearch?.searchExceptions.indexOf(eachHeader.key)===-1))"
+                                  type="text" class="form-control" placeholder="Search"
+                                  (focus)="$event.stopPropagation()" [(ngModel)]="columnSearchModel[eachHeader.key]"
+                                  (ngModelChange)="searchColumn()" />
+                              </ng-container>
+                            </span>
+                                                    </th>
+                                                </ng-container>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <ng-container *ngIf="seggregatedTableContent[metaData['counter'] - 1]">
+                                                <ng-container *ngFor="let eachItem of seggregatedTableContent[metaData['counter'] - 1]; let rowIndex=index">
+                                                    <tr [ngClass]="eachItem.classList">
+
+                                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.enableActions && tableDataWithActions?.tableActions?.actionPosition?.fixedLeft && tableDataWithActions?.tableActions?.actions.length >0">
+
+                                                            <td [style.width.px]="tableDataWithActions?.tableActions.width" class="table-action-width fixed-side">
+                                                                <ng-container *ngFor="let action of tableDataWithActions?.tableActions?.actions">
+                                                                    <ng-container *ngIf="!eachItem[action.hiddenKey] else noIcon">
+                                                                        <ng-container *ngIf="action.basedOnRowChange else normalAction">
+                                                                            <ng-container *ngIf="action.rowKey && eachItem[action.rowKey] else inactiveButtons">
+                                                                                <a href="javascript:void(0)" class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}" [ngClass]="action.class" *ngIf="action.onlyIcon" [ngbTooltip]="action.activeLabel" container="body" (click)="emitAction(action, eachItem,rowIndex)">
+                                                                                    <i aria-hidden="true" class="fa" [ngClass]="action.activeIcon"></i></a>
+                                                                                <button *ngIf="!action.onlyIcon" class="btn btn-sm" [ngClass]="action.activeClass" (click)="emitAction(action, eachItem,rowIndex)" [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                          {{action.activeLabel}} <i aria-hidden="true" class="fa"
+                                            [ngClass]="action.activeIcon"></i>
+                                        </button>
+                                                                            </ng-container>
+                                                                            <ng-template #inactiveButtons>
+                                                                                <a href="javascript:void(0)" class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}" [ngClass]="action.class" *ngIf="action.onlyIcon" [ngbTooltip]="action.inactiveLabel" container="body" (click)="emitAction(action, eachItem,rowIndex)">
+                                                                                    <i aria-hidden="true" class="fa" [ngClass]="action.inactiveIcon"></i></a>
+                                                                                <button *ngIf="!action.onlyIcon" class="btn btn-sm" [ngClass]="action.inactiveClass" (click)="emitAction(action, eachItem,rowIndex)" [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                          {{action.inactiveLabel}} <i aria-hidden="true" class="fa"
+                                            [ngClass]="action.inactiveIcon"></i>
+                                        </button>
+                                                                            </ng-template>
+                                                                        </ng-container>
+                                                                        <ng-template #normalAction>
+                                                                            <a href="javascript:void(0)" class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}" [ngClass]="action.class" *ngIf="action.onlyIcon" [ngbTooltip]="action.label" container="body" (click)="emitAction(action, eachItem,rowIndex)">
+                                                                                <i aria-hidden="true" class="fa" [ngClass]="action.icon"></i></a>
+                                                                            <button *ngIf="!action.onlyIcon" class="btn btn-sm" [ngClass]="action.class" (click)="emitAction(action, eachItem,rowIndex)" [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                        {{action.label}} <i aria-hidden="true" class="fa" [ngClass]="action.icon"></i>
+                                      </button>
+                                                                        </ng-template>
+                                                                    </ng-container>
+                                                                    <ng-template #noIcon>
+                                                                        <span class="pc-4"></span>
+                                                                    </ng-template>
+                                                                </ng-container>
+                                                            </td>
+                                                        </ng-container>
+                                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                                            <td class="table-coloum-serial-no-body text-center">
+                                                                <span>
+                                  {{(rowIndex + 1)+((metaData['counter'] - 1)*metaData['no_of_items_to_display'])}}
+                                </span>
+                                                            </td>
+                                                        </ng-container>
+                                                        <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']; let ind = index">
+
+                                                            <td class="row-item" class="table-cell-width" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                        tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']">
+                                                                <ng-container *ngIf="!['check-box'].includes(eachHeader['type'])">
+                                                                    <ng-container *ngIf="(tableDataWithActions.clickableColumns && tableDataWithActions.clickableColumns.list && tableDataWithActions.clickableColumns.list.indexOf(eachHeader.key) > -1) then clickableCell else plainText">
+                                                                    </ng-container>
+                                                                    <ng-template #clickableCell>
+                                                                        <span class="clickable-element" [ngClass]="tableDataWithActions?.clickableColumns?.class" (click)="emitAction({'type': 'cellClick'}, eachItem,rowIndex, eachHeader['key'],'cellKey')">
+                                      {{eachItem[eachHeader['key']]}}</span>
+                                                                    </ng-template>
+                                                                    <ng-template #plainText>
+
+                                                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.innerHtml else normalText">
+                                                                            <span class="plain-text" [innerHtml]="eachItem[eachHeader['key']]"></span>
+                                                                        </ng-container>
+                                                                        <ng-template #normalText>
+                                                                            <span class="plain-text" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.spanStyles ? 'status-colored' : '' , tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.valueAsClass && eachItem && eachHeader['key'] && eachItem[eachHeader['key']] ? eachItem[eachHeader['key']] :'']">{{eachItem[eachHeader['key']] }}</span>
+                                                                        </ng-template>
+                                                                    </ng-template>
+                                                                </ng-container>
+                                                                <ng-container *ngIf="['check-box'].includes(eachHeader['type'])">
+                                                                    <input type="checkbox" name="check-box" class="check-mark" (change)="emitAction({'type': 'check-box-change'}, eachItem, rowIndex, $event)" [checked]="eachItem[eachHeader['key']]">
+                                                                </ng-container>
+                                                            </td>
+
+
+
+                                                        </ng-container>
+                                                    </tr>
+                                                </ng-container>
+                                            </ng-container>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div> -->
+            </div>
+        </ng-container>
+        <!--- Table Right action button fixed -->
+        <ng-container *ngIf="tableDataWithActions?.tableActions?.enableActions  && tableDataWithActions?.tableActions?.actionPosition?.fixedRight && tableDataWithActions?.tableActions?.actions?.length">
+            <div style="width:138px; overflow: hidden;" class="clone clone-right">
+                <div style="position:relative; overflow:hidden;" aria-hidden="true">
+                    <table class="table dataTable table-stripped table-bordered" [ngClass]="{'table-with-actions': tableDataWithActions['tableActions']['enableActions']}">
+                        <thead class="th-header table-cell-width-header">
+                            <tr role="row">
+                                <!-- <th [ngStyle]="{'height': tableDataWithActions?.tableActions?.columnSearch?.enable ? '50px': '20px'}" *ngIf="tableDataWithActions?.tableActions?.enableActions  && tableDataWithActions?.tableActions?.actionPosition?.fixedRight && tableDataWithActions?.tableActions?.actions?.length"
+                                                class="th-header table-action-width  fixed-side">
+                                            </th> -->
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <!-- <div style="position: relative; overflow: hidden;">
+                                <div style="width:148px;overflow-x:hidden;" class="scroll_RightBody" [ngStyle]="{'max-height':tableDataWithActions && tableDataWithActions?.tableActions?.stylings?.height ? 
+                'calc('+tableDataWithActions?.tableActions?.stylings.height+' - calc( 8px ))' : 'calc(100vh - 300px - 8px)',
+           'overflow-y' : !emptyTableNotify || !scrollTableHeader ? 'auto' : 'hidden'}" (scroll)="scrollToBody($event)" #scrollLeftBody>
+                                    <table class="table dataTable table-stripped table-bordered" [ngClass]="{'table-with-actions': tableDataWithActions['tableActions']['enableActions']}">
+                                        <thead class="th-header table-cell-width-header" style="visibility: collapse!important;">
+                                            <tr role="row">
+                                                <th *ngIf="tableDataWithActions?.tableActions?.enableActions  && tableDataWithActions?.tableActions?.actionPosition?.fixedRight && tableDataWithActions?.tableActions?.actions?.length" class="th-header table-action-width  fixed-side">
+                                                </th>
+                                                <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                                    <th class="table-coloum-serial-no-header th-header text-center">
+                                                        <div [ngStyle]="{'height' : tableDataWithActions?.tableActions?.columnSearch?.enable ? '50px' : ''}">
+                                                            Sl. No.</div>
+                                                    </th>
+                                                </ng-container>
+                                                <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']">
+                                                    <th [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                  tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']">
+                                                        <span>{{eachHeader['label']}}</span>
+                                                        <span class="sort" *ngIf="tableDataWithActions?.tableActions?.columnSort?.enable">
+                              <span (click)="sort(eachHeader.key)" [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSort?.sortExceptions ||
+                    (tableDataWithActions?.tableActions?.columnSort?.sortExceptions.indexOf(eachHeader.key)===-1))">
+                                <i class="fa" [ngClass]="{'fa-sort': column != eachHeader.key, 
+                    'fa-sort-asc': (column == eachHeader.key && !isDesc), 
+                    'fa-sort-desc': (column == eachHeader.key && isDesc) }" aria-hidden="true"> </i>
+                              </span>
+                                                        </span>
+                                                        <span (click)="$event.stopPropagation();" class="search" *ngIf="tableDataWithActions?.tableActions?.columnSearch?.enable">
+                              <ng-container>
+                                <input
+                                  [class.invisible]="!(!tableDataWithActions?.tableActions?.columnSearch?.searchExceptions ||
+                      (tableDataWithActions?.tableActions?.columnSearch?.searchExceptions.indexOf(eachHeader.key)===-1))"
+                                  type="text" class="form-control" placeholder="Search"
+                                  (focus)="$event.stopPropagation()" [(ngModel)]="columnSearchModel[eachHeader.key]"
+                                  (ngModelChange)="searchColumn()" />
+                              </ng-container>
+                            </span>
+                                                    </th>
+                                                </ng-container>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <ng-container *ngIf="seggregatedTableContent[metaData['counter'] - 1]">
+                                                <ng-container *ngFor="let eachItem of seggregatedTableContent[metaData['counter'] - 1]; let rowIndex=index">
+                                                    <tr [ngClass]="eachItem.classList">
+
+                                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.enableActions && tableDataWithActions?.tableActions?.actionPosition?.fixedRight && tableDataWithActions?.tableActions?.actions.length >0">
+
+                                                            <td [style.width.px]="tableDataWithActions?.tableActions.width" class="table-action-width  fixed-side">
+                                                                <ng-container *ngFor="let action of tableDataWithActions?.tableActions?.actions">
+                                                                    <ng-container *ngIf="!eachItem[action.hiddenKey] else noIcon">
+                                                                        <ng-container *ngIf="action.basedOnRowChange else normalAction">
+                                                                            <ng-container *ngIf="action.rowKey && eachItem[action.rowKey] else inactiveButtons">
+                                                                                <a href="javascript:void(0)" class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}" [ngClass]="action.class" *ngIf="action.onlyIcon" [ngbTooltip]="action.activeLabel" container="body" (click)="emitAction(action, eachItem,rowIndex)">
+                                                                                    <i aria-hidden="true" class="fa" [ngClass]="action.activeIcon"></i></a>
+                                                                                <button *ngIf="!action.onlyIcon" class="btn btn-sm" [ngClass]="action.activeClass" (click)="emitAction(action, eachItem,rowIndex)" [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                          {{action.activeLabel}} <i aria-hidden="true" class="fa"
+                                            [ngClass]="action.activeIcon"></i>
+                                        </button>
+                                                                            </ng-container>
+                                                                            <ng-template #inactiveButtons>
+                                                                                <a href="javascript:void(0)" class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}" [ngClass]="action.class" *ngIf="action.onlyIcon" [ngbTooltip]="action.inactiveLabel" container="body" (click)="emitAction(action, eachItem,rowIndex)">
+                                                                                    <i aria-hidden="true" class="fa" [ngClass]="action.inactiveIcon"></i></a>
+                                                                                <button *ngIf="!action.onlyIcon" class="btn btn-sm" [ngClass]="action.inactiveClass" (click)="emitAction(action, eachItem,rowIndex)" [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                          {{action.inactiveLabel}} <i aria-hidden="true" class="fa"
+                                            [ngClass]="action.inactiveIcon"></i>
+                                        </button>
+                                                                            </ng-template>
+                                                                        </ng-container>
+                                                                        <ng-template #normalAction>
+                                                                            <a href="javascript:void(0)" class="label-action {{action.disabled || tableDataWithActions?.tableActions?.disabled? 'disabled': ''}}" [ngClass]="action.class" *ngIf="action.onlyIcon" [ngbTooltip]="action.label" container="body" (click)="emitAction(action, eachItem,rowIndex)">
+                                                                                <i aria-hidden="true" class="fa" [ngClass]="action.icon"></i></a>
+                                                                            <button *ngIf="!action.onlyIcon" class="btn btn-sm" [ngClass]="action.class" (click)="emitAction(action, eachItem,rowIndex)" [attr.disabled]="(action.disabled ||tableDataWithActions?.tableActions.disabled)? '': null">
+                                        {{action.label}} <i aria-hidden="true" class="fa" [ngClass]="action.icon"></i>
+                                      </button>
+                                                                        </ng-template>
+                                                                    </ng-container>
+                                                                    <ng-template #noIcon>
+                                                                        <span class="pc-4"></span>
+                                                                    </ng-template>
+                                                                </ng-container>
+                                                            </td>
+                                                        </ng-container>
+                                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.showSerialNumber">
+                                                            <td class="table-coloum-serial-no-body text-center">
+                                                                <span>
+                                  {{(rowIndex + 1)+((metaData['counter'] - 1)*metaData['no_of_items_to_display'])}}
+                                </span>
+                                                            </td>
+                                                        </ng-container>
+                                                        <ng-container *ngFor="let eachHeader of tableDataWithActions['tableData']['headerContent']; let ind = index">
+
+
+
+                                                            <td class="row-item" class="table-cell-width" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.alignCenter ? 'text-center' : '',
+                        tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass ? tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.customColumnClass : '']"
+                                                                [ngStyle]="{'background' : (tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.tdStyles?eachItem.color:''), 'color' : (tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.tdStyles ?eachItem.font:'')}">
+                                                                <ng-container *ngIf="!['check-box'].includes(eachHeader['type'])">
+                                                                    <ng-container *ngIf="(tableDataWithActions.clickableColumns && tableDataWithActions.clickableColumns.list && tableDataWithActions.clickableColumns.list.indexOf(eachHeader.key) > -1) then clickableCell else plainText">
+                                                                    </ng-container>
+                                                                    <ng-template #clickableCell>
+                                                                        <span class="clickable-element" [ngClass]="tableDataWithActions?.clickableColumns?.class" (click)="emitAction({'type': 'cellClick'}, eachItem,rowIndex, eachHeader['key'],'cellKey')">
+                                      {{eachItem[eachHeader['key']] }}</span>
+                                                                    </ng-template>
+                                                                    <ng-template #plainText>
+
+                                                                        <ng-container *ngIf="tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.innerHtml else normalText">
+                                                                            <span class="plain-text" [innerHtml]="eachItem[eachHeader['key']]"></span>
+                                                                        </ng-container>
+                                                                        <ng-template #normalText>
+                                                                            <span class="plain-text" [ngClass]="[tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.spanStyles ? 'status-colored' : '' , tableDataWithActions?.tableActions?.columnOptions && tableDataWithActions?.tableActions?.columnOptions[eachHeader.key]?.valueAsClass && eachItem && eachHeader['key'] && eachItem[eachHeader['key']] ? eachItem[eachHeader['key']] :'']">{{eachItem[eachHeader['key']] }}</span>
+                                                                        </ng-template>
+                                                                    </ng-template>
+                                                                </ng-container>
+                                                                <ng-container *ngIf="['check-box'].includes(eachHeader['type'])">
+                                                                    <input type="checkbox" name="check-box" class="check-mark" (change)="emitAction({'type': 'check-box-change'}, eachItem, rowIndex, $event)" [checked]="eachItem[eachHeader['key']]">
+                                                                </ng-container>
+                                                            </td>
+
+
+
+
+
+                                                        </ng-container>
+                                                    </tr>
+                                                </ng-container>
+                                            </ng-container>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div> -->
+            </div>
+        </ng-container>
+        </div>
+        <ng-container *ngIf="emptyTableNotify">
+            <div class="empty-state" *ngIf="emptyTableNotify">
+                <label class="records-available">No records to display</label><br>
+            </div>
+        </ng-container>
+        <div *ngIf="!emptyTableNotify" class="row m-0 pagination-footer">
+            <ng-container *ngIf="tableDataWithActions?.tableActions?.enableActions">
+                <div class="col-md-6 p-0">
+                    <div class="d-flex dropdown text-muted">
+                        <div class="d-flex justify-content-between pt-1 pl-2" *ngIf="!tableDataWithActions?.tableActions?.itemsPerPage?.top">
+                            <span class="pt-2">Items Per Page</span>
+                            <ng-select name="typeofElement" [items]="metaData['display_options']" class="pl-4" placeholder="Select No of items to display" [clearable]="false" dropdownPosition="top" [(ngModel)]="metaData['no_of_items_to_display']" bindValue="value" bindLabel="label"
+                                (ngModelChange)="onChangeInDisplay(metaData['no_of_items_to_display'])">
+                            </ng-select>
+                        </div>
+                        <div class="d-flex justify-content-between pt-1 pl-3">
+                            <span class="pt-2">
+                                        <ng-container *ngIf="filteredData.length >0 else zeroShow">
+                                            {{(metaData['counter'] - 1) * (metaData['no_of_items_to_display']) || 1 }}
+                                        </ng-container>
+                                        <ng-template #zeroShow>0 </ng-template>
+                                        - {{getTotalPages()}}
+                                        Items of {{filteredData.length}}
+                                    </span>&nbsp;
+                            <span *ngIf="filteredData.length < tableDataWithActions?.tableData?.bodyContent?.length" class="pt-2">
+                                        ( filtered from {{tableDataWithActions.tableData.bodyContent.length}} Total
+                                        Items )
+                                    </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 p-0">
+                    <ng-container *ngIf="filteredData.length">
+                        <div class="pagination-div">
+                            <ngb-pagination [collectionSize]="filteredData.length" [pageSize]="metaData.no_of_items_to_display" [(page)]="metaData.counter" [maxSize]="4" aria-label="Custom pagination">
+                            </ngb-pagination>
+                        </div>
+                    </ng-container>
+                </div>
+            </ng-container>
+        </div>
+        </div>
+        </ng-container>
+    </div>
+</div>
\ No newline at end of file

src/app/common-components/simple-table-with-pagination/simple-table-with-pagination.component.scss

+@import "../../../styles-variables.scss";
+.table th {
+    // font-family: "Roboto-Semibold" !important;
+    font-family: $fontFamilyMedium !important;
+    font-size: inherit !important;
+    padding: 10px 10px !important;
+    font-weight: unset !important;
+}
+
+.table td {
+    // font-family: "roboto-regular" !important;
+    // font-size: 0.83rem !important;
+    padding: 5px 6px !important;
+    border-bottom: 1px solid #dee2e6 !important;
+}
+
+.table-footer td {
+    padding: 0px !important;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.btn-item {
+    padding: 0.375rem !important;
+}
+
+.ng-select-container {
+    border: none !important;
+}
+
+.btn.disabled,
+.btn:disabled {
+    cursor: not-allowed;
+}
+
+.th-class {
+    min-width: 250px;
+}
+
+.import {
+    background-color: black !important;
+    border: 1px solid black !important;
+}
+
+.search-icon {
+    margin-top: 14px !important;
+    margin-left: 10px !important;
+    color: rgb(116, 114, 114);
+    font-size: 11px !important;
+}
+
+.count {
+    color: white;
+    background-color: $text-color-base;
+    border-radius: 100px;
+    font-size: 11px;
+}
+
+.filter-item {
+    padding-left: 30px !important;
+    position: absolute;
+}
+
+.row-item {
+    padding: 9px 11px !important;
+}
+
+.last-row {
+    padding: 0px !important;
+}
+
+.action-icons {
+    font-size: 11px !important;
+    padding-top: 4px;
+}
+
+.download-icon {
+    position: absolute;
+    right: 28px;
+    color: black;
+    font-size: 18px !important;
+    padding-top: 0;
+    top: 13px;
+    cursor: pointer;
+}
+
+.indication-class {
+    color: #0f62fe !important;
+}
+
+.table tbody td {
+    font-size: inherit;
+    background: $color-white;
+    padding: 10px 10px !important;
+    // font-family: "roboto-medium";
+}
+
+.form-control {
+    border: none !important;
+}
+
+.ng-select .ng-select-container {
+    border-bottom: none !important;
+}
+
+.logo-img {
+    width: 2rem;
+    height: 2rem;
+}
+
+.view-icons_container {
+    position: absolute;
+    right: 0px;
+    color: black;
+    font-size: 18px !important;
+    padding-top: 0;
+    top: 8px;
+    em {
+        cursor: pointer;
+    }
+}
+
+.activity {
+    .start-container {
+        padding: 5px 10px;
+        background: #269e26;
+        color: white;
+        border-radius: 5px 5px 5px 5px;
+        margin: 0 6px;
+    }
+    .end-container {
+        padding: 5px 10px;
+        background: #717771;
+        color: white;
+        border-radius: 5px 5px 5px 5px;
+        margin: 0 6px;
+    }
+    em {
+        margin: 0 6px;
+        color: #c1b9b9;
+    }
+}
+
+.table {
+    margin-bottom: 0px !important;
+    color: $text-color-base !important;
+}
+
+.table-action-width {
+    // min-width: 205px !important;
+    width: 240px !important;
+}
+
+.custom-action-width {
+    min-width: 70px !important;
+}
+
+.sort {
+    float: right;
+    padding-right: 10px;
+}
+
+.sort .fa-sort {
+    color: #b8b8b8;
+    cursor: pointer;
+}
+
+.sort .fa-sort-desc,
+.sort .fa-sort-asc {
+    color: #2865dc;
+    cursor: pointer;
+}
+
+.label-action {
+    background: transparent;
+    border: none;
+    color: black;
+    padding: 0px 10px;
+}
+
+.check-mark {
+    height: 20px;
+    width: 20px;
+    background-color: $node-content-wrapper-focusedBgClr;
+}
+
+span.clickable-element {
+    color: $clickable-element-clr;
+    cursor: pointer;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.clickable-element {
+    color: $clickable-element-clr;
+    cursor: pointer;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.action-btn {
+    padding: 7px;
+    cursor: pointer;
+    background-color: $clickable-element-clr;
+    border: 2px solid $clickable-element-clr;
+    color: white;
+    float: right;
+}
+
+table {
+    width: 100% !important;
+    margin-bottom: 8px;
+    // border: 0px !important;
+    thead {
+        tr {
+            background: $table-header-bg-clr;
+            border: 0.8px solid $nav-itemBorderClr !important;
+            .table-coloum-serial-no-header {
+                min-width: 44px !important;
+                width: 44px !important;
+            }
+            th {
+                &:focus {
+                    outline: none;
+                }
+                input {
+                    background: transparent;
+                    border: 0px;
+                    border-bottom: 1px solid gray;
+                    border-radius: 0px;
+                    box-shadow: none;
+                    padding-left: 0px;
+                    padding-right: 0px;
+                    color: $text-color-base !important;
+                }
+                .search {
+                    position: relative;
+                    .form-control {
+                        // border-bottom: 1px solid gray !important;
+                    }
+                    i {
+                        position: absolute;
+                        top: 25%;
+                        opacity: 0.3;
+                        left: 85%;
+                        pointer-events: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.dataTables_scrollBody {
+    position: relative;
+    overflow: auto;
+    width: 100%;
+    background: #f7f5f3;
+}
+
+.dataTables_scrollHead {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    overflow-y: auto !important;
+    border: 1px solid $container-borderClr;
+}
+
+.table-cell-width-header {
+    min-width: 130px;
+    // max-width: 160px;
+}
+
+.table-cell-width {
+    min-width: 130px;
+    max-width: 130px;
+    word-break: break-word;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 20px 130px;
+    display: block;
+}
+
+.table-cell-action {
+    cursor: default;
+}
+
+.pagination-footer {
+    background-color: $color-white;
+    // display: none;
+}
+
+.pagination-div {
+    padding-top: 7px;
+    float: right;
+    padding-right: 7px;
+}
+
+.show-mobile {
+    display: none;
+}
+
+.show-web {
+    display: block;
+}
+
+table.dataTable thead th,
+table.dataTable thead td {
+    padding: 10px 18px;
+    border-bottom: 0;
+    border-bottom-width: 0px !important;
+}
+
+.table-hover tbody tr:hover {
+    background-color: transparent !important;
+}
+
+.table-bordered th,
+.table-bordered td {
+    border: 0px !important;
+    border-bottom: 1px solid $container-borderClr !important;
+}
+
+@media only screen and (max-width: 768px) {
+    .show-mobile {
+        display: block;
+    }
+    .show-web {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 768px) and (max-height: 768px) {
+    .dataTables_scrollBody {
+        max-height: 100% !important;
+    }
+    .clone .scroll_LeftBody,
+    .clone .scroll_RightBody {
+        max-height: 100% !important;
+    }
+    .clone-right,
+    .clone-left {
+        display: none;
+    }
+}
+
+.fs-18 {
+    font-size: 18px;
+    cursor: pointer;
+}
+
+span.pc-4 {
+    padding: 0px 21px;
+}
+
+.dataTables_scrollBody.clone {
+    width: 128px;
+}
+
+.clone {
+    position: absolute;
+    top: 0;
+    pointer-events: all;
+}
+
+.clone-left {
+    left: 0;
+}
+
+.clone-right {
+    right: 8px;
+}
+
+.clone th,
+.clone td {
+    visibility: hidden !important;
+    border: none;
+}
+
+.clone tbody th {
+    visibility: visible !important;
+}
+
+.clone .fixed-side {
+    background: $color-white;
+    visibility: visible !important;
+}
+
+.filter-column {
+    padding: 1rem 0rem;
+}
+
+.center-aligned {
+    text-align: center;
+}
+
+.filter-table-padding {
+    margin-bottom: -10px;
+}
+
+.status-colored {
+    padding: 4px 10px;
+    color: $color-white;
+    border-radius: 24px;
+}
+
+.Active {
+    background-color: #02bd02;
+}
+
+.Completed {
+    background-color: #212529;
+}
+
+.Cancelled {
+    background-color: #ff0000;
+}
+
+.availablePercentage {
+    text-align: center;
+    width: 80%;
+    padding: 5px;
+}
+
+.chart {
+    height: 60px;
+    width: 270px;
+}
+
+.searchRow {
+    background: white !important;
+    th {
+        padding: 3px 10px !important;
+    }
+}
+
+::placeholder {
+    color: $placeholder-clr !important;
+    font-family: $fontFamilyBase;
+}
+
+.fa-folder {
+    color: #e9e935;
+}
+
+.dataTables_scrollBody table tbody tr {
+    td:first-child {
+        border-left: 1px solid $container-borderClr;
+    }
+    td:last-child {
+        border-right: 1px solid $container-borderClr;
+    }
+    // &:last-child td {
+    //     border-bottom: 1px solid $container-borderClr;
+    // }
+}
+
+.border-bottom {
+    border-bottom: 1px solid $container-borderClr;
+}
+
+.right_fixed_header {
+    position: sticky;
+    z-index: 2;
+    // width: 150px !important;
+    // min-width: 150px !important;
+    // max-width: 150px !important;
+    background-color: #E5EAEF;
+    right: 0;
+    // border-left: 1px solid #dee2e6;
+}
+
+.right_fixed_body {
+    position: sticky;
+    z-index: 2;
+    // width: 150px !important;
+    // min-width: 150px !important;
+    // max-width: 150px !important;
+    background-color: white;
+    right: 0;
+    // border-left: 1px solid #dee2e6;
+    text-align: center !important;
+}
\ No newline at end of file

src/app/common-components/simple-table-with-pagination/simple-table-with-pagination.component.ts

+import {
+  Component, OnInit, Input, Output, EventEmitter, OnChanges, ElementRef, ViewChild, OnDestroy, SimpleChanges
+} from '@angular/core';
+import { Observable } from 'rxjs';
+
+// tslint:disable: trailing-comma max-line-length component-selector no-increment-decrement
+
+@Component({
+  selector: 'app-simple-table-with-pagination',
+  templateUrl: './simple-table-with-pagination.component.html',
+  styleUrls: ['./simple-table-with-pagination.component.scss']
+})
+export class SimpleTableWithPaginationComponent implements OnInit, OnChanges, OnDestroy {
+
+  @Input() tableDataWithActions;
+  @Input() tableReloadEvent: Observable<boolean>;
+  @Output() actionEmitter = new EventEmitter();
+  @ViewChild('scrollHeader') scrollHeader: ElementRef;
+  @ViewChild('scrollBody') scrollBody: ElementRef;
+  @ViewChild('scrollLeftBody') scrollLeftBody: ElementRef;
+
+
+  progressColor = 'green';
+  remainingProgressColor = 'white';
+  public columnSearchModel: any = {};
+  public metaData = {
+    searchText: null,
+    counter: 1,
+    no_of_steps: 1,
+    no_of_items_to_display: 10,
+    display_options: [
+      {
+        label: '5',
+        value: 5,
+      },
+      {
+        label: '10',
+        value: 10,
+      },
+      {
+        label: '25',
+        value: 25,
+      },
+      {
+        label: '50',
+        value: 50,
+      },
+    ],
+  };
+  public downloadObj = {};
+  public seggregatedTableContent: any = [];
+  public filterObject: any = {};
+  public filteredData = [];
+  public emptyTableNotify = true;
+  public scrollTableHeader = true;
+  public isDesc: any;
+  public column: any;
+  public headerData: any = [];
+  public filteredColumns: any = [];
+  public ignoreScrollEventsBody = false;
+  public ignoreScrollEventsLeft = false;
+  public tableReloadSubscription: any;
+  public tableSettings: any = {
+    actions: [],
+    enableActions: true,
+    externalActions: [],
+    columnSearch: {
+      enable: false,
+      searchExceptions: [],
+    },
+    columnSort: {
+      enable: false,
+      sortExceptions: [],
+    },
+    showSerialNumber: true,
+    stylings: {
+      height: 'calc(100vh - 300px)',
+    },
+    columnOptions: {},
+    itemsPerPage: {
+      top: false,
+    },
+    actionPosition: {
+      fixedRight: true,
+    },
+    paginationOptions: {
+      show: false,
+      noOfItemsToDisplay: 10,
+      displayOptions: []
+    },
+    columnFilter: {
+      show: true,
+      minimumColumns: 1,
+      defaultColumnsToDisplay: [],
+    },
+  };
+  // tslint:disable: deprecation
+  // tslint:disable:typedef
+  scrollOnToRight(event) {
+    try {
+      const ignore = this.ignoreScrollEventsLeft;
+      this.ignoreScrollEventsLeft = false;
+
+      if (ignore) {
+        return;
+      }
+      const scrollHeader = this.scrollHeader.nativeElement as HTMLElement;
+      const scrollBody = this.scrollBody.nativeElement as HTMLElement;
+      scrollHeader.scrollLeft = scrollBody.scrollLeft;
+      if (this.scrollLeftBody) {
+        const scrollLeftBody = this.scrollLeftBody.nativeElement as HTMLElement;
+        scrollLeftBody.scrollTop = scrollBody.scrollTop;
+        this.ignoreScrollEventsBody = true;
+      }
+      event.stopPropagation();
+      return;
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+  }
+  // tslint:disable-next-line: deprecation
+  scrollToBody(event) {
+    try {
+      const ignore = this.ignoreScrollEventsBody;
+      this.ignoreScrollEventsBody = false;
+
+      if (ignore) {
+        return;
+      }
+      const scrollLeftBody = this.scrollLeftBody.nativeElement as HTMLElement;
+      const scrollBody = this.scrollBody.nativeElement as HTMLElement;
+      scrollBody.scrollTop = scrollLeftBody.scrollTop;
+      this.ignoreScrollEventsLeft = true;
+      event.stopPropagation();
+      return;
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+  }
+  constructor() { }
+
+  ngOnInit() {
+    if (this.tableDataWithActions.tableData && this.tableDataWithActions.tableData.headerContent && this.tableDataWithActions.tableData.headerContent.length > 0) {
+      this.headerData = JSON.parse(JSON.stringify(this.tableDataWithActions.tableData.headerContent));
+    }
+    this.setDefaultOptions();
+    this.setFilterData();
+    this.metaData.counter = 1;
+    this.seggregateTableData();
+    this.observeTableReload();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.tableDataWithActions) {
+      // this.setDefaultOptions();
+      this.setFilterData();
+      if (this.tableDataWithActions.tableActions &&
+        this.tableDataWithActions.tableActions.columnOptions &&
+        this.tableDataWithActions.tableActions.columnOptions.show) {
+        this.setHeaderData(true, true);
+      }
+      this.searchColumn(true);
+    }
+  }
+  /**
+   * method to configure default table settings
+   */
+  setDefaultOptions() {
+    try {
+      if (this.tableDataWithActions && this.tableDataWithActions.tableActions) {
+        this.tableDataWithActions.tableActions = { ...this.tableSettings, ...this.tableDataWithActions.tableActions };
+      }
+      if (this.tableDataWithActions && this.tableDataWithActions.tableActions && this.tableDataWithActions.tableActions.paginationOptions &&
+        this.tableDataWithActions.tableActions.paginationOptions.show === true) {
+        if (this.tableDataWithActions.tableActions.paginationOptions.displayOptions.length > 0) {
+          this.metaData.display_options = this.tableDataWithActions.tableActions.paginationOptions.displayOptions;
+        }
+        if (this.tableDataWithActions.tableActions.paginationOptions.noOfItemsToDisplay) {
+          const index = this.metaData.display_options.findIndex(ele => ele.value === this.tableDataWithActions.tableActions.paginationOptions.noOfItemsToDisplay);
+          if (index > -1) {
+            this.metaData.no_of_items_to_display = this.tableDataWithActions.tableActions.paginationOptions.noOfItemsToDisplay;
+          }
+        }
+      }
+      if (this.tableDataWithActions.tableActions.columnFilter.show) {
+        if (this.headerData.length > 0) {
+          if (this.tableDataWithActions.tableActions.columnFilter.defaultColumnsToDisplay.length > 0) {
+            this.filteredColumns = this.tableDataWithActions.tableActions.columnFilter.defaultColumnsToDisplay;
+          } else {
+            this.filteredColumns = JSON.parse(JSON.stringify(this.headerData));
+          }
+        }
+        if (this.tableDataWithActions.tableActions.columnFilter.show && this.tableDataWithActions.tableActions.columnFilter.minimumColumns && this.tableDataWithActions.tableActions.columnFilter.minimumColumns > 0) {
+          if (this.tableDataWithActions.tableActions.columnFilter.minimumColumns > this.filteredColumns.length) {
+            this.tableDataWithActions.tableActions.columnFilter.minimumColumns = 1;
+          }
+        }
+      }
+      if (this.tableDataWithActions.tableActions.columnFilter.show) {
+        this.setHeaderData();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  onChangeInDisplay(value) {
+    try {
+      this.seggregateTableData();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  seggregateTableData() {
+    try {
+      this.seggregatedTableContent = [];
+      if (!this.tableDataWithActions || !this.tableDataWithActions.tableData || !this.tableDataWithActions.tableData.bodyContent) {
+        return;
+      }
+      const bodyContentLength = this.tableDataWithActions.tableData.bodyContent.length;
+      if (bodyContentLength) {
+        this.emptyTableNotify = false;
+        this.scrollTableHeader = false;
+        this.metaData.no_of_steps = Math.ceil(bodyContentLength / this.metaData.no_of_items_to_display);
+        for (let eachStep = 1; eachStep <= this.metaData.no_of_steps; eachStep++) {
+          const eachStepArray = [];
+          const fromIndex = (eachStep - 1) * this.metaData.no_of_items_to_display;
+          const toIndex = eachStep * this.metaData.no_of_items_to_display - 1;
+          this.filteredData.forEach((eachItem, index) => {
+            if (index >= fromIndex && index <= toIndex) {
+              eachStepArray.push(eachItem);
+            }
+          });
+          this.seggregatedTableContent.push(eachStepArray);
+        }
+        this.seggregatedTableContent = this.seggregatedTableContent.filter((eachStep) => {
+          if (eachStep.length) {
+            eachStep = eachStep.filter((subStep) => {
+              return (subStep !== null && subStep !== '' && subStep !== undefined);
+            });
+          }
+          return (eachStep !== null && eachStep !== '' && eachStep !== undefined);
+        });
+      } else {
+        this.emptyTableNotify = true;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  emitAction(actionType, data?: any, rowIndex?: any, value?: any, valueKey?: any) {
+    try {
+      const dataToEMit: any = {
+        action: actionType,
+      };
+      if (data) {
+        dataToEMit.data = data;
+      }
+      if (rowIndex !== undefined) {
+        dataToEMit.rowIndex = rowIndex;
+      }
+      if (value !== undefined) {
+        if (valueKey) {
+          dataToEMit[valueKey] = value;
+        } else {
+          dataToEMit.value = value;
+        }
+      }
+      this.actionEmitter.emit(dataToEMit);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  get searchTerm(): string {
+    return this.metaData.searchText;
+  }
+
+  /**
+   * ### Method to setting the table data based on the string entered
+   */
+  set searchTerm(value: string) {
+    try {
+      this.metaData.searchText = value;
+      if (!this.tableDataWithActions || !this.tableDataWithActions.tableData || !this.tableDataWithActions.tableData.headerContent) {
+        return;
+      }
+      const headerContent = this.tableDataWithActions.tableData.headerContent;
+      this.filterObject = {};
+      for (const item of headerContent) {
+        this.filterObject[item.key || item.value] = this.metaData.searchText;
+      }
+      this.filteredData = this.filterdata(value);
+      this.seggregateTableData();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * #### Method to filter the data based on search string entered and updating the table data
+   * @param searchString refernce of search string entered inside the search field
+   */
+  filterdata(searchString: string) {
+    try {
+      const afterFilter = this.tableDataWithActions.tableData.bodyContent.filter((eachItem) => {
+        let searchStringFound = false;
+        this.tableDataWithActions.tableData.headerContent.forEach((eachHeader) => {
+          if (eachItem[eachHeader.key || eachHeader.value]) {
+            if (['string'].includes(typeof eachItem[eachHeader.key || eachHeader.value])) {
+              if (eachItem[eachHeader.key || eachHeader.value].toLowerCase().indexOf(searchString.toLowerCase()) !== -1) {
+                searchStringFound = true;
+                return eachItem;
+              }
+            } else {
+              if (eachItem[eachHeader.key || eachHeader.value] === searchString) {
+                searchStringFound = true;
+                return eachItem;
+              }
+            }
+          }
+        });
+        if (searchStringFound) {
+          return eachItem;
+        }
+      });
+      return afterFilter;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  searchColumn(counterNotClear?) {
+    try {
+      this.filteredData = this.filterdataColumnLevel();
+      if (this.column) {
+        this.isDesc = !this.isDesc;
+        if (!counterNotClear) {
+          this.metaData.counter = 1;
+          this.sort(this.column, true, false);
+        } else {
+          this.sort(this.column, true, true);
+        }
+      } else {
+        if (!counterNotClear) {
+          this.metaData.counter = 1;
+        }
+        this.seggregateTableData();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  filterdataColumnLevel() {
+    try {
+      const afterFilter = this.tableDataWithActions.tableData.bodyContent;
+      const filterKeys = [];
+      for (const key in this.columnSearchModel) {
+        if (this.columnSearchModel[key].length > 0) {
+          filterKeys.push(key);
+        }
+      }
+      return afterFilter.filter(item =>
+        filterKeys.reduce((x, keyName) =>
+          (x && new RegExp(this.columnSearchModel[keyName], 'gi').test(item[keyName])) || this.columnSearchModel[keyName] === '', true));
+
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  setFilterData() {
+    try {
+      if (this.tableDataWithActions.tableData && this.tableDataWithActions.tableData.bodyContent) {
+        this.filteredData = JSON.parse(JSON.stringify(this.tableDataWithActions.tableData.bodyContent));
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  sort(property, notSearch?, counterNotClear?) {
+    try {
+      this.isDesc = !this.isDesc; // change the direction
+      this.column = property;
+      const direction = this.isDesc ? 1 : -1;
+      if (!notSearch) {
+        this.filteredData = this.filterdataColumnLevel();
+      }
+      this.filteredData.sort((a, b) => {
+        if (a[property] < b[property]) {
+          return -1 * direction;
+        } else if (a[property] > b[property]) {
+          return 1 * direction;
+        } else {
+          return 0;
+        }
+      });
+      if (!counterNotClear) {
+        this.metaData.counter = 1;
+      }
+      this.seggregateTableData();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  getTotalPages() {
+    try {
+      if (this.filteredData.length > this.metaData.no_of_items_to_display) {
+        const totalPagesLength = (this.metaData.counter - 1) * this.metaData.no_of_items_to_display + this.metaData.no_of_items_to_display;
+        if (totalPagesLength > this.filteredData.length) {
+          return this.filteredData.length;
+        } else {
+          return totalPagesLength;
+        }
+      } else {
+        return this.filteredData.length;
+      }
+    } catch (error) {
+      console.error(error);
+      return '10';
+    }
+  }
+  setHeaderData(notClearSearch?, notClearSort?) {
+    try {
+      if (this.filteredColumns.length > (this.tableDataWithActions.tableActions.columnFilter.minimumColumns - 1)) {
+        const filteredArray = [];
+        this.headerData.forEach((elementHead) => {
+          this.filteredColumns.forEach((elementFilter) => {
+            if (elementHead.key === elementFilter.key) {
+              filteredArray.push(elementHead);
+            }
+          });
+        });
+        this.tableDataWithActions.tableData.headerContent = filteredArray;
+      } else {
+        setTimeout(() => {
+          if (this.tableDataWithActions.tableData.headerContent.length > 0) {
+            this.filteredColumns = this.tableDataWithActions.tableData.headerContent;
+          }
+        }, 100);
+      }
+      if (!notClearSearch) {
+        this.columnSearchModel = {};
+        this.searchColumn();
+      }
+      if (!notClearSort) {
+        this.column = '';
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  public onSelectAll() {
+    this.filteredColumns = JSON.parse(JSON.stringify(this.headerData));
+    this.setHeaderData();
+  }
+
+  public onClearAll() {
+    this.filteredColumns = this.headerData.slice(0, this.tableDataWithActions.tableActions.columnFilter.minimumColumns);
+    this.setHeaderData();
+  }
+  /**
+   * Method to subscribe the table reload from parent component
+   */
+  observeTableReload() {
+    try {
+      if (this.tableReloadEvent) {
+        this.tableReloadSubscription = this.tableReloadEvent.subscribe((val: boolean) => {
+          if (val) {
+            this.reloadTable();
+          }
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  reloadTable() {
+    try{
+      this.emitAction({ type: 'fetchData' });
+    }catch(error){console.log(error)}
+  }
+  ngOnDestroy() {
+    try{
+      if (this.tableReloadSubscription) {
+        this.tableReloadSubscription.unsubscribe();
+        this.tableReloadSubscription = undefined;
+      }
+    }catch(error){console.error(error)}
+  }
+}

src/app/common-components/simple-table-with-pagination/simple-table-with-pagination.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SimpleTableWithPaginationComponent } from './simple-table-with-pagination.component';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+import { NgxEchartsModule } from 'ngx-echarts';
+import * as echarts from 'echarts';
+@NgModule({
+  declarations: [SimpleTableWithPaginationComponent],
+  imports: [
+    CommonModule,
+    NgSelectModule,
+    FormsModule,
+    NgbModule,
+    NgxEchartsModule.forRoot({
+      echarts,
+    }),
+  ],
+  exports: [SimpleTableWithPaginationComponent],
+})
+export class SimpleTableWithPaginationModule { }

src/app/common-components/table-server-side/service/table-server-side.spec.ts

+import { TableServerSide } from './table-server-side';
+
+describe('TableServerSide', () => {
+  it('should create an instance', () => {
+    expect(new TableServerSide()).toBeTruthy();
+  });
+});

src/app/common-components/table-server-side/service/table-server-side.ts

+import { Subject } from 'rxjs';
+
+export class TableServerSide {
+    static data = {}; // if more than one table , maintain data for both of them .
+    /**
+     * data = {
+     *    "entitiy_1": {
+     *        "headerContent": [],
+     *        "bodyContent": [],
+     *    },
+     *    "entitiy_2": {
+     *        "headerContent": [],
+     *        "bodyContent": [],
+     *    }
+     * }
+     */
+
+    /**
+     * Loaders = {
+     *    'entity_1': {
+     *        "contentLoader": true,
+     *        "removeLoader": true
+     *    }
+     * }
+     */
+
+    static loaders = {};
+    // Loader also same problem .
+
+    /** == Data triggering == */
+    static dataTrigger = new Subject();
+    /** ===== */
+
+    /** == Data triggering == */
+    static loaderTrigger = new Subject();
+    /** ===== */
+
+    constructor() {
+
+    }
+
+    /**
+     * On HOLD
+     * Setting Table Data
+     * @param data - Table data { headerContent: [], bodyContent: []}
+     * @param entity - entity Name
+     */
+    setTableData(data, entity) {
+        try {
+            if (!TableServerSide.data[entity]) {
+                TableServerSide.data[entity] = {};
+            }
+            TableServerSide.data[entity] = data;
+            TableServerSide.dataTrigger.next({ entity, data });
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    /**
+     * For All Removal Loaders
+     * Setting up loader values
+     * @param value - true or false
+     * @param entity - Entity Name for which loader has to be acitvated
+     */
+    setLoader(value, entity) {
+        if (!TableServerSide.loaders[entity]) {
+            TableServerSide.loaders[entity] = false;
+        }
+        TableServerSide.loaders[entity] = value;
+        TableServerSide.loaderTrigger.next({ entity });
+    }
+
+    //   getDataTrigger() : Observable<any>{
+    //     return TableServerSide.dataTrigger.asObservable();
+    //   }
+}

src/app/common-components/table-server-side/table-server-side.component.html

+<div class="configurations-datatable table-settings serverside-table" [ngClass]="{'with-rows': (bodyContent && bodyContent.length > 0), 'no-table-rows': (bodyContent && bodyContent.length === 0)}">
+    <table datatable [hidden]="!showTable" [dtOptions]="dtOptions" class="table table-bordered bodyContent" *ngIf="headerContent && headerContent.length > 0">
+        <thead>
+            <tr>
+                <ng-container *ngIf="settings.radioButton?.show">
+                    <th class="checkbox-header">
+                        {{settings.radioButton.title}}
+                        <label *ngIf="settings.radioButton?.showSelectAll" class="checkbox form-check-label text-left table-checkbox ml-1 mb-4">
+                            <span class="checkbox-span" [hidden]="settings.radioButton?.hidden">
+                                <input type="checkbox" (ngModelChange)="changeCheckBoxAll($event)"
+                                    [(ngModel)]="settings.radioButton.checkAllValue">
+                                <span class="checkmark"></span>
+                            </span>
+                        </label>
+                    </th>
+                </ng-container>
+                <th class="table-coloum-serial-no-header" *ngIf="settings.showSerialNumber"></th>
+                <th *ngFor="let th of headerContent; let head_index = index" [ngClass]="{'left_fixed_header' : (dtOptions?.fixedColumns?.left && dtOptions.fixedColumns.left > head_index),  '{{th.classList}}' : th.classList}" [style.left.px]="head_index*166">
+                    <span class="table-col-title">{{th.label}}</span>
+                </th>
+                <ng-container *ngIf="dtOptions.tableActions?.show">
+                    <th class="table-header" [ngClass]="dtOptions.tableActions?.freeze ? 'left_fixed_header' : ''" [style.right.px]="0" [style.width.px]="dtOptions.tableActions.width"></th>
+                </ng-container>
+            </tr>
+            <tr class="searchRow" *ngIf="dtOptions.columnSearch">
+                <ng-container *ngIf="settings.radioButton?.show">
+                    <th class="checkbox-header">
+                        {{settings.radioButton.title}}
+                        <label *ngIf="settings.radioButton?.showSelectAll" class="checkbox form-check-label text-left table-checkbox ml-1 mb-4">
+                            <span class="checkbox-span" [hidden]="settings.radioButton?.hidden">
+                                <input type="checkbox" (ngModelChange)="changeCheckBoxAll($event)"
+                                    [(ngModel)]="settings.radioButton.checkAllValue">
+                                <span class="checkmark"></span>
+                            </span>
+                        </label>
+                    </th>
+                </ng-container>
+                <th class="table-coloum-serial-no-header" *ngIf="settings.showSerialNumber"></th>
+                <th *ngFor="let th of headerContent;let head_index = index;" [ngClass]="{'left_fixed_body' : (dtOptions?.fixedColumns?.left && dtOptions.fixedColumns.left > head_index),  '{{th.classList}}' : th.classList}" [style.left.px]="head_index*166">
+                    <!-- <span class="table-col-title">{{th.label}}</span> -->
+                    <span (click)="$event.stopPropagation();" class="search" *ngIf="dtOptions.columnSearch">
+                        <ng-container *ngIf="th.column_search">
+                            <span [ngSwitch]="th.column_search.type">
+                                <ng-container *ngSwitchCase="'text'">
+                                    <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
+                                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" type="text"
+                                        class="form-control" (focus)="$event.stopPropagation()"
+                                        [placeholder]="th.place_holder? th.place_holder: 'Search'"
+                                        [(ngModel)]="columnSearchModel[th.key]"
+                                        (ngModelChange)="search(columnSearchModel[th.key])" />
+                                </ng-container>
+
+                                <span *ngSwitchCase="'select'">
+                                    <!-- <select [class.invisible]="!(!settings.columnSearch.searchExceptions ||
+                                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))"
+                                        [(ngModel)]="columnSearchModel[th.key]"
+                                        (ngModelChange)="search(columnSearchModel[th.key])" class="form-control">
+                                        <option *ngFor="let opt of th.column_search.options" [value]="opt.key">
+                                            {{opt.label}}
+                                        </option>
+                                    </select> -->
+                                    <ng-select [items]="th.column_search.options" [class.invisible]="!(!settings.columnSearch.searchExceptions ||
+                                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))"
+                                        [(ngModel)]="columnSearchModel[th.key]"
+                                        (change)="search(columnSearchModel[th.key])" class="customSelect"
+                                        [placeholder]="th.place_holder? th.place_holder: 'Select'" [clearable]="true"
+                                        bindValue="key" bindLabel="label" appendTo="body">
+                                    </ng-select>
+                                </span>
+                    <span *ngSwitchCase="'date_range'">
+                                    <div class="input-group">
+                                        <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
+                    (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" [owlDateTimeTrigger]="dt"
+                                            [owlDateTime]="dt" class="form-control cursor-pointer date-field-diasble"
+                                            [(ngModel)]="columnSearchModel[th.key]" [max]="maxDate"
+                                            (ngModelChange)="search(columnSearchModel[th.key])"
+                                            [placeholder]="th.place_holder? th.place_holder: 'Filter by Date Range'"
+                                            [title]="getTitle(columnSearchModel[th.key])" selectMode='range' readonly
+                                            type="search" style="margin-right: 9px;">
+                                        <button class="btn bg-transparent calendar-icon" [class.invisible]="!(!settings.columnSearch.searchExceptions ||
+                                        (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" [owlDateTimeTrigger]="dt"
+                                            *ngIf="!columnSearchModel[th.key]">
+                                            <i class="fa fa-calendar"></i>
+                                        </button>
+                                        <button class="btn bg-transparent clearDateRange"
+                                            (click)="clearDateRange($event,th.key)" *ngIf="columnSearchModel[th.key]">
+                                            <i class="fa fa-times"></i>
+                                            <!-- <span class="ng-clear-wrapper"><span class="ng-clear">x</span></span> -->
+                    </button>
+                    <owl-date-time [pickerType]="'calendar'" #dt></owl-date-time>
+</div>
+</span>
+<ng-container *ngSwitchDefault>
+    <!-- Invalid Format -->
+
+    <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
+                            (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" type="text" class="form-control" (focus)="$event.stopPropagation()" [placeholder]="th.column_search.place_holder? th.column_search.place_holder: 'Search'" [(ngModel)]="columnSearchModel[th.key]"
+        (ngModelChange)="search(columnSearchModel[th.key])" />
+</ng-container>
+
+</span>
+
+</ng-container>
+<ng-container *ngIf="!th.column_search">
+    <input [class.invisible]="!(!settings.columnSearch.searchExceptions ||
+                            (settings.columnSearch.searchExceptions.indexOf(th.key)===-1))" type="text" class="form-control" (focus)="$event.stopPropagation()" placeholder="Search" [(ngModel)]="columnSearchModel[th.key]" (ngModelChange)="search(columnSearchModel[th.key])"
+    />
+</ng-container>
+</span>
+</th>
+<ng-container *ngIf="dtOptions.tableActions?.show">
+    <th class="table-header" [ngClass]="dtOptions.tableActions?.freeze ? 'left_fixed_body' : ''" [style.right.px]="0" [style.width.px]="dtOptions.tableActions.width"></th>
+</ng-container>
+</tr>
+</thead>
+<tbody *ngIf="bodyContent && bodyContent.length > 0" [ngClass]="{'table-processing': tableProcessing}">
+    <tr *ngFor="let tr of bodyContent; let body_index = index" [ngClass]="tr.className">
+        <ng-container *ngIf="settings.radioButton?.show">
+            <td>
+                <label *ngIf="!tr[settings.radioButton.hiddenKey]" class="checkbox form-check-label text-left table-checkbox ml-1" [ngClass]="{'ph-item color-light-gray text-hide cell-processing': tableProcessing}">
+                            <span class="checkbox-span" [hidden]="settings.radioButton?.hidden">
+                                <input type="checkbox" (ngModelChange)="changeCheckBox($event, body_index, tr)"
+                                    [(ngModel)]="tr[settings.radioButton.key]">
+                                <span class="checkmark"></span>
+                            </span>
+                        </label>
+            </td>
+        </ng-container>
+        <td class="table-coloum-serial-no-body text-center secondColumnText" *ngIf="settings.showSerialNumber">
+            <span *ngIf="dataTablesParameters" [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
+                        {{dataTablesParameters.start + body_index + 1}}
+                    </span>
+        </td>
+        <td *ngFor="let th of headerContent; let head_index = index" [ngClass]="(dtOptions?.fixedColumns?.left && dtOptions.fixedColumns.left > head_index) ? 'left_fixed_body' : ''" [style.left.px]="head_index*166" class="table-cell {{settings.rowClick? 'row-click-active': ''}}"
+            (click)="settings.rowClick && rowClick(tr)">
+            <ng-container *ngIf="!th.editable">
+                <span [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}" *ngIf="th.icon && settings.columnConditions && settings.columnConditions.icons && settings.columnConditions.icons[th.key] && settings.columnConditions.icons[th.key][tr[th.key]]">
+                            <i aria-hidden="true" [ngClass]="{'invisible': tableProcessing}"
+                                class="{{settings.columnConditions.icons[th.key][tr[th.key]].icon + ' ' + settings.columnConditions.icons[th.key][tr[th.key]].class}}"></i>
+                        </span>
+                <span *ngIf="settings.columnConditions && settings.columnConditions.altText" [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
+                            <ng-container
+                                *ngIf="settings.columnConditions && settings.columnConditions.altText && settings.columnConditions.altText[th.key] && settings.columnConditions.altText[th.key][tr[th.key]] else altTextFail">
+                                {{settings.columnConditions.altText[th.key][tr[th.key]].label}}
+                            </ng-container>
+                            <ng-template #altTextFail>
+                                {{tr[th.key]}}
+                            </ng-template>
+                        </span>
+                <span *ngIf="!th.icon && !settings?.columnConditions?.altText" class="spnDetails" [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
+                            <ng-container
+                                *ngIf="(th.clickAble && th.clickAble.show) || (settings.clickableColumns && settings.clickableColumns.show) else plainText">
+                                <ng-container *ngIf="th.clickAble else clickableColumnCheck">
+                                    <ng-container [ngSwitch]="th.clickAble.type">
+                                        <ng-container *ngSwitchCase="'numericCondition'">
+                                            <ng-container *ngIf="th.clickAble.condition.sign === '>' else lessThan">
+                                                <ng-container
+                                                    *ngIf="tr[th.clickAble.condition.key] > th.clickAble.condition.value; then clickableCell else plainText">
+                                                </ng-container>
+                                            </ng-container>
+                                            <ng-template #lessThan>
+                                                <ng-container
+                                                    *ngIf="tr[th.clickAble.condition.key] < th.clickAble.condition.value; then clickableCell else plainText">
+                                                </ng-container>
+                                            </ng-template>
+                                        </ng-container>
+
+
+
+                                        <ng-container *ngSwitchCase="'alphabetCondition'">
+                                            <ng-container *ngIf="th.clickAble.condition.sign === '!=' else plainText">
+                                                <ng-container
+                                                    *ngIf="tr[th.clickAble.condition.key] != th.clickAble.condition.value; then clickableCell else plainText">
+                                                </ng-container>
+                                            </ng-container>
+                                        </ng-container>
+
+
+
+                                        <ng-container *ngSwitchCase="'boolean'">
+                                            <ng-container
+                                                *ngIf="(tr[th.clickAble.condition.key]); then clickableCell else plainText">
+                                            </ng-container>
+                                        </ng-container>
+                                        <ng-container *ngSwitchDefault>
+                                            <ng-container
+                                                *ngIf="(tr[th.clickAble.condition.key] == th.clickAble.condition.value); then clickableCell else plainText">
+                                            </ng-container>
+                                        </ng-container>
+                                    </ng-container>
+                                </ng-container>
+                                <ng-template #clickableColumnCheck>
+                                    <ng-container
+                                        *ngIf="(settings.clickableColumns.list && settings.clickableColumns.list.indexOf(th.key) > -1) then clickableCell else plainText">
+                                    </ng-container>
+                                </ng-template>
+                            </ng-container>
+                            <ng-template #plainText>
+                                <span [innerHtml]="tr[th.key]" *ngIf="th.innerHtml" class="innter-html-content"></span>
+                <span class="plan-text" [title]="tr[th.key]" *ngIf="!th.innerHtml">
+                                    {{tr[th.key]}}
+                                </span>
+                </ng-template>
+                <!-- th.clickAble.condition -->
+                <ng-template #clickableCell>
+                    <span class="active clickable-element" [ngClass]="settings?.clickableColumns?.class" (click)="cellClick(tr,th)">
+                                    <ng-container
+                                        *ngIf="th.clickAble?.condition?.altText?.value ; then clickableWithAlt else clickableWithoutAlt">
+                                    </ng-container>
+                                    <ng-template #clickableWithAlt>
+                                        {{th.clickAble.condition.altText.value}}
+                                    </ng-template>
+
+                                    <ng-template #clickableWithoutAlt>
+                                        {{tr[th.key]}}
+                                    </ng-template>
+                                </span>
+                </ng-template>
+                </span>
+            </ng-container>
+            <ng-container *ngIf="th.editable">
+                <span [ngSwitch]="th.type" [ngClass]="{'ph-item color-light-gray text-hide cell-processing': tableProcessing}">
+                            <ng-container *ngSwitchCase="'number'">
+                                <input type="number" [(ngModel)]="tr[th.key]" class="form-control"
+                                    [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
+                            </ng-container>
+                            <ng-container *ngSwitchCase="'text'">
+                                <input type="text" [(ngModel)]="tr[th.key]" class="form-control"
+                                    [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
+                            </ng-container>
+                            <span *ngSwitchCase="'select'"
+                                [ngClass]="{'ph-item color-light-gray text-hide': tableProcessing}">
+                                <select [(ngModel)]="tr[th.key]" class="form-control"
+                                    [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
+                                    <option *ngFor="let opt of th.options" [value]="opt.value">{{opt.label}}</option>
+                                </select>
+                            </span>
+                <span *ngSwitchCase="'datePicker'">
+                                <input [owlDateTimeTrigger]="dt" [owlDateTime]="dt"
+                                    class="form-control date-field-diasble" [(ngModel)]="tr[th.key]" selectMode='single'
+                                    readonly [attr.disabled]="(tr['disabled'] || th['disabled'])? '': null">
+                                <owl-date-time [pickerType]="'calendar'" #dt></owl-date-time>
+                            </span>
+                <ng-container *ngSwitchDefault>
+                    Invalid Format
+                </ng-container>
+                </span>
+            </ng-container>
+        </td>
+        <ng-container *ngIf="dtOptions.tableActions?.show">
+            <td [style.width.px]="dtOptions.tableActions.width" class="table-cell-action text-center" [ngClass]="dtOptions.tableActions?.freeze ? 'left_fixed_body' : ''" [style.right.px]="0">
+                <ng-container *ngFor="let action of dtOptions.tableActions?.actionButtons">
+                    <span *ngIf="!tr[action.hideOn]" [ngClass]="{'ph-item color-light-gray text-hide processing-action': tableProcessing}">
+                                <a href="javascript:void(0)"
+                                    class="label-action {{action.disabled || dtOptions.tableActions.disabled? 'disabled': ''}}"
+                                    [ngClass]="action.class" *ngIf="action.onlyText" container="body"
+                                    [ngbTooltip]="action.label"
+                                    (click)="tableAction(tr, action.type)">{{action.text}}</a>
+                                <button *ngIf="!action.onlyText && !tableProcessing" class="btn btn-sm"
+                                    [ngClass]="action.class" (click)="tableAction(tr, action.type)"
+                                    [attr.disabled]="(action.disabled || dtOptions.tableActions.disabled)? '': null"
+                                    container="body" [ngbTooltip]="action.label">
+                                    <i aria-hidden="true" class="fa" [ngClass]="action.icon" *ngIf="!action.svg"></i>
+                                    <img height="15" src="./assets/images/svg/{{action.icon}}" *ngIf="action.svg">
+                                    {{action.text}}
+                                </button>
+                                <!-- <ng-template #tipContent> <span>{{action.text}}</span> </ng-template> -->
+                    </span>
+                </ng-container>
+            </td>
+        </ng-container>
+    </tr>
+</tbody>
+</table>
+<div class="empty-state" *ngIf="emptyTableNotify && !tableProcessing && !bodyContent?.length">
+    <label class="records-available">No records to display</label><br>
+    <span *ngIf="settings?.emptyDataTemplate?.show">
+            <label>{{settings?.emptyDataTemplate?.message}}</label><br>
+            <button *ngIf="settings.emptyDataTemplate.filterBtn.show" class="btn btn-secondary filter-data"
+                (click)="toogleSidebar()">{{settings.emptyDataTemplate.filterBtn.label}}</button>
+        </span>
+</div>
+<button type="button" style="display:none" class="btn btn-demo tableFilterCommonBtn" data-toggle="modal" [attr.data-target]="'#'+ settings.tableId" [attr.id]="'toggleSidebar_'+ settings.tableId">
+    </button>
+<div class="modal right fade" [attr.id]="settings.tableId" role="dialog" aria-labelledby="myModalLabel2">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title filter-title" id="myModalLabel2">Filter by</h4>
+                <button type="button" class="close filterCloseBtn" data-dismiss="modal" aria-label="Close" [attr.id]="'filterCloseIcon_' + settings.tableId"><span
+                            aria-hidden="false">&times;</span></button>
+            </div>
+
+            <div class="modal-body" [ngClass]="settings.showMismatch ? 'mismatch-filter-body' : 'filter-body'">
+                <!-- <app-simple-dfm class="simple-dfm" [savedData]="formData"
+                        (selectFieldChange)="filterSelectFieldChange($event)" [parentData]="parentData"
+                        *ngIf="metaData.length > 0" [metaData]="metaData">
+                    </app-simple-dfm> -->
+            </div>
+            <div class="modal-footer" *ngIf="metaData.length > 0">
+                <button class="btn btn-primary col-md-12" (click)="filterSubmit()">Apply</button>
+            </div>
+            <div class="modal-footer" *ngIf="settings.showMismatch">
+                <button *ngIf="settings.showMismatch" class="btn btn-primary col-md-12" (click)="MismatchClickedbutton()">Show Mismatch SP Details</button>
+            </div>
+        </div>
+        <!-- modal-content -->
+    </div>
+    <!-- modal-dialog -->
+</div>
+</div>
\ No newline at end of file

src/app/common-components/table-server-side/table-server-side.component.scss

+// @import url(../../../../node_modules/@fortawesome/angular-fontawesome/angular-fontawesome.d.ts)
+@import "../../../styles-variables.scss";
+.configurations-datatable {
+    padding: 0rem 0.5rem;
+}
+
+.text-transform-up {
+    text-transform: uppercase;
+}
+
+.text-transform-lo {
+    text-transform: lowercase;
+}
+
+.table-col-title {
+    font-family: $fontFamilyMedium;
+    // font-size: 12px;
+    padding: 7px 0px;
+}
+
+.table {
+    margin-bottom: 0px !important;
+    color: $text-color-base !important;
+}
+.left_fixed_header {
+    position: sticky;
+    z-index: 2;
+    width: 150px !important;
+    min-width: 150px !important;
+    max-width: 150px !important;
+    background-color: #E5EAEF;
+}
+.left_fixed_body {
+    position: sticky;
+    z-index: 2;
+    width: 150px !important;
+    min-width: 150px !important;
+    max-width: 150px !important;
+    background-color: white;
+}
+table {
+    width: 100% !important;
+    thead {
+        tr {
+            border: 0.8px solid $nav-itemBorderClr !important;
+            .table-coloum-serial-no-header {
+                min-width: 40px !important;
+                width: 40px !important;
+            }
+            .checkbox-header {
+                min-width: 30px !important;
+                width: 30px !important;
+            }
+            th {
+                font-family: $fontFamilyMedium !important;
+                font-size: inherit !important;
+                // padding: 10px 10px !important;
+                font-weight: unset !important;
+                &:focus {
+                    outline: none;
+                }
+                input {
+                    background: transparent;
+                    border: 0px;
+                    box-sizing: border-box;
+                    // border-bottom: 1px solid gray;
+                    border-radius: 0px;
+                    box-shadow: none;
+                    padding-left: 0px;
+                    padding-right: 0px;
+                }
+                .search {
+                    position: relative;
+                    i {
+                        position: absolute;
+                        top: 25%;
+                        opacity: 0.3;
+                        left: 85%;
+                        pointer-events: inherit;
+                    }
+                }
+            }
+        }
+    }
+    tbody {
+        td.table-coloum-serial-no-header {
+            min-width: 40px !important;
+            width: 40px !important;
+        }
+        td {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 12rem;
+            border-bottom: 1px solid $container-borderClr !important;
+            border-top: 0px !important;
+            padding: 6px;
+            padding-left: 9px !important;
+            label.table-checkbox {
+                min-height: 20px;
+            }
+            a.label-action.disabled {
+                /* Make the disabled links grayish*/
+                color: gray;
+                /* And disable the pointer events */
+                pointer-events: none;
+            }
+        }
+        tr:hover {
+            background: $node-content-wrapper-focusedBgClr;
+            border: 1px solid $node-content-wrapper-focusedBgClr;
+            opacity: 1;
+            cursor: pointer;
+        }
+        .action {
+            min-width: 140px;
+            padding-left: 30px;
+            span {
+                color: #1a61d0;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+table.dataTable thead th {
+    padding: 8px;
+    // border: none;
+    min-width: 130px;
+}
+
+// table.dataTable thead th {
+//   // padding-left: 5px !important;
+//   // padding-right: 12px !important;
+//   // padding-top: 0px !important;
+//   // padding-bottom: 10px !important;
+// }
+table.dataTable thead th:last-child {
+    // border-left: 0px;
+}
+
+table.dataTable thead th:nth-last-child(2) {
+    // border-right: 0px;
+}
+
+::ng-deep .odd {
+    display: none;
+}
+
+.dataTables_length {
+    display: inline;
+}
+
+.overlay-filter {
+    height: calc(100vh - 56px);
+    margin-top: 7rem;
+    background: $color-white;
+    width: 20vw;
+    float: right;
+    overflow: hidden;
+}
+
+.overlay {
+    position: fixed;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2;
+    cursor: pointer;
+}
+
+.sidebar-section-fill {
+    -ms-flex: 1;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.card-reflow {
+    margin-bottom: 0;
+    display: block;
+    background-color: transparent;
+    box-shadow: none;
+}
+
+.card-body {
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1rem;
+}
+
+.pb-1,
+.py-1 {
+    padding-bottom: 0.25rem !important;
+}
+
+.border-top {
+    border-top: 1px solid rgba(34, 34, 48, 0.1) !important;
+}
+
+.list-group {
+    border: 0;
+    box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05), 0 1px 3px 0 rgba(20, 20, 31, 0.15);
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+}
+
+.card {
+    padding-left: 2rem;
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: $color-white;
+    background-clip: border-box;
+    border-radius: 0.25rem;
+}
+
+// app-simple-dfm {
+//   overflow-x: hidden;
+//   height: 100vh;
+// }
+.simple-dfm {
+    overflow-x: hidden;
+    height: 100vh;
+}
+
+.remove-border {
+    background: unset !important;
+    border: unset;
+    border-bottom: 1px solid grey;
+    color: $color-white;
+}
+
+.footer-navigator {
+    position: absolute;
+    bottom: 0px;
+    background-color: #eff2f3;
+    padding: 10px;
+}
+
+.for-submit {
+    width: 18%;
+    margin-left: 18px;
+}
+
+.btn-class {
+    margin-left: 1rem;
+}
+
+.table-settings {
+    margin-top: 0.5rem;
+}
+
+.table-header {
+    vertical-align: inherit;
+    min-width: 50px;
+}
+
+// ---------------------------
+// modal-body-css
+.modal-dialog {
+    height: calc(100% - 100px) !important;
+    bottom: 0 !important;
+    width: 320px !important;
+}
+
+.modal.left .modal-dialog,
+.modal.right .modal-dialog {
+    position: fixed;
+    margin: auto;
+    width: 350px;
+    height: 100%;
+    -webkit-transform: translate3d(0%, 0, 0);
+    -ms-transform: translate3d(0%, 0, 0);
+    -o-transform: translate3d(0%, 0, 0);
+    transform: translate3d(0%, 0, 0);
+}
+
+
+/*Right*/
+
+.modal.right.fade .modal-dialog {
+    right: 0px;
+    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
+    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
+    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
+    transition: opacity 0.3s linear, right 0.3s ease-out;
+}
+
+.modal.right.fade.in .modal-dialog {
+    right: 0;
+    bottom: 0;
+}
+
+
+/* ----- MODAL STYLE ----- */
+
+.modal-content {
+    border-radius: 0;
+    border: none;
+}
+
+.modal-header {
+    background: $color-white;
+    border-bottom: 1px solid $hover-Bg-clr;
+    border-bottom-color: $node-content-wrapper-focusedBgClr;
+    background-color: $menu-bg-gray;
+}
+
+
+/* ----- v CAN BE DELETED v ----- */
+
+body {
+    background-color: #78909c;
+}
+
+.demo-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+}
+
+.close {
+    opacity: unset !important;
+    color: black !important;
+}
+
+.filter-body {
+    height: calc(100vh - 203px);
+    overflow-y: auto;
+}
+
+.mismatch-filter-body {
+    height: calc(100vh - 242px);
+    overflow-y: auto;
+}
+
+.modal-footer {
+    padding: 5px;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 70px 130px;
+    display: block;
+}
+
+.filter-data {
+    margin-top: 5px;
+}
+
+.filter-title {
+    font-size: 18px;
+}
+
+.processing-action {
+    width: 10%;
+    float: left;
+    margin-right: 1rem;
+}
+
+.processing-action .label-action {
+    color: transparent !important;
+}
+
+.date-field-diasble.form-control:disabled,
+.date-field-diasble.form-control[readonly] {
+    background-color: white;
+    opacity: 1;
+    cursor: pointer !important;
+}
+
+.customSelect.ng-select-container {
+    background: transparent !important;
+    border: 0px !important;
+    border-bottom: 1px solid gray !important;
+    border-radius: 0px;
+    box-shadow: none;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.clearDateRange {
+    z-index: 1000;
+    margin-left: -20px;
+    // position: absolute;
+    // right: 75px;
+    // right: 60px;
+    // top: 5px;
+    // width:18px;
+}
+
+.calendar-icon{
+    margin-left: -20px;
+}
+
+.searchRow {
+    background: white !important;
+    th {
+        padding: 0px 7px !important;
+    }
+}
+
+::placeholder {
+    color: $placeholder-clr !important;
+    font-family: $fontFamilyBase;
+}
+
+.table-bordered th,
+.table-bordered td {
+    border: 0px !important;
+    border-bottom: 1px solid $container-borderClr !important;
+    &:first-child {
+        border-left: 1px solid $container-borderClr !important;
+    }
+    &:last-child {
+        border-right: 1px solid $container-borderClr !important;
+    }
+}
\ No newline at end of file

src/app/common-components/table-server-side/table-server-side.component.ts

+import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges, ViewChild } from '@angular/core';
+import { Subscription, Subject, Observable } from 'rxjs';
+import { DataTableDirective } from 'angular-datatables';
+import { TableServerSide } from './service/table-server-side';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { SharedService } from 'src/app/services/shared.service';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'app-table-server-side',
+  templateUrl: './table-server-side.component.html',
+  styleUrls: ['./table-server-side.component.scss']
+})
+export class TableServerSideComponent implements OnInit {
+
+  @ViewChild(DataTableDirective) dataTableElement: DataTableDirective;
+  /**
+   * Initial settings file
+   */
+  @Input() settings; // table options from parent component
+  @Input() data; // data for the table
+  @Input() tableReloadEvent: Observable<boolean>;
+
+  @Output() action = new EventEmitter();
+
+  public tableReloadSubscription;
+  public mismatchClicked;
+  /** Table Data  */
+  public headerContent;
+  public bodyContent;
+  /** Subscriptions */
+  public loaderSubscription = new Subscription();
+  public dataSubscription = new Subscription();
+  /**  */
+
+  /** Search terms  */
+  public searchTerms = new Subject<any>();
+  public dtElement: DataTableDirective;
+  public loader = false;
+  public searchTermSubscription;
+  public dtOptions: any = {};
+  public dataTablesParameters;
+  public columnSearchModel = {};
+  public callback;
+  public emptyTableNotify = false;
+  public tableProcessing = false;
+
+  /** Remove Details */
+  public removeLoader = false;
+  public recordToDelete;
+  public buttonData: any = [];
+  public count = 0;
+
+  public parentData: any = { error_cls: 'table-filter-error', formSubmitted: false, serviceDependency: true };
+  public formData: any = {};
+  public metaData = []; // assign the below JSON file to this variable
+
+  public tableDefaultOptions = { // default table options
+    tableId: 'myModal',
+    tableActions: {},
+    columnConditions: {},
+    columnSearch: {
+      show: true,
+      columnSearchToggle: false,
+      searchExceptions: []
+    },
+    filters: {
+      showOnLoad: false,
+      filterTable: false,
+      filterOptions: [],
+      filterSelected: {},
+    },
+    emptyDataTemplate: {
+      show: true,
+      message: 'Try adjusting your search or filter to find what you\'re looking for..',
+      filterBtn: {
+        show: true,
+        label: 'Filter data'
+      }
+    },
+    radioButton: {},
+    showSerialNumber: false, // to enable serial number
+    headerButtons: {},
+    clickableColumns: {
+      show: false,
+      list: []
+    },
+    pageLengthMenu: { pageSizes: [10, 25, 50, 100] },
+    stylings: {
+      bodyHeight: 'calc(100vh - 280px)'
+    },
+
+    pageLength: 25,
+    pagingType: 'full_numbers',
+    language: {
+      lengthMenu: 'Items Per Page  _MENU_',
+      zeroRecords: '',
+      info: 'Showing page _PAGE_ of _PAGES_ (Total Records: _MAX_)',
+      infoEmpty: '',
+      infoFiltered: '(filtered from _MAX_ total records)',
+      paginate: {
+        next: '»',
+        previous: '«'
+      }
+    },
+    // dom: '<"top"i>rt<"bottom"flp><"clear">',
+    scrollX: true,
+    scrollCollapse: true,
+    sortOptions: {},
+    rowClick: false
+  };
+  public showTable = false;
+  public maxDate = new Date();
+  constructor(
+    public sharedService: SharedService,
+    private datePipe: DatePipe,
+  ) { }
+
+  // tslint:disable-next-line:use-life-cycle-interface
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.data) {
+      if (this.count > 0) {
+        this.setTableBodyData(this.data);
+        if (this.data.resetPageNumber) {
+          this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => {
+            try {
+              dtInstance.page(0).draw(false);
+            } catch (e) {
+              console.error(e)
+            }
+          }).catch(e => console.error(e));
+        }
+        this.resetSelectAll();
+      }
+      this.triggerTableResize();
+    }
+    const attribute = document.getElementsByClassName('dataTables_scrollHead')[0];
+    if (attribute) {
+      if (this.emptyTableNotify) {
+        attribute.classList.add('scroll-table-header');
+      } else {
+        attribute.classList.remove('scroll-table-header');
+      }
+    }
+    this.setFilterOptions();
+    this.updateTableActions();
+    this.updateTableHeaders();
+  }
+
+  resetSelectAll() {
+    try {
+      if (this.settings && this.settings.radioButton && this.settings.radioButton.checkAllValue !== undefined) {
+        this.settings.radioButton.checkAllValue = false;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Table row click action
+   * @param rowDetails clicked/selected row data
+   */
+  rowClick(rowDetails) {
+    try {
+      if (this.settings.rowClick) {
+        this.tableAction(rowDetails, 'rowClick');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  setFilterOptions() {
+    try {
+      if (this.settings.filters && this.settings.filters.filterOptions) {
+        this.metaData = this.settings.filters.filterOptions;
+        this.formData = this.settings.filters.filterSelected;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * Method to update the table action options
+   */
+  updateTableActions() {
+    try {
+      if (this.settings && this.settings.tableActions) {
+        this.dtOptions.tableActions = this.settings.tableActions;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * Method to update table header options
+   */
+  updateTableHeaders() {
+    try {
+      if (!this.data || !this.data.headerContent || !this.headerContent) { return; }
+      if (this.getCopy(this.data.headerContent) === this.getCopy(this.headerContent)) { return; }
+      for (const th of this.data.headerContent) {
+        const headerIndex = this.headerContent.findIndex(ele => ele.key === th.key);
+        if (headerIndex > -1) {
+          if (th.hasOwnProperty('editable')) {
+            this.headerContent[headerIndex].editable = th.editable;
+          }
+          if (th.hasOwnProperty('disabled')) {
+            this.headerContent[headerIndex].disabled = th.disabled;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  getCopy(objVal) {
+    try {
+      if (objVal) {
+        return JSON.parse(JSON.stringify(objVal));
+      } else {
+        return objVal;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  ngOnInit() {
+    this.setFilterOptions();
+    this.setDefaultOptions();
+
+    // Loader Triggers
+    TableServerSide.loaderTrigger.subscribe(result => {
+      // tslint:disable-next-line:no-string-literal
+      if (this.settings.entity === result['entity']) {
+        // tslint:disable-next-line:no-string-literal
+        this.loader = TableServerSide.loaders[result['entity']];
+      }
+    });
+
+    /** For debounce time  */
+    this.searchTerms.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(value => {
+      this.reloadTable();
+    });
+    // default filter open check
+    this.setDefaultFilterShow();
+    this.observeTableReload();
+  }
+
+  /**
+   * Method to subscribe the table reload from parent component
+   */
+  observeTableReload() {
+    try {
+      if (this.tableReloadEvent) {
+        this.tableReloadSubscription = this.tableReloadEvent.subscribe((val: boolean | string) => {
+          if (val === true) {
+            this.reloadTablePaginate();
+          } else if (val === 'reloadWithoutState') {
+            this.reloadTable();
+          }
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Whenever search item changes
+   * @param term - Current Search term
+   */
+  search(term) {
+    let random = Math.floor((Math.random() * 100) + 1);
+    random += term;
+    this.searchTerms.next(random); // debounce service call
+  }
+  /**
+   *  Exclude Sorting Columns
+   */
+  getExcludeSortColumns() {
+    if (this.settings.sortOptions.disableAll) {
+      return '_all';
+    } else {
+      const excludes = [];
+      let counter = 0;
+      try {
+        if (this.settings.radioButton.show) {
+          excludes.push(0);
+          counter++;
+        }
+        if (this.settings.showSerialNumber) {
+          this.settings.radioButton.show ? excludes.push(1) : excludes.push(0);
+          counter++;
+        }
+        if (this.settings.tableActions.show) {
+          excludes.push(this.headerContent.length + counter);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+      return excludes;
+    }
+  }
+
+  /**
+   * Method for emitting filter selection change event
+   * @param fieldValue filter values
+   */
+  filterSelectFieldChange(fieldValue) {
+    this.action.emit({
+      action: 'filterChange',
+      data: fieldValue
+    });
+  }
+  /**
+   * Method for emitting filter button click event
+   * @param fieldValue filter values
+   */
+  MismatchClickedbutton(fieldValue?) {
+    try {
+      this.mismatchClicked = true;
+      this.settings.filters.filterOptions[0].required = false;
+      this.metaData = this.settings.filters.filterOptions;
+      this.parentData.formSubmitted = true;
+      if (this.sharedService.getDisabledStatus(this.parentData.error_cls)) {
+        return true;
+      }
+      this.settings.filters.filterSelected = JSON.parse(JSON.stringify(this.formData));
+      if (this.dataTablesParameters) {
+        this.reloadTable();
+        this.closeFilter();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+
+  /**
+   * Fetch Table Data
+   */
+  fetchData() {
+    try {
+      // this.tableProcessing = true;
+      const inputRequest = JSON.parse(JSON.stringify(this.dataTablesParameters));
+      const excludeColIndexes = this.getExcludeSortColumns();
+      if (excludeColIndexes !== '_all') {
+        excludeColIndexes.sort();
+        excludeColIndexes.reverse();
+        excludeColIndexes.forEach(ind => {
+          inputRequest.columns.splice(ind, 1);
+        });
+        inputRequest.column_search = this.columnSearchModel;
+        inputRequest.search_details = [];
+        if (inputRequest.column_search) {
+          const keys = Object.keys(inputRequest.column_search);
+          const columnSearchItems = [];
+          for (const keyVal of keys) {
+            columnSearchItems.push({
+              key: keyVal,
+              value: inputRequest.column_search[keyVal]
+            });
+          }
+          inputRequest.search_details = columnSearchItems;
+          inputRequest.searchDetails = columnSearchItems;
+        }
+      } else {
+        inputRequest.search_details = [];
+        inputRequest.searchDetails = [];
+      }
+      const filterSelected = JSON.parse(JSON.stringify(this.settings.filters.filterSelected));
+      const filters = JSON.parse(JSON.stringify(this.settings.filters.filterSelected));
+      const filterKeys = Object.keys(filters);
+      for (const key of filterKeys) {
+        if (filters[key] !== undefined && filters[key] !== null) {
+          if ((typeof (filters[key]) === 'string' && filters[key].trim() !== '') || typeof (filters[key]) === 'number') {
+            filters[key] = [filters[key]];
+          }
+          if (typeof (filters[key]) === 'string' && filters[key].trim() === '') {
+            delete filters[key];
+          }
+        } else {
+          delete filters[key];
+        }
+      }
+      // this line is added as per request from BE team
+      filterSelected.filters = filters;
+      const parentObj = {
+        action: 'fetchData',
+        dataTableParameters: inputRequest,
+        columnParameters: this.columnSearchModel,
+        filterSelected,
+        filters
+      };
+      if (this.mismatchClicked) {
+        parentObj['mismatch'] = true;
+      }
+
+      if (this.data.resetPageNumber) {
+        parentObj['action'] = 'reSendData';
+      }
+      // console.log(parentObj);
+      this.action.emit(parentObj);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  getTitle(e){
+    if(e){
+      let fromDate:any = e ? this.datePipe.transform(new Date(e[0]), 'yyyy-MM-dd') : null;
+      let toDate:any =  e ? this.datePipe.transform(new Date(e[1]), 'yyyy-MM-dd') : null;
+      let endDate = fromDate + " - " + toDate;
+      return endDate;
+    }else{
+      return '';
+    }
+  }
+
+  /**
+   * Set Table body data
+   * @param result - result
+   */
+  setTableBodyData(result) {
+    try {
+      this.bodyContent = result.bodyContent;
+      if (!this.callback) { return; }
+      this.callback({
+        recordsTotal: result.records_total,
+        recordsFiltered: result.records_filtered,
+        data: [],
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /** Remove a record */
+  remove(row) {
+    try {
+      this.action.emit(
+        {
+          action: 'remove',
+          record: row,
+          dataTableParameters: this.dataTablesParameters
+        }
+      );
+    } catch (error) {
+      this.removeLoader = false;
+    }
+  }
+
+  /**
+   * Go To Edit Mode
+   * @param row - record
+   */
+  goToEditMode(row) {
+    try {
+      this.action.emit(
+        {
+          action: 'edit',
+          record: row,
+          dataTableParameters: this.dataTablesParameters
+        }
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  // NgOnDestroy unsubscribe all items
+  // tslint:disable-next-line:use-life-cycle-interface
+  ngOnDestroy() {
+    if (this.loaderSubscription) {
+      this.loaderSubscription.unsubscribe();
+    }
+
+    if (this.dataSubscription) {
+      this.dataSubscription.unsubscribe();
+    }
+
+    if (this.tableReloadSubscription) {
+      this.tableReloadSubscription.unsubscribe();
+      this.tableReloadSubscription = undefined;
+    }
+  }
+
+  /**
+   * Method for closing the filter pannel
+   */
+  closeFilter() {
+    try {
+      document.getElementById('filterCloseIcon_' + this.settings.tableId).click();
+
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * Table filter submit action
+   */
+  filterSubmit() {
+    try {
+      if (this.settings.showMismatch) {
+        this.settings.filters.filterOptions[0].required = true;
+        this.metaData = this.settings.filters.filterOptions;
+        this.mismatchClicked = false;
+      }
+      this.parentData.formSubmitted = true;
+      if (this.sharedService.getDisabledStatus(this.parentData.error_cls)) {
+        return true;
+      }
+      this.settings.filters.filterSelected = JSON.parse(JSON.stringify(this.formData));
+      if (this.dataTablesParameters) {
+        this.reloadTable();
+        this.closeFilter();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  resetFormData() {
+    this.formData = {};
+  }
+
+  /**
+   * Method for emitting table actions
+   * @param obj data which needs to pass to the parent component
+   * @param type action type
+   */
+  tableAction(obj, type, event?) {
+    try {
+      if (event) {
+        event.preventDefault();
+      }
+      if (this.tableProcessing) { return; }
+      this.action.emit({
+        data: obj,
+        action: type
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Method for initializing the table options
+   */
+  setDefaultOptions() {
+    const self = this;
+    this.settings = Object.assign(this.tableDefaultOptions, this.settings);
+    const columnsVal = [];
+    this.headerContent = this.data.headerContent;
+    this.bodyContent = this.data.bodyContent;
+    this.count++;
+
+    for (const item of this.headerContent) {
+      columnsVal.push({ name: item.key });
+    }
+
+    if (this.settings.tableActions && this.settings.tableActions.show) {
+      columnsVal.push({ name: 'actions' });
+    }
+    if (this.settings.showSerialNumber) {
+      columnsVal.unshift({
+        name: 'slNo'
+      });
+    }
+    if (this.settings.radioButton && this.settings.radioButton.show) {
+      columnsVal.unshift({ name: 'checkbox' });
+    }
+
+    this.buttonData = [];
+    if (this.settings.filters.filterTable) {
+      this.buttonData.push({
+        text: '<i aria-hidden="true" class="fas fa-filter"></i> Filter by',
+        className: 'btn-new',
+        key: '1',
+        action: (e, dt, node, config) => {
+          this.toogleSidebar();
+        }
+      });
+    }
+    if (this.settings.headerButtons.show) {
+      this.settings.headerButtons.buttons.forEach(ele => {
+        ele.action = (e, dt, node, config) => {
+          this.tableAction({ config }, ele.type);
+        };
+        this.buttonData.push(ele);
+      });
+    }
+    if (this.settings.columnSearch.columnSearchToggle) {
+      this.buttonData.push({
+        text: 'Search Column-level wise',
+        key: '1',
+        className: 'btn-new text-hide disabled',
+        action: () => {
+          return self.dtOptions.columnSearch = self.dtOptions.columnSearch === true ? false : true;
+        }
+      });
+    }
+    if (this.settings.addNew) {
+      this.buttonData.push({
+        text: this.settings.addNewText || 'Add New',
+        className: 'btn btn-primary',
+        key: '1',
+        action: (e, dt, node, config) => {
+          this.action.emit({
+            action: 'addNew',
+            dataTableParameters: this.dataTablesParameters,
+            columnParameters: this.columnSearchModel
+          });
+        }
+      });
+    }
+    const columnDefs = [
+      { targets: this.getExcludeSortColumns(), orderable: false }
+    ];
+
+
+    /** Dt options  */
+    const selfValue = this;
+    this.dtOptions = {
+      pagingType: 'simple_numbers', // 'full_numbers',
+      pageLength: this.settings.pageLength,
+      serverSide: true,
+      ordering: false,
+      order: [],
+      searching: false,
+      processing: true,
+      // autoWidth: false,
+      oLanguage: {
+        sProcessing: '<div class="color-light-gray pt-lg-5 mt-5 p-5 ph-item text-center w-100"><span>  </span></div>'
+      },
+      ajax: (dataTablesParameters: any, callback) => {
+        this.dataTablesParameters = dataTablesParameters;
+        this.callback = callback;
+        this.fetchData();
+      },
+      initComplete: this.onInitTable(),
+      language: this.settings.language,
+      scroller: {
+        loadingIndicator: true,
+      },
+      columnDefs,
+      columns: columnsVal,
+      tableActions: this.settings.tableActions,
+      columnSearch: this.settings.columnSearch.show ? true : false,
+      actionButtons: this.settings.tableActions,
+      dom: 'lBfrtip', // 'lfrtip',
+      buttons: {
+        buttons: this.buttonData,
+        style: 'float:right',
+        dom: {
+          button: {
+            tag: 'button',
+            className: 'remove-border',
+            style: 'padding: 0 !important;border: none !important; background: none !important;'
+          },
+          buttonLiner: {
+            tag: null
+          }
+        }
+      },
+      scrollY: this.settings.stylings.bodyHeight,
+      scrollX: this.settings.scrollX,
+      scrollCollapse: this.settings.scrollCollapse,
+      aLengthMenu: this.settings.pageLengthMenu.pageSizes,
+      fixedColumns: this.settings.fixedColumns,
+      fnDrawCallback(settings) {
+        selfValue.emptyTableNotify = settings.fnRecordsDisplay() === 0;
+      },
+    };
+    setTimeout(() => {
+      this.checkProcessingOption();
+    }, 500);
+  }
+  // fixed action column
+  // if (this.settings.tableActions && this.settings.tableActions.show) {
+  //   if (this.settings.fixedColumns) {
+  //     this.settings.fixedColumns.rightColumns = 1;
+  //   } else {
+  //     this.settings.fixedColumns = {
+  //       rightColumns: 1
+  //     };
+  //   }
+  // }
+  // -------------toggle sidebar
+  toogleSidebar() {
+    try {
+      document.getElementById('toggleSidebar_' + this.settings.tableId).click();
+      this.modalBackdrop();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /** setting modal backdrop */
+  modalBackdrop() {
+    try {
+      const element = document.getElementsByClassName('modal-backdrop fade show')[0];
+      element.setAttribute('class', 'modalHide');
+      const attribute = document.getElementsByClassName('modal')[0];
+      attribute.setAttribute('style', 'left : 265px !important;top : 99px !important');
+      const maxSidebarData = document.getElementById('asideMenu');
+      const modalBackdrop = document.getElementsByClassName('modalHide')[0];
+      if (maxSidebarData.classList.contains('mini-sidebar')) {
+        modalBackdrop.setAttribute('style', 'left : 45px !important');
+      } else {
+        modalBackdrop.setAttribute('style', 'left : 265px !important');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Method to re-render the table with options
+   */
+  reloadTable() {
+    this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => {
+      dtInstance.draw();
+    }).catch(e => console.error(e));
+  }
+
+  /**
+   * Method to re-render the table with options
+   */
+  triggerTableResize() {
+    if (!this.dataTableElement || !this.dataTableElement.dtInstance) { return; }
+    this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => {
+      dtInstance.columns.adjust();
+    }).catch(e => console.error(e));
+  }
+
+  checkProcessingOption() {
+    try {
+      if (!this.dataTableElement || !this.dataTableElement.dtInstance) {
+        setTimeout(() => {
+          this.checkProcessingOption();
+        }, 500);
+        return;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => {
+
+      dtInstance.on('processing.dt', (e, settings, processing) => {
+        this.tableProcessing = processing ? true : false;
+      });
+    }).catch(e => console.log(e));
+  }
+
+  /**
+   * To set default filter open/close
+   */
+  setDefaultFilterShow() {
+    try {
+      if (this.settings.filters.showOnLoad) {
+        this.toogleSidebar();
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  cellClick(row, col) { // cellEdit
+    try {
+      this.action.emit({
+        data: { row, col },
+        action: 'cellEdit'
+      });
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  changeCheckBox(event, index, tr) {
+    try {
+      this.action.emit({
+        data: { event, index, tr },
+        action: 'checkBoxSelect'
+      });
+    } catch (error) { console.error(error) }
+  }
+  changeCheckBoxAll(event) {
+    try {
+      if (!this.settings || !this.settings.radioButton || !this.settings.radioButton.key) { return; }
+      this.bodyContent.map(row => row[this.settings.radioButton.key] = event);
+      this.action.emit({
+        data: { event },
+        action: 'checkBoxSelect'
+      });
+    } catch (error) { console.error(error) }
+  }
+  onInitTable() {
+    this.showTable = true;
+  }
+
+  /**
+   * Method to re-render the table with options and pagination
+   */
+  reloadTablePaginate() {
+    this.dataTableElement.dtInstance.then((dtInstance: DataTables.Api) => {
+      dtInstance.draw(false);
+    }).catch(e => console.log(e));
+  }
+  /**
+ * Method to Clear date range
+ */
+  clearDateRange(event, key) {
+    event.preventDefault();
+    this.columnSearchModel[key] = null;
+    this.search(this.columnSearchModel[key]);
+  }
+}

src/app/common-components/table-server-side/table-server-side.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DataTablesModule } from 'angular-datatables';
+import { FormsModule } from '@angular/forms';
+import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';
+
+import { TableServerSideComponent } from './table-server-side.component';
+import { TableServerSide } from './service/table-server-side';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+// import { SimpleDfmModule } from '../simple-dfm/simple-dfm.module';
+
+export const MY_CUSTOM_FORMATS = {
+  fullPickerInput: 'YYYY-MM-DD HH:mm:ss',
+  parseInput: 'YYYY-MM-DD HH:mm:ss',
+  datePickerInput: 'YYYY-MM-DD HH:mm:ss',
+  timePickerInput: 'LT',
+  monthYearLabel: 'MMM YYYY',
+  dateA11yLabel: 'LL',
+  monthYearA11yLabel: 'MMMM YYYY'
+};
+
+@NgModule({
+  declarations: [
+    TableServerSideComponent
+  ],
+  imports: [
+    CommonModule,
+    DataTablesModule,
+    FormsModule,
+    NgSelectModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule,
+    NgbModule
+    // SimpleDfmModule
+  ],
+  exports: [
+    TableServerSideComponent
+  ],
+  providers: [
+    TableServerSide,
+    {
+      provide: OWL_DATE_TIME_FORMATS,
+      useValue: MY_CUSTOM_FORMATS
+    }
+  ]
+})
+export class TableServerSideModule { }

src/app/common-components/toastr/toastr-state.ts

+export interface ToastrState {
+  type: string;
+  title: string;
+  body: string;
+  close: boolean;
+  timeOut: number;
+}

src/app/common-components/toastr/toastr.component.html

+
+<toaster-container [toasterconfig]="config1"></toaster-container>
\ No newline at end of file

src/app/common-components/toastr/toastr.component.scss

+.fs-14 {
+    font-size: 14px;
+}
+.toast-top-right {
+    border: 2px solid black !important;
+}
+
+.custom-toast-info {
+    background-color: blue;
+    color: white;
+    font-weight: bold;
+    opacity: 1;
+}
\ No newline at end of file

src/app/common-components/toastr/toastr.component.ts

+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { Subscription } from 'rxjs';
+import { ToastrService } from './toastr.service';
+import { ToastrState } from './toastr-state';
+
+import { Toast, ToasterService, ToasterConfig, ToastType } from 'angular2-toaster';
+
+@Component({
+  selector: 'app-toastr',
+  templateUrl: './toastr.component.html',
+  styleUrls: ['./toastr.component.scss']
+})
+export class ToastrComponent implements OnInit, OnDestroy {
+
+  public config1: ToasterConfig = new ToasterConfig({
+    positionClass: 'toast-top-right',
+    typeClasses: {
+
+      error: 'custom-toast-error',
+      info: 'custom-toast-info',
+      wait: 'custom-toast-wait',
+      success: 'custom-toast-success',
+      warning: 'custom-toast-warning'
+    },
+    iconClasses: {
+      error: 'custom-icon-error',
+      info: 'custom-icon-info',
+      wait: 'custom-icon-info',
+      success: 'custom-icon-success',
+      warning: 'custom-icon-warning'
+    }
+  });
+  private subscription: Subscription;
+
+  constructor(public toasterService: ToasterService, public toasterLoad: ToastrService) { }
+
+  ngOnInit() {
+    this.subscription = this.toasterLoad.loaderState.subscribe((toast: ToastrState) => {
+      const trigger: Toast = {
+        type: toast.type as ToastType,
+        title: toast.title,
+        body: toast.body,
+        showCloseButton: toast.close,
+      };
+      if (toast.timeOut) {
+        trigger.timeout = toast.timeOut;
+      }
+      this.toasterService.pop(trigger);
+    });
+  }
+
+  ngOnDestroy(): void {
+    // Called once, before the instance is destroyed.
+    // Add 'implements OnDestroy' to the class.
+    this.subscription.unsubscribe();
+  }
+
+
+}

src/app/common-components/toastr/toastr.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import { ToastrState } from './toastr-state';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastrService {
+  private loaderSubject = new Subject<ToastrState>();
+  public loaderState = this.loaderSubject.asObservable();
+
+  constructor() { }
+  toast(Type: string, Title: string, Body: string, Close: boolean, time_out ?: number) {
+    this.loaderSubject.next(<ToastrState>{
+      type: Type,
+      title: Title,
+      body: Body,
+      close: Close ? Close : true,
+      timeOut:  time_out ? time_out : null,
+    });
+  }
+}

src/app/pages/landing/landing.component.html

+<ng-container>
+    <div class="row m-0" *ngIf="showFileTable">
+        <div class="col-md-12" style="margin-top: 15px;">
+            <app-simple-table-with-pagination *ngIf="fileTableData?.tableData?.headerContent?.length" [tableDataWithActions]="fileTableData" (actionEmitter)="fileTableEmitter($event);" [tableReloadEvent]="fileTableReloadSubject.asObservable()">
+            </app-simple-table-with-pagination>
+        </div>
+    </div>
+    <div class="row m-0" *ngIf="showRecordsTable">
+        <h6 class="ml-3 mb-0 mt-4">
+            <em class="cursor-pointer fa fa-arrow-left pr-2 clickable" (click)="showFileTable = true; showRecordsTable = false;"></em> {{selectedFileData.file_name}}
+        </h6>
+        <div class="col-md-12">
+            <app-simple-table-with-pagination *ngIf="tableListData?.tableData?.headerContent?.length" [tableDataWithActions]="tableListData" (actionEmitter)="recordsTableEmitter($event);" [tableReloadEvent]="recordsTableReloadSubject.asObservable()">
+            </app-simple-table-with-pagination>
+            <!-- <app-table-server-side [settings]="tableSettings" [data]="tableData" (action)="performAction($event)" [tableReloadEvent]="tableReloadSubject.asObservable()" *ngIf="tableData?.headerContent?.length > 0">
+            </app-table-server-side> -->
+        </div>
+        <div class="col-md-12 mt-4">
+            <button class="btn btn-primary float-end m-2" (click)="submitAllRecords()">Submit</button>
+        </div>
+    </div>
+</ng-container>
+
+
+
+
+
+<ng-template #editPopup let-c="close" let-d="dismiss">
+    <div class="modal-content modal-lg modal-xl">
+        <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">View/Edit Tags</h5>
+            <button type="button" class="close" aria-label="Close" (click)="d('Cross click');closeTooltip();">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <div class="modal-body">
+            <div class="row h-420">
+                <div class="col-md-12">
+                    <app-annotate-text [inputData]="annotateData" (closePopup)="closePopup()" (saveData)="saveAnnotations($event)"></app-annotate-text>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</ng-template>
\ No newline at end of file

src/app/pages/landing/landing.component.spec.ts

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

src/app/pages/landing/landing.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
+import { NgxAnnotateTextComponent, Annotation } from 'ngx-annotate-text';
+import { Subject } from 'rxjs';
+import { ToastrService } from 'src/app/common-components/toastr/toastr.service';
+import { CommonServiceLayerService, RequestPayLoadFormat } from 'src/app/services/common-service-layer.service';
+import { SessionService } from 'src/app/services/session.service';
+import jsonData from "../../../assets/jsons/text.json";
+
+@Component({
+  selector: 'app-landing',
+  templateUrl: './landing.component.html',
+  styleUrls: ['./landing.component.scss']
+})
+export class LandingComponent implements OnInit {
+  public fileTableReloadSubject: Subject<boolean> = new Subject<boolean>();
+  public recordsTableReloadSubject: Subject<boolean> = new Subject<boolean>();
+
+  @ViewChild('editPopup') editPopup;
+
+  public tableSettings = { // table configs
+    entity: '',
+    tableActions: {
+      show: true,
+      actionButtons: [
+        {
+          class: 'action-info',
+          icon: 'fa fa-eye',
+          type: 'view',
+          text: '',
+          label: 'View',
+          title: 'View',
+          onlyText: false
+        },
+        {
+          class: 'action-info text-center',
+          icon: 'fa fa-trash',
+          type: 'delete',
+          label: 'Delete',
+          onlyText: false,
+          title: "Delete",
+        }
+      ]
+    },
+    columnSearch: {
+      show: false,
+      columnSearchToggle: false,
+      searchExceptions: []
+    },
+    clickableColumns: {
+      show: true,
+      list: ['table_name'],
+      class: 'clickable-element'
+    },
+    filters: {
+      filterTable: false,
+      showOnLoad: false,
+      filterOptions: [],
+      filterSelected: {
+      }
+    },
+    addNew: false,
+    addNewText: 'Import Data...',
+    headerButtons: {
+      show: false,
+      buttons: [
+        {
+          text: '<i aria-hidden="true" class="fa fa-upload"></i> Bulk Upload',
+          className: 'btn-new',
+          key: '3',
+          type: 'upload'
+        }
+      ]
+    },
+    emptyDataTemplate: {
+      show: false,
+      message: 'No Records available',
+      filterBtn: {
+        show: false,
+        label: 'Filter data'
+      }
+    },
+    stylings: {
+      bodyHeight: 'calc(100vh - 360px)'
+    },
+    pageLength: 10,
+    ordering: false
+  };
+  public tableData = {
+    headerContent: [],
+    bodyContent: [],
+    records_filtered: 0,
+    records_total: 0
+  };
+  public fileTableData = {
+    tableActions: {
+      actions: [
+        {
+          action: 'submit',
+          label: 'Submit',
+          type: 'submit',
+          onlyIcon: false,
+          class: 'action-info',
+          icon: 'fa-paper-plane',
+        },
+      ],
+      columnOptions: {
+        dataset_name: {
+          customColumnClass: 'medium-width',
+        },
+      },
+      enableActions: true,
+      itemsPerPage: {
+        top: false,
+      },
+      columnSearch: {
+        show: false,
+        enable: false,
+        searchExceptions: []
+      },
+      externalActions: [],
+      columnSort: {
+        enable: false,
+        sortExceptions: [],
+      },
+      paginationOptions: {
+        noOfItemsToDisplay: 10,
+        displayOptions: [],
+        show: false
+      },
+      showSerialNumber: false,
+      stylings: {
+        height: 'calc(100vh - 24rem)',
+      },
+      columnFilter: {
+        show: false,
+      },
+    },
+    tableData: {
+      bodyContent: [],
+      headerContent: [],
+    },
+    clickableColumns: {
+      show: true,
+      class: 'clickable-element',
+      list: ['file_name'],
+      iconList: ['file_name']
+    },
+  };
+  public tableListData = {
+    tableActions: {
+      actions: [
+        {
+          action: 'view',
+          label: 'View/ Edit',
+          type: 'view',
+          onlyIcon: true,
+          class: 'action-info',
+          icon: 'fa-eye',
+        },
+        {
+          action: 'delete',
+          label: 'Delete',
+          type: 'delete',
+          onlyIcon: true,
+          class: 'action-info',
+          icon: 'fa-trash',
+        },
+      ],
+      columnOptions: {
+        dataset_name: {
+          customColumnClass: 'medium-width',
+        },
+      },
+      enableActions: true,
+      itemsPerPage: {
+        top: false,
+      },
+      columnSearch: {
+        show: false,
+        enable: false,
+        searchExceptions: []
+      },
+      externalActions: [],
+      columnSort: {
+        enable: false,
+        sortExceptions: [],
+      },
+      paginationOptions: {
+        noOfItemsToDisplay: 10,
+        displayOptions: [],
+        show: false
+      },
+      showSerialNumber: false,
+      stylings: {
+        height: 'calc(100vh - 24rem)',
+      },
+      columnFilter: {
+        show: false,
+      },
+    },
+    tableData: {
+      bodyContent: [],
+      headerContent: [],
+    },
+    clickableColumns: {
+      show: true,
+      class: 'clickable-element',
+      list: ['table_name'],
+      iconList: ['table_name']
+    },
+  };
+  public showFileTable = true;
+  public showRecordsTable = false;
+  public selectedFileData;
+  public selectedRecordData;
+  public rowData;
+  public saveTableFilterData;
+  public modalOptions: NgbModalOptions = {
+    size: 'xl',
+    windowClass: 'standard-modal',
+    backdrop: 'static',
+    centered: true
+  };
+  public annotateData;
+  constructor(
+    private _toast: ToastrService,
+    private http: CommonServiceLayerService,
+    private modalService: NgbModal,
+    private session: SessionService
+  ) { }
+  ngOnInit() {
+    this.loadFileTableData({});
+  }
+  /**
+   *  Get file grid data - landing view
+   */
+  loadFileTableData(data, hideLoader?) {
+    try {
+      const input = {
+      };
+      const request: RequestPayLoadFormat = {
+        api: 'FILE_TABLE',
+        // method: 'post',
+        // type: 'API',
+        method: 'get',
+        type: 'JSON',
+        loader: true,
+        payLoad: data,
+        hideErrorMessage: false
+      };
+      if (hideLoader) {
+        request.loader = false;
+      }
+      this.http.API_REQUEST(request).subscribe((response) => {
+        if (response.status === 'SUCCESS' && response.data) {
+          this.fileTableData.tableData.headerContent = [];
+          this.fileTableData.tableData.bodyContent = [];
+          setTimeout(() => {
+            this.fileTableData.tableData.headerContent = response.data.header_content || [];
+            this.fileTableData.tableData.bodyContent = response.data.body_content || [];
+          }, 100);
+          // const tableData = {
+          //   headerContent: response.data.header_content,
+          //   bodyContent: response.data.body_content,
+          //   records_filtered: 0,
+          //   records_total: 0
+          // }
+          // this.tableData = tableData;
+          // this.tableData.records_filtered = response.data.total_records;
+          // this.tableData.records_total = response.data.total_records;
+        } else {
+          this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * Method to handle file grid actions.
+   */
+  fileTableEmitter(event) {
+    try {
+      if (!event || !event.action || !event.action.type) { return; }
+      this.selectedFileData = event.data;
+      switch (event.action.type) {
+        case 'fetchData':
+          this.loadFileTableData({});
+          break;
+        case 'submit':
+          this.submitAllRecords();
+          break;
+        case 'cellClick':
+          this.loadRecordsTableData(event.data);
+          this.showFileTable = false; this, this.showRecordsTable = true;
+          break;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Get Table-datatype grid data
+   */
+  loadRecordsTableData(data, hideLoader?) {
+    try {
+      const request: RequestPayLoadFormat = {
+        api: 'REQUEST_TABLE',
+        // method: 'post',
+        // type: 'API',
+        method: 'get',
+        type: 'JSON',
+        loader: true,
+        payLoad: data,
+        hideErrorMessage: false
+      };
+      if (hideLoader) {
+        request.loader = false;
+      }
+      this.tableListData.tableData.headerContent = [];
+      this.tableListData.tableData.bodyContent = [];
+      this.http.API_REQUEST(request).subscribe((response) => {
+        if (response.status === 'SUCCESS' && response.data) {
+          setTimeout(() => {
+            this.tableListData.tableData.headerContent = response.data.header_content || [];
+            this.tableListData.tableData.bodyContent = response.data.body_content || [];
+          }, 100);
+          // const tableData = {
+          //   headerContent: response.data.header_content,
+          //   bodyContent: response.data.body_content,
+          //   records_filtered: 0,
+          //   records_total: 0
+          // }
+          // this.tableData = tableData;
+          // this.tableData.records_filtered = response.data.total_records;
+          // this.tableData.records_total = response.data.total_records;
+        } else {
+          this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Method to handle Table grid actions.
+   */
+  recordsTableEmitter(event) {
+    try {
+      if (!event || !event.action || !event.action.type) { return; }
+      this.selectedRecordData = event.data;
+      switch (event.action.type) {
+        case 'fetchData':
+          this.loadRecordsTableData(this.selectedFileData);
+          break;
+        case 'cellClick':
+          this.getAnnotationsData(event.data);
+          break;
+        case 'view':
+          this.getAnnotationsData(event.data);
+          break;
+        case 'delete':
+          this.deleteRow(event.data)
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Method to delete file grid row.
+   */
+  deleteRow(data, hideLoader?) {
+    try {
+      let input = data;
+      input['file_id'] = this.selectedFileData.file_id;
+      input['file_name'] = this.selectedFileData.file_name;
+
+      const request: RequestPayLoadFormat = {
+        api: 'DELETE_ROW',
+        // method: 'post',
+        // type: 'API',
+        method: 'get',
+        type: 'JSON',
+        loader: true,
+        payLoad: input,
+        hideErrorMessage: false
+      };
+      if (hideLoader) {
+        request.loader = false;
+      }
+      this.http.API_REQUEST(request).subscribe((response) => {
+        if (response.status === 'SUCCESS' && response.data) {
+          this._toast.toast('success', 'Success', response.message || 'Deleted Successfully', true);
+          this.recordsTableReloadSubject.next(true);
+        } else {
+          this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Method to Get annotations, class details.
+   */
+  getAnnotationsData(data, hideLoader?) {
+    try {
+      let input = data;
+      input['file_id'] = this.selectedFileData.file_id;
+      input['file_name'] = this.selectedFileData.file_name;
+      const request: RequestPayLoadFormat = {
+        api: 'ANNOTATIONS_DATA',
+        // method: 'post',
+        // type: 'API',
+        method: 'get',
+        type: 'JSON',
+        loader: true,
+        payLoad: input,
+        hideErrorMessage: false
+      };
+      if (hideLoader) {
+        request.loader = false;
+      }
+      this.annotateData = [];
+      this.http.API_REQUEST(request).subscribe((response) => {
+        if (response.status === 'SUCCESS' && response.data) {
+          this.annotateData = response.data;
+          this.modalService.open(this.editPopup, this.modalOptions);
+        } else {
+          this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Method to Save annotations after editing.
+   */
+  saveAnnotations(e) {
+    // console.log(JSON.stringify(e));
+    let input = e;
+    input['default_tag'] = this.selectedRecordData.data_type;
+    input['table_name'] = this.selectedRecordData.table_name;
+    input['data_type'] = this.selectedRecordData.data_type;
+    input['file_id'] = this.selectedFileData.file_id;
+    input['file_name'] = this.selectedFileData.file_name;
+    try {
+      const request: RequestPayLoadFormat = {
+        api: 'SAVE_ANNOTATIONS',
+        // method: 'post',
+        // type: 'API',
+        method: 'get',
+        type: 'JSON',
+        loader: true,
+        payLoad: input,
+        hideErrorMessage: false
+      };
+      this.http.API_REQUEST(request).subscribe((response) => {
+        if (response.status === 'SUCCESS' && response.data) {
+          this._toast.toast('success', 'Success', response.message || 'Saved Successfully', true);
+          this.recordsTableReloadSubject.next(true);
+          this.closePopup();
+        } else {
+          this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  /**
+   * Method to Submit all tables at table grid level and file grid level.
+   */
+  submitAllRecords() {
+    try {
+      const request: RequestPayLoadFormat = {
+        api: 'SUBMIT_ALL_RECORDS',
+        // method: 'post',
+        // type: 'API',
+        method: 'get',
+        type: 'JSON',
+        loader: true,
+        payLoad: this.selectedFileData,
+        hideErrorMessage: false
+      };
+      this.http.API_REQUEST(request).subscribe((response) => {
+        if (response.status === 'SUCCESS' && response.data) {
+          this._toast.toast('success', 'Success', response.message || 'Submitted Successfully', true);
+          this.showFileTable = true; this, this.showRecordsTable = false;
+          // this.fileTableReloadSubject.next(true);
+          this.loadFileTableData({});
+        } else {
+          this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);
+        }
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  closeTooltip() {
+    setTimeout(() => {
+      const tooltipClose = document.getElementsByClassName('tooltip');
+      if (tooltipClose && tooltipClose.length > 0) {
+        tooltipClose[0].remove();
+      }
+    });
+  }
+  closePopup() {
+    try {
+      this.modalService.dismissAll();
+      this.closeTooltip();
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  /**
+  * @param val action performed on the table to add, edit, etc..
+  */
+  performAction(val) {
+    try {
+      if (!val || !val.action) { return; }
+      this.rowData = val.data;
+      val = JSON.parse(JSON.stringify(val));
+      switch (val.action) {
+        case 'fetchData':
+          const range: any = [];
+
+          const postJson = {
+            // filterSelected: val.filterSelected,
+            data_table_parameters: val.dataTableParameters
+          };
+          this.saveTableFilterData = postJson;
+          // this.loadTableData(this.saveTableFilterData, true);
+          break;
+        case 'delete':
+          // this.deleteRow(val.data)
+          break;
+        case 'cellEdit':
+          this.modalService.open(this.editPopup, this.modalOptions);
+          break;
+        case 'view':
+          this.modalService.open(this.editPopup, this.modalOptions);
+          break;
+        case 'addNew':
+          console.log('hi');
+
+          break;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+}

src/app/pages/pages-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LandingComponent } from './landing/landing.component';
+import { PagesComponent } from './pages.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'landing',
+    pathMatch: 'full'
+  },
+  {
+    path: 'landing',
+    component: LandingComponent
+  },
+  {
+    path: '',
+    component: PagesComponent,
+    children: [
+      {
+        path: 'landing',
+        component: LandingComponent
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PagesRoutingModule { }

src/app/pages/pages.component.html

+<div>
+    <router-outlet></router-outlet>
+</div>
\ No newline at end of file

src/app/pages/pages.component.spec.ts

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

src/app/pages/pages.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pages',
+  templateUrl: './pages.component.html',
+  styleUrls: ['./pages.component.scss']
+})
+export class PagesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/pages.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+
+import { PagesRoutingModule } from './pages-routing.module';
+import { LandingComponent } from './landing/landing.component';
+import { PagesComponent } from './pages.component';
+import { NgxAnnotateTextModule } from "ngx-annotate-text";
+import { CommonComponentsModule } from '../common-components/common-components.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ToasterModule, ToasterService } from 'angular2-toaster';
+
+
+@NgModule({
+  declarations: [
+    PagesComponent,
+    LandingComponent
+  ],
+  imports: [
+    CommonModule,
+    PagesRoutingModule,
+    NgxAnnotateTextModule,
+    NgbModule,
+    CommonComponentsModule,
+    ToasterModule
+  ],
+  providers: [DatePipe, ToasterService]
+})
+export class PagesModule { }

src/app/services/common-service-layer.service.ts

+import { Injectable } from '@angular/core';
+import { Config } from './config';
+import { HttpLayerService } from './http-layer.service';
+import { SharedService } from './shared.service';
+import { EMPTY, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { environment } from '../../environments/environment';
+import { ToastrService } from '../common-components/toastr/toastr.service';
+
+/**
+ * api: string species the API
+ * payload: the requested data to the api
+ * method: method of the API request
+ * loader: to display loader
+ * type: whether local json or actually api
+ * hideErrorMessage: to display error message
+ */
+export class RequestPayLoadFormat {
+  api: string;
+  payLoad?: object;
+  method: 'post' | 'get' | 'postText' | 'postFile' | 'postDownload';
+  loader?: boolean;
+  type: 'API' | 'JSON';
+  hideErrorMessage?: boolean;
+  options?: object;
+  params?: object;
+  formData?: any;
+  loadURL?: any
+
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommonServiceLayerService {
+  public sidebarData: any;
+  constructor(
+    private http: HttpLayerService,
+    private router: Router,
+    public sharedService: SharedService,
+    private _toast: ToastrService,
+  ) {
+  }
+
+  API_REQUEST(request: RequestPayLoadFormat): Observable<any> {
+    try {
+      // console.log('request: ', request);
+      const URL = request.loadURL ? request.loadURL : Config[request.type][request.api];
+      return this.http[request.method](URL, request).pipe(map((res: any) => {
+        if (res.status === 401) {
+          this._toast.toast('error', environment.sessionInvalidMessage, res.statusText, true);
+          // const alertConf: AlertConfig = { type: 'error', title: environment.sessionInvalidMessage, body: res.statusText };
+          // this.alert.open(alertConf);
+          this.logOut();
+        } else {
+          // console.log(res.headers.get('set-cookie'));
+          return res;
+        }
+      }));
+    } catch (error) {
+      this.sharedService.internalCodeError();
+      return EMPTY;
+    }
+  }
+  public logOut() {
+
+    localStorage.clear();
+    sessionStorage.clear();
+    this.router.navigate(['p/login']);
+  }
+  // tslint:disable-next-line:typedef
+  checkRoute() {
+    try {
+      if (!this.sidebarData) {
+        return;
+      }
+      setTimeout(() => {
+        const url = window.location.hash.replace('#', '');
+        if (!this.checkUrl(url, this.sidebarData) && url !== '/login') {
+          this.router.navigate(['/landing/not-found']);
+          // this.http.logOut();
+          return false;
+        }
+        return true;
+      }, 100);
+    } catch (error) {
+      return;
+      console.log(error);
+
+    }
+  }
+
+  // tslint:disable:typedef
+  checkUrl(url, sidebar) {
+    try {
+      const urlArray = url.split('/');
+      if (urlArray.length < 3 && urlArray[1] === 'landing') {
+        return true;
+      }
+      for (const item in sidebar) {
+        if (sidebar[item].subMenu && sidebar[item].subMenu.length) {
+          // tslint:disable-next-line: forin
+          for (const value in sidebar[item].subMenu) {
+            if (sidebar[item].subMenu && sidebar[item].subMenu.length) {
+              // tslint:disable-next-line: forin
+              for (const subSubValue in sidebar[item].subMenu[value].subMenu) {
+                if (sidebar[item].subMenu[value].subMenu && sidebar[item].subMenu[value].subMenu.length) {
+                  if (sidebar[item].subMenu[value].subMenu[subSubValue].route === url) {
+                    return true;
+                  }
+                }
+              }
+            } else {
+              if (sidebar[item].subMenu[value].route === url) {
+                return true;
+              }
+            }
+          }
+        } else {
+          return false;
+        }
+      }
+      return false;
+    } catch (error) {
+      console.log(error);
+      return false;
+    }
+  }
+}

src/app/services/config.ts

+import APP_CONSTANTS from '../../assets/jsons/app-constants.json';
+const config = '';
+// const config = 'config/';
+// tslint:disable:whitespace
+
+const domain = window.location.href.split('#')[0].split('://')[0];
+const mainUrl = window.location.href;
+const baseUrl = mainUrl.split('#');
+const hostDomain = window.location.host;
+
+export class Config {
+  /**
+   * Production Base Points
+   */
+  public static get BASE_POINT_API(): string { return APP_CONSTANTS.BASE_POINT_API_URL; }
+  // public static get BASE_POINT_API(): string { return '' }
+  // public static get GRAPH_QL_API(): string { return APP_CONSTANTS.GRAPH_QL_API; }
+  public static get BASE_POINT_JSON(): string { return 'assets/jsons/'; }
+
+  // tslint:disable: prefer-template
+  public static API: any = {
+    FILE_TABLE: Config.BASE_POINT_API + 'get_file_grid', // file grid 
+    SUBMIT_ALL_RECORDS: Config.BASE_POINT_API + 'submit_file_grid', // Submit all table-datatypes in whole 
+    REQUEST_TABLE: Config.BASE_POINT_API + 'get_table_data', // table-datatypes grid
+    DELETE_ROW: Config.BASE_POINT_API + 'delete_file_details', // delete from table-datatypes grid
+    ANNOTATIONS_DATA: Config.BASE_POINT_API + 'get_annotation_details', 
+    TAGS_LIST: Config.BASE_POINT_API + 'fetch_tags', // get tags dropdown options
+    SAVE_ANNOTATIONS: Config.BASE_POINT_API + 'save_tags', // save the edited annotations on popup
+  };
+
+  // Json Base Points
+  public static JSON: any = {
+    FILE_TABLE: Config.BASE_POINT_JSON + 'fileTable.json',
+    SUBMIT_ALL_RECORDS: Config.BASE_POINT_JSON + 'fileTable.json',
+    REQUEST_TABLE: Config.BASE_POINT_JSON + 'requestTable.json',
+    ANNOTATIONS_DATA: Config.BASE_POINT_JSON + 'text.json',
+    DELETE_ROW: Config.BASE_POINT_JSON + 'text.json',
+    TAGS_LIST: Config.BASE_POINT_JSON + 'tagsList.json',
+    SAVE_ANNOTATIONS: Config.BASE_POINT_JSON + 'text.json'
+  };
+
+  // SESSION RELATED CONSTANTS
+  public static get SESSION_STATUS(): string { return 'sessionLoaded'; }
+  public static get SESSION_TOKEN(): string { return 'sso_code'; }
+  public static get ACCESS_TOKEN(): string { return 'access_token'; }
+  public static get ID_TOKEN(): string { return 'id_token'; }
+  public static get REFRESH_TOKEN(): string { return 'refresh_token'; }
+  public static get USER_IDENTIFIER(): string { return 'UserId'; }
+  public static get USER_ROLE(): string { return 'userRole'; }
+  public static get NAME(): string { return 'name'; }
+  public static get LOGIN_STATUS(): string { return 'IsLoggedin'; }
+  public static get USER_DETAILS(): string { return 'userDetails'; }
+  public static get SESSION_USER_NAME(): string { return 'UserName'; }
+  public static get PAGE_ID(): string { return 'pageId'; }
+  public static get LANGUAGE(): string { return 'language'; }
+  public static get ROLE_OBJ(): string { return 'role_id'; }
+  public static get DEFAULT_ACCOUNT_ID(): string { return 'account_id'; }
+  public static get IS_APPROVER(): string { return 'is_approver'; }
+  public static get GEOGRAPHY_ID(): string { return 'geography_id'; }
+  public static get APPRVAL_REQUEST_ACCESS(): string { return 'approval_request_access'; }
+  public static get DOMAIN_ID(): string { return 'domain_id'; }
+  public static get DOMAIN_NAME(): string { return 'domain_name'; }
+  public static get ROLE_TYPE_ID(): string { return 'role_type_id'; }
+  public static get ROLE_TYPE_NAME(): string { return 'role_type_name'; }
+  public static get IS_PREVIEW_INPROGRESS(): string { return 'is_preview_inprogress'; }
+  public static get PREVIEW_SERVICE_SUCCESS(): string { return 'preview_service_success'; }
+  public static get PREVIEW_DATA(): string { return 'preview_data'; }
+  
+  // Keys we need to use accross application. For logics and etc
+  public static CONSTANTS: any = {
+    STORAGE: {
+      USER_ID: 'user_id',
+      USER_NAME: 'user_name',
+      USER_ROLE: 'user_role',
+      USER_TYPE: 'user_type',
+      USER_DETAILS: 'userDetails',
+    },
+  };
+
+  // Version number
+  // public static VERSION_NUMBER = APP_CONSTANTS.VERSION;
+
+}

src/app/services/http-interceptors.ts

+import { Injectable } from '@angular/core';
+import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+@Injectable()
+export class HttpRequestInterceptor implements HttpInterceptor {
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+    return next.handle(request);
+  }
+}

src/app/services/http-layer.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { Observable, EMPTY, throwError } from 'rxjs';
+import * as crypto from 'crypto-js';
+import { catchError, map, finalize } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { SharedService } from './shared.service';
+// import { AlertService } from './shared-alert.service';
+import { RequestPayLoadFormat } from './common-service-layer.service';
+import { Config } from './config';
+import { SessionService } from './session.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { LoaderServiceService } from '../common-components/loader/loader-service.service';
+import { ToastrService } from '../common-components/toastr/toastr.service';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class HttpLayerService {
+    public currentRequest;
+    private monitoring = {
+        pendingRequestsNumber: 0
+    };
+    public currentDomain: any = window.location.hostname;
+
+
+    public httpOptions = {
+        headers: new HttpHeaders({
+            'Content-Type': 'application/json'
+        })
+    };
+
+    constructor(
+        private http: HttpClient,
+        private router: Router,
+        private loaderService: LoaderServiceService,
+        private sharedService: SharedService,
+        private _toast: ToastrService,
+        // private sessionService: SessionHandlerService,
+        // private alert: AlertService,
+        private session: SessionService,
+        private modalService: NgbModal
+    ) {
+    }
+    public AESencrypt(value: string, key: string): string {
+        return crypto.AES.encrypt(value, key);
+    }
+
+    public AESdecrypt(textToDecrypt: string, key: string) {
+        return crypto.AES.decrypt(textToDecrypt, key);
+    }
+
+    // tslint:disable:typedef
+    get(url, request: RequestPayLoadFormat): Observable<any> {
+        try {
+            if (request.loader) {
+                this.showLoader();
+            }
+            const headerJson = {
+                Accept: 'application/json',
+            };
+            const headerOptions = { headers: new HttpHeaders(headerJson) };
+            return this.handleResponse(this.http.get(
+                url, headerOptions), request, url).pipe(finalize(() => {
+                }));
+        } catch (error) {
+            console.log(error);
+            return EMPTY;
+        }
+    }
+
+    post(url, request: RequestPayLoadFormat): Observable<any> {
+        request = JSON.parse(JSON.stringify(request));
+        this.currentRequest = request;
+        try {
+            if (request.loader) {
+                this.showLoader();
+            }
+            if (request.api === 'REFRESH_SESSION') {
+                this.session.api.session.save('refresh', true);
+            }
+            if (!request.payLoad) {
+                request.payLoad = {};
+            }
+            let headerJson: any = request.options ? request.options : {
+                'Content-Type': 'application/json'
+            };
+            // let temp = this.getUserInfo();
+            headerJson = { ...headerJson, ...this.getUserInfo() }
+            // if (this.session.api.local.get(Config.ID_TOKEN)) {
+            //     headerJson.idtoken = this.session.api.local.get(Config.ID_TOKEN);
+            // }
+            // if (this.session.api.local.get(Config.ACCESS_TOKEN)) {
+            //     headerJson.accesstoken = this.session.api.local.get(Config.ACCESS_TOKEN);
+            // }
+            // if (this.session.api.local.get(Config.USER_IDENTIFIER)) {
+            //     headerJson.userid = this.session.api.local.get(Config.USER_IDENTIFIER);
+            // }
+            // if (this.session.api.local.get(Config.USER_ROLE)) {
+            //     headerJson.roleid = this.session.api.local.get(Config.USER_ROLE);
+            // }
+            // if (this.session.api.local.get(Config.PAGE_ID)) {
+            //     headerJson.pageid = this.session.api.local.get(Config.PAGE_ID);
+            // }
+            headerJson.requestStartTime = String(new Date().getTime() / 1000);
+            const headersConfig = new HttpHeaders(headerJson);
+            const paramsConfig = request.params ?
+                new HttpParams({ fromObject: JSON.parse(JSON.stringify(request.params)) }) : undefined;
+            const requestOptions = {
+                headers: headersConfig,
+                params: paramsConfig
+            };
+            const body = request.payLoad;
+            return this.handleResponse(this.http.post(
+                url, body, requestOptions), request, url).pipe(finalize(() => {
+                }));
+        } catch (error) {
+            console.log(error);
+            return EMPTY;
+        }
+    }
+
+    postDownload(url, request: RequestPayLoadFormat): Observable<any> {
+        request = JSON.parse(JSON.stringify(request));
+        this.currentRequest = request;
+        try {
+            if (request.loader) {
+                this.showLoader();
+            }
+            if (!request.payLoad) {
+                request.payLoad = {};
+            }
+            let headerJson: any = request.options ? request.options : {
+                'Content-Type': 'application/json',
+                'Accept': 'text/html, application/xhtml+xml, /',
+            };
+            headerJson = { ...headerJson, ...this.getUserInfo() }
+            // if (this.session.api.local.get(Config.ID_TOKEN)) {
+            //     headerJson.idtoken = this.session.api.local.get(Config.ID_TOKEN);
+            // }
+            // if (this.session.api.local.get(Config.ACCESS_TOKEN)) {
+            //     headerJson.accesstoken = this.session.api.local.get(Config.ACCESS_TOKEN);
+            // }
+            // if (this.session.api.local.get(Config.USER_IDENTIFIER)) {
+            //     headerJson.userid = this.session.api.local.get(Config.USER_IDENTIFIER);
+            // }
+            // if (this.session.api.local.get(Config.USER_ROLE)) {
+            //     headerJson.roleid = this.session.api.local.get(Config.USER_ROLE);
+            // }
+            // if (this.session.api.local.get(Config.PAGE_ID)) {
+            //     headerJson.pageid = this.session.api.local.get(Config.PAGE_ID);
+            // }
+            headerJson.requestStartTime = String(new Date().getTime() / 1000);
+            const headersConfig = new HttpHeaders(headerJson);
+            const paramsConfig = request.params ?
+                new HttpParams({ fromObject: JSON.parse(JSON.stringify(request.params)) }) : undefined;
+            const requestOptions = {
+                headers: headersConfig,
+                // params: paramsConfig,
+                responseType: 'arraybuffer' as 'json'
+            };
+            const body = request.payLoad;
+            return this.handleResponse(this.http.post(
+                url, body, requestOptions), request, url).pipe(finalize(() => {
+                }));
+        } catch (error) {
+            console.log(error);
+            return EMPTY;
+        }
+    }
+
+    postText(url, request: RequestPayLoadFormat): Observable<any> {
+        request = JSON.parse(JSON.stringify(request));
+        try {
+            if (request.loader) {
+                this.showLoader();
+            }
+            const headerJson: any = request.options ? request.options : {
+                'Content-Type': 'text/plain',
+            };
+            const headersConfig = new HttpHeaders(headerJson);
+            const requestOptions: any = { headersConfig, responseType: 'text' };
+            const userDetails = this.getUserDetails();
+            request.payLoad = Object.assign(userDetails, request.payLoad);
+            const body = JSON.stringify(request.payLoad);
+            return this.handleResponse(this.http.post(
+                url, body, requestOptions).pipe(map((res: any) => {
+                    res = JSON.parse(res);
+                    return res;
+                })), request, url
+            ).pipe(finalize(() => {
+            }));
+        } catch (error) {
+            console.log(error);
+            return EMPTY;
+        }
+    }
+
+    postFile(url, request: RequestPayLoadFormat): Observable<any> {
+        /**
+         * With header 'Content-Type': 'multipart/form-data' file was not getting in BE
+         */
+        // const headerJson = {
+        //     Accept: 'application/json',
+        // };
+        let headerJson: any = request.options ? request.options : {
+            Accept: 'application/json'
+        };
+        headerJson = { ...headerJson, ...this.getUserInfo() }
+        // if (this.session.api.local.get(Config.ID_TOKEN)) {
+        //     headerJson.idtoken = this.session.api.local.get(Config.ID_TOKEN);
+        // }
+        // if (this.session.api.local.get(Config.ACCESS_TOKEN)) {
+        //     headerJson.accesstoken = this.session.api.local.get(Config.ACCESS_TOKEN);
+        // }
+        // if (this.session.api.local.get(Config.USER_IDENTIFIER)) {
+        //     headerJson.userid = this.session.api.local.get(Config.USER_IDENTIFIER);
+        // }
+        // if (this.session.api.local.get(Config.USER_ROLE)) {
+        //     headerJson.roleid = this.session.api.local.get(Config.USER_ROLE);
+        // }
+        // if (this.session.api.local.get(Config.PAGE_ID)) {
+        //     headerJson.pageid = this.session.api.local.get(Config.PAGE_ID);
+        // }
+        // const headersConfig = new HttpHeaders(headerJson);
+        // const paramsConfig = request.params ?
+        //     new HttpParams({ fromObject: JSON.parse(JSON.stringify(request.params)) }) : undefined;
+        // const requestOptions = {
+        //     headers: headersConfig,
+        //     params: paramsConfig
+        // };
+        const headerOptions = { headers: new HttpHeaders(headerJson) };
+        try {
+            if (request.loader) {
+                this.showLoader();
+            }
+            if (request.payLoad) {
+                request.formData.set('metaData', JSON.stringify(request.payLoad));
+            }
+            request.formData.set('userName', localStorage.getItem('userName'));
+            request.formData.set('userId', localStorage.getItem('userId'));
+            return this.handleResponse(this.http.post(
+                url, request.formData, headerOptions), request, url).pipe(finalize(() => {
+                }));
+        } catch (error) {
+            console.log(error);
+            return EMPTY;
+            // throw 500;
+        }
+    }
+
+    getUserInfo() {
+        try {
+            let headerJson: any = {}
+            if (this.session.api.local.get(Config.ID_TOKEN)) {
+                headerJson.idtoken = this.session.api.local.get(Config.ID_TOKEN);
+            } else {
+                headerJson.idtoken = 'test';
+            }
+            if (this.session.api.local.get(Config.ACCESS_TOKEN)) {
+                headerJson.accesstoken = this.session.api.local.get(Config.ACCESS_TOKEN);
+            } else {
+                headerJson.accesstoken = 'test';
+            }
+            if (this.session.api.local.get(Config.USER_IDENTIFIER)) {
+                headerJson.userid = this.session.api.local.get(Config.USER_IDENTIFIER);
+            }
+            if (this.session.api.local.get(Config.USER_ROLE)) {
+                headerJson.roleid = this.session.api.local.get(Config.USER_ROLE);
+            }
+            if (this.session.api.local.get(Config.PAGE_ID)) {
+                headerJson.pageid = this.session.api.local.get(Config.PAGE_ID);
+            }
+            return headerJson;
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    getUserDetails() {
+        try {
+            return {
+                userName: localStorage.getItem('userName'),
+                userRole: localStorage.getItem('userRole'),
+                userId: localStorage.getItem('userId'),
+            };
+        } catch (error) {
+            console.log(error);
+            return {};
+        }
+    }
+
+    getUseruserCredentialData() {
+        try {
+            return {
+                userData: localStorage.getItem('userData'),
+            };
+        } catch (error) {
+            console.log(error);
+            return {};
+        }
+    }
+
+
+
+    handleResponse(observable: Observable<any>, request?, url?): Observable<any> {
+        try {
+            return observable.pipe(catchError((err) => {
+                if (err.status === 401) {
+                    console.log(url, request);
+                    console.log(this.session.api.session.get('refresh'));
+                    if (this.session.api.session.get('refresh')) {
+                        if (request.loader) {
+                            this.hideLoader();
+                        }
+                        setTimeout(() => {
+                           // window.location.reload();
+                        }, 1000);
+
+                    } else {
+                        if (request.loader) {
+                            this._toast.toast('error', '', environment.sessionInvalidMessage, true);
+                            // this._toast.toast('error', environment.sessionInvalidMessage,   err.error.detail || err.message, true);
+                            // const alertConf: AlertConfig = { type: 'error', title: environment.sessionInvalidMessage, body: err.message };
+                            // this.alert.open(alertConf);
+                        }
+                        setTimeout(() => {
+                            this.logOut();
+                        }, 1000);
+                    }
+                } else {
+                    if (request.loader) {
+                        this.sharedService.handleHttpErrorResponse(err);
+                    }
+                }
+                // tslint:disable-next-line: deprecation
+                return throwError(err);
+            })).pipe(finalize(() => {
+                const d1 = new Date();
+                Config.CONSTANTS.LAST_API_CALL_TIME = d1.getTime();
+                if (request.api) {
+                    this.session.api.session.save(request.api + Math.random(), d1.getTime() / 1000);
+                }
+                if (request.api && request.api === 'REFRESH_SESSION') {
+                    setTimeout(() => {
+                        this.session.api.session.remove('refresh');
+                    }, 10000);
+                }
+                if (request.loader) {
+                    this.hideLoader();
+                }
+            }));
+        } catch (e) {
+            console.log(e);
+            return EMPTY;
+        }
+    }
+
+    public logOut() {
+        localStorage.clear();
+        sessionStorage.clear();
+        document.cookie = null;
+        this.modalService.dismissAll();
+        this.router.navigate(['p/login']);
+    }
+
+    public handleError(error: any) {
+        const errMsg = (error.message) ? error.message :
+            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
+        // tslint:disable-next-line: deprecation
+        return throwError(() => new Error('errMsg'));
+    }
+
+    private showLoader(): void {
+        this.monitoring.pendingRequestsNumber++;
+        this.loaderService.show();
+    }
+
+    private hideLoader(): void {
+        this.monitoring.pendingRequestsNumber--;
+        if (this.monitoring.pendingRequestsNumber <= 0) {
+            this.loaderService.hide();
+        }
+    }
+}

src/app/services/session.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SessionService {
+
+  constructor() { }
+
+  // tslint:disable: function-name
+  private _getLocal(key: string) {
+    let data: any = localStorage.getItem(key);
+    if (data) {
+      return JSON.parse(data);
+    }
+    return data;
+  }
+  private _saveLocal(key: string, value: any) {
+    return localStorage.setItem(key, JSON.stringify(value));
+  }
+  private _removeLocal(key: string) {
+    return localStorage.removeItem(key);
+  }
+  private _clearLocal() {
+    return localStorage.clear();
+  }
+  private _getSession(key: string) {
+    let data: any;
+    try {
+      let data1: any = sessionStorage.getItem(key);
+      data = JSON.parse(data1);
+    } catch (e) {
+      data = sessionStorage.getItem(key);
+    }
+    return data;
+  }
+  private _saveSession(key: string, value: any) {
+    return sessionStorage.setItem(key, JSON.stringify(value));
+  }
+  private _removeSession(key: string) {
+    return sessionStorage.removeItem(key);
+  }
+  private _clearSession() {
+    return sessionStorage.clear();
+  }
+  // tslint:disable-next-line:member-ordering
+  public api = {
+    local: {
+      get: this._getLocal,
+      save: this._saveLocal,
+      remove: this._removeLocal,
+      clear: this._clearLocal
+    },
+    session: {
+      get: this._getSession,
+      save: this._saveSession,
+      remove: this._removeSession,
+      clear: this._clearSession
+    }
+  };
+}
+

src/app/services/shared.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { environment } from '../../environments/environment';
+// import { ToastrService } from '../components/toastr/toastr.service';
+import * as CryptoJS from 'crypto-js';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SharedService {
+
+  constructor(
+    // private _toast: ToastrService,
+  ) { }
+
+  // tslint:disable-next-line:typedef
+  public currentLang = new Subject<string>();
+  public handleHttpErrorResponse(err) {
+    let errorCode = '';
+    let noApiFlag = false;
+    if (err && err.url) {
+      const apiEndPointPath = err.url;
+      if (apiEndPointPath) {
+        const array = apiEndPointPath.split('/');
+        if (array.length > 0) {
+          const endpoint = array[array.length - 1];
+          errorCode += `: ${endpoint.toUpperCase()}`;
+        } else {
+          noApiFlag = true;
+        }
+      } else {
+        noApiFlag = true;
+      }
+    } else {
+      noApiFlag = true;
+    }
+    if (noApiFlag) {
+      errorCode = '';
+    }
+    this.serviceErrorMessage(environment.serviceUnavailableMessage + errorCode);
+  }
+
+  // tslint:disable-next-line:typedef
+  public serviceErrorMessage(message?) {
+    console.log("Service Error: ",message);
+    // this._toast.toast('error', 'Failed', message, true);
+    // const alertConf: AlertConfig = { type: 'error', title: 'Failed', body: message };
+    // this.alert.open(alertConf);
+  }
+  // tslint:disable-next-line:typedef
+  public internalCodeError(message?) {
+    console.log("Internal code Error: ",message);
+
+    // this._toast.toast('error', 'Failed', message.error || 'Internal code error', true);
+    // const alertConf: AlertConfig = {
+    //   type: 'error', title: 'Failed', body: message.error || 'Internal code error'
+    // };
+    // this.alert.open(alertConf);
+  }
+
+  public AESencrypt(value: string, key: string): string {
+    try {
+
+      return CryptoJS.AES.encrypt(value, key);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  public AESdecrypt(textToDecrypt: string, key: string) {
+    try {
+      key = CryptoJS.enc.Utf8.parse(key);
+      
+    const ciphertext = CryptoJS.enc.Base64.parse(textToDecrypt);
+    // split IV and ciphertext
+    const iv = ciphertext.clone();
+    iv.sigBytes = 16;
+    iv.clamp();
+    ciphertext.words.splice(0, 4); // delete 4 words = 16 bytes
+    ciphertext.sigBytes -= 16;
+
+    // decryption
+    const decrypted = CryptoJS.AES.decrypt({ ciphertext }, key, {
+      iv,
+    });
+    const decryptedString = decrypted.toString(CryptoJS.enc.Utf8);
+    return decryptedString;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  getDisabledStatus(cls) {
+    if ($('.' + cls).length > 0) {
+      $('.' + cls)[0].focus();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  getCurrentLang() {
+    return this.currentLang;
+  }
+
+  setCurrentLang(lang) {
+    this.currentLang.next(lang);
+  }
+}

src/assets/fonts/Roboto/LICENSE.txt

+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   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
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

src/assets/fonts/open-iconic.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" >
+<!--
+2014-7-1: Created.
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20120731 at Tue Jul  1 20:39:22 2014
+ By P.J. Onori
+Created by P.J. Onori with FontForge 2.0 (http://fontforge.sf.net)
+</metadata>
+<defs>
+<font id="open-iconic" horiz-adv-x="800" >
+  <font-face 
+    font-family="Icons"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="800"
+    panose-1="2 0 5 3 0 0 0 0 0 0"
+    ascent="800"
+    descent="0"
+    bbox="-0.5 -101 802 800.126"
+    underline-thickness="50"
+    underline-position="-100"
+    unicode-range="U+E000-E0DE"
+  />
+    <missing-glyph />
+    <glyph glyph-name="" unicode="&#xe000;" 
+d="M300 700h500v-700h-500v100h400v500h-400v100zM400 500l200 -150l-200 -150v100h-400v100h400v100z" />
+    <glyph glyph-name="1" unicode="&#xe001;" 
+d="M300 700h500v-700h-500v100h400v500h-400v100zM200 500v-100h400v-100h-400v-100l-200 150z" />
+    <glyph glyph-name="2" unicode="&#xe002;" 
+d="M350 700c193 0 350 -157 350 -350v-50h100l-200 -200l-200 200h100v50c0 138 -112 250 -250 250s-250 -112 -250 -250c0 193 157 350 350 350z" />
+    <glyph glyph-name="3" unicode="&#xe003;" 
+d="M450 700c193 0 350 -157 350 -350c0 138 -112 250 -250 250s-250 -112 -250 -250v-50h100l-200 -200l-200 200h100v50c0 193 157 350 350 350z" />
+    <glyph glyph-name="4" unicode="&#xe004;" 
+d="M0 700h800v-100h-800v100zM100 500h600v-100h-600v100zM0 300h800v-100h-800v100zM100 100h600v-100h-600v100z" />
+    <glyph glyph-name="5" unicode="&#xe005;" 
+d="M0 700h800v-100h-800v100zM0 500h600v-100h-600v100zM0 300h800v-100h-800v100zM0 100h600v-100h-600v100z" />
+    <glyph glyph-name="6" unicode="&#xe006;" 
+d="M0 700h800v-100h-800v100zM200 500h600v-100h-600v100zM0 300h800v-100h-800v100zM200 100h600v-100h-600v100z" />
+    <glyph glyph-name="7" unicode="&#xe007;" 
+d="M400 700c75 0 146 -23 206 -59l-75 -225l-322 234c57 31 122 50 191 50zM125 588l191 -138l-310 -222c-4 24 -6 47 -6 72c0 114 49 215 125 288zM688 575c69 -72 112 -168 112 -275c0 -35 -8 -68 -16 -100h-218zM216 253l112 -347c-128 23 -232 109 -287 222zM372 100
+h372c-64 -109 -177 -185 -310 -197z" />
+    <glyph glyph-name="8" unicode="&#xe008;" horiz-adv-x="600" 
+d="M200 800h100v-500h200l-247 -300l-253 300h200v500z" />
+    <glyph glyph-name="9" unicode="&#xe009;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM300 700v-300h-200l300 -300l300 300h-200v300h-200z" />
+    <glyph glyph-name="a" unicode="&#xe00a;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM400 700l-300 -300l300 -300v200h300v200h-300v200z" />
+    <glyph glyph-name="b" unicode="&#xe00b;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM400 700v-200h-300v-200h300v-200l300 300z" />
+    <glyph glyph-name="c" unicode="&#xe00c;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM400 700l-300 -300h200v-300h200v300h200z" />
+    <glyph glyph-name="d" unicode="&#xe00d;" 
+d="M300 600v-200h500v-100h-500v-200l-300 247z" />
+    <glyph glyph-name="e" unicode="&#xe00e;" 
+d="M500 600l300 -247l-300 -253v200h-500v100h500v200z" />
+    <glyph glyph-name="f" unicode="&#xe00f;" horiz-adv-x="600" 
+d="M200 800h200v-500h200l-297 -300l-303 300h200v500z" />
+    <glyph glyph-name="10" unicode="&#xe010;" 
+d="M300 700v-200h500v-200h-500v-200l-300 297z" />
+    <glyph glyph-name="11" unicode="&#xe011;" 
+d="M500 700l300 -297l-300 -303v200h-500v200h500v200z" />
+    <glyph glyph-name="12" unicode="&#xe012;" horiz-adv-x="600" 
+d="M297 800l303 -300h-200v-500h-200v500h-200z" />
+    <glyph glyph-name="13" unicode="&#xe013;" horiz-adv-x="600" 
+d="M247 800l253 -300h-200v-500h-100v500h-200z" />
+    <glyph glyph-name="14" unicode="&#xe014;" 
+d="M400 800h100v-800h-100v800zM200 700h100v-600h-100v600zM600 600h100v-400h-100v400zM0 500h100v-200h-100v200z" />
+    <glyph glyph-name="15" unicode="&#xe015;" 
+d="M116 600l72 -72c-54 -54 -88 -126 -88 -209s34 -159 88 -213l-72 -72c-72 72 -116 175 -116 285s44 209 116 281zM684 600c72 -72 116 -171 116 -281s-44 -213 -116 -285l-72 72c54 54 88 130 88 213s-34 155 -88 209zM259 460l69 -72c-18 -18 -28 -41 -28 -69
+s10 -54 28 -72l-69 -72c-36 36 -59 89 -59 144s23 105 59 141zM541 459c36 -36 59 -85 59 -140s-23 -108 -59 -144l-69 72c18 18 28 44 28 72s-10 51 -28 69z" />
+    <glyph glyph-name="16" unicode="&#xe016;" horiz-adv-x="400" 
+d="M200 800c110 0 200 -90 200 -200s-90 -200 -200 -200s-200 90 -200 200s90 200 200 200zM100 319c31 -11 65 -19 100 -19s68 8 100 19v-319l-100 100l-100 -100v319z" />
+    <glyph glyph-name="17" unicode="&#xe017;" 
+d="M400 800c220 0 400 -180 400 -400s-180 -400 -400 -400s-400 180 -400 400s180 400 400 400zM400 700c-166 0 -300 -134 -300 -300c0 -66 21 -126 56 -175l419 419c-49 35 -109 56 -175 56zM644 575l-419 -419c49 -35 109 -56 175 -56c166 0 300 134 300 300
+c0 66 -21 126 -56 175z" />
+    <glyph glyph-name="18" unicode="&#xe018;" 
+d="M0 700h100v-600h700v-100h-800v700zM500 700h200v-500h-200v500zM200 500h200v-300h-200v300z" />
+    <glyph glyph-name="19" unicode="&#xe019;" 
+d="M397 800c13 1 23 -4 34 -13c2 -2 214 -254 241 -287h128v-100h-100v-366c0 -18 -16 -34 -34 -34h-532c-18 0 -34 16 -34 34v366h-100v100h128l234 281c9 11 22 18 35 19zM400 672l-144 -172h288zM250 300c-28 0 -50 -22 -50 -50v-100c0 -28 22 -50 50 -50s50 22 50 50
+v100c0 28 -22 50 -50 50zM550 300c-28 0 -50 -22 -50 -50v-100c0 -28 22 -50 50 -50s50 22 50 50v100c0 28 -22 50 -50 50z" />
+    <glyph glyph-name="1a" unicode="&#xe01a;" 
+d="M9 700h682c6 0 9 -4 9 -10v-190h100v-200h-100v-191c0 -6 -3 -9 -9 -9h-682c-6 0 -9 3 -9 9v582c0 6 3 9 9 9zM100 600v-400h500v400h-500z" />
+    <glyph glyph-name="1b" unicode="&#xe01b;" 
+d="M9 700h682c6 0 9 -4 9 -10v-190h100v-200h-100v-191c0 -6 -3 -9 -9 -9h-682c-6 0 -9 3 -9 9v582c0 6 3 9 9 9z" />
+    <glyph glyph-name="1c" unicode="&#xe01c;" 
+d="M92 650c0 23 19 50 45 50h3h5h5h500c28 0 50 -22 50 -50s-22 -50 -50 -50h-50v-141c9 -17 120 -231 166 -309c16 -26 34 -61 34 -106c0 -39 -15 -77 -41 -103h-3c-26 -25 -62 -41 -100 -41h-512c-39 0 -77 15 -103 41s-41 64 -41 103c0 46 18 80 34 106
+c46 78 157 292 166 309v141h-50c-2 0 -6 -1 -8 -1c-28 0 -50 23 -50 51zM500 600h-200v-162l-6 -10s-63 -123 -119 -228h450c-56 105 -119 228 -119 228l-6 10v162z" />
+    <glyph glyph-name="1d" unicode="&#xe01d;" 
+d="M400 800c110 0 200 -90 200 -200c0 -104 52 -198 134 -266c41 -34 66 -82 66 -134h-800c0 52 25 100 66 134c82 68 134 162 134 266c0 110 90 200 200 200zM300 100h200c0 -55 -45 -100 -100 -100s-100 45 -100 100z" />
+    <glyph glyph-name="1e" unicode="&#xe01e;" horiz-adv-x="600" 
+d="M150 800h50l350 -250l-225 -147l225 -153l-350 -250h-50v250l-75 -75l-75 75l150 150l-150 150l75 75l75 -75v250zM250 650v-200l150 100zM250 350v-200l150 100z" />
+    <glyph glyph-name="1f" unicode="&#xe01f;" 
+d="M0 800h500c110 0 200 -90 200 -200c0 -47 -17 -91 -44 -125c85 -40 144 -125 144 -225c0 -138 -112 -250 -250 -250h-550v100c55 0 100 45 100 100v400c0 55 -45 100 -100 100v100zM300 700v-200h100c55 0 100 45 100 100s-45 100 -100 100h-100zM300 400v-300h150
+c83 0 150 67 150 150s-67 150 -150 150h-150z" />
+    <glyph glyph-name="20" unicode="&#xe020;" horiz-adv-x="600" 
+d="M300 800v-300h200l-300 -500v300h-200z" />
+    <glyph glyph-name="21" unicode="&#xe021;" 
+d="M100 800h300v-300l100 100l100 -100v300h50c28 0 50 -22 50 -50v-550h-550c-28 0 -50 -22 -50 -50s22 -50 50 -50h550v-100h-550c-83 0 -150 67 -150 150v550l3 19c8 39 39 70 78 78z" />
+    <glyph glyph-name="22" unicode="&#xe022;" horiz-adv-x="400" 
+d="M0 800h400v-800l-200 200l-200 -200v800z" />
+    <glyph glyph-name="23" unicode="&#xe023;" 
+d="M0 800h800v-100h-800v100zM0 600h300v-103h203v103h297v-591c0 -6 -3 -9 -9 -9h-782c-6 0 -9 3 -9 9v591z" />
+    <glyph glyph-name="24" unicode="&#xe024;" 
+d="M300 800h200c55 0 100 -45 100 -100v-100h191c6 0 9 -3 9 -9v-241c0 -28 -22 -50 -50 -50h-700c-28 0 -50 22 -50 50v241c0 6 3 9 9 9h191v100c0 55 45 100 100 100zM300 700v-100h200v100h-200zM0 209c16 -6 32 -9 50 -9h700c18 0 34 3 50 9v-200c0 -6 -3 -9 -9 -9h-782
+c-6 0 -9 3 -9 9v200z" />
+    <glyph glyph-name="25" unicode="&#xe025;" horiz-adv-x="600" 
+d="M300 800c58 0 110 -16 147 -53s53 -89 53 -147h-100c0 39 -11 61 -25 75s-36 25 -75 25c-35 0 -55 -10 -72 -31s-28 -55 -28 -94c0 -51 20 -107 28 -175h172v-100h-178c-14 -60 -49 -127 -113 -200h491v-100h-600v122l16 12c69 69 95 121 106 166h-122v100h125
+c-8 50 -25 106 -25 175c0 58 16 114 50 156c34 43 88 69 150 69z" />
+    <glyph glyph-name="26" unicode="&#xe026;" 
+d="M34 700h4h3h4h5h700c28 0 50 -22 50 -50v-700c0 -28 -22 -50 -50 -50h-700c-28 0 -50 22 -50 50v700v2c0 20 15 42 34 48zM150 600c-28 0 -50 -22 -50 -50s22 -50 50 -50s50 22 50 50s-22 50 -50 50zM350 600c-28 0 -50 -22 -50 -50s22 -50 50 -50h300c28 0 50 22 50 50
+s-22 50 -50 50h-300zM100 400v-400h600v400h-600z" />
+    <glyph glyph-name="27" unicode="&#xe027;" 
+d="M744 797l6 -3l44 -44c4 -4 3 -8 0 -12l-266 -375l-15 -13l-25 -12c-23 72 -78 127 -150 150l12 25l13 15l375 266zM266 400c74 0 134 -60 134 -134c0 -147 -119 -266 -266 -266c-48 0 -95 12 -134 34c80 46 134 133 134 232c0 74 58 134 132 134z" />
+    <glyph glyph-name="28" unicode="&#xe028;" 
+d="M9 451c0 23 19 50 46 50c8 0 19 -3 26 -7l131 -66l29 22c-79 81 -1 250 118 250s197 -167 119 -250l28 -22l131 66c6 4 12 7 21 7c28 0 50 -22 50 -50c0 -17 -12 -37 -27 -45l-115 -56c9 -16 19 -33 25 -50h68c28 0 50 -22 50 -50s-22 -50 -50 -50h-50
+c0 -23 -2 -45 -6 -66l78 -40c21 -5 37 -28 37 -49c0 -28 -22 -50 -50 -50c-10 0 -23 5 -31 11l-65 35c-24 -46 -62 -86 -103 -110c-35 19 -60 45 -60 72v135v4v5v6v5v5v87c0 28 -22 50 -50 50c-24 0 -45 -17 -50 -40c1 -3 1 -8 1 -11s0 -8 -1 -11v-82v-4v-5v-144
+c0 -28 -24 -53 -59 -72c-41 25 -79 64 -103 110l-66 -35c-8 -6 -21 -11 -31 -11c-28 0 -50 22 -50 50c0 21 16 44 37 49l78 40c-4 21 -6 43 -6 66h-50h-5c-28 0 -50 22 -50 50c0 26 22 50 50 50h5h69c6 17 16 34 25 50l-116 56c-16 7 -28 27 -28 45z" />
+    <glyph glyph-name="29" unicode="&#xe029;" 
+d="M600 700h91c6 0 9 -3 9 -9v-582c0 -6 -3 -9 -9 -9h-91v600zM210 503l290 147v-500l-250 125v-3c-15 0 -25 -8 -28 -22l75 -178c11 -25 0 -58 -25 -69s-58 0 -69 25l-103 272h-91c-6 0 -9 3 -9 9v182c0 6 3 9 9 9h182z" />
+    <glyph glyph-name="2a" unicode="&#xe02a;" 
+d="M9 800h682c6 0 9 -3 9 -9v-782c0 -6 -3 -9 -9 -9h-682c-6 0 -9 3 -9 9v782c0 6 3 9 9 9zM100 700v-200h500v200h-500zM100 400v-100h100v100h-100zM300 400v-100h100v100h-100zM500 400v-300h100v300h-100zM100 200v-100h100v100h-100zM300 200v-100h100v100h-100z" />
+    <glyph glyph-name="2b" unicode="&#xe02b;" 
+d="M0 800h700v-200h-700v200zM0 500h700v-491c0 -6 -3 -9 -9 -9h-682c-6 0 -9 3 -9 9v491zM100 400v-100h100v100h-100zM300 400v-100h100v100h-100zM500 400v-100h100v100h-100zM100 200v-100h100v100h-100zM300 200v-100h100v100h-100z" />
+    <glyph glyph-name="2c" unicode="&#xe02c;" 
+d="M409 800h182c6 0 10 -4 12 -9l94 -182c2 -5 6 -9 12 -9h82c6 0 9 -3 9 -9v-582c0 -6 -3 -9 -9 -9h-782c-6 0 -9 3 -9 9v441c0 83 67 150 150 150h141c6 0 10 4 12 9l94 182c2 5 6 9 12 9zM150 500c-28 0 -50 -22 -50 -50s22 -50 50 -50s50 22 50 50s-22 50 -50 50z
+M500 500c-110 0 -200 -90 -200 -200s90 -200 200 -200s200 90 200 200s-90 200 -200 200zM500 400c55 0 100 -45 100 -100s-45 -100 -100 -100s-100 45 -100 100s45 100 100 100z" />
+    <glyph glyph-name="2d" unicode="&#xe02d;" 
+d="M0 600h800l-400 -400z" />
+    <glyph glyph-name="2e" unicode="&#xe02e;" horiz-adv-x="400" 
+d="M400 800v-800l-400 400z" />
+    <glyph glyph-name="2f" unicode="&#xe02f;" horiz-adv-x="400" 
+d="M0 800l400 -400l-400 -400v800z" />
+    <glyph glyph-name="30" unicode="&#xe030;" 
+d="M400 600l400 -400h-800z" />
+    <glyph glyph-name="31" unicode="&#xe031;" 
+d="M0 550c0 23 20 50 46 50h3h5h4h200c17 0 37 -13 44 -28l38 -72h444c14 0 19 -12 15 -25l-81 -250c-4 -13 -21 -25 -35 -25h-350c-14 0 -30 12 -34 25c-27 83 -54 167 -81 250l-10 25h-150c-2 0 -5 -1 -7 -1c-28 0 -51 23 -51 51zM358 100c28 0 50 -22 50 -50
+s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM658 100c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50z" />
+    <glyph glyph-name="32" unicode="&#xe032;" 
+d="M0 700h500v-100h-300v-300h-100l-100 -100v500zM300 500h500v-500l-100 100h-400v400z" />
+    <glyph glyph-name="33" unicode="&#xe033;" 
+d="M641 700l143 -141l-493 -493c-71 76 -146 148 -219 222l-72 71l141 141c50 -51 101 -101 153 -150c116 117 234 231 347 350z" />
+    <glyph glyph-name="34" unicode="&#xe034;" 
+d="M150 600l250 -250l250 250l150 -150l-400 -400l-400 400z" />
+    <glyph glyph-name="35" unicode="&#xe035;" horiz-adv-x="600" 
+d="M400 800l150 -150l-250 -250l250 -250l-150 -150l-400 400z" />
+    <glyph glyph-name="36" unicode="&#xe036;" horiz-adv-x="600" 
+d="M150 800l400 -400l-400 -400l-150 150l250 250l-250 250z" />
+    <glyph glyph-name="37" unicode="&#xe037;" 
+d="M400 600l400 -400l-150 -150l-250 250l-250 -250l-150 150z" />
+    <glyph glyph-name="38" unicode="&#xe038;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM600 622l-250 -250l-100 100l-72 -72l172 -172l322 322z" />
+    <glyph glyph-name="39" unicode="&#xe039;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM250 622l-72 -72l150 -150l-150 -150l72 -72l150 150l150 -150l72 72l-150 150l150 150l-72 72l-150 -150z" />
+    <glyph glyph-name="3a" unicode="&#xe03a;" 
+d="M350 800c28 0 50 -22 50 -50v-50h75c14 0 25 -11 25 -25v-75h-300v75c0 14 11 25 25 25h75v50c0 28 22 50 50 50zM25 700h75v-200h500v200h75c14 0 25 -11 25 -25v-650c0 -14 -11 -25 -25 -25h-650c-14 0 -25 11 -25 25v650c0 14 11 25 25 25z" />
+    <glyph glyph-name="3b" unicode="&#xe03b;" 
+d="M400 800c220 0 400 -180 400 -400s-180 -400 -400 -400s-400 180 -400 400s180 400 400 400zM400 700c-166 0 -300 -134 -300 -300s134 -300 300 -300s300 134 300 300s-134 300 -300 300zM350 600h100v-181c23 -24 47 -47 72 -69l-72 -72c-27 30 -55 59 -84 88l-16 12
+v222z" />
+    <glyph glyph-name="3c" unicode="&#xe03c;" 
+d="M450 800c138 0 250 -112 250 -250v-50c58 -21 100 -85 100 -150c0 -18 -3 -34 -9 -50h-191v50c0 83 -67 150 -150 150s-150 -67 -150 -150v-50h-272c-17 30 -28 63 -28 100c0 110 90 200 200 200c23 114 129 200 250 200zM434 400h3h4c3 0 6 1 9 1c28 0 50 -22 50 -50v-1
+v-150h150l-200 -200l-200 200h150v150v2c0 20 15 42 34 48z" />
+    <glyph glyph-name="3d" unicode="&#xe03d;" 
+d="M450 800c138 0 250 -112 250 -250v-50c58 -21 100 -85 100 -150c0 -18 -3 -34 -9 -50h-141l-200 200l-200 -200h-222c-17 30 -28 63 -28 100c0 110 90 200 200 200c23 114 129 200 250 200zM450 350l250 -250h-200v-50c0 -28 -22 -50 -50 -50s-50 22 -50 50v50h-200z" />
+    <glyph glyph-name="3e" unicode="&#xe03e;" 
+d="M450 700c138 0 250 -112 250 -250v-50c58 -21 100 -85 100 -150c0 -83 -67 -150 -150 -150h-450c-110 0 -200 90 -200 200s90 200 200 200c23 114 129 200 250 200z" />
+    <glyph glyph-name="3f" unicode="&#xe03f;" 
+d="M250 800c82 0 154 -40 200 -100c-143 0 -270 -85 -325 -209c-36 -10 -70 -25 -100 -47c-16 33 -25 67 -25 106c0 138 112 250 250 250zM450 600c138 0 250 -112 250 -250v-50c58 -21 100 -85 100 -150c0 -83 -67 -150 -150 -150h-450c-110 0 -200 90 -200 200
+s90 200 200 200c23 114 129 200 250 200z" />
+    <glyph glyph-name="40" unicode="&#xe040;" 
+d="M500 700h100l-300 -600h-100zM100 600h100l-100 -200l100 -200h-100l-100 200zM600 600h100l100 -200l-100 -200h-100l100 200z" />
+    <glyph glyph-name="41" unicode="&#xe041;" 
+d="M350 800h100l50 -119l28 -12l119 50l72 -72l-50 -119l12 -28l119 -50v-100l-119 -50l-12 -28l50 -119l-72 -72l-119 50l-28 -12l-50 -119h-100l-50 119l-28 12l-119 -50l-72 72l50 119l-12 28l-119 50v100l119 50l12 28l-50 119l72 72l119 -50l28 12zM400 550
+c-83 0 -150 -67 -150 -150s67 -150 150 -150s150 67 150 150s-67 150 -150 150z" />
+    <glyph glyph-name="42" unicode="&#xe042;" 
+d="M0 800h800v-200h-800v200zM200 500h400l-200 -200zM0 100h800v-100h-800v100z" />
+    <glyph glyph-name="43" unicode="&#xe043;" 
+d="M0 800h100v-800h-100v800zM600 800h200v-800h-200v800zM500 600v-400l-200 200z" />
+    <glyph glyph-name="44" unicode="&#xe044;" 
+d="M0 800h200v-800h-200v800zM700 800h100v-800h-100v800zM300 600l200 -200l-200 -200v400z" />
+    <glyph glyph-name="45" unicode="&#xe045;" 
+d="M0 800h800v-100h-800v100zM400 500l200 -200h-400zM0 200h800v-200h-800v200z" />
+    <glyph glyph-name="46" unicode="&#xe046;" 
+d="M150 700c83 0 150 -67 150 -150v-50h100v50c0 83 67 150 150 150s150 -67 150 -150s-67 -150 -150 -150h-50v-100h50c83 0 150 -67 150 -150s-67 -150 -150 -150s-150 67 -150 150v50h-100v-50c0 -83 -67 -150 -150 -150s-150 67 -150 150s67 150 150 150h50v100h-50
+c-83 0 -150 67 -150 150s67 150 150 150zM150 600c-28 0 -50 -22 -50 -50s22 -50 50 -50h50v50c0 28 -22 50 -50 50zM550 600c-28 0 -50 -22 -50 -50v-50h50c28 0 50 22 50 50s-22 50 -50 50zM300 400v-100h100v100h-100zM150 200c-28 0 -50 -22 -50 -50s22 -50 50 -50
+s50 22 50 50v50h-50zM500 200v-50c0 -28 22 -50 50 -50s50 22 50 50s-22 50 -50 50h-50z" />
+    <glyph glyph-name="47" unicode="&#xe047;" 
+d="M0 791c0 5 4 9 9 9h782c6 0 9 -4 9 -10v-790l-200 200h-591c-6 0 -9 3 -9 9v582z" />
+    <glyph glyph-name="48" unicode="&#xe048;" 
+d="M400 800c220 0 400 -180 400 -400s-180 -400 -400 -400s-400 180 -400 400s180 400 400 400zM400 700c-166 0 -300 -134 -300 -300s134 -300 300 -300s300 134 300 300s-134 300 -300 300zM600 600l-100 -300l-300 -100l100 300zM400 450c-28 0 -50 -22 -50 -50
+s22 -50 50 -50s50 22 50 50s-22 50 -50 50z" />
+    <glyph glyph-name="49" unicode="&#xe049;" 
+d="M400 800c220 0 400 -180 400 -400s-180 -400 -400 -400s-400 180 -400 400s180 400 400 400zM400 700v-600c166 0 300 134 300 300s-134 300 -300 300z" />
+    <glyph glyph-name="4a" unicode="&#xe04a;" 
+d="M0 800h800v-100h-800v100zM0 600h500v-100h-500v100zM0 300h800v-100h-800v100zM0 100h600v-100h-600v100zM750 100c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50z" />
+    <glyph glyph-name="4b" unicode="&#xe04b;" 
+d="M25 700h750c14 0 25 -11 25 -25v-75h-800v75c0 14 11 25 25 25zM0 500h800v-375c0 -14 -11 -25 -25 -25h-750c-14 0 -25 11 -25 25v375zM100 300v-100h100v100h-100zM300 300v-100h100v100h-100z" />
+    <glyph glyph-name="4c" unicode="&#xe04c;" 
+d="M100 800h100v-100h450l100 100l50 -50l-100 -100v-450h100v-100h-100v-100h-100v100h-500v500h-100v100h100v100zM200 600v-350l350 350h-350zM600 550l-350 -350h350v350z" />
+    <glyph glyph-name="4d" unicode="&#xe04d;" 
+d="M400 800c220 0 400 -180 400 -400s-180 -400 -400 -400s-400 180 -400 400s180 400 400 400zM400 700c-166 0 -300 -134 -300 -300s134 -300 300 -300s300 134 300 300s-134 300 -300 300zM400 600c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50z
+M200 452c0 20 15 42 34 48h3h3h8c12 0 28 -7 36 -16l91 -90l25 6c55 0 100 -45 100 -100s-45 -100 -100 -100s-100 45 -100 100l6 25l-90 91c-9 8 -16 24 -16 36zM550 500c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50z" />
+    <glyph glyph-name="4e" unicode="&#xe04e;" 
+d="M300 800h200v-300h200l-300 -300l-300 300h200v300zM0 100h800v-100h-800v100z" />
+    <glyph glyph-name="4f" unicode="&#xe04f;" 
+d="M0 800h800v-100h-800v100zM400 600l300 -300h-200v-300h-200v300h-200z" />
+    <glyph glyph-name="50" unicode="&#xe050;" 
+d="M200 700h600v-600h-600l-200 300zM350 622l-72 -72l150 -150l-150 -150l72 -72l150 150l150 -150l72 72l-150 150l150 150l-72 72l-150 -150z" />
+    <glyph glyph-name="51" unicode="&#xe051;" 
+d="M400 700c220 0 400 -180 400 -400h-100c0 166 -134 300 -300 300s-300 -134 -300 -300h-100c0 220 180 400 400 400zM341 491l59 -88l59 88c81 -25 141 -101 141 -191c0 -110 -90 -200 -200 -200s-200 90 -200 200c0 90 60 166 141 191z" />
+    <glyph glyph-name="52" unicode="&#xe052;" 
+d="M0 800h300v-400h400v-400h-700v800zM400 800l300 -300h-300v300zM100 600v-100h100v100h-100zM100 400v-100h100v100h-100zM100 200v-100h400v100h-400z" />
+    <glyph glyph-name="53" unicode="&#xe053;" horiz-adv-x="600" 
+d="M200 700h100v-100h75c30 0 58 -6 81 -22s44 -44 44 -78v-100h-100v94c-4 3 -13 6 -25 6h-250c-14 0 -25 -11 -25 -25v-50c0 -15 20 -40 34 -44l257 -65c66 -16 109 -73 109 -141v-50c0 -68 -57 -125 -125 -125h-75v-100h-100v100h-75c-30 0 -58 6 -81 22s-44 44 -44 78
+v100h100v-94c4 -3 13 -6 25 -6h250c14 0 25 11 25 25v50c0 15 -20 40 -34 44l-257 65c-66 16 -109 73 -109 141v50c0 68 57 125 125 125h75v100z" />
+    <glyph glyph-name="54" unicode="&#xe054;" 
+d="M0 700h300v-300l-300 -300v600zM500 700h300v-300l-300 -300v600z" />
+    <glyph glyph-name="55" unicode="&#xe055;" 
+d="M300 700v-600h-300v300zM800 700v-600h-300v300z" />
+    <glyph glyph-name="56" unicode="&#xe056;" 
+d="M300 700v-100c-111 0 -200 -89 -200 -200h200v-300h-300v300c0 165 135 300 300 300zM800 700v-100c-111 0 -200 -89 -200 -200h200v-300h-300v300c0 165 135 300 300 300z" />
+    <glyph glyph-name="57" unicode="&#xe057;" 
+d="M0 700h300v-300c0 -165 -135 -300 -300 -300v100c111 0 200 89 200 200h-200v300zM500 700h300v-300c0 -165 -135 -300 -300 -300v100c111 0 200 89 200 200h-200v300z" />
+    <glyph glyph-name="58" unicode="&#xe058;" horiz-adv-x="600" 
+d="M300 800l34 -34c11 -11 266 -270 266 -488c0 -165 -135 -300 -300 -300s-300 135 -300 300c0 218 255 477 266 488zM150 328c-28 0 -50 -22 -50 -50c0 -110 90 -200 200 -200c28 0 50 22 50 50s-22 50 -50 50c-55 0 -100 45 -100 100c0 28 -22 50 -50 50z" />
+    <glyph glyph-name="59" unicode="&#xe059;" 
+d="M400 800l400 -500h-800zM0 200h800v-200h-800v200z" />
+    <glyph glyph-name="5a" unicode="&#xe05a;" horiz-adv-x="600" 
+d="M300 800l300 -300h-600zM0 300h600l-300 -300z" />
+    <glyph glyph-name="5b" unicode="&#xe05b;" 
+d="M0 500h200v-200h-200v200zM300 500h200v-200h-200v200zM600 500h200v-200h-200v200z" />
+    <glyph glyph-name="5c" unicode="&#xe05c;" 
+d="M0 700h800v-100l-400 -200l-400 200v100zM0 500l400 -200l400 200v-400h-800v400z" />
+    <glyph glyph-name="5d" unicode="&#xe05d;" 
+d="M400 800l400 -200v-600h-800v600zM400 688l-300 -150v-188l300 -150l300 150v188zM200 500h400v-100l-200 -100l-200 100v100z" />
+    <glyph glyph-name="5e" unicode="&#xe05e;" 
+d="M600 700c69 0 134 -19 191 -50l-16 -106c-49 35 -109 56 -175 56c-131 0 -240 -84 -281 -200h331l-16 -100h-334c0 -36 8 -68 19 -100h297l-16 -100h-222c55 -61 133 -100 222 -100c78 0 147 30 200 78v-122c-59 -35 -127 -56 -200 -56c-147 0 -274 82 -344 200h-256
+l19 100h197c-8 32 -16 66 -16 100h-200l25 100h191c45 172 198 300 384 300z" />
+    <glyph glyph-name="5f" unicode="&#xe05f;" 
+d="M0 700h700v-100h-700v100zM0 500h500v-100h-500v100zM0 300h800v-100h-800v100zM0 100h100v-100h-100v100zM200 100h100v-100h-100v100zM400 100h100v-100h-100v100z" />
+    <glyph glyph-name="60" unicode="&#xe060;" 
+d="M0 800h800v-100h-800v100zM200 600h400l-200 -200zM0 200h800v-200h-800v200z" />
+    <glyph glyph-name="61" unicode="&#xe061;" 
+d="M0 800h100v-800h-100v800zM600 800h200v-800h-200v800zM200 600l200 -200l-200 -200v400z" />
+    <glyph glyph-name="62" unicode="&#xe062;" 
+d="M0 800h200v-800h-200v800zM700 800h100v-800h-100v800zM600 600v-400l-200 200z" />
+    <glyph glyph-name="63" unicode="&#xe063;" 
+d="M0 800h800v-200h-800v200zM400 400l200 -200h-400zM0 100h800v-100h-800v100z" />
+    <glyph glyph-name="64" unicode="&#xe064;" 
+d="M0 800h200v-100h-100v-600h600v100h100v-200h-800v800zM400 800h400v-400l-150 150l-250 -250l-100 100l250 250z" />
+    <glyph glyph-name="65" unicode="&#xe065;" 
+d="M403 700c247 0 397 -300 397 -300s-150 -300 -397 -300c-253 0 -403 300 -403 300s150 300 403 300zM400 600c-110 0 -200 -90 -200 -200s90 -200 200 -200s200 90 200 200s-90 200 -200 200zM400 500c10 0 19 -3 28 -6c-16 -8 -28 -24 -28 -44c0 -28 22 -50 50 -50
+c20 0 36 12 44 28c3 -9 6 -18 6 -28c0 -55 -45 -100 -100 -100s-100 45 -100 100s45 100 100 100z" />
+    <glyph glyph-name="66" unicode="&#xe066;" horiz-adv-x="900" 
+d="M331 700h3h3c3 1 7 1 10 1c12 0 29 -8 37 -17l94 -93l66 65c57 57 155 57 212 0c58 -58 58 -154 0 -212l-65 -66l93 -94c10 -8 18 -25 18 -38c0 -28 -22 -50 -50 -50c-13 0 -32 9 -40 20l-62 65l-381 -381h-269v272l375 381l-63 63c-9 8 -16 24 -16 36c0 20 16 42 35 48z
+M447 481l-313 -315l128 -132l316 316z" />
+    <glyph glyph-name="67" unicode="&#xe067;" 
+d="M0 800h300v-400h400v-400h-700v800zM400 800l300 -300h-300v300z" />
+    <glyph glyph-name="68" unicode="&#xe068;" 
+d="M200 800c0 0 200 -100 200 -300s-298 -302 -200 -500c0 0 -200 100 -200 300s300 300 200 500zM500 500c0 0 200 -100 200 -300c0 -150 -60 -200 -100 -200h-300c0 200 300 300 200 500z" />
+    <glyph glyph-name="69" unicode="&#xe069;" 
+d="M0 800h100v-800h-100v800zM200 800h300v-100h300l-200 -203l200 -197h-400v100h-200v400z" />
+    <glyph glyph-name="6a" unicode="&#xe06a;" horiz-adv-x="400" 
+d="M150 800h150l-100 -200h200l-150 -300h150l-300 -300l-100 300h134l66 200h-200z" />
+    <glyph glyph-name="6b" unicode="&#xe06b;" 
+d="M0 800h300v-100h500v-100h-800v200zM0 500h800v-450c0 -28 -22 -50 -50 -50h-700c-28 0 -50 22 -50 50v450z" />
+    <glyph glyph-name="6c" unicode="&#xe06c;" 
+d="M150 800c83 0 150 -67 150 -150c0 -66 -41 -121 -100 -141v-118c15 5 33 9 50 9h200c28 0 50 22 50 50v59c-59 20 -100 75 -100 141c0 83 67 150 150 150s150 -67 150 -150c0 -66 -41 -121 -100 -141v-59c0 -82 -68 -150 -150 -150h-200c-14 0 -25 -7 -34 -16
+c50 -24 84 -74 84 -134c0 -83 -67 -150 -150 -150s-150 67 -150 150c0 66 41 121 100 141v218c-59 20 -100 75 -100 141c0 83 67 150 150 150z" />
+    <glyph glyph-name="6d" unicode="&#xe06d;" 
+d="M0 800h400l-150 -150l150 -150l-100 -100l-150 150l-150 -150v400zM500 400l150 -150l150 150v-400h-400l150 150l-150 150z" />
+    <glyph glyph-name="6e" unicode="&#xe06e;" 
+d="M100 800l150 -150l150 150v-400h-400l150 150l-150 150zM400 400h400l-150 -150l150 -150l-100 -100l-150 150l-150 -150v400z" />
+    <glyph glyph-name="6f" unicode="&#xe06f;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM400 700c-56 0 -108 -17 -153 -44l22 -19c33 -18 13 -48 -13 -59c-30 -13 -77 10 -65 -41c13 -55 -27 -3 -47 -15c-42 -26 49 -152 31 -156l-59 34c-8 0 -13 -5 -16 -10
+c1 -30 10 -57 19 -84c28 -11 77 -2 100 -25c47 -28 97 -115 75 -159c34 -13 68 -22 106 -22c101 0 193 48 247 125c3 24 -8 44 -50 44c-69 0 -156 13 -153 97c2 46 101 108 66 143c-30 30 12 39 12 66c0 37 -65 32 -69 50s20 36 41 56c-30 10 -60 19 -94 19zM631 591
+c-38 -11 -94 -35 -87 -53c6 -15 52 -1 65 -13c11 -10 16 -59 44 -31l22 22v3c-11 26 -26 50 -44 72z" />
+    <glyph glyph-name="70" unicode="&#xe070;" 
+d="M703 800l97 -100l-400 -400l-100 100l-200 -203l-100 100l300 303l100 -100zM0 100h800v-100h-800v100z" />
+    <glyph glyph-name="71" unicode="&#xe071;" 
+d="M0 700h100v-100h-100v100zM200 700h100v-100h-100v100zM400 700h100v-100h-100v100zM600 700h100v-100h-100v100zM0 500h100v-100h-100v100zM200 500h100v-100h-100v100zM400 500h100v-100h-100v100zM600 500h100v-100h-100v100zM0 300h100v-100h-100v100zM200 300h100
+v-100h-100v100zM400 300h100v-100h-100v100zM600 300h100v-100h-100v100zM0 100h100v-100h-100v100zM200 100h100v-100h-100v100zM400 100h100v-100h-100v100zM600 100h100v-100h-100v100z" />
+    <glyph glyph-name="72" unicode="&#xe072;" 
+d="M0 800h200v-200h-200v200zM300 800h200v-200h-200v200zM600 800h200v-200h-200v200zM0 500h200v-200h-200v200zM300 500h200v-200h-200v200zM600 500h200v-200h-200v200zM0 200h200v-200h-200v200zM300 200h200v-200h-200v200zM600 200h200v-200h-200v200z" />
+    <glyph glyph-name="73" unicode="&#xe073;" 
+d="M0 800h300v-300h-300v300zM500 800h300v-300h-300v300zM0 300h300v-300h-300v300zM500 300h300v-300h-300v300z" />
+    <glyph glyph-name="74" unicode="&#xe074;" 
+d="M19 800h662c11 0 19 -8 19 -19v-331c0 -28 -22 -50 -50 -50h-600c-28 0 -50 22 -50 50v331c0 11 8 19 19 19zM0 309c16 -6 32 -9 50 -9h600c18 0 34 3 50 9v-290c0 -11 -8 -19 -19 -19h-662c-11 0 -19 8 -19 19v290zM550 200c-28 0 -50 -22 -50 -50s22 -50 50 -50
+s50 22 50 50s-22 50 -50 50z" />
+    <glyph glyph-name="75" unicode="&#xe075;" 
+d="M0 700h300v-100h-50c-28 0 -50 -22 -50 -50v-150h300v150c0 28 -22 50 -50 50h-50v100h300v-100h-50c-28 0 -50 -22 -50 -50v-400c0 -28 22 -50 50 -50h50v-100h-300v100h50c28 0 50 22 50 50v150h-300v-150c0 -28 22 -50 50 -50h50v-100h-300v100h50c28 0 50 22 50 50
+v400c0 28 -22 50 -50 50h-50v100z" />
+    <glyph glyph-name="76" unicode="&#xe076;" 
+d="M400 700c165 0 300 -135 300 -300v-100h50c28 0 50 -22 50 -50v-200c0 -28 -22 -50 -50 -50h-100c-28 0 -50 22 -50 50v350c0 111 -89 200 -200 200s-200 -89 -200 -200v-350c0 -28 -22 -50 -50 -50h-100c-28 0 -50 22 -50 50v200c0 28 22 50 50 50h50v100
+c0 165 135 300 300 300z" />
+    <glyph glyph-name="77" unicode="&#xe077;" 
+d="M0 500c0 109 91 200 200 200s200 -91 200 -200c0 109 91 200 200 200s200 -91 200 -200c0 -55 -23 -105 -59 -141l-341 -340l-341 340c-36 36 -59 86 -59 141z" />
+    <glyph glyph-name="78" unicode="&#xe078;" 
+d="M400 700l400 -300l-100 3v-403h-200v200h-200v-200h-200v400h-100z" />
+    <glyph glyph-name="79" unicode="&#xe079;" 
+d="M0 800h800v-800h-800v800zM100 700v-300l100 100l400 -400h100v100l-200 200l100 100l100 -100v300h-600z" />
+    <glyph glyph-name="7a" unicode="&#xe07a;" 
+d="M19 800h762c11 0 19 -8 19 -19v-762c0 -11 -8 -19 -19 -19h-762c-11 0 -19 8 -19 19v762c0 11 8 19 19 19zM100 600v-300h100l100 -100h200l100 100h100v300h-600z" />
+    <glyph glyph-name="7b" unicode="&#xe07b;" 
+d="M200 600c80 0 142 -56 200 -122c58 66 119 122 200 122c131 0 200 -101 200 -200s-69 -200 -200 -200c-81 0 -142 56 -200 122c-58 -66 -121 -122 -200 -122c-131 0 -200 101 -200 200s69 200 200 200zM200 500c-74 0 -100 -54 -100 -100s26 -100 100 -100
+c42 0 88 47 134 100c-46 53 -92 100 -134 100zM600 500c-43 0 -88 -47 -134 -100c46 -53 91 -100 134 -100c74 0 100 54 100 100s-26 100 -100 100z" />
+    <glyph glyph-name="7c" unicode="&#xe07c;" horiz-adv-x="400" 
+d="M300 800c55 0 100 -45 100 -100s-45 -100 -100 -100s-100 45 -100 100s45 100 100 100zM150 550c83 0 150 -69 150 -150c0 -66 -100 -214 -100 -250c0 -28 22 -50 50 -50s50 22 50 50h100c0 -83 -67 -150 -150 -150s-150 64 -150 150s100 222 100 250s-22 50 -50 50
+s-50 -22 -50 -50h-100c0 83 67 150 150 150z" />
+    <glyph glyph-name="7d" unicode="&#xe07d;" 
+d="M200 800h500v-100h-122c-77 -197 -156 -392 -234 -588l-6 -12h162v-100h-500v100h122c77 197 156 392 234 588l7 12h-163v100z" />
+    <glyph glyph-name="7e" unicode="&#xe07e;" 
+d="M0 700h800v-100h-800v100zM0 500h800v-100h-800v100zM0 300h800v-100h-800v100zM100 100h600v-100h-600v100z" />
+    <glyph glyph-name="7f" unicode="&#xe07f;" 
+d="M0 700h800v-100h-800v100zM0 500h800v-100h-800v100zM0 300h800v-100h-800v100zM0 100h600v-100h-600v100z" />
+    <glyph glyph-name="80" unicode="&#xe080;" 
+d="M0 700h800v-100h-800v100zM0 500h800v-100h-800v100zM0 300h800v-100h-800v100zM200 100h600v-100h-600v100z" />
+    <glyph glyph-name="81" unicode="&#xe081;" 
+d="M550 800c138 0 250 -112 250 -250s-112 -250 -250 -250c-16 0 -32 0 -47 3l-3 -3v-100h-200v-200h-300v200l303 303c-3 15 -3 31 -3 47c0 138 112 250 250 250zM600 700c-55 0 -100 -45 -100 -100s45 -100 100 -100s100 45 100 100s-45 100 -100 100z" />
+    <glyph glyph-name="82" unicode="&#xe082;" 
+d="M134 600h3h4h4h5h500c28 0 50 -22 50 -50v-350h100v-150c0 -28 -22 -50 -50 -50h-700c-28 0 -50 22 -50 50v150h100v350v2c0 20 15 42 34 48zM200 500v-300h100v-100h200v100h100v300h-400z" />
+    <glyph glyph-name="83" unicode="&#xe083;" 
+d="M0 800h400v-400h-400v400zM500 600h100v-400h-400v100h300v300zM700 400h100v-400h-400v100h300v300z" />
+    <glyph glyph-name="84" unicode="&#xe084;" horiz-adv-x="600" 
+d="M337 694c6 4 12 7 21 7c28 0 50 -22 50 -50c0 -17 -12 -37 -27 -45l-300 -150c-8 -6 -21 -11 -31 -11c-28 0 -50 22 -50 50c0 21 16 44 37 49zM437 544c6 4 12 7 21 7c28 0 50 -22 50 -50c0 -17 -12 -37 -27 -45l-400 -200c-8 -6 -21 -11 -31 -11c-28 0 -50 22 -50 50
+c0 21 16 44 37 49zM437 344c6 4 12 7 21 7c28 0 50 -22 50 -50c0 -17 -12 -37 -27 -45l-106 -56c24 -4 43 -26 43 -50c0 -28 -23 -51 -51 -51c-2 0 -6 1 -8 1h-200c-26 1 -48 24 -48 50c0 16 12 36 26 44zM151 -50c0 23 20 50 46 50h3h4h5h100c28 0 50 -22 50 -50
+s-22 -50 -50 -50h-100c-2 0 -6 -1 -8 -1c-28 0 -50 23 -50 51z" />
+    <glyph glyph-name="85" unicode="&#xe085;" 
+d="M199 800h100v-200h-200v100h100v100zM586 797h1c18 1 38 1 56 -3c36 -8 69 -26 97 -54c78 -78 78 -203 0 -281l-150 -150c-8 -13 -28 -24 -43 -24c-28 0 -50 22 -50 50c0 15 11 35 24 43l150 150c40 40 39 105 0 144c-41 41 -110 34 -144 0l-44 -44
+c-8 -13 -27 -24 -42 -24c-28 0 -50 22 -50 50c0 15 11 35 24 43l43 44c32 33 72 53 128 56zM208 490c4 5 14 16 22 16h3c2 0 6 1 8 1c28 0 50 -22 50 -50c0 -11 -6 -27 -14 -35l-150 -150c-40 -40 -39 -105 0 -144c41 -41 110 -34 144 0l44 44c8 13 27 24 42 24
+c28 0 50 -22 50 -50c0 -15 -11 -35 -24 -43l-43 -44c-22 -22 -48 -37 -75 -47c-70 -25 -151 -9 -207 47c-78 78 -78 203 0 281zM499 200h200v-100h-100v-100h-100v200z" />
+    <glyph glyph-name="86" unicode="&#xe086;" 
+d="M586 797c18 1 39 1 57 -3c36 -8 69 -26 97 -54c78 -78 78 -203 0 -281l-150 -150c-62 -62 -132 -81 -182 -78s-69 17 -84 25s-26 27 -26 44c0 28 22 51 50 51c8 0 19 -3 26 -7c0 0 15 -11 41 -13s62 3 106 47l150 150c40 40 39 105 0 144c-41 41 -110 34 -144 0
+c-8 -13 -28 -24 -43 -24c-28 0 -50 22 -50 50c0 15 11 35 24 43c32 33 72 53 128 56zM386 566c50 -2 64 -17 85 -22s37 -28 37 -49c0 -28 -22 -50 -50 -50c-10 0 -23 5 -31 11c0 0 -19 9 -47 10s-63 -4 -103 -44l-150 -150c-40 -40 -39 -105 0 -144c41 -41 110 -34 144 0
+c8 13 27 24 42 24c28 0 50 -22 50 -50c0 -15 -10 -35 -23 -43c-22 -22 -48 -37 -75 -47c-70 -25 -151 -9 -207 47c-78 78 -78 203 0 281l150 150c60 60 128 78 178 76z" />
+    <glyph glyph-name="87" unicode="&#xe087;" 
+d="M0 700h300v-300h-300v300zM400 700h400v-100h-400v100zM400 500h300v-100h-300v100zM0 300h300v-300h-300v300zM400 300h400v-100h-400v100zM400 100h300v-100h-300v100z" />
+    <glyph glyph-name="88" unicode="&#xe088;" 
+d="M50 700c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM200 700h600v-100h-600v100zM50 500c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM200 500h600v-100h-600v100zM50 300c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50
+s22 50 50 50zM200 300h600v-100h-600v100zM50 100c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM200 100h600v-100h-600v100z" />
+    <glyph glyph-name="89" unicode="&#xe089;" 
+d="M800 800l-400 -800l-100 300l-300 100z" />
+    <glyph glyph-name="8a" unicode="&#xe08a;" horiz-adv-x="600" 
+d="M300 700c110 0 200 -90 200 -200v-100h100v-400h-600v400h100v100c0 110 90 200 200 200zM300 600c-56 0 -100 -44 -100 -100v-100h200v100c0 56 -44 100 -100 100z" />
+    <glyph glyph-name="8b" unicode="&#xe08b;" horiz-adv-x="600" 
+d="M300 800c110 0 200 -90 200 -200v-200h100v-400h-600v400h400v200c0 56 -44 100 -100 100s-100 -44 -100 -100h-100c0 110 90 200 200 200z" />
+    <glyph glyph-name="8c" unicode="&#xe08c;" 
+d="M400 700v-100c-111 0 -200 -89 -200 -200h100l-150 -200l-150 200h100c0 165 135 300 300 300zM650 600l150 -200h-100c0 -165 -135 -300 -300 -300v100c111 0 200 89 200 200h-100z" />
+    <glyph glyph-name="8d" unicode="&#xe08d;" 
+d="M100 800h600v-300h100l-150 -250l-150 250h100v200h-400v-100h-100v200zM150 550l150 -250h-100v-200h400v100h100v-200h-600v300h-100z" />
+    <glyph glyph-name="8e" unicode="&#xe08e;" 
+d="M600 700l200 -150l-200 -150v100h-500v-100h-100v100c0 55 45 100 100 100h500v100zM200 300v-100h500v100h100v-100c0 -55 -45 -100 -100 -100h-500v-100l-200 150z" />
+    <glyph glyph-name="8f" unicode="&#xe08f;" horiz-adv-x="900" 
+d="M350 800c193 0 350 -157 350 -350c0 -60 -17 -117 -44 -166c5 -3 12 -8 16 -12l100 -100c16 -16 30 -49 30 -72c0 -56 -46 -102 -102 -102c-23 0 -56 14 -72 30l-100 100c-4 3 -9 9 -12 13c-49 -26 -107 -41 -166 -41c-193 0 -350 157 -350 350s157 350 350 350zM350 200
+c142 0 250 108 250 250c0 139 -111 250 -250 250s-250 -111 -250 -250s111 -250 250 -250z" />
+    <glyph glyph-name="90" unicode="&#xe090;" horiz-adv-x="600" 
+d="M300 800c166 0 300 -134 300 -300c0 -200 -300 -500 -300 -500s-300 300 -300 500c0 166 134 300 300 300zM300 700c-110 0 -200 -90 -200 -200s90 -200 200 -200s200 90 200 200s-90 200 -200 200z" />
+    <glyph glyph-name="91" unicode="&#xe091;" horiz-adv-x="900" 
+d="M0 800h800v-541c1 -3 1 -8 1 -11s0 -7 -1 -10v-238h-800v800zM495 250c0 26 22 50 50 50h5h150v400h-600v-600h600v100h-150h-5c-28 0 -50 22 -50 50zM350 600c83 0 150 -67 150 -150c0 -100 -150 -250 -150 -250s-150 150 -150 250c0 83 67 150 150 150zM350 500
+c-28 0 -50 -22 -50 -50s22 -50 50 -50s50 22 50 50s-22 50 -50 50z" />
+    <glyph glyph-name="92" unicode="&#xe092;" horiz-adv-x="600" 
+d="M0 700h200v-600h-200v600zM400 700h200v-600h-200v600z" />
+    <glyph glyph-name="93" unicode="&#xe093;" horiz-adv-x="600" 
+d="M0 700l600 -300l-600 -300v600z" />
+    <glyph glyph-name="94" unicode="&#xe094;" horiz-adv-x="600" 
+d="M300 700c166 0 300 -134 300 -300s-134 -300 -300 -300s-300 134 -300 300s134 300 300 300z" />
+    <glyph glyph-name="95" unicode="&#xe095;" 
+d="M400 700v-600l-400 300zM400 400l400 300v-600z" />
+    <glyph glyph-name="96" unicode="&#xe096;" 
+d="M0 700l400 -300l-400 -300v600zM400 100v600l400 -300z" />
+    <glyph glyph-name="97" unicode="&#xe097;" 
+d="M0 700h200v-600h-200v600zM200 400l500 300v-600z" />
+    <glyph glyph-name="98" unicode="&#xe098;" 
+d="M0 700l500 -300l-500 -300v600zM500 100v600h200v-600h-200z" />
+    <glyph glyph-name="99" unicode="&#xe099;" horiz-adv-x="600" 
+d="M0 700h600v-600h-600v600z" />
+    <glyph glyph-name="9a" unicode="&#xe09a;" 
+d="M200 800h400v-200h200v-400h-200v-200h-400v200h-200v400h200v200z" />
+    <glyph glyph-name="9b" unicode="&#xe09b;" 
+d="M0 700h800v-100h-800v100zM0 403h800v-100h-800v100zM0 103h800v-100h-800v100z" />
+    <glyph glyph-name="9c" unicode="&#xe09c;" horiz-adv-x="600" 
+d="M278 700c7 2 13 4 22 4c55 0 100 -45 100 -100v-4v-200c0 -55 -45 -100 -100 -100s-100 45 -100 100v200v2c0 44 35 88 78 98zM34 500h4h3c3 0 6 1 9 1c28 0 50 -22 50 -50v-1v-50c0 -111 89 -200 200 -200s200 89 200 200v50c0 28 22 50 50 50s50 -22 50 -50v-50
+c0 -148 -109 -270 -250 -294v-106h50c55 0 100 -45 100 -100h-400c0 55 45 100 100 100h50v106c-141 24 -250 146 -250 294v50v2c0 20 15 42 34 48z" />
+    <glyph glyph-name="9d" unicode="&#xe09d;" 
+d="M0 500h800v-200h-800v200z" />
+    <glyph glyph-name="9e" unicode="&#xe09e;" 
+d="M34 700h4h3h4h5h700c28 0 50 -22 50 -50v-500c0 -28 -22 -50 -50 -50h-250v-100h100c55 0 100 -45 100 -100h-600c0 55 45 100 100 100h100v100h-250c-28 0 -50 22 -50 50v500v2c0 20 15 42 34 48zM100 600v-400h600v400h-600z" />
+    <glyph glyph-name="9f" unicode="&#xe09f;" 
+d="M272 700c-14 -40 -22 -83 -22 -128c0 -221 179 -400 400 -400c45 0 88 8 128 22c-53 -158 -202 -272 -378 -272c-221 0 -400 179 -400 400c0 176 114 325 272 378z" />
+    <glyph glyph-name="a0" unicode="&#xe0a0;" 
+d="M350 700l150 -150h-100v-150h150v100l150 -150l-150 -150v100h-150v-150h100l-150 -150l-150 150h100v150h-150v-100l-150 150l150 150v-100h150v150h-100z" />
+    <glyph glyph-name="a1" unicode="&#xe0a1;" 
+d="M800 800v-550c0 -83 -67 -150 -150 -150s-150 67 -150 150s67 150 150 150c17 0 35 -4 50 -9v206c-201 -6 -327 -27 -400 -50v-397c0 -83 -67 -150 -150 -150s-150 67 -150 150s67 150 150 150c17 0 35 -4 50 -9v409s100 100 600 100z" />
+    <glyph glyph-name="a2" unicode="&#xe0a2;" horiz-adv-x="700" 
+d="M499 700c51 0 102 -20 141 -59c78 -78 78 -203 0 -281l-250 -244c-48 -48 -127 -48 -175 0s-48 127 0 175l96 97l69 -69l-90 -94l-7 -3c-10 -10 -10 -28 0 -38s28 -10 38 0l250 247c37 40 39 102 0 141s-104 40 -144 0l-278 -275c-66 -69 -68 -179 0 -247
+c69 -69 181 -69 250 0l9 12l116 113l69 -69l-125 -125c-107 -107 -281 -107 -388 0s-107 281 0 388l278 272c39 39 90 59 141 59z" />
+    <glyph glyph-name="a3" unicode="&#xe0a3;" 
+d="M600 800l200 -200l-100 -100l-200 200zM400 600l200 -200l-400 -400h-200v200z" />
+    <glyph glyph-name="a4" unicode="&#xe0a4;" 
+d="M550 800c83 0 150 -90 150 -200s-67 -200 -150 -200c-22 0 -40 8 -59 19c6 26 9 52 9 81c0 84 -27 158 -72 212c27 52 71 88 122 88zM250 700c83 0 150 -90 150 -200s-67 -200 -150 -200s-150 90 -150 200s67 200 150 200zM725 384c44 -22 75 -66 75 -118v-166h-200v66
+c0 50 -17 96 -44 134c66 2 126 33 169 84zM75 284c45 -53 106 -84 175 -84s130 31 175 84c44 -22 75 -66 75 -118v-166h-500v166c0 52 31 96 75 118z" />
+    <glyph glyph-name="a5" unicode="&#xe0a5;" 
+d="M400 800c110 0 200 -112 200 -250s-90 -250 -200 -250s-200 112 -200 250s90 250 200 250zM191 300c54 -61 128 -100 209 -100s155 39 209 100c106 -5 191 -92 191 -200v-100h-800v100c0 108 85 195 191 200z" />
+    <glyph glyph-name="a6" unicode="&#xe0a6;" horiz-adv-x="600" 
+d="M19 800h462c11 0 19 -8 19 -19v-762c0 -11 -8 -19 -19 -19h-462c-11 0 -19 8 -19 19v762c0 11 8 19 19 19zM100 700v-500h300v500h-300zM250 150c-28 0 -50 -22 -50 -50s22 -50 50 -50s50 22 50 50s-22 50 -50 50z" />
+    <glyph glyph-name="a7" unicode="&#xe0a7;" 
+d="M350 800c17 0 34 -1 50 -3v-397l-297 297c63 64 150 103 247 103zM500 694c169 -25 300 -168 300 -344c0 -193 -157 -350 -350 -350c-85 0 -161 31 -222 81l272 272v341zM91 562l237 -234l-212 -212c-70 55 -116 138 -116 234c0 84 35 158 91 212z" />
+    <glyph glyph-name="a8" unicode="&#xe0a8;" 
+d="M92 650c0 23 20 50 46 50h3h4h5h400c28 0 50 -22 50 -50s-22 -50 -50 -50h-50v-200h100c55 0 100 -45 100 -100h-300v-300l-56 -100l-44 100v300h-300c0 55 45 100 100 100h100v200h-50c-2 0 -6 -1 -8 -1c-28 0 -50 23 -50 51z" />
+    <glyph glyph-name="a9" unicode="&#xe0a9;" 
+d="M400 800c221 0 400 -179 400 -400s-179 -400 -400 -400s-400 179 -400 400s179 400 400 400zM300 600v-400l300 200z" />
+    <glyph glyph-name="aa" unicode="&#xe0aa;" 
+d="M300 800h200v-300h300v-200h-300v-300h-200v300h-300v200h300v300z" />
+    <glyph glyph-name="ab" unicode="&#xe0ab;" 
+d="M300 800h100v-400h-100v400zM172 656l62 -78l-40 -31c-58 -46 -94 -117 -94 -197c0 -139 111 -250 250 -250s250 111 250 250c0 80 -39 151 -97 197l-37 31l62 78l38 -31c82 -64 134 -164 134 -275c0 -193 -157 -350 -350 -350s-350 157 -350 350c0 111 53 211 134 275z
+" />
+    <glyph glyph-name="ac" unicode="&#xe0ac;" 
+d="M200 800h400v-200h-400v200zM9 500h782c6 0 9 -3 9 -9v-282c0 -6 -3 -9 -9 -9h-91v200h-600v-200h-91c-6 0 -9 3 -9 9v282c0 6 3 9 9 9zM200 300h400v-300h-400v300z" />
+    <glyph glyph-name="ad" unicode="&#xe0ad;" 
+d="M0 700h100v-700h-100v700zM700 700h100v-700h-100v700zM200 600h200v-100h-200v100zM300 400h200v-100h-200v100zM400 200h200v-100h-200v100z" />
+    <glyph glyph-name="ae" unicode="&#xe0ae;" 
+d="M325 700c42 -141 87 -280 131 -419c29 74 59 148 88 222c30 -57 58 -114 87 -172h169v-100h-231l-13 28c-37 -92 -74 -184 -112 -275c-38 129 -79 257 -119 385c-42 -133 -83 -267 -125 -400c-28 88 -56 175 -84 262h-116v100h188l9 -34l3 -6c42 137 83 273 125 409z" />
+    <glyph glyph-name="af" unicode="&#xe0af;" 
+d="M200 600c0 57 43 100 100 100s100 -43 100 -100c0 -28 -18 -48 -28 -72c-3 -6 -3 -16 -3 -28h231v-231c12 0 22 0 28 3c24 10 44 28 72 28c57 0 100 -43 100 -100s-43 -100 -100 -100c-28 0 -48 18 -72 28c-6 3 -16 3 -28 3v-231h-231c0 12 0 22 3 28c10 24 28 44 28 72
+c0 57 -43 100 -100 100s-100 -43 -100 -100c0 -28 18 -48 28 -72c3 -6 3 -16 3 -28h-231v600h231c0 12 0 22 -3 28c-10 24 -28 44 -28 72z" />
+    <glyph glyph-name="b0" unicode="&#xe0b0;" horiz-adv-x="500" 
+d="M247 700c84 0 148 -20 191 -59s59 -93 59 -141c0 -117 -69 -181 -119 -225s-81 -67 -81 -150v-25h-100v25c0 117 65 181 115 225s85 67 85 150c0 25 -8 48 -28 66s-56 34 -122 34s-97 -18 -116 -37s-27 -43 -31 -69l-100 12c5 38 19 88 59 128s103 66 188 66zM197 0h100
+v-100h-100v100z" />
+    <glyph glyph-name="b1" unicode="&#xe0b1;" 
+d="M450 800c138 0 250 -112 250 -250v-50c58 -21 100 -85 100 -150c0 -69 -48 -127 -112 -144c-22 55 -75 94 -138 94c-20 0 -39 -5 -56 -12c-17 64 -75 112 -144 112s-127 -48 -144 -112c-17 7 -36 12 -56 12c-37 0 -71 -12 -97 -34c-33 36 -53 82 -53 134
+c0 110 90 200 200 200c23 114 129 200 250 200zM334 300h4h3c3 0 6 1 9 1c28 0 50 -22 50 -50v-1v-200c0 -28 -22 -50 -50 -50s-50 22 -50 50v200v2c0 20 15 42 34 48zM134 200h4h3c3 0 6 1 9 1c28 0 50 -22 50 -50v-1v-100c0 -28 -22 -50 -50 -50s-50 22 -50 50v100v2
+c0 20 15 42 34 48zM534 200h3h4c3 0 6 1 9 1c28 0 50 -22 50 -50v-1v-100c0 -28 -22 -50 -50 -50s-50 22 -50 50v100v2c0 20 15 42 34 48z" />
+    <glyph glyph-name="b2" unicode="&#xe0b2;" 
+d="M600 800l200 -150l-200 -150v100h-50l-153 -191l175 -206l6 -3h22v100l200 -150l-200 -150v100h-25c-35 0 -56 12 -78 38l-166 190l-153 -190c-22 -27 -43 -38 -78 -38h-100v100h100l166 206l-163 191l-3 3h-100v100h100c34 0 56 -12 78 -38l153 -178l141 178
+c22 27 43 38 78 38h50v100z" />
+    <glyph glyph-name="b3" unicode="&#xe0b3;" 
+d="M400 800c110 0 209 -47 281 -119l119 119v-300h-300l109 109c-54 55 -126 91 -209 91c-166 0 -300 -134 -300 -300s134 -300 300 -300c83 0 158 34 212 88l72 -72c-72 -72 -174 -116 -284 -116c-220 0 -400 180 -400 400s180 400 400 400z" />
+    <glyph glyph-name="b4" unicode="&#xe0b4;" 
+d="M400 800h400v-400l-166 166l-400 -400l166 -166h-400v400l166 -166l400 400z" />
+    <glyph glyph-name="b5" unicode="&#xe0b5;" horiz-adv-x="600" 
+d="M250 800l250 -300h-200v-200h200l-250 -300l-250 300h200v200h-200z" />
+    <glyph glyph-name="b6" unicode="&#xe0b6;" 
+d="M300 600v-200h200v200l300 -250l-300 -250v200h-200v-200l-300 250z" />
+    <glyph glyph-name="b7" unicode="&#xe0b7;" 
+d="M0 800c441 0 800 -359 800 -800h-200c0 333 -267 600 -600 600v200zM0 500c275 0 500 -225 500 -500h-200c0 167 -133 300 -300 300v200zM0 200c110 0 200 -90 200 -200h-200v200z" />
+    <glyph glyph-name="b8" unicode="&#xe0b8;" 
+d="M100 800c386 0 700 -314 700 -700h-100c0 332 -268 600 -600 600v100zM100 600c276 0 500 -224 500 -500h-100c0 222 -178 400 -400 400v100zM100 400c165 0 300 -135 300 -300h-100c0 111 -89 200 -200 200v100zM100 200c55 0 100 -45 100 -100s-45 -100 -100 -100
+s-100 45 -100 100s45 100 100 100z" />
+    <glyph glyph-name="b9" unicode="&#xe0b9;" 
+d="M300 800h400c55 0 100 -45 100 -100v-200h-400v150c0 28 -22 50 -50 50s-50 -22 -50 -50v-250h400v-300c0 -55 -45 -100 -100 -100h-500c-55 0 -100 45 -100 100v200h100v-150c0 -28 22 -50 50 -50s50 22 50 50v550c0 55 45 100 100 100z" />
+    <glyph glyph-name="ba" unicode="&#xe0ba;" 
+d="M75 700h225v-100h-200v-500h400v100h100v-125c0 -41 -34 -75 -75 -75h-450c-41 0 -75 34 -75 75v550c0 41 34 75 75 75zM600 700l200 -200l-200 -200v100h-200c-94 0 -173 -65 -194 -153c23 199 189 353 394 353v100z" />
+    <glyph glyph-name="bb" unicode="&#xe0bb;" 
+d="M500 700l300 -284l-300 -316v200h-100c-200 0 -348 -102 -400 -300c0 295 100 500 500 500v200z" />
+    <glyph glyph-name="bc" unicode="&#xe0bc;" 
+d="M381 791l19 9l19 -9c127 -53 253 -108 381 -160v-31c0 -166 -67 -313 -147 -419c-40 -53 -83 -97 -125 -128s-82 -53 -128 -53s-86 22 -128 53s-85 75 -125 128c-80 107 -147 253 -147 419v31c128 52 254 107 381 160zM400 100v591l-294 -122c8 -126 58 -243 122 -328
+c35 -46 73 -86 106 -110s62 -31 66 -31z" />
+    <glyph glyph-name="bd" unicode="&#xe0bd;" 
+d="M600 800h100v-800h-100v800zM400 700h100v-700h-100v700zM200 500h100v-500h-100v500zM0 300h100v-300h-100v300z" />
+    <glyph glyph-name="be" unicode="&#xe0be;" 
+d="M300 800h100v-200h200l100 -100l-100 -100h-200v-400h-100v500h-200l-100 100l100 100h200v100z" />
+    <glyph glyph-name="bf" unicode="&#xe0bf;" 
+d="M200 800h100v-600h200l-250 -200l-250 200h200v600zM400 800h200v-100h-200v100zM400 600h300v-100h-300v100zM400 400h400v-100h-400v100z" />
+    <glyph glyph-name="c0" unicode="&#xe0c0;" 
+d="M200 800h100v-600h200l-250 -200l-250 200h200v600zM400 800h400v-100h-400v100zM400 600h300v-100h-300v100zM400 400h200v-100h-200v100z" />
+    <glyph glyph-name="c1" unicode="&#xe0c1;" 
+d="M75 700h650c41 0 75 -34 75 -75v-550c0 -41 -34 -75 -75 -75h-650c-41 0 -75 34 -75 75v550c0 41 34 75 75 75zM100 600v-100h100v100h-100zM300 600v-100h400v100h-400zM100 400v-100h100v100h-100zM300 400v-100h400v100h-400zM100 200v-100h100v100h-100zM300 200
+v-100h400v100h-400z" />
+    <glyph glyph-name="c2" unicode="&#xe0c2;" 
+d="M400 800l100 -300h300l-250 -200l100 -300l-250 200l-250 -200l100 300l-250 200h300z" />
+    <glyph glyph-name="c3" unicode="&#xe0c3;" 
+d="M400 800c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM150 700c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM650 700c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM400 600c110 0 200 -90 200 -200
+s-90 -200 -200 -200s-200 90 -200 200s90 200 200 200zM50 450c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM750 450c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM150 200c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50
+s22 50 50 50zM650 200c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50zM400 100c28 0 50 -22 50 -50s-22 -50 -50 -50s-50 22 -50 50s22 50 50 50z" />
+    <glyph glyph-name="c4" unicode="&#xe0c4;" 
+d="M34 800h632c18 0 34 -16 34 -34v-732c0 -18 -16 -34 -34 -34h-632c-18 0 -34 16 -34 34v732c0 18 16 34 34 34zM100 700v-500h500v500h-500zM350 150c-38 0 -63 -42 -44 -75s69 -33 88 0s-6 75 -44 75z" />
+    <glyph glyph-name="c5" unicode="&#xe0c5;" 
+d="M0 800h300l500 -500l-300 -300l-500 500v300zM200 700c-55 0 -100 -45 -100 -100s45 -100 100 -100s100 45 100 100s-45 100 -100 100z" />
+    <glyph glyph-name="c6" unicode="&#xe0c6;" 
+d="M0 600h200l300 -300l-200 -200l-300 300v200zM340 600h160l300 -300l-200 -200l-78 78l119 122zM150 500c-28 0 -50 -22 -50 -50s22 -50 50 -50s50 22 50 50s-22 50 -50 50z" />
+    <glyph glyph-name="c7" unicode="&#xe0c7;" 
+d="M400 800c220 0 400 -180 400 -400s-180 -400 -400 -400s-400 180 -400 400s180 400 400 400zM400 700c-166 0 -300 -134 -300 -300s134 -300 300 -300s300 134 300 300s-134 300 -300 300zM400 600c110 0 200 -90 200 -200s-90 -200 -200 -200s-200 90 -200 200
+s90 200 200 200zM400 500c-56 0 -100 -44 -100 -100s44 -100 100 -100s100 44 100 100s-44 100 -100 100z" />
+    <glyph glyph-name="c8" unicode="&#xe0c8;" 
+d="M0 700h559l-100 -100h-359v-500h500v159l100 100v-359h-700v700zM700 700l100 -100l-400 -400l-200 200l100 100l100 -100z" />
+    <glyph glyph-name="c9" unicode="&#xe0c9;" 
+d="M9 800h782c6 0 9 -3 9 -9v-782c0 -6 -3 -9 -9 -9h-782c-6 0 -9 3 -9 9v782c0 6 3 9 9 9zM150 722l-72 -72l100 -100l-100 -100l72 -72l172 172zM400 500v-100h300v100h-300z" />
+    <glyph glyph-name="ca" unicode="&#xe0ca;" 
+d="M0 800h800v-200h-50c0 55 -45 100 -100 100h-150v-550c0 -28 22 -50 50 -50h50v-100h-400v100h50c28 0 50 22 50 50v550h-150c-55 0 -100 -45 -100 -100h-50v200z" />
+    <glyph glyph-name="cb" unicode="&#xe0cb;" 
+d="M0 700h100v-400h-100v400zM200 700h350c21 0 39 -13 47 -31c0 0 103 -291 103 -319s-22 -50 -50 -50h-150c-28 0 -50 -25 -50 -50s39 -158 47 -184s-5 -55 -31 -63s-52 5 -66 31s-109 219 -128 238s-44 28 -72 28v400z" />
+    <glyph glyph-name="cc" unicode="&#xe0cc;" 
+d="M400 666c10 19 28 32 47 34l19 -3c26 -8 39 -37 31 -63s-47 -159 -47 -184s22 -50 50 -50h150c28 0 50 -22 50 -50s-103 -319 -103 -319c-8 -18 -26 -31 -47 -31h-350v400c28 0 53 9 72 28s114 212 128 238zM0 400h100v-400h-100v400z" />
+    <glyph glyph-name="cd" unicode="&#xe0cd;" 
+d="M200 700h300v-100h-100v-6c25 -4 50 -8 72 -16l-34 -94c-28 11 -58 16 -88 16c-139 0 -250 -111 -250 -250s111 -250 250 -250s250 111 250 250c0 31 -5 60 -16 88l91 37c14 -38 25 -81 25 -125c0 -193 -157 -350 -350 -350s-350 157 -350 350c0 176 130 323 300 347v3
+h-100v100zM700 584c0 0 -296 -348 -316 -368s-48 -20 -68 0s-20 48 0 68s384 300 384 300z" />
+    <glyph glyph-name="ce" unicode="&#xe0ce;" 
+d="M600 700l200 -150l-200 -150v100h-600v100h600v100zM200 300v-100h600v-100h-600v-100l-200 150z" />
+    <glyph glyph-name="cf" unicode="&#xe0cf;" 
+d="M300 800h100c55 0 100 -45 100 -100h100c55 0 100 -45 100 -100h-700c0 55 45 100 100 100h100c0 55 45 100 100 100zM100 500h100v-350c0 -28 22 -50 50 -50s50 22 50 50v350h100v-350c0 -28 22 -50 50 -50s50 22 50 50v350h100v-481c0 -11 -8 -19 -19 -19h-462
+c-11 0 -19 8 -19 19v481z" />
+    <glyph glyph-name="d0" unicode="&#xe0d0;" 
+d="M100 800h200v-400c0 -55 45 -100 100 -100s100 45 100 100v400h100v-400c0 -110 -90 -200 -200 -200h-50c-138 0 -250 90 -250 200v400zM0 100h700v-100h-700v100z" />
+    <glyph glyph-name="d1" unicode="&#xe0d1;" 
+d="M9 700h182c6 0 9 -3 9 -9v-482c0 -6 -3 -9 -9 -9h-182c-6 0 -9 3 -9 9v482c0 6 3 9 9 9zM609 700h182c6 0 9 -3 9 -9v-482c0 -6 -3 -9 -9 -9h-182c-6 0 -9 3 -9 9v482c0 6 3 9 9 9zM309 500h182c6 0 9 -3 9 -9v-282c0 -6 -3 -9 -9 -9h-182c-6 0 -9 3 -9 9v282
+c0 6 3 9 9 9zM0 100h800v-100h-800v100z" />
+    <glyph glyph-name="d2" unicode="&#xe0d2;" 
+d="M10 700h181c6 0 9 -3 9 -9v-191h-200v191c0 6 4 9 10 9zM610 700h181c6 0 9 -3 9 -9v-191h-200v191c0 6 5 9 10 9zM310 600h181c6 0 9 -3 9 -9v-91h-200v91c0 6 4 9 10 9zM0 400h800v-100h-800v100zM0 200h200v-191c0 -6 -3 -9 -9 -9h-182c-6 0 -9 3 -9 9v191zM300 200
+h200v-91c0 -6 -3 -9 -9 -9h-181c-6 0 -10 3 -10 9v91zM600 200h200v-191c0 -6 -3 -9 -9 -9h-181c-6 0 -10 3 -10 9v191z" />
+    <glyph glyph-name="d3" unicode="&#xe0d3;" 
+d="M0 700h800v-100h-800v100zM9 500h182c6 0 9 -3 9 -9v-482c0 -6 -3 -9 -9 -9h-182c-6 0 -9 3 -9 9v482c0 6 3 9 9 9zM309 500h182c6 0 9 -3 9 -9v-282c0 -6 -3 -9 -9 -9h-182c-6 0 -9 3 -9 9v282c0 6 3 9 9 9zM609 500h182c6 0 9 -3 9 -9v-482c0 -6 -3 -9 -9 -9h-182
+c-6 0 -9 3 -9 9v482c0 6 3 9 9 9z" />
+    <glyph glyph-name="d4" unicode="&#xe0d4;" 
+d="M50 600h500c28 0 50 -22 50 -50v-150l100 100h100v-300h-100l-100 100v-150c0 -28 -22 -50 -50 -50h-500c-28 0 -50 22 -50 50v400c0 28 22 50 50 50z" />
+    <glyph glyph-name="d5" unicode="&#xe0d5;" 
+d="M334 800h66v-800h-66l-134 200h-200v400h200zM500 600v100c26 0 52 -4 75 -10c130 -33 225 -150 225 -290s-95 -258 -225 -291h-3c-23 -6 -47 -9 -72 -9v100c17 0 34 2 50 6c86 22 150 100 150 194s-64 172 -150 194c-16 4 -33 6 -50 6zM500 500l25 -3
+c44 -11 75 -51 75 -97s-32 -86 -75 -97l-25 -3v200z" />
+    <glyph glyph-name="d6" unicode="&#xe0d6;" horiz-adv-x="600" 
+d="M334 800h66v-800h-66l-134 200h-200v400h200zM500 500l25 -3c44 -11 75 -51 75 -97s-32 -86 -75 -97l-25 -3v200z" />
+    <glyph glyph-name="d7" unicode="&#xe0d7;" horiz-adv-x="400" 
+d="M334 800h66v-800h-66l-134 200h-200v400h200z" />
+    <glyph glyph-name="d8" unicode="&#xe0d8;" 
+d="M309 800h82c6 0 10 -4 12 -9l294 -682l3 -19v-81c0 -6 -3 -9 -9 -9h-682c-6 0 -9 3 -9 9v81l3 19l294 682c2 5 6 9 12 9zM300 500v-200h100v200h-100zM300 200v-100h100v100h-100z" />
+    <glyph glyph-name="d9" unicode="&#xe0d9;" 
+d="M375 800c138 0 269 -39 378 -109l-53 -82c-93 60 -205 91 -325 91c-119 0 -229 -32 -322 -91l-53 82c109 70 237 109 375 109zM375 500c78 0 154 -23 216 -62l-53 -85c-46 30 -104 47 -163 47c-60 0 -112 -17 -159 -47l-54 85c62 40 134 62 213 62zM375 200
+c55 0 100 -45 100 -100s-45 -100 -100 -100s-100 45 -100 100s45 100 100 100z" />
+    <glyph glyph-name="da" unicode="&#xe0da;" horiz-adv-x="900" 
+d="M551 800c16 0 32 0 47 -3l-97 -97v-200h200l97 97c3 -15 3 -31 3 -47c0 -138 -112 -250 -250 -250c-32 0 -62 8 -90 19l-288 -291c-20 -20 -46 -28 -72 -28s-52 8 -72 28c-39 39 -39 105 0 144l291 287c-11 28 -19 59 -19 91c0 138 112 250 250 250zM101 150
+c-28 0 -50 -22 -50 -50s22 -50 50 -50s50 22 50 50s-22 50 -50 50z" />
+    <glyph glyph-name="db" unicode="&#xe0db;" 
+d="M141 700c84 -84 169 -167 253 -250c82 83 167 165 247 250l143 -141l-253 -253c84 -82 167 -166 253 -247l-143 -143c-81 86 -165 169 -247 253l-253 -253l-141 143c85 80 167 164 250 247c-83 84 -166 169 -250 253z" />
+    <glyph glyph-name="dc" unicode="&#xe0dc;" 
+d="M0 800h100l231 -300h38l231 300h100l-225 -300h225v-100h-300v-100h300v-100h-300v-200h-100v200h-300v100h300v100h-300v100h225z" />
+    <glyph glyph-name="dd" unicode="&#xe0dd;" horiz-adv-x="900" 
+d="M350 800c193 0 350 -157 350 -350c0 -61 -17 -119 -44 -169c4 -2 10 -6 13 -9l103 -100c16 -16 30 -49 30 -72c0 -56 -46 -102 -102 -102c-23 0 -56 14 -72 30l-100 103c-3 3 -7 9 -9 13c-50 -28 -108 -44 -169 -44c-193 0 -350 157 -350 350s157 350 350 350zM350 700
+c-139 0 -250 -111 -250 -250s111 -250 250 -250c62 0 119 23 163 60c7 11 19 25 31 31l3 3c34 43 53 97 53 156c0 139 -111 250 -250 250zM300 600h100v-100h100v-100h-100v-100h-100v100h-100v100h100v100z" />
+    <glyph glyph-name="de" unicode="&#xe0de;" horiz-adv-x="900" 
+d="M350 800c193 0 350 -157 350 -350c0 -61 -17 -119 -44 -169c4 -2 10 -6 13 -9l103 -100c16 -16 30 -49 30 -72c0 -56 -46 -102 -102 -102c-23 0 -56 14 -72 30l-100 103c-3 3 -7 9 -9 13c-50 -28 -108 -44 -169 -44c-193 0 -350 157 -350 350s157 350 350 350zM350 700
+c-139 0 -250 -111 -250 -250s111 -250 250 -250c62 0 119 23 163 60c7 11 19 25 31 31l3 3c34 43 53 97 53 156c0 139 -111 250 -250 250zM200 500h300v-100h-300v100z" />
+  </font>
+</defs></svg>

src/assets/jsons/app-constants.json

+{
+    "VERSION": "v1.0",
+    "BASE_POINT_API_URL": "http://internal-nhc-flair-service-poc2-lb-1549592231.us-east-1.elb.amazonaws.com:108/bhc/services/",
+    "BASE_POINT_API3": "/v1/ccf/services/",
+    "BASE_POINT_API2": "/ccf/",
+    "BASE_POINT_API1": "/ccfv5/services/",
+    "GRAPH_QL_API": "http://172.31.0.14:8020/"
+}
\ No newline at end of file

src/assets/jsons/fileTable.json

+{
+    "status": "SUCCESS",
+    "message": "",
+    "data": {
+        "header_content": [{
+                "key": "file_name",
+                "label": "File Name"
+            },
+            {
+                "key": "status",
+                "label": "Status"
+            }
+
+        ],
+        "body_content": [{
+                "file_name": "File1",
+                "status": "In-progress"
+            },
+            {
+                "file_name": "File2",
+                "status": "Not started"
+            },
+            {
+                "file_name": "File3",
+                "status": "Completed"
+            }, {
+                "file_name": "File1",
+                "status": "In-progress"
+            },
+            {
+                "file_name": "File2",
+                "status": "Not started"
+            },
+            {
+                "file_name": "File3",
+                "status": "Completed"
+            }, {
+                "file_name": "File1",
+                "status": "In-progress"
+            },
+            {
+                "file_name": "File2",
+                "status": "Not started"
+            },
+            {
+                "file_name": "File3",
+                "status": "Completed"
+            }, {
+                "file_name": "File1",
+                "status": "In-progress"
+            },
+            {
+                "file_name": "File2",
+                "status": "Not started"
+            },
+            {
+                "file_name": "File3",
+                "status": "Completed"
+            }, {
+                "file_name": "File1",
+                "status": "In-progress"
+            },
+            {
+                "file_name": "File2",
+                "status": "Not started"
+            },
+            {
+                "file_name": "File3",
+                "status": "Completed"
+            }, {
+                "file_name": "File1",
+                "status": "In-progress"
+            },
+            {
+                "file_name": "File2",
+                "status": "Not started"
+            },
+            {
+                "file_name": "File3",
+                "status": "Completed"
+            }
+
+        ]
+    }
+}
\ No newline at end of file

src/assets/jsons/requestTable.json

+{
+    "status": "SUCCESS",
+    "message": "Fetched dataset approval request details successfully",
+    "data": {
+        "header_content": [{
+                "key": "table_name",
+                "label": "Table Name",
+                "place_holder": "Search By Table Name",
+                "column_search": {
+                    "type": "text"
+                }
+            },
+            {
+                "key": "data_type",
+                "label": "Data Type",
+                "place_holder": "Search By Data type",
+                "column_search": {
+                    "type": "text"
+                }
+            },
+            {
+                "key": "use_case",
+                "label": "Use Case",
+                "place_holder": "Search By Use Case",
+                "column_search": {
+                    "type": "text"
+                }
+            },
+            {
+                "key": "arch_type",
+                "label": "Arch Type",
+                "place_holder": "Search By Arch Type",
+                "column_search": {
+                    "type": "text"
+                }
+            },
+            {
+                "key": "data_category",
+                "label": "Data Category",
+                "place_holder": "Search By Data Category",
+                "column_search": {
+                    "type": "text"
+                }
+            },
+            {
+                "key": "data_subcategory",
+                "label": "Data subcategory",
+                "place_holder": "Search By Data subcategory",
+                "column_search": {
+                    "type": "text"
+                }
+            }
+        ],
+        "body_content": [{
+                "table_name": "Table1",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            },
+            {
+                "table_name": "Table1",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table1",
+                "data_type": "Type3",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table3",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table1",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            },
+            {
+                "table_name": "Table1",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table1",
+                "data_type": "Type3",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table3",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table1",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            },
+            {
+                "table_name": "Table1",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table1",
+                "data_type": "Type3",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table3",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table1",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            },
+            {
+                "table_name": "Table1",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table1",
+                "data_type": "Type3",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table2",
+                "data_type": "Type2",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }, {
+                "table_name": "Table3",
+                "data_type": "Type1",
+                "use_case": "",
+                "arch_type": "",
+                "data_category": "",
+                "data_subcategory": ""
+            }
+        ]
+    }
+}
\ No newline at end of file

src/assets/jsons/tagsList.json

+{
+    "status": "SUCCESS",
+    "message": "Fetched Tags list successfully",
+    "data": [{
+        "value": "tag1",
+        "label": "TAG1"
+    }, {
+        "value": "tag2",
+        "label": "TAG2"
+    }, {
+        "value": "tag3",
+        "label": "TAG3"
+    }, {
+        "value": "tag4",
+        "label": "TAG4"
+    }, {
+        "value": "tag5",
+        "label": "TAG5"
+    }, {
+        "value": "tag6",
+        "label": "TAG6"
+    }]
+}
\ No newline at end of file

src/assets/jsons/text.json

+{
+    "status": "SUCCESS",
+    "message": "Data fetched successfully.",
+    "data": {
+        "class_details": [
+            "ORGANISM",
+            "DISEASE",
+            "PROBLEM",
+            "TREATMENT"
+        ],
+        "text": "Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.Contains information about each patient's medical diagnoses, which are derived from the EMR diagnosis workflow. This includes the patient's cancer diagnoses patient's cancer diagnoses as well as any other non-cancer diagnoses cancer diagnoses recorded in the patient chart.",
+        "annotation_details": [{
+                "startIndex": 32,
+                "endIndex": 39,
+                "tag": "ORGANISM"
+            },
+            {
+                "startIndex": 147,
+                "endIndex": 156,
+                "tag": "PROBLEM"
+            },
+            {
+                "startIndex": 157,
+                "endIndex": 164,
+                "tag": "ORGANISM"
+            },
+            {
+                "startIndex": 167,
+                "endIndex": 173,
+                "tag": "DISEASE"
+            },
+            {
+                "startIndex": 216,
+                "endIndex": 225,
+                "tag": "PROBLEM"
+            },
+            {
+                "startIndex": 226,
+                "endIndex": 232,
+                "tag": "DISEASE"
+            },
+            {
+                "startIndex": 258,
+                "endIndex": 266,
+                "tag": "ORGANISM"
+            }
+        ]
+    }
+}
\ No newline at end of file

src/environments/environment.prod.ts

+export const environment = {
+  production: true,
+  sessionInvalidMessage: 'Your session is not valid. Please Login again',
+  errorMessage: 'Could not fetch the data at this moment',
+  serviceUnavailableMessage: 'Service Unavailable',
+  downloadErrorMessage: 'Could not fetch the data at this moment',
+  enableSSO: false,
+  accessTokenStatic: 'test',
+  idTokenStatic: 'test',
+  clientName: 'zs',
+  footNote: 'Copyright 2021, ZS associates'
+};

src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  sessionInvalidMessage: 'Your session is not valid. Please Login again',
+  errorMessage: 'Could not fetch the data at this moment',
+  serviceUnavailableMessage: 'Service Unavailable',
+  downloadErrorMessage: 'Could not fetch the data at this moment',
+  enableSSO: false,
+  accessTokenStatic: 'test',
+  idTokenStatic: 'test',
+  clientName: 'zs',
+  footNote: 'Copyright 2021, ZS associates'
+};
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>BHCMetatagging</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+import '@angular/localize/init'
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src/styles-variables.scss

+@font-face {
+    font-family: "Roboto-Light";
+    /* Not used */
+    src: url("./assets/fonts/Roboto/Roboto-Light.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Regular";
+    /* Most used */
+    src: url("./assets/fonts/Roboto/Roboto-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Medium";
+    /* Less used */
+    src: url("./assets/fonts/Roboto/Roboto-Medium.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Bold";
+    /* Used to highlight as well as indicate selected text */
+    src: url("./assets/fonts/Roboto/Roboto-Bold.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Black";
+    /* Not used */
+    src: url("./assets/fonts/Roboto/Roboto-Black.ttf");
+}
+
+// Common colors
+$zs-main-color: #ed8b00;
+$zs-main-color-light: #FFFAF3;
+$zs-logo-clr: #41889F;
+$nav-itemHoverClr: #ed8b00;
+$nav-dropdownActiveBgClr: #ED8B0026;
+$nav-dropdownHoverBgClr: #FFFFFF33;
+$nav-itembgClr: #e5eaef;
+$activeClr: #ffffff;
+$main-headerBgClr: #6e2b62;
+$main-footerBgClr: #6e2b62;
+$webkit-scrollbar-trackBgClr: #ebe8e8;
+$webkit-scrollbar-thumbBgClr: rgb(196,
+191,
+191);
+$webkit-scrollbar-thumbHoverBgClr: #555;
+$node-drop-slotBgClr: #ddffee;
+$node-drop-slotBrderClr: #888;
+$node-content-wrapper-activeBgClr: #bbbbbb;
+$node-content-wrapper-focusedBgClr: #eeeeee;
+$node-content-wrapperHoverBgClr: #f7f7f7;
+$node-content-wrapperHoverBoxShadow: #999;
+$is-dragging-overBg: #dddddd;
+$expand-treeBorder-leftClr: #23527c;
+$nav-linkClr: rgb(255 255 255);
+$action-goodClr: #24a148;
+$action-dangerClr: #da1e28;
+$color-white: #FFF;
+$light-grey: #D0DDE6;
+$grey: #888888;
+$nav-itemBorderClr: #d0dde6;
+$container-borderClr: #dee2e6;
+$bg-gray: #E5E5E5;
+$placeholder-clr: #98A4AE;
+$hover-Bg-clr: #e9ecef;
+$pagination-bg-clr: #B2BFC8;
+$null_value_color: #A1DAD0;
+$distinct_value_color: #50AF9E;
+$non_distinct_value_color: #36756A;
+// Data catalog - Tree colors
+$tree-gray: #CCC;
+$box-shadow: #b0c1d9;
+$menu-bg-gray: #FAFAFA;
+$tree-bg: #F2F2F2;
+
+/*variables for buttons*/
+
+// $btn-primary-border-color:#327F97;
+// $btn-primary-background-color:#498493;
+// $btn-primary-text-color:#FFFFFF;
+// $btn-primary-hover-border-color:#0099C9;
+// $btn-primary-hover-background-color:#499BBC;
+// $btn-primary-hover-text-color:#FFFFFF;
+// $btn-secondary-border-color:#327F97;
+// $btn-secondary-background-color:transparent;
+// $btn-secondary-text-color:#327F97;
+// $btn-secondary-hover-border-color:#0099c9;
+// $btn-secondary-hover-text-color:#138DBF;
+:root {
+    --primaryBtnBgColor: #498493;
+    --primaryBtnTextColor: #ffffff;
+    --primaryBtnBorderColor: #498493;
+    --primaryBtnHoverBgColor: #499bbc;
+    --primaryBtnHoverTextColor: #ffffff;
+    --primaryBtnHoverBorderColor: #0099c9;
+    --secondaryBtnBgColor: #ffffff;
+    --secondaryBtnTextColor: #498493;
+    --secondaryBtnBorderColor: #498493;
+    --secondaryBtnHoverBgColor: #498493;
+    --secondaryBtnHoverTextColor: #ffffff;
+    --secondaryBtnHoverBorderColor: #498493;
+    --fontFamilyBase: "Roboto-Regular";
+    --fontFamilyMedium: "Roboto-Medium";
+    --fontSizeBase: 0.84rem;
+    --textColorBase: #53565A;
+    --textColorDark: #74797D;
+    --clickableElementClr: #327F97;
+    --tableHeaderBgClr: #E5EAEF;
+    --typeAheadSearchLeft: 0px;
+    --typeAheadSearchMaxWidth: 500px;
+}
+
+$btn-primary-background-color: var(--primaryBtnBgColor);
+$btn-primary-text-color: var(--primaryBtnTextColor);
+$btn-primary-border-color: var(--primaryBtnBorderColor);
+$btn-primary-hover-background-color: var(--primaryBtnHoverBgColor);
+$btn-primary-hover-text-color: var(--primaryBtnHoverTextColor);
+$btn-primary-hover-border-color: var(--primaryBtnHoverBorderColor);
+$btn-secondary-background-color: var(--secondaryBtnBgColor);
+$btn-secondary-text-color: var(--secondaryBtnTextColor);
+$btn-secondary-border-color: var(--secondaryBtnBorderColor);
+$btn-secondary-hover-background-color: var(--secondaryBtnHoverBgColor);
+$btn-secondary-hover-text-color: var(--secondaryBtnHoverTextColor);
+$btn-secondary-hover-border-color: var(--secondaryBtnHoverBorderColor);
+$fontFamilyBase: var(--fontFamilyBase);
+$fontFamilyMedium: var(--fontFamilyMedium);
+$fontSizeBase: var(--fontSizeBase);
+$text-color-base: var(--textColorBase);
+$text-color-dark: var(--textColorDark);
+$clickable-element-clr: var(--clickableElementClr);
+$table-header-bg-clr: var(--tableHeaderBgClr);
+$typeahead-search-position-left: var(--typeAheadSearchLeft);
+$typeahead-search-max-width: var(--typeAheadSearchMaxWidth);
\ No newline at end of file

src/styles.scss

+/* You can add global styles to this file, and also import other style files */
+
+@import './styles-variables.scss';
+@import "~ng-pick-datetime/assets/style/picker.min.css";
+// @import "~angular2-multiselect-dropdown/themes/default.theme.css";
+// @import url(./assets/css/placeholder-loading.css);
+@font-face {
+    font-family: "Roboto-Light";
+    /* Not used */
+    src: url("./assets/fonts/Roboto/Roboto-Light.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Regular";
+    /* Most used */
+    src: url("./assets/fonts/Roboto/Roboto-Regular.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Medium";
+    /* Less used */
+    src: url("./assets/fonts/Roboto/Roboto-Medium.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Bold";
+    /* Used to highlight as well as indicate selected text */
+    src: url("./assets/fonts/Roboto/Roboto-Bold.ttf");
+}
+
+@font-face {
+    font-family: "Roboto-Black";
+    /* Not used */
+    src: url("./assets/fonts/Roboto/Roboto-Black.ttf");
+}
+
+body {
+    overflow: hidden;
+    font-family: $fontFamilyBase;
+    height: 100vh;
+    font-size: $fontSizeBase;
+    #iframe {
+        height: 100vh;
+        width: 100vw;
+    }
+}
+
+.dropdown-menu {
+    font-size: 0.84rem !important;
+}
+
+.pageHeading {
+    font-family: $fontFamilyMedium;
+    font-size: 1.4rem;
+    color: $text-color-base;
+    border-bottom: 1px solid $container-borderClr !important;
+    padding-bottom: 0.8rem;
+}
+
+.app-container {
+    height: 100vh;
+    font-family: $fontFamilyBase;
+    font-size: $fontSizeBase;
+    overflow: hidden;
+    width: 100vw;
+}
+
+.cc-head {
+    position: absolute;
+    top: 15px;
+    left: 14px;
+}
+
+// Container class if nothing present other than header
+.main-content {
+    overflow: auto;
+    height: calc(100vh - 64px);
+    // margin-top: 5px;
+    background-color: $tree-bg;
+    padding-top: 10px;
+}
+
+// container only if breadcrumb is present
+.sub-main-content {
+    overflow: auto;
+    height: calc(100vh - 35px - 35px - 35px - 3px);
+}
+
+// Container class if breadcrumb and button panel present
+.sub-main-content-with-panel {
+    overflow: auto;
+    height: calc(100vh - 35px - 35px - 35px - 3.5rem);
+}
+
+// nav bar style --- starts here
+.nav {
+    .nav-item {
+        margin-left: 20px;
+        padding: 4px 0px;
+        cursor: pointer;
+        // font-weight: 600;
+        font-family: $fontFamilyMedium;
+        opacity: 1;
+        color: $text-color-dark;
+    }
+    .nav-clock {
+        position: absolute;
+        right: 2rem;
+        padding: 4px 0px;
+        font-family: $fontFamilyMedium;
+        opacity: 1;
+        color: $text-color-dark;
+    }
+    .nav-item:hover {
+        color: $nav-itemHoverClr;
+    }
+    .active {
+        border-bottom: 3px solid $nav-itemHoverClr;
+        opacity: 1;
+        color: $text-color-base;
+    }
+}
+
+// navbar style ends here
+// custom nav bar style --- starts here
+.container-body {
+    padding: 10px 20px;
+    border: 1px solid $container-borderClr;
+    height: 89%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: $color-white;
+}
+
+.container-body-with-breadcrumb {
+    height: calc(100vh - 10.7rem);
+    overflow: auto;
+}
+
+.nav-cards {
+    .nav-item {
+        background: $nav-itembgClr 0% 0% no-repeat padding-box;
+        border: 1px solid $nav-itemBorderClr;
+        border-radius: 4px 4px 0px 0px;
+        // opacity: 0.7;
+        margin-right: 2px;
+        margin-left: 0;
+        padding: 5px 20px;
+        margin-bottom: -1px;
+        z-index: 1;
+    }
+    .nav-item:hover {
+        color: $nav-itemHoverClr;
+        // font-weight: 600;
+    }
+    .active {
+        // font-weight: 600;
+        opacity: 1;
+        background: $activeClr 0% 0% no-repeat padding-box;
+        border-color: $nav-itemBorderClr $nav-itemBorderClr $color-white;
+    }
+}
+
+// custom navbar style ends here
+// Main Header styles ends here
+// scrollbar styles starts here
+::-webkit-scrollbar {
+    width: 7px;
+    height: 8px;
+}
+
+
+/* Track */
+
+::-webkit-scrollbar-track {
+    background: $webkit-scrollbar-trackBgClr;
+}
+
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+    background: $webkit-scrollbar-thumbBgClr;
+}
+
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+    background: $webkit-scrollbar-thumbHoverBgClr;
+}
+
+// Scrollbar styles ends here
+// ====================== For Angular Tree Module ====================================
+body {
+    margin: auto;
+}
+
+
+/* You can add global styles to this file, and also import other style files */
+
+// @import '~@circlon/angular-tree-component/css/angular-tree-component.css';
+.expand-tree .tree-children.tree-children-no-padding {
+    padding-left: 0;
+}
+
+.expand-tree .tree-children {
+    padding-left: 20px;
+    overflow: hidden;
+}
+
+.expand-tree .node-drop-slot {
+    display: block;
+    height: 2px;
+}
+
+.expand-tree .node-drop-slot.is-dragging-over {
+    background: $node-drop-slotBgClr;
+    height: 20px;
+    border: 2px dotted $node-drop-slotBrderClr;
+}
+
+.expand-tree .toggle-children-wrapper-expanded .toggle-children {
+    /*transform: rotate(90deg) */
+}
+
+.expand-tree .toggle-children-wrapper-collapsed .toggle-children {
+    /*transform: rotate(0);*/
+}
+
+.expand-tree .toggle-children-wrapper {
+    padding: 8px 10px;
+}
+
+
+/* tslint:disable */
+
+.expand-tree .toggle-children {
+    //   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABAhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzRkRFQjcxODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRkRFQjcwODUzNTExRTU4RTQwRkQwODFEOUZEMEE3IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTk5NzA1OGEtZDI3OC00NDZkLWE4ODgtNGM4MGQ4YWI1NzNmIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRkZmQxMGMtY2NlNS0xMTc4LWE5OGQtY2NkZmM5ODk5YWYwIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z2x5cGhpY29uczwvcmRmOmxpPiA8L3JkZjpBbHQ+IDwvZGM6dGl0bGU+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5iogFwAAAGhJREFUeNpiYGBgKABigf///zOQg0EARH4A4gZyDIIZ8B/JoAJKDIDhB0CcQIkBRBtEyABkgxwoMQCGD6AbRKoBGAYxQgXIBRuZGKgAKPIC3QLxArnRSHZCIjspk52ZKMrOFBUoAAEGAKnq593MQAZtAAAAAElFTkSuQmCC');
+    height: 15px;
+    width: 16px;
+    background-size: contain;
+    display: inline-block;
+    position: relative;
+    top: 1px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.expand-tree .toggle-children-placeholder {
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    position: relative;
+    top: 1px;
+    padding-right: 3px;
+}
+
+.expand-tree .node-content-wrapper {
+    display: block;
+    width: 100%;
+    padding: 8px 10px;
+    border-radius: 2px;
+    transition: background-color 0.15s, box-shadow 0.15s;
+}
+
+.expand-tree .node-wrapper {
+    display: flex;
+    align-items: flex-start;
+}
+
+.expand-tree .node-content-wrapper-active,
+.expand-tree .node-content-wrapper.node-content-wrapper-active:hover,
+.expand-tree .node-content-wrapper-active.node-content-wrapper-focused {
+    background: $node-content-wrapper-activeBgClr;
+}
+
+.expand-tree .node-content-wrapper-focused {
+    background: $node-content-wrapper-focusedBgClr;
+}
+
+.expand-tree .node-content-wrapper:hover {
+    background: $node-content-wrapperHoverBgClr;
+}
+
+.expand-tree .node-content-wrapper-active,
+.expand-tree .node-content-wrapper-focused,
+.expand-tree .node-content-wrapper:hover {
+    box-shadow: inset 0 0 1px $node-content-wrapperHoverBoxShadow;
+}
+
+.expand-tree .node-content-wrapper.is-dragging-over {
+    background: $is-dragging-overBg;
+    box-shadow: inset 0 0 1px $node-content-wrapperHoverBoxShadow;
+}
+
+.expand-tree .node-content-wrapper.is-dragging-over-disabled {
+    opacity: 0.5;
+}
+
+.expand-tree tree-viewport {
+    // height: 100%;
+    height: 93%;
+    overflow: auto;
+    display: block;
+}
+
+.hierachy-tree tree-viewport {
+    height: auto !important;
+}
+
+.expand-tree .tree-children {
+    padding-left: 20px;
+}
+
+.expand-tree .empty-tree-drop-slot .node-drop-slot {
+    height: 20px;
+    min-width: 100px;
+}
+
+.expand-tree .angular-tree-component {
+    width: 100%;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Chrome/Safari/Opera */
+    -khtml-user-select: none;
+    /* Konqueror */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* IE/Edge */
+    user-select: none;
+    /* non-prefixed version, currently not supported by any browser */
+}
+
+.expand-tree tree-root .angular-tree-component-rtl {
+    direction: rtl;
+}
+
+.expand-tree tree-root .angular-tree-component-rtl .toggle-children-wrapper-collapsed .toggle-children {
+    transform: rotate(180deg) !important;
+}
+
+.expand-tree tree-root .angular-tree-component-rtl .tree-children {
+    padding-right: 20px;
+    padding-left: 0;
+}
+
+.expand-tree div.angular-tree-component div.tree-children::before,
+.expand-tree div.angular-tree-component::before {
+    content: "";
+    position: absolute;
+    border-left: 1px dotted $expand-treeBorder-leftClr;
+    height: 100%;
+    top: -10px;
+    left: 6px;
+}
+
+.expand-tree div.angular-tree-component {
+    padding: 0;
+    margin: 0;
+}
+
+.expand-tree div.angular-tree-component div.tree-children {
+    position: relative;
+    padding-left: 0;
+    margin-left: 16px;
+}
+
+.expand-tree div.angular-tree-component div.tree-children::before {
+    left: 5px;
+}
+
+.expand-tree .node-drop-slot {
+    height: 2px;
+}
+
+.expand-tree div.angular-tree-component tree-node>div>.node-wrapper {
+    margin-left: 24px;
+}
+
+.expand-tree div.angular-tree-component tree-node>div>.node-wrapper>.node-content-wrapper {
+    margin-left: 4px;
+}
+
+.expand-tree div.angular-tree-component tree-node>div.tree-node-leaf .node-wrapper {
+    margin-left: 0;
+    position: relative;
+}
+
+.expand-tree div.angular-tree-component tree-node>div::before {
+    content: "";
+    position: absolute;
+    border-bottom: 1px dotted $expand-treeBorder-leftClr;
+    width: 7px;
+    margin-top: 12px;
+    left: 6px;
+}
+
+.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper {
+    width: 10px;
+    height: 5px;
+    border: 1px solid $expand-treeBorder-leftClr;
+    position: relative;
+    margin-top: 3px;
+    margin-left: 14px;
+    display: inline-block;
+    background-color: $color-white;
+    z-index: 1;
+}
+
+.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper::before {
+    content: "";
+    display: inline-block;
+    width: 8px;
+    border-top: 1px solid $expand-treeBorder-leftClr;
+    position: absolute;
+    top: 45%;
+    left: 25%;
+}
+
+.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
+    content: "";
+    display: inline-block;
+    height: 7px;
+    border-left: 1px solid $expand-treeBorder-leftClr;
+    position: absolute;
+    top: 4.5px;
+    left: 8.5px;
+}
+
+.expand-tree div.angular-tree-component tree-node>div .toggle-children-wrapper .toggle-children {
+    display: none;
+}
+
+.expand-tree div.angular-tree-component tree-node>div .node-content-wrapper {
+    margin: 0;
+    padding: 3px 0px 0px 5px;
+    box-shadow: none;
+    background: none;
+}
+
+.expand-tree div.angular-tree-component>tree-node>div::before {
+    left: 14px;
+}
+
+.sports {
+    background-position: -96px -72px;
+}
+
+.icons-medium {
+    // background: url(./assets/angular-tree/blank-file.svg);
+    background-repeat: no-repeat;
+    padding-left: 20px;
+    height: 10px;
+    width: 10px;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+    color: $nav-linkClr !important;
+}
+
+.navbar {
+    .nav-item {
+        &.nav-link {
+            &.dropdown-toggle:hover {
+                background: $nav-dropdownHoverBgClr 0% 0% no-repeat padding-box;
+            }
+        }
+    }
+}
+
+// Main Header styles ends here
+.overflow-text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: pre;
+}
+
+// Main Header styles ends here
+.cursor-pointer {
+    cursor: pointer;
+}
+
+// Table custom classes for columns starts here
+.long-width {
+    min-width: 250px !important;
+    max-width: 250px !important;
+}
+
+.medium-width {
+    min-width: 220px !important;
+    max-width: 220px !important;
+}
+
+.medium-width2 {
+    min-width: 185px !important;
+    max-width: 185px !important;
+}
+
+.action-good {
+    color: $action-goodClr !important;
+}
+
+.action-danger {
+    color: $action-dangerClr !important;
+}
+
+.action-info {
+    color: $clickable-element-clr !important;
+}
+
+// Table custom classes for columns ends here
+// Table styles (general)
+.table {
+    thead {
+        background-color: $table-header-bg-clr;
+    }
+    tbody {
+        background-color: $color-white;
+    }
+}
+
+//Button custom styles are given below
+.btn {
+    font-size: inherit !important;
+}
+
+.btn-primary {
+    border-color: $btn-primary-border-color !important;
+    background-color: $btn-primary-background-color !important;
+    color: $btn-primary-text-color !important;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.btn-primary:hover {
+    border-color: $btn-primary-hover-border-color !important;
+    background-color: $btn-primary-hover-background-color !important;
+    color: $btn-primary-hover-text-color !important;
+}
+
+.btn:active:focus,
+.btn:focus {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active:focus,
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.show>.btn-primary.dropdown-toggle:focus {
+    // box-shadow: 0 0 0 0.2rem #498493 !important;
+    box-shadow: none !important;
+}
+
+//secondary button css
+.btn-secondary {
+    background-color: transparent !important;
+    color: $btn-secondary-text-color !important;
+    border-color: $btn-secondary-border-color !important;
+}
+
+.btn-secondary:hover {
+    background-color: $btn-secondary-hover-background-color !important;
+    color: $btn-secondary-hover-text-color !important;
+    border-color: $btn-secondary-hover-border-color !important;
+}
+
+.button-panel {
+    position: fixed;
+    bottom: 2rem;
+    width: 100vw;
+    padding: 10px 0;
+    height: 3.3rem;
+}
+
+// Toaster Style starts here
+.toast-close-button,
+button.toast-close-button {
+    padding: 11px !important;
+}
+
+.toast-container>div {
+    width: 400px !important;
+}
+
+// Toaster Style ends here
+// Heading style starts
+.main-heading {
+    color: $text-color-base;
+    font-family: $fontFamilyMedium;
+    font-size: 18px;
+}
+
+.sub-heading {
+    color: $zs-main-color;
+    font-family: $fontFamilyMedium;
+}
+
+.grey-label {
+    font-family: $fontFamilyMedium;
+    color: $text-color-base;
+}
+
+.info-clr {
+    color: #A8A8A8 !important;
+}
+
+// Heading style ends
+// Form Control style overrideing start
+.form-control {
+    font-size: inherit !important;
+}
+
+.form-control:focus {
+    box-shadow: none !important;
+}
+
+.required::after {
+    content: "*";
+    color: $action-dangerClr;
+}
+
+// Form Control style overrideing end
+.dataTables_wrapper.no-footer .dataTables_scrollBody {
+    border-bottom: 0 !important;
+}
+
+.no-table-rows div.paging_simple_numbers {
+    display: none !important;
+}
+
+.activePointer {
+    pointer-events: pointer;
+}
+
+.clickable-element {
+    color: $clickable-element-clr !important;
+    cursor: pointer !important;
+    &:hover {
+        text-decoration: underline !important;
+    }
+}
+
+
+/* DataTable Styles*/
+
+.dataTables_wrapper.no-footer .dataTables_scrollBody {
+    border-bottom: 1px solid $color-white !important;
+}
+
+div.dataTables_scrollBody>table>tbody>tr>td {
+    padding-left: 16px !important;
+    &.table-cell,
+    &.table-cell-action {
+        cursor: default;
+    }
+    &.table-cell.row-click-active,
+    .clickable-element {
+        cursor: pointer;
+    }
+}
+
+div.dataTables_scrollBody>table {
+    padding-top: 0 !important;
+}
+
+.dataTables_scroll .dataTables_scrollHeadInner {
+    min-width: 100%;
+}
+
+.table-filter-body {
+    max-height: calc(100vh - 210px);
+    overflow: auto;
+}
+
+div.dt-buttons {
+    position: relative !important;
+    float: right !important;
+}
+
+.color-light-gray {
+    background-color: $bg-gray;
+}
+
+span.ph-item {
+    min-height: 20px;
+    pointer-events: none;
+}
+
+.cell-processing .form-control,
+.cell-processing .checkbox-span {
+    display: none;
+}
+
+.text-hide {
+    font: 0/0 a !important;
+    color: transparent !important;
+    text-shadow: none !important;
+    background-color: $bg-gray !important;
+    border: 0 !important;
+}
+
+.customSelect .ng-select-container {
+    background: transparent !important;
+    border: 0px !important;
+    // border-bottom: 1px solid gray !important;
+    border-radius: 0px !important;
+    box-shadow: none !important;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+}
+
+.customSelect .ng-select-container .ng-value-container .ng-placeholder {
+    // color: #888c9b !important;
+    // font-weight: 500 !important;
+    color: $placeholder-clr !important;
+    font-family: $fontFamilyBase;
+}
+
+.customSelect .ng-select-single .ng-select-container .ng-value-container .ng-value {
+    color: $text-color-base !important;
+    // font-weight: 400 !important;
+}
+
+.customSelect.ng-select.ng-select-single .ng-select-container .ng-value-container,
+.customSelect.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value {
+    padding-left: 0px !important;
+}
+
+.customSelect.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
+    padding-left: 0 !important;
+}
+
+.customSelect,
+.ng-select div,
+.ng-select input,
+.customSelect span {
+    font-weight: 400 !important;
+}
+
+table.dataTable thead th,
+table.dataTable thead td {
+    border-bottom: 1px solid $container-borderClr !important;
+}
+
+.serverside-table {
+    .dataTables_scrollBody {
+        thead {
+            visibility: collapse;
+        }
+    }
+}
+
+.serverside-table .dataTables_wrapper .dataTables_paginate .paginate_button {
+    padding: .5rem .75rem !important;
+    border: 1px solid $container-borderClr !important;
+    color: $text-color-dark !important;
+    border-radius: 0px !important;
+    margin-left: unset !important;
+    &:hover {
+        text-decoration: none !important;
+        background: $hover-Bg-clr !important;
+        border-color: $container-borderClr !important;
+        color: $text-color-dark !important;
+    }
+}
+
+.serverside-table .dataTables_wrapper .dataTables_paginate .paginate_button.current,
+.serverside-table .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
+    background: $nav-itemBorderClr !important;
+    color: $text-color-base !important;
+    border-color: $pagination-bg-clr !important;
+    font-family: $fontFamilyMedium !important;
+}
+
+.serverside-table .dataTables_wrapper .dataTables_paginate .previous {
+    border-top-left-radius: .25rem !important;
+    border-bottom-left-radius: .25rem !important;
+}
+
+.serverside-table .dataTables_wrapper .dataTables_paginate .next {
+    border-top-right-radius: .25rem !important;
+    border-bottom-right-radius: .25rem !important;
+}
+
+// modal style --- starts
+.standard-modal-dqm {
+    .modal-dialog {
+        max-width: 1020px;
+    }
+}
+
+// modal style --- ends
+.page-item.active .page-link {
+    background-color: $nav-itemBorderClr !important;
+    color: $text-color-base !important;
+    border-color: $pagination-bg-clr !important;
+    font-family: $fontFamilyMedium !important;
+}
+
+.page-link {
+    color: $text-color-dark !important;
+}
+
+.page-link :focus {
+    box-shadow: 0 0 0 0.2rem #327f9740 !important;
+}
+
+.clickable {
+    color: $clickable-element-clr;
+    cursor: pointer;
+}
+
+// accordion
+.accordion-header {
+    font-size: 0.9rem;
+    font-family: $fontFamilyMedium;
+    color: $text-color-base;
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    font-size: 0.85rem;
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items {
+    max-height: 180px !important;
+}
+
+.ng-select .ng-clear-wrapper {
+    padding-left: 5px !important;
+}
+
+.ng-select.ng-select-disabled>.ng-select-container {
+    background-color: $hover-Bg-clr !important;
+}
+
+// .ng-select {
+//     .ng-select-container {
+//         .ng-value-container {
+//             flex-wrap: wrap;
+//             min-width: 0;
+//             .ng-value {
+//                 white-space: nowrap;
+//                 min-width: 0;
+//                 display: flex;
+//                 max-width: 95%;
+//                 .ng-value-label {
+//                     // @include wrapt-text;
+//                     white-space: nowrap;
+//                     overflow: hidden;
+//                     text-overflow: ellipsis;
+//                 }
+//             }
+//         }
+//     }
+// }
+.records-available {
+    color: $bg-gray;
+    font-size: 25px !important;
+    font-size: 1.875rem !important;
+}
+
+.modal-content {
+    font-size: $fontSizeBase;
+}
+
+.modal-header {
+    padding: 1rem 2rem !important;
+    .close {
+        background: none;
+        border: 0;
+        font-size: 1.5rem;
+    }
+}
+
+.modal-body {
+    padding: 1rem 2rem !important;
+}
+
+[type="radio"]:checked,
+[type="radio"]:not(:checked) {
+    position: absolute;
+    left: -9999px;
+}
+
+[type="radio"]:checked+label,
+[type="radio"]:not(:checked)+label {
+    // position: relative;
+    // padding-left: 28px;
+    // cursor: pointer;
+    // line-height: 20px;
+    // display: inline-block;
+    // color: #666;
+}
+
+[type="radio"]:checked+label:before {
+    content: "";
+    position: absolute;
+    left: -1px;
+    top: 2px;
+    width: 15px;
+    height: 15px;
+    border: 1px solid #888282;
+    border-radius: 100%;
+    background: #fff;
+}
+
+[type="radio"]:checked+label:after,
+[type="radio"]:not(:checked)+label:after {
+    content: "";
+    width: 9px;
+    height: 9px;
+    background: #ed8b00;
+    position: absolute;
+    top: 5px;
+    left: 2px;
+    border-radius: 100%;
+    transition: all 0.2s ease;
+}
+
+[type="radio"]:not(:checked)+label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+}
+
+[type="radio"]:checked+label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+input[type="checkbox"] {
+    border: 1px solid #888282;
+    appearance: none;
+    padding: 8px !important;
+    border-radius: 2px;
+    margin-top: 2px;
+}
+
+input[type="checkbox"]:checked {
+    background-color: $clickable-element-clr !important;
+}
+
+input[type="checkbox"]+label {
+    padding-left: 4px;
+}
+
+input[type="checkbox"]+label::before {
+    content: '\2713';
+    display: inline-block;
+    color: white;
+    position: absolute;
+    left: 4px;
+}
+
+//multi-select dropdown position
+.sub-headaing {
+    color: $zs-main-color;
+    font-weight: bold;
+}
+
+button[aria-label="Close"]:focus {
+    outline: none;
+}
+
+.is-invalid {
+    .ng-select-container {
+        border-color: #dc3545 !important;
+    }
+}
+
+// For bigger popups
+.standard-modal-full-width {
+    .modal-lg,
+    .modal-xl {
+        max-width: calc(100vw - 1rem);
+        .modal-body {
+            height: calc(100vh - 9.4rem);
+            max-height: calc(100vh - 9.4rem);
+        }
+    }
+}
+
+
+/*media quieries for tablet device*/
+
+@media screen and (min-width:760px) and (max-width: 630px) {
+    .card-link,
+    .card-text {
+        font-size: 0.75rem !important;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .inner-container {
+        height: 60vh !important;
+    }
+    .welcome-text {
+        font-size: 1.2rem !important;
+    }
+    .description {
+        font-size: 18px !important;
+    }
+}
+
+// @media screen and (max-width: 768px){
+//     .card-subtitle{width:100% !important;}
+// }
+@media screen and (max-width:768px) and (min-width:634px) {
+    .tablet-view {
+        width: 121px !important;
+    }
+    .responsive {
+        width: 121px !important;
+    }
+    .nav-clock {
+        margin-left: 20px;
+        position: unset !important;
+    }
+}
+
+@media only screen and (min-width:760px) and (max-width:630px) {
+    .landscape {
+        width: 296px !important;
+    }
+}
+
+
+/*Desktop*/
+
+@media only screen and (min-width: 992px) {
+    .card-subtitle {
+        width: 126px !important;
+    }
+}
+
+
+/*Huge*/
+
+@media only screen and (min-width: 1280px) {
+    .card-subtitle {
+        width: 126px !important;
+    }
+}
+
+
+/*portrait for tablet-view*/
+
+@media only screen and (min-width:630px) and (max-width:760px) {
+    // #portrait-mode{
+    //     padding: 0px 0px !important;
+    //     width: 12% !important;
+    //     text-align: center;
+    //     font-size: 13px;
+    //     font-weight: bolder;
+    //     // overflow-x: scroll;
+    // }
+}
+
+@media only screen and (min-width:630px) and (max-width:760px) {
+    #portrait-mode {
+        overflow-x: auto;
+    }
+    .full {
+        display: none !important;
+    }
+    .head {
+        margin-left: 177px !important;
+        padding: 0px 31px !important;
+    }
+    .visibility {
+        display: none !important;
+    }
+    #dropdownAction {
+        display: none !important;
+    }
+    .placement {
+        margin-left: 416px !important;
+    }
+    .top {
+        margin-top: -64px;
+    }
+    .portrait-visibility {
+        display: none !important;
+    }
+    .img-logo {
+        margin-left: -12px !important;
+    }
+    // app-table-server-side div.dt-buttons {
+    //     position: relative !important;
+    //     float: right !important;
+    // }
+    // app-table-server-side .dataTables_wrapper .dataTables_info,
+    // .dataTables_wrapper .dataTables_paginate {
+    //     float: left !important;
+    // }
+    // app-table-server-side .dataTables_wrapper .dataTables_paginate {
+    //     float: right !important;
+    //     margin-top: 0px !important;
+    // }
+    .bottom-header {
+        overflow-x: auto !important;
+    }
+    // .bottom-header{
+    //     overflow-x: auto !important;
+    // }
+    // .horiz{
+    //     display: inline-block !important;
+    //     text-align: center;
+    // }
+}
+
+@media only screen and (min-width:500px) and (max-width:629px) {
+    .full {
+        display: none !important;
+    }
+    .visibility {
+        display: none !important;
+    }
+    .portrait-visibility {
+        display: none !important;
+    }
+    #headers {
+        margin-left: 72px !important;
+    }
+    // #portrait-mode{
+    //     overflow-x:auto;
+    // }
+    /*CRITICAL BUGS*/
+    // app-table-server-side div.dt-buttons {
+    //     position: relative !important;
+    //     float: right !important;
+    // }
+    // app-table-server-side .dataTables_wrapper .dataTables_info,
+    // .dataTables_wrapper .dataTables_paginate {
+    //     float: left !important;
+    // }
+    // app-table-server-side .dataTables_wrapper .dataTables_paginate {
+    //     float: right !important;
+    //     margin-top: 0px !important;
+    // }
+    #dropdownAction {
+        display: none !important;
+    }
+    // .placement{
+    //     margin-left: 361px;
+    // }
+    .top {
+        margin-top: -64px;
+    }
+    #portrait-mode {
+        overflow-x: auto;
+    }
+}
+
+//header placement
+@media screen and (min-width:600px) and (max-width:632px) {
+    #headers {
+        margin-left: 156px !important;
+    }
+}
+
+@media screen and (min-width:575px) and (max-width:599px) {
+    #headers {
+        margin-left: 140px !important;
+    }
+}
+
+@media screen and (min-width:555px) and (max-width:574px) {
+    #headers {
+        margin-left: 118px !important;
+    }
+}
+
+@media only screen and (min-width:526px) {
+    .placement {
+        margin-left: 310px !important;
+    }
+}
+
+@media only screen and (min-width:550px) {
+    .placement {
+        margin-left: 333px !important;
+    }
+}
+
+@media only screen and (min-width:551px) {
+    .placement {
+        margin-left: 337px !important;
+    }
+}
+
+@media only screen and (min-width:576px) {
+    .placement {
+        margin-left: 350px !important;
+    }
+}
+
+@media only screen and (min-width:577px) {
+    .placement {
+        margin-left: 360px !important;
+    }
+}
+
+@media only screen and (min-width:634px) {
+    .placement {
+        margin-left: 410px !important;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .dataTables_wrapper .dataTables_length,
+    .dataTables_wrapper .dataTables_filter {
+        text-align: unset !important;
+    }
+}
+
+@media screen and (min-width: 630px) and (max-width:740px) {
+    .dataTables_wrapper .dataTables_info,
+    .dataTables_wrapper .dataTables_paginate {
+        // float: right !important;
+        text-align: unset !important;
+    }
+}
+
+@media only screen and (min-width:768px) {
+    .short {
+        display: none !important;
+    }
+    #dropdownAction {
+        display: none !important;
+    }
+    .placement {
+        margin-left: 299px !important;
+    }
+}
+
+// @media only screen and (min-width:634px){
+//     .portrait{
+//         width:296px  !important;
+//     }
+// }
+@media screen and (min-width:321px) and (max-width:760px) {
+    #main-text {
+        display: flex !important;
+        flex-direction: row !important;
+        justify-content: flex-start !important;
+    }
+    #headers {
+        font-size: 1rem;
+        display: flex !important;
+        flex-direction: row !important;
+    }
+    #header {
+        .top-header {
+            // height: 35px;
+            padding: 0.1rem 1.5rem !important;
+        }
+    }
+    #style {
+        font-size: 0.8rem;
+    }
+}
+
+@media screen and (min-width:768px) and (max-width:1024px) {
+    #portrait-mode {
+        overflow-x: auto;
+    }
+}
+
+.owl-dt-container {
+    z-index: 1100 !important;
+}
+
+.cdk-overlay-container {
+    z-index: 1060 !important;
+}
+
+//ipad
+@media screen and (min-width:1023px) {
+    // .ipad{
+    //     width: 1779px !important;
+    // }
+    // .ipad-mini{
+    //     width: 1779px !important;
+    // }
+    .cards {
+        min-height: 182px !important;
+        border-radius: 0;
+    }
+    .cards-text {
+        font-size: 13px !important;
+    }
+    .cards-body {
+        min-height: 173px !important;
+    }
+    // .ipad-minis {
+    //     flex: 0 0 16.666667%;
+    //      max-width: 20% !important; 
+    //     }
+    //     .ipads {
+    //         flex: 0 0 16.666667%;
+    //          max-width: 20% !important; 
+    //         }
+}
+
+@media screen and (min-width:767px) {
+    .cards {
+        min-height: 190px !important;
+        border-radius: 0;
+    }
+    .cards-text {
+        font-size: 17x !important;
+    }
+    .cards-body {
+        min-height: 190px !important;
+    }
+    // .margins{
+    //     padding-left:3rem !important;
+    // }
+}
+
+@media screen and (min-width:767px) and (max-width:1024px) {
+    .margins {
+        padding-left: 3rem !important;
+    }
+}
+
+ngb-typeahead-window {
+    left: $typeahead-search-position-left !important;
+    max-width: $typeahead-search-max-width !important;
+    max-height: $typeahead-search-max-width !important;
+    overflow: auto !important;
+    .dropdown-item {
+        white-space: unset !important;
+        border-bottom: 1px solid $bg-gray;
+    }
+}
+
+.invalid-feedback {
+    width: auto !important;
+}
+
+.custom-toast-wait {
+    background-color: #ECF5FF !important;
+    opacity: 1 !important;
+    font-weight: bolder;
+}
+
+.custom-toast-error {
+    background-color: #FEF1F2 !important;
+    color: black !important;
+    opacity: 1 !important;
+    font-weight: bolder;
+}
+
+.custom-icon-wait {
+    color: #0044CF !important;
+    background-repeat: no-repeat;
+    background-image: url("data:image/gif;base64,R0lGODlhIAAgAIQAAAQCBISGhMzKzERCROTm5CQiJKyurHx+fPz+/ExOTOzu7Dw+PIyOjCwqLFRWVAwKDIyKjMzOzOzq7CQmJLy6vFRSVPTy9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCQAXACwAAAAAIAAgAAAF3eAljmRpnmh6VRSVqLDpIDTixOdUlFSNUDhSQUAT7ES9GnD0SFQAKWItMqr4bqKHVPDI+WiTkaOFFVlrFe83rDrT0qeIjwrT0iLdU0GOiBxhAA4VeSk6QYeIOAsQEAuJKgw+EI8nA18IA48JBAQvFxCXDI8SNAQikV+iiaQIpheWX5mJmxKeF6g0qpQmA4yOu8C7EwYWCgZswRcTFj4KyMAGlwYxDwcHhCXMXxYxBzQHKNo+3DDeCOAn0V/TddbYJA0K48gAEAFQicMWFsfwNA3JSgAIAAFfwIMIL4QAACH5BAkJABoALAAAAAAgACAAhAQCBIyKjERCRMzOzCQiJPTy9DQyNGRmZMTCxOTm5CwqLHx+fBQWFJyenNTW1Pz6/Dw6PGxubAwKDIyOjNTS1CQmJCwuLPz+/Dw+PHRydAAAAAAAAAAAAAAAAAAAAAAAAAXboCaOZGmeaKoxWcSosMkk15W8cZ7VdZaXkcEgQtrxfD9RhHchima1GwlCGUBSFCaFxMrgRtnLFhWujWHhs2nJc8KoVlWGQnEn7/i8XgOwWAB7JwoONQ4KgSQAZRcOgHgSCwsSIhZMNRZ5CzULIgaWF5h4mhecfIQ8jXmQkiODhYeIiRYGjrG2PxgBARi3IhNMAbcCnwI5BAQpAZ8TIwK6vCQVDwUVKL+WzAANTA210g/VJ8OWxQefByQE4dZMzBoInwh4zrtgn2p725YNthUFTNRuGYB3AYGBHCEAACH5BAkJAB0ALAAAAAAgACAAhAQCBISChFRWVMzKzCQiJOTm5GxqbCwuLJSWlPz6/NTW1AwODJSSlGRmZCwqLOzu7HR2dDQ2NAQGBISGhFxaXNTS1CQmJOzq7GxubDQyNKSmpPz+/Nza3AAAAAAAAAAAAAXfYCeOZGmeaKqurHBdAiuP17Zdc0lMAVHWt9yI8LA9fCPB4xEjARoNSWpis01kBpshFahurqzsZosiGpErScMAUO0maKF8Tq/bTQCIQgFp30cQXhB1BHEcXhx0FgkJFiOHVYlzi42AgoRxeRx8fn+en3UABwedKgsBAwMBCygOCjYKDisLFV4VrCUAtVUKpSZdXl8mB8EbByQWcQPFAyYZxccdB7sV0cvBzbmvvG0LBV4FrFTBYCWuNhyyHRTFFB20trh4BxmdYl4YIqepq0IRxRE+IfDCAFQHARo0NGERAgAh+QQJCQAgACwAAAAAIAAgAIUEAgSEgoRMTkzMyswcHhzk5uR0cnQUFhRcXlwsKiz09vQMCgyMiozU1tQkJiR8fnxkZmT8/vwEBgSEhoRcWlzU0tQkIiT08vR0dnQcGhxkYmQ0MjT8+vwMDgyMjozc2twAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG+UCQcEgsGo/IpHLJXDweC6Z0+IhEHlOjRGIMWLHZoUZx0RQlAajxkFFKFFYFl5m5KNpIySU+X2bIBEoQZBBZGQdMElFhjI2Oj5AgHQEDAw8dQxYeDBaNHRVWVhWYCXsRFwmMXqFWEyAerB6MA6xWA6+xs7URt6VWqIwTu64gDh4eDp6goaORQ5OVAZjO1EgEGhB4RwAYDQ0YAEwIcBEKFEgYrBhLBORxgUYfrB9LELuF8fNDAAaVBuEg7NXCVyRdqHVCGLBiIIQAB1Yc4BXh9uEbwAXuyi2iQI7DuSwHdiFqCEGDtizLRFUDsaGAlQIbVoJYIEDAIiZBAAAh+QQJCQAbACwAAAAAIAAgAIQEAgSMioxcWlz08vQcHhysqqwMDgx8enwsKiykoqRkZmT8+vzEwsQMCgyUlpQkJiS0srQEBgSMjoxcXlz09vQkIiSsrqwUEhQ0MjRsamz8/vwAAAAAAAAAAAAAAAAAAAAF7+AmjmRpnmiqruz2PG0sIssCj4CQJAIgj4/abRNJaI6agu9kCAQaphdJgEQKUIFjgGWsahJYLdf7RTWfLKr3+jsBClVlG5Xb9eb4fImgUBBKDVB4ExRHFGwbGRQLGXMEhUgUfw2QC4IyCmSNDQtHlm2ZXgoiGQsUjW0EnUgLfyKBeYSeiHojfH61uS0GBisVEgEVLRcWRxAXKAgDRwMILMVIECgSVRIrBmS9JtRI1iMVBweuGxerSNolyszOIhjLGs0jEFXSKA8SEkMbcEgWIxfzNBxrw6AKgxIGkM05UOWALhERHJhysOThBgAVWYQAACH5BAkJABkALAAAAAAgACAAhAQGBIyKjERCRMzOzCwuLGRiZPz6/OTm5AwODLSytFRSVNTW1Dw6PHx6fAwKDJSSlERGRNTS1DQyNGxqbPz+/BQSFLy6vFRWVNza3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAXqYCaO5FgFwxBUZeu61ULNFMa+eBvQdJD/owFvFhkBBAwHsBQZUooZyWF2YOQkBNJu6ANMaQeli0AxSEwymi0DcUJeEgPlbEJFAghRe/h+Eeg/Dl9UYks5DF9VhksOAgKFi5GSSwh5kzgVCXIJNxknD5aSCTwJIw8zD5MITpanFKmSCHI8NxUPoJejNKWXLZkznL0vCJ3CxsckDpA/ChYJFzkTBgYTSxc80C4OswbLLhY8Fi/bMwYAJVgl4DTiL9LUJADrFuci1zTZLwD1IwU8BSQuWLCQb1EDHg2QiSDALYvCDAISJLDy8FIIACH5BAkJAB4ALAAAAAAgACAAhAQGBISGhFRSVNTW1CQiJKyqrGRmZOzu7CwuLIyOjGxubPz6/BQSFGRiZOTi5CwqLLy6vDQ2NIyKjFRWVCQmJKyurGxqbPT29DQyNJSSlHRydPz+/BQWFOzq7AAAAAAAAAXhoCeOJElYClGubOs117YtjWuvxCLLi3qbhc6h4FPsdorfiNI5dige43GT9AAkHUcCwCpMNxVP7tgTJY4J1uF7EBl0M8Ooueuo2SOCIkVa11kVX2E2EmgsFH4yBz4uAAkdHVstBAUHQ4xKmZqbnJ2bAhAQAiURGJ4eE0cTIxgzpp0QRxCsrp6xO7MjpaepO6unKxOhv8DFxsfIJBwaChw2DAkZDEocDjIOzi0ZMhlKUjIaLtsb3T8aR+EtDBkJ0yQUBQVQI9XX2ZsDMgMlyxr3mzE2XEgmotCGAARFIHiQ0FMIACH5BAkJABgALAAAAAAgACAAhAQCBISGhDw+POTi5CwuLLS2tPTy9BQSFJyenGRiZDQ2NIyOjLy+vPz6/BweHIyKjFRSVOzq7DQyNLy6vBQWFHRydDw6PPz+/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAXXICaOZHkcZaquIjVd10SxtFrAcFGrVhBYIwoON9uNAsOA6DCEFTEKBEKxEjQvAtELNxkpGrAGNfW4Plpb2QgxRKjKzfPoVGLj3CnLNUv7hscpSDhKOxJSgDwPP0ZGAACMjAQFDQYFBJA0BAZDBpeYGBQVFUU3TV2YFAMwAzNgTQ2PkBVDFRiuQ7CYszi1pUOnkKmrM5qcnqiiTwQTDQ2Wn9DR0tPUfRKQEBEREDQSFw3XRhEwEd3f4TvjF+XWKgJ8JNnb0QkwCdUlCzAL+CQODAwc9BtIMAQAOw==") !important;
+}
+
+.custom-icon-info {
+    color: #0044CF !important;
+    background-repeat: no-repeat;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAACMklEQVRIid2UTU8TURSGnzOXGqFUIyHhS4tt/AESCWniQhbWreDWpQupNfwG5B8oBkJw7UIXoEvcsDMBoy5MSAjlu4QASoy1TZyP48JMpcDMAGHFu5p77znvc87ckwvnRRIVkB6vJD3P6ROVLKKdwBVgD5VV0GlLzVQh37B+KkhqotQif/SZCo+AuhAPW+GVEYYKucT2sSGdY7+7LPXeAdfCKjygTcTrX85dno2EpMZ+9qDWDFB/AoCvsljWnaWB+KdASGqi1IKtX4C2UwB8w6Ll0LU4mNjx96yaCFuHwwDdbYbn2YvcajWBEIUON8bQAfA/pccrSXWdAiGX/Pp+PZl2w8eiy8P3lbCGbOOY9OJgw0ZNJ57rPggDALydt1nc83gzb4eFAcTcOrffX1RNBe5GZU4uOEwuOFFhvmMWGKmBIJpEw9N6k4aedsPspsvMmhsB0aT/Vf1dojRF1ZbpMAx0XSDTEXzxVT9oPgRR+B6ZeQIpHDXCsnaWEKDq978T0Q9nDJk+BDGemQQiZ/OYsm0xU/6i5lm5PvprVCAXlNnaKDTXC7sVZasUOoojy08Sg/6i5lkxwpBAMShzq6R82/GiAOsxo8P7N2oghVxiG7X6gXKYS4jKnmf1LTy+tBsIAVjKx+dU5Tb7puM4EiiKWr2rT+OfD54dggCs5Bu/GoduhFGih8FGeVln9OZSPj4XUEC4brwoX3Vjbh8q90A7EZpQfgArwLQtZmoj1xB4j+dLfwEtubwYaPCJ1QAAAABJRU5ErkJggg==") !important;
+}
+
+.custom-icon-error {
+    color: #D7182C !important;
+    background-repeat: no-repeat;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAFAAAAAAnxZisAAAB8ElEQVQ4EbVVPUjDQBS+d22gHUSwk6BVtBGjVnCw0E1XQXCpzo7+IDjpIghOiiCIP+DoaFd3nV0Ei1YMilrBSUGqtFCb817sJZc0bfwNhPf7fS8v9+4OiMfDUqmAfpLZAAL9HuEqFyPsTE3E5yGdLruD4HagrbdrU8xgO16xWj6gMK3eZnfd8aoCud7epkLeuCKERdzJ9W14CjfQrtbz82c5j8oG6sVXY+X75IhkkU8s6vbj6OC6Ix433kunjJCAnWJrClU0tEpGKWt7bY2TlWlQGei8yWSE19GBUS5t1iIXgHoSscgh51gF9GhPijEyJAd/oiMHcgmsWSCXTIYJsHXh/LXkXCYnJzILFB9fFhhj0V8TVwiQCznRBBzLYr78wP9f2K+A3yLLeL7ghVBDoMVaAzn4lzo1Nwala39JanJxTuQ2Owg1N64CwL1fET7/+/j65SEXcmKetdHMMSXGgR/4K3EgdFy9v0g7CqCht3Uf1dsL/MsO+TBQwthIrUIA5Fi9uxwWccci04Ayh9tdBB0SSD6W6BtTJydGeeNvjljFQCxyyDHrFwmn3qZt8TmeEbYs+f2wyA+1EO9iWfYLnXe4rd5lZ4WNsqrAvx/XOFpAyZL8FV/REeO+CxAX9ALHBvv2+JWpfefKRAy5rT7FPwDJ2rFHVmveFQAAAABJRU5ErkJggg==") !important;
+}
+
+.custom-icon-success {
+    color: #279D4D !important;
+    background-repeat: no-repeat;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACVElEQVRIDcWVz0uUQRjHn+fdhSUIvSyCEXhol0UvElQexU666SVDQWWPJenfUFvnjiHS0QLxbtqpZW+mlzqk6G6QIHXZSyLkxrpP833fndnZt3nzzYgGdmfmmef5fGee+fES/ePCcfiZV2MDLDzIIlfgL8xf1N/7SuH13nnxkQKZjbGUV6PFJsk8CWWcIKaqsi9Rmpeq+c26y8cpkF3JDwnJGon0uYJ+sTEfeonE1MHs+nZ4zAsbVDruKXA5NhwANZFmo1HOvsxPhnkdK8DMAVezT4UdY/ZPvWRy2F6JEUDOqUb7fzRzl6pKF6Upp/fEpAgb+tdwCGLfavJQaxsB/7Roa8x65OrND7O5iS2HuxHwU4RzTmfy0eEYaQL8xe2n10Tk7MbaFB3/OOm2nZkTA7gn/gpwiezB89oaDr8Hpcefw/AgXq6jbgkENzQYaP/P5O5sAda2ENnw+28ffSod7TgnxyS9iDN7YEPQ7kpd/la8tdCPNGiRuHCb5Qv4b4ttVe3j+kk3lq+aDJEnQwtl1HD73cwxjqKZLQHpSEPgQoTlKxjeG5rJjQ+jjgOHn3DAbF+0ldFK1KOG1CyPFHvnS8WvUTkH1BT1CFYLb7LoJ7XRI15Wd+GZ7ts1oIOrd7+fNuo9tj2qDZYeM5vcTNNzwjWPKAp+KWKo06wYPqtlNQJ4O5h4Wv2c73onxd1DLBj6HYKXEUCnUth4Jwmau4gIYhALBli6mE3WBtQX+eBg5mE4WE4BDMT9ZPqHQ+2fnRbE6xIpoB1Quz76OOfVuc1d2++/tH8C8uUApJlTpVUAAAAASUVORK5CYII=") !important;
+}
+
+.custom-icon-warning {
+    color: #E9C232 !important;
+    background-repeat: no-repeat;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVCAYAAABCIB6VAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFqADAAQAAAABAAAAFQAAAABbgUmKAAACBElEQVQ4EaVU30sUURi9d3bGWNEl9KEeyk1EK5XAgoS1l6DnXiJ83Cf1nxAUtL+mf0EIahsSDHzQfhJpT/Zg5ezW4sy98/md0R3v2PyiLtzZb853zrmH5bsjRMnlvby2gF2SLmQZYnezPhr4+iO4Tl/lZnV2/2uRzioioB/44SoROdjBsVopoylM7Lk3bgkV7JAQFRiyQAvbma419j7kHVCcWKu1nimMopqxPFP0chP/duszWqu3REmelIIsy7k7MLe3nXVAbmKt9HpsKkWT7ZswAhZq9SzLFHhmYs+tN0ip1z2xtJ3bqEkF788xe67W2Hd77+ZvdmKt101iap3DSTXuvBp5xKP1MNXMAMEB14DiMtU4FGFx2jOLLO5fxl7r+mNOMhsfXVCAC81FWsKYSTxIVDijF02gibRGI2HM/9c8E+4Y/bgkHdzHjgGjgAZaAzofN6KnlXbLfcczOmESytZ8aT4NPmhMSvlcQxMnbrfeNP/VFEbQwgM1VnRBaHeqz/vx6zN/CEZO4eQTV1iSjMaPixe4eUnG2ZsU32pDl8fl1K4fJe4cHi1lmUYSkj5dGtjB5iP8VFOAHKzz82gRpaSte/3tP9+/kKCrALIWRzxEj79uw1kc4FLIg8H+K2O21z14wu+5phAUGYKDhYDwtO2qvRF2w+VQkHPa+r+nJWRgVa2NE24O2oZKHqV+AAAAAElFTkSuQmCC") !important;
+}
+
+.custom-toast-warning {
+    background-color: #FEF8E0 !important;
+    color: black !important;
+    opacity: 1 !important;
+    font-weight: bolder;
+}
+
+.custom-toast-success {
+    background-color: #DDFCE5 !important;
+    opacity: 1 !important;
+    font-weight: bolder;
+}
+
+.custom-toast-info {
+    background-color: #ECF5FF !important;
+    opacity: 1 !important;
+    font-weight: bolder;
+}
+
+.toast-message a,
+.toast-message label {
+    color: black !important;
+}
+
+.toast-message a:hover {
+    color: black !important;
+}
+
+.toast-close-button,
+button.toast-close-button {
+    color: black !important;
+}
+
+@media screen and (min-width:1023px) {
+    .ipad {
+        flex: 0 0 16.666667% !important;
+        max-width: 20% !important;
+    }
+    .ipad-mini {
+        flex: 0 0 16.666667% !important;
+        max-width: 20% !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .ipad-mini {
+        flex: 0 0 19.666667%;
+        max-width: 20% !important;
+    }
+    .ipad {
+        flex: 0 0 16.666667%;
+        max-width: 20% !important;
+    }
+    .cards-body {
+        min-height: 97px !important;
+    }
+}
+
+.selected-list .c-list .c-token {
+    background-color: #ebf5ff !important;
+}
+
+.selected-list .c-list .c-token .c-label {
+    color: black !important;
+}
+
+// .inner-container{
+//     padding: 10px 10px !important;
+// }
+// .dropdown-list .tagToBody {
+//     position: auto !important; 
+// }
+// .dropdown-list {
+//     position: auto !important; 
+// }
+.dropdown-list .tagToBody {
+    position: static !important;
+}
+
+.dataTables_scrollBody table {
+    border: 0 !important;
+}
+
+.dataTables_scrollBody::-webkit-scrollbar {
+    // width: 3px !important;
+}
+
+// .help-icon {
+//     display: none !important;
+// }
+.dataTables_scrollBody {
+    overflow-y: overlay !important;
+}
+
+// app-monitor-data .dataTables_scrollBody{
+//     position: relative;
+//     overflow: auto;
+//     width: 100%;
+//     height: calc(100vh - 472px);
+// }
+.custom-date~.cdk-overlay-connected-position-bounding-box {
+    .owl-dt-calendar-control {
+        display: none !important;
+    }
+    .owl-dt-calendar-main {
+        padding-top: 10px !important;
+    }
+}
+
+.modal-md {
+    max-width: 700px !important;
+}
+
+.modal-xl {
+    max-width: 80rem !important;
+    .modal-body {
+        max-height: 35rem !important;
+        overflow: auto !important;
+    }
+}
+
+.icon-clock {
+    position: absolute;
+    right: 1px;
+    top: 1px;
+}
+
+.bodyContent {
+    tbody {
+        td:nth-child(2) {
+            word-wrap: break-word !important;
+            max-width: 13rem;
+            padding: 6px;
+            padding-left: 9px !important;
+        }
+    }
+}
+
+.bodyContent {
+    tbody {
+        td:nth-child(5) {
+            word-wrap: break-word !important;
+            max-width: 13rem;
+            padding: 6px;
+            padding-left: 9px !important;
+        }
+    }
+}
+
+.bodyContent {
+    tbody {
+        td:nth-child(3) {
+            word-wrap: break-word !important;
+            max-width: 13rem;
+            padding: 6px;
+            padding-left: 9px !important;
+        }
+    }
+}
+
+.bodyContent {
+    tbody {
+        td:nth-child(4) {
+            word-wrap: break-word !important;
+            max-width: 13rem;
+            padding: 6px;
+            padding-left: 9px !important;
+        }
+    }
+}
+
+
+/* auto reSize popup modal */
+
+.modal-xl {
+    max-width: 80rem !important;
+    .modal-body {
+        max-height: 35rem !important;
+        overflow: auto !important;
+    }
+}
+
+.font-1rem {
+    font-size: 1rem !important;
+}
+
+.main-header {
+    background: $main-headerBgClr;
+    color: $btn-primary-text-color;
+    padding: 6px 0;
+}
+
+.toast {
+    &:not(.show) {
+        display: block !important;
+    }
+}
\ No newline at end of file

src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

tsconfig.app.json

+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.json

+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "strictPropertyInitialization": false,
+    "target": "es2020", 
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    // "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

tsconfig.spec.json

+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}