adding tour-guide to package dashboard

Stop popup autoclose

Issue-ID: CCSDK-2705

Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: Id6349d2d3b72fb3b316bc405498fabc71a6f7bbd

12 files changed, 211 insertions, 63 deletions

diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json
index 7cf4be069..6ee937186 100644
--- a/cds-ui/designer-client/package-lock.json
+++ b/cds-ui/designer-client/package-lock.json
@@ -8496,6 +8496,23 @@
         "tslib": "^1.9.0"
       }
     },
+    "ngx-tour-core": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-tour-core/-/ngx-tour-core-4.1.1.tgz",
+      "integrity": "sha512-Nfs9FgVJ1A7DyazEp3yALvmoo1CxoP1RvmiURDFVW1/gJWtMhoD+lBTAUsdw1+rhv8n/e8iKXpRYB60m772Bog==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "ngx-tour-md-menu": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-tour-md-menu/-/ngx-tour-md-menu-4.1.1.tgz",
+      "integrity": "sha512-6W76D9HOT3HGr4gewzNj0aEZ2qeKRPexTX3lULGyIZ+tjdg4We5mE0qg5PxAgNTvjvTol65tt7P6BgzTKsNaOQ==",
+      "requires": {
+        "tslib": "^1.9.0",
+        "withinviewport": "^2.0.0"
+      }
+    },
     "ngx-ui-loader": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/ngx-ui-loader/-/ngx-ui-loader-8.0.0.tgz",
@@ -13649,6 +13666,11 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "withinviewport": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/withinviewport/-/withinviewport-2.1.2.tgz",
+      "integrity": "sha512-bOZt20QiBkAroXwCAVnb+ajYNPAzVrTKCKuVAuWtLbXlOk3e5cAS5diZMWhYP4Cpyq3GS47jk+fsb5tQqhIxtg=="
+    },
     "wordwrap": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 1902d367d..517b2dab1 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -45,6 +45,8 @@
     "ngx-file-drop": "^8.0.8",
     "ngx-toastr": "^11.3.3",
     "ngx-ui-loader": "^8.0.0",
+    "ngx-tour-core": "^4.1.1",
+    "ngx-tour-md-menu": "^4.1.1",
     "rxjs": "~6.4.0",
     "stream": "0.0.2",
     "tslib": "^1.10.0",
diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json
index 1f63613ac..4e8ef0aab 100644
--- a/cds-ui/designer-client/proxy.conf.json
+++ b/cds-ui/designer-client/proxy.conf.json
@@ -1,16 +1,14 @@
 {
   "/controllerblueprint/*": {
-    "target": "localhost",
-    // "target": "https://41.128.168.198:3000",
+    "target": "https://localhost:3000",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
   },
   "/resourcedictionary/*": {
-    "target": "localhost",
-    // "target": "https://41.128.168.198:3000",
+    "target": "https://localhost:3000",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
   }
-}
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/app.component.css b/cds-ui/designer-client/src/app/app.component.css
index e69de29bb..9a0cd34c1 100644
--- a/cds-ui/designer-client/src/app/app.component.css
+++ b/cds-ui/designer-client/src/app/app.component.css
@@ -0,0 +1,9 @@
+.cdk-overlay-container {
+    position: none;
+    z-index: 0;
+}
+
+.cdk-overlay-backdrop {
+    position: none;
+    z-index: 0;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 35ca1e2c9..5712f80a0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -7,13 +7,13 @@
             </div>
             <div class="card-footer row">
                 <div class="col text-center">
-                    <a routerLink="/packages/createPackage" role="button" aria-pressed="true"
+                    <a tourAnchor="create" routerLink="/packages/createPackage" role="button" aria-pressed="true"
                         class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create
                         Package
                     </a>
                     <br />
-                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i
-                            class="icon-import-blue" aria-hidden="true"></i>Import Package
+                    <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
+                            tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                     <ngx-ui-loader></ngx-ui-loader>
                 </div>
@@ -76,9 +76,8 @@
                     <div class="col">
                         <p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
                         </p>
-                       <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
-                        <p class="package-desc" [delay]="300"
-                            tooltip="{{bluePrint.artifactDescription}}"
+                        <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
+                        <p class="package-desc" [delay]="300" tooltip="{{bluePrint.artifactDescription}}"
                             placement="bottom left">{{bluePrint.artifactDescription}}</p>
                         <ul class="package-contributers">
                             <li>
@@ -105,7 +104,7 @@
                 </div>
                 <div class="card-footer">
                     <div class="row">
-                        
+
                         <div class="col">
                             <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i
                                     class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
@@ -121,4 +120,4 @@
 
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index 352f33b91..3cecd33fd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -1,9 +1,11 @@
-import {Component, OnInit} from '@angular/core';
-import {BlueprintModel} from '../../model/BluePrint.model';
-import {PackagesStore} from '../../packages.store';
-import {Router} from '@angular/router';
-import {ConfigurationDashboardService} from '../../configuration-dashboard/configuration-dashboard.service';
-import {saveAs} from 'file-saver';
+import { Component, OnInit } from '@angular/core';
+import { BlueprintModel } from '../../model/BluePrint.model';
+import { PackagesStore } from '../../packages.store';
+import { Router } from '@angular/router';
+import { ConfigurationDashboardService } from '../../configuration-dashboard/configuration-dashboard.service';
+import { saveAs } from 'file-saver';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
+import { TourService } from 'ngx-tour-md-menu';
 
 @Component({
     selector: 'app-packages-list',
@@ -15,9 +17,17 @@ export class PackageListComponent implements OnInit {
     viewedPackages: BlueprintModel[] = [];
 
 
-    constructor(private packagesStore: PackagesStore, private router: Router
-              , private configurationDashboardService: ConfigurationDashboardService) {
+    constructor(
+        private packagesStore: PackagesStore,
+        private router: Router,
+        private configurationDashboardService: ConfigurationDashboardService,
+        private ngxLoader: NgxUiLoaderService,
+        private tourService: TourService,
+    ) {
         console.log('PackageListComponent');
+
+
+
         this.packagesStore.state$.subscribe(state => {
             console.log(state);
             if (state.filteredPackages) {
@@ -26,8 +36,13 @@ export class PackageListComponent implements OnInit {
         });
     }
 
+
     ngOnInit() {
         this.packagesStore.getAll();
+
+
+
+
     }
 
     view(id) {
@@ -40,7 +55,7 @@ export class PackageListComponent implements OnInit {
 
     downloadPackage(artifactName: string, artifactVersion: string) {
         this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => {
-            const blob = new Blob([response], {type: 'application/octet-stream'});
+            const blob = new Blob([response], { type: 'application/octet-stream' });
             saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip');
         });
     }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
index e69de29bb..74ace1a35 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
@@ -0,0 +1,17 @@
+.panel-wrap button label{
+    cursor: pointer;
+}
+
+.panel-wrap .panel{
+    border-radius: 8px;
+}
+
+.cdk-overlay-container {
+    position: none;
+    z-index: 0;
+}
+
+.cdk-overlay-backdrop {
+    position: none;
+    z-index: 0;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index a632568c8..8391530d6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -1,20 +1,24 @@
 <app-header>
 </app-header>
+<tour-step-template></tour-step-template>
 <div class="new-wrapper">
     <div class="container-fluid main-container">
         <app-packages-header></app-packages-header>
         <div class="container-fluid body-container">
             <!--Tour Starter-->
-            <input id="clicker" type="checkbox" />
-            <label for="clicker">Start the tour</label>
+            <input id="clicker" [checked]="startTour" type="checkbox" />
+            <label class="ml-1" for="clicker">Start the tour</label>
 
             <div class="panel-wrap">
                 <div class="panel">
-                    <button id="clicker1" type="button"><label for="clicker">Dismiss</label>
+                    <button id="clicker1" class="close" type="button" (click)="stopTour()">
+                        <label for="clicker">&times;</label>
                     </button>
+
                     <h3>Welcome to CDS</h3>
                     <p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p>
-                    <button type="button" class="btn" style="background-color: #fff;">Let's get started</button>
+                    <button type="button" class="btn" style="background-color: #fff;margin:0">
+                        <label style="margin: 0;" (click)="start()" for="clicker">Let's get started</label></button>
                 </div>
             </div>
             <!---->
@@ -22,12 +26,13 @@
                 <!--Nav Tabs-->
                 <div class="col pr-0">
                     <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
-                            role="tab" aria-controls="nav-home" aria-selected="true">All</a>
+                        <a tourAnchor="allTab" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
+                            href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a>
                         <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
                             role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
-                        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
-                            role="tab" aria-controls="nav-contact" aria-selected="false">Under Construction</a>
+                        <a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
+                            href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Under
+                            Construction</a>
                         <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
                             role="tab" aria-controls="nav-contact1" aria-selected="false">Archived</a>
                     </div>
@@ -38,7 +43,7 @@
                         <div class="col-7">
                             <app-packages-search></app-packages-search>
                         </div>
-                        <div class="col-5 pl-2">
+                        <div class="col-5 pl-2" tourAnchor="tagFilter">
                             <app-filter-by-tags class="w-100"></app-filter-by-tags>
                         </div>
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
index 4e33a9df1..bdd5f6fde 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -18,20 +18,83 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
-import {Component, OnInit} from '@angular/core';
-import {PackagesStore} from '../packages.store';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { PackagesStore } from '../packages.store';
+import { TourService } from 'ngx-tour-md-menu';
+
 
 @Component({
     selector: 'app-packages-dashboard',
     templateUrl: './packages-dashboard.component.html',
     styleUrls: ['./packages-dashboard.component.css']
 })
-export class PackagesDashboardComponent implements OnInit {
+export class PackagesDashboardComponent implements OnInit, OnDestroy {
 
-    constructor() { }
+    startTour = false;
+    constructor(
+        private tourService: TourService,
+    ) { }
 
     ngOnInit() {
 
         console.log('PackagesDashboardComponent');
+
+        this.tourService.initialize([
+            {
+                anchorId: 'allTab',
+                content: 'This Tab contain all packages you created before',
+                title: 'All Package',
+            },
+            {
+                anchorId: 'search',
+                content: 'Search for Package by name, version, tags and type',
+                title: 'Search',
+            },
+            {
+                anchorId: 'tagFilter',
+                content: 'Filter Packages by tags',
+                title: 'Tag Filter',
+            },
+            {
+                anchorId: 'import',
+                content: 'Import a package to CDS',
+                title: 'Import',
+            },
+            {
+                anchorId: 'create',
+                content: 'Create a new Package',
+                title: 'Create',
+            },
+            {
+                anchorId: 'metadataTab',
+                content: 'Set your package basic information',
+                title: 'Metadata Tab',
+                route: 'packages/createPackage'
+            },
+        ]);
+        this.checkTour();
+    }
+
+    checkTour() {
+        if (localStorage.getItem('tour-guide') && localStorage.getItem('tour-guide') === 'false') {
+            this.startTour = false;
+        } else {
+            this.startTour = true;
+        }
+    }
+    start() {
+        console.log('start .................');
+        this.tourService.start();
+        this.tourService.events$.subscribe(res => {
+            console.log(res);
+        });
+    }
+
+    stopTour() {
+        localStorage.setItem('tour-guide', 'false');
+    }
+
+    ngOnDestroy(): void {
+        this.tourService.pause();
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
index e7c605fd1..b304c264a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
@@ -1,4 +1,4 @@
 <div class="searchBox">
-    <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+    <input class="searchInput" tourAnchor="search" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
     <button class="searchButton" href="#"></button>
 </div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 47927cef6..8e5d8b0b8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -30,6 +30,7 @@ import { TemplMappListingComponent } from './package-creation/template-mapping/t
 import { DataTablesModule } from 'angular-datatables';
 import { DesignerSourceViewComponent } from './designer/source-view/source-view.component';
 import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import {TourMatMenuModule} from 'ngx-tour-md-menu';
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
@@ -64,7 +65,8 @@ import { NgxUiLoaderModule } from 'ngx-ui-loader';
         AceEditorModule,
         DataTablesModule,
         // Import NgxUiLoaderModule
-        NgxUiLoaderModule
+        NgxUiLoaderModule,
+        TourMatMenuModule.forRoot()
     ],
     providers: [ApiService, JsonPipe],
     bootstrap: []
diff --git a/cds-ui/designer-client/src/index.html b/cds-ui/designer-client/src/index.html
index 537d26d57..96e7b003a 100644
--- a/cds-ui/designer-client/src/index.html
+++ b/cds-ui/designer-client/src/index.html
@@ -2,37 +2,53 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <title>CDS</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="utf-8">
+        <title>CDS</title>
+        <base href="/">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/assets/img/favicon/site.webmanifest">
-  <link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="theme-color" content="#ffffff">
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/assets/img/favicon/site.webmanifest">
+        <link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="theme-color" content="#ffffff">
 
-  <link rel="stylesheet" href="/assets/icomoon/style.css">
-  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900" rel="stylesheet">
-  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-  <!-- <link rel="shortcut icon" href="https://www.onap.org/wp-content/uploads/sites/20/2018/01/favicon.png" /> -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
-        crossorigin="anonymous">
+        <link rel="stylesheet" href="/assets/icomoon/style.css">
+        <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+        <!-- <link rel="shortcut icon" href="https://www.onap.org/wp-content/uploads/sites/20/2018/01/favicon.png" /> -->
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+                integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+                crossorigin="anonymous">
 </head>
 
 <body>
-<app-root></app-root>
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
-        crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
-        crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
+        <app-root></app-root>
+        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+                integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+                crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+                integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+                crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+                integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+                crossorigin="anonymous"></script>
+        <!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
 </body>
+<style>
+        .cdk-overlay-container {
+                position: unset;
+                z-index: 0;
+        }
 
-</html>
+        .cdk-overlay-backdrop {
+                position: unset;
+                z-index: 0;
+        }
+</style>
+
+</html>
\ No newline at end of file