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.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.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.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.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/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/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/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