Angular upgrade

	- Upgraded Angular from 14 to 15 version.

Change-Id: I2339a04020153cbc9ed7a14bfe8e0aa265e507da
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
index 8c75d25..e25cd44 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
@@ -17,10 +17,10 @@
 -->
 <div class="row">
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-        <div class="row d-flex flex-row justify-content-between px-3 py-2">
+        <div class="d-flex flex-row justify-content-between px-3 py-2">
             <div class="d-flex align-items-center header-style">{{resourcesData.name}}</div>
             <span class="button">
-                <label class="switch ml-1">
+                <label class="switch ms-1">
                     <input type="checkbox" (change)="changeChartType($event.target.checked)">
                     <div class="slider round">
                         <span class="on">{{ 'PAGE.VIMDETAILS.DOUGHNUT' | translate }}</span>
@@ -30,7 +30,7 @@
             </span>
         </div>
         <ng-container *ngFor="let showData of chartData">
-            <div class="header-style ml-3 mt-2">{{showData.heading}}</div>
+            <div class="header-style ms-2 mt-2 px-3 py-1">{{showData.heading}}</div>
             <div class="row mt-2">
                 <div class="col-xs-{{12/showData.length}} col-sm-{{12/showData.length}} col-md-{{12/showData.length}} col-lg-{{12/showData.length}} col-xl-{{12/showData.length}}"
                     *ngFor="let list of showData.data;let i = index;">
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
index 1ffd10c..1b694ea 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
@@ -18,6 +18,7 @@
 @import "../../../assets/scss/mixins/mixin.scss";
 @import "../../../assets/scss/variable.scss";
 .chartData-card {
+    background-color: $white;
     word-wrap: break-word;
     @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
     @include transition(all, 0.2s, null, null);
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.html b/src/app/vim-accounts/info-vim/InfoVimComponent.html
index 80ea8bf..504fdfe 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.html
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.html
@@ -15,11 +15,11 @@
 
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
-<div class="row d-flex flex-row justify-content-between">
+<div class="d-flex flex-row justify-content-between">
   <div class="col-sm-4">
       <div class="d-flex align-items-center header-style">{{'PAGE.VIMDETAILS.VIMACCOUNTDETAILS' | translate}}</div>
   </div>
-  <div class="col-sm-8 text-right">
+  <div class="col-sm-8 text-end">
       <span class="button">
           <button class="btn btn-primary" type="button" placement="top" container="body"
               ngbTooltip="{{'PAGE.VIMDETAILS.NEWVIM' | translate}}" routerLink="/vim/new">
@@ -37,7 +37,7 @@
     </div>
   </div>
 </div>
-<div class="col-12">
+<div class="d-grid col-sm-12">
   <button type="button" class="btn btn-block border-0 bg-light text-dark" (click)="isCollapsed = !isCollapsed"
     [attr.aria-expanded]="!isCollapsed">
     {{'PAGE.VIMDETAILS.CONFIGPARAMETERS' | translate}}
@@ -51,7 +51,7 @@
     </div>
   </div>
 </div>
-<div class="modal-footer list border-0">
+<div class="modal-footer list border-0 mt-3">
   <button (click)="onVimAccountBack()"
     class="btn btn-danger pull-right">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
 </div>
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.scss b/src/app/vim-accounts/info-vim/InfoVimComponent.scss
index 8c2b739..4efa471 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.scss
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.scss
@@ -15,3 +15,13 @@
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 */
+@import "../../../assets/scss/variable.scss";
+.text-dark {
+   color: $gray-800 !important;
+}
+.font-weight-bold {
+   font-weight: 700 !important;
+}
+button.bg-light:hover, button.bg-light:focus {
+   background-color: $paleblue !important;
+}
\ No newline at end of file
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.ts b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
index 02aea69..42a3209 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.ts
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Info VIM Page
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -29,6 +28,7 @@
 import { environment } from 'environment';
 import * as HttpStatus from 'http-status-codes';
 import { RestService } from 'RestService';
+import { isNullOrUndefined } from 'SharedService';
 import { CONFIG, VimAccountDetails, VIMData } from 'VimAccountModel';
 
 /**
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
index be535d2..7f719a2 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
@@ -16,7 +16,7 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <form [formGroup]="vimNewAccountForm" (ngSubmit)="newVimAccountSubmit()" autocomplete="off">
-    <div class="row d-flex flex-row justify-content-between">
+    <div class="d-flex flex-row justify-content-between">
         <div *ngIf="vimID;else empty" class="d-flex align-items-center header-style">{{'PAGE.VIMDETAILS.EDITVIMACCOUNT'
             | translate}} </div>
         <ng-template #empty>
@@ -32,7 +32,7 @@
             <div class="col-sm-3">
                 <label for="name">{{'PAGE.VIMDETAILS.NAME' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.VIMDETAILS.NAME' | translate}}"
                     type="text" formControlName="name" id="name"
                     [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
@@ -40,7 +40,7 @@
             <div class="col-sm-3">
                 <label for="vim_tenant_name">{{'PAGE.VIMDETAILS.TENANTNAME' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control"
                     placeholder="{{'PAGE.VIMDETAILS.TENANTNAME' | translate}}" type="text"
                     formControlName="vim_tenant_name" id="vim_tenant_name"
@@ -51,7 +51,7 @@
             <div class="col-sm-3">
                 <label for="vim_type">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <ng-select bindLabel="title" bindValue="value" [items]="vimType" placeholder="{{'SELECT' | translate}}"
                     formControlName="vim_type" id="vim_type" [(ngModel)]="selectedVimType"
                     [addTag]="sharedService.addCustomTag" [ngClass]="{ 'is-invalid': submitted && f.vim_type.errors }"
@@ -62,7 +62,7 @@
             <div class="col-sm-3">
                 <label for="description">{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <textarea class="form-control" placeholder="{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}" type="text"
                     formControlName="description" id="description"></textarea>
             </div>
@@ -71,7 +71,7 @@
             <div class="col-sm-3">
                 <label for="vim_url">{{'PAGE.VIMDETAILS.VIMURL' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.VIMDETAILS.VIMURL' | translate}}"
                     type="url" formControlName="vim_url" id="vim_url"
                     [ngClass]="{ 'is-invalid': submitted && f.vim_url.errors }">
@@ -82,7 +82,7 @@
             <div class="col-sm-3">
                 <label for="schema_type">{{'PAGE.VIMDETAILS.SCHEMATYPE' | translate}}</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control"
                     placeholder="{{'PAGE.VIMDETAILS.SCHEMATYPE' | translate}}" type="text" formControlName="schema_type"
                     id="schema_type">
@@ -92,7 +92,7 @@
             <div class="col-sm-3">
                 <label for="vim_user">{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control"
                     placeholder="{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}" type="text" formControlName="vim_user"
                     id="vim_user" [ngClass]="{ 'is-invalid': submitted && f.vim_user.errors }">
@@ -100,7 +100,7 @@
             <div class="col-sm-3">
                 <label for="vim_password">{{'PAGE.VIMDETAILS.VIMPASSWORD' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="VIM Password" type="password"
                     formControlName="vim_password" id="vim_password"
                     [ngClass]="{ 'is-invalid': submitted && f.vim_password.errors }">
@@ -110,7 +110,7 @@
             <div class="col-sm-3">
                 <label for="location">{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}</label>
             </div>
-            <div class="col-sm-9 form-inline">
+            <div class="col-sm-9 form-inline mb-3">
                 <div class="input-group">
                     <input autocomplete="off" formControlName="locationName" type="text" class="form-control"
                         placeholder="{{'PAGE.VIMDETAILS.NAME' | translate}}"
@@ -120,7 +120,7 @@
                     <input autocomplete="off" formControlName="longitude" type="text" class="form-control"
                         placeholder="Longitude" [ngClass]="{ 'is-invalid': submitted && f.longitude.errors }">
                 </div>
-                <small class="text-info mt-1 ml-1">{{'PAGE.VIM.LOCATIONINFO' | translate}}</small>
+                <small class="text-info mt-1 me-1">{{'PAGE.VIM.LOCATIONINFO' | translate}}</small>
             </div>
         </div>
         <div class="row form-group content-style">
@@ -129,17 +129,14 @@
             </div>
             <div class="col-sm-3 form-group">
                 <div class="custom-file">
-                    <input [disabled]="!selectedVimType" type="file" #fileInput class="custom-file-input"
+                    <input [disabled]="!selectedVimType" type="file" #fileInput class="fileupload custom-file-input"
                         (change)="filesDropped($event.target.files)" id="customFile">
-                    <label class="custom-file-label" #fileInputLabel for="customFile">
-                        {{'CHOOSEFILE' | translate}}
-                    </label>
                 </div>
                 <small class="text-info">{{'UPLOADCONFIGLABEL' | translate}}</small>
             </div>
         </div>
         <div class="row" [hidden]="!selectedVimType">
-            <div class="col-12">
+            <div class="d-grid col-12">
                 <button type="button" class="btn btn-block border-0 bg-light text-dark"
                     (click)="isCollapsed = !isCollapsed"
                     [attr.aria-expanded]="!isCollapsed">{{'PAGE.VIMDETAILS.CONFIGPARAMETERS' | translate}}</button>
@@ -148,8 +145,8 @@
         <div id="configurationparameters" class="row collapse mt-3" [ngbCollapse]="isCollapsed">
             <div class="col-sm-12">
                 <div class="ngx-codemirror new-vim" [hidden]="!selectedVimType">
-                    <div class="form-group"  *ngIf="!vimID">
-                        <button type="button" class="btn btn-warning btn-sm mr-3" (click)="checkData()">
+                    <div class="form-group mb-3" *ngIf="!vimID">
+                        <button type="button" class="btn btn-warning btn-sm me-3" (click)="checkData()">
                             <i class="fa fa-clone" aria-hidden="true"></i>
                             {{'PAGE.VIMDETAILS.LOADSAMPLECONFIG' | translate}}</button>
                         <button type="button" class="btn btn-danger btn-sm" (click)="clearConfig()">
@@ -162,9 +159,9 @@
                 </div>
             </div>
         </div>
-        <div class="modal-footer border-0">
+        <div class="modal-footer border-0 mb-3 mt-3 me-3">
             <button type="button" (click)="onVimAccountBack()"
-                class="btn btn-danger">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
+                class="btn btn-danger me-2">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
             <button *ngIf="!vimID" type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
             <button *ngIf="vimID" type="submit" class="btn btn-primary">{{'UPDATE' | translate}}</button>
         </div>
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss
index d750ccc..28444af 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss
@@ -14,4 +14,18 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+@import "../../../assets/scss/variable.scss";
+.form-control:disabled {
+    background-color: var(--bs-secondary-bg) !important;
+    opacity: 1;
+}
+.d-grid {
+    margin-top: 40px;
+}
+.input-group {
+    width: 74%;
+}
+button.bg-light:hover, button.bg-light:focus {
+    background-color: $paleblue !important;
+ }
\ No newline at end of file
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
index 05fe4a2..6619bfd 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Vim Account Component.
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -48,7 +47,7 @@
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VimAccountDetails } from 'VimAccountModel';
 import { WarningComponent } from 'WarningComponent';
 /**
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html
index 7feabe2..9838656 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html
@@ -15,12 +15,12 @@
 
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
-<div class="row d-flex align-items-center justify-content-between">
+<div class="d-flex align-items-center justify-content-between">
     <div class="col-sm-4">
         <div class="d-flex align-items-center header-style">{{'VIMACCOUNTS' | translate}}</div>
     </div>
-    <div class="col-sm-8 text-right">
-        <div class="btn-group list mr-2" role="group">
+    <div class="col-sm-8 text-end">
+        <div class="btn-group list me-2" role="group">
             <button class="btn btn-primary" type="button" (click)="mapView()" placement="top" container="body"
                 ngbTooltip="{{'MAPVIEW' | translate}}" [hidden]="showList" [disabled]="vimData.length == 0">
                 <i class="fas fa-map-marker-alt"></i>&nbsp;
@@ -41,15 +41,15 @@
         </span>
     </div>
 </div>
-<div class="row mt-2 mb-0 list-utilites-actions" [hidden]="showList">
-    <div class="col-auto mr-auto">
+<div class="mt-2 mb-0 list-utilites-actions" [hidden]="showList">
+    <div class="col-auto me-auto">
         <nav class="custom-items-config">
             <span><i class="fas fa-clock text-warning"></i>{{operationalStateFirstStep}}</span>
             <span><i class="fas fa-check-circle text-success"></i>{{operationalStateSecondStep}}</span>
             <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateThirdStep}}</span>
         </nav>
     </div>
-    <page-per-row class="mr-2" (pagePerRow)="onChange($event)"></page-per-row>
+    <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
     <page-reload></page-reload>
 </div>
 <div class="smarttable-style bg-white mt-1" [hidden]="showList">
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss
index aeb086e..b79a921 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss
@@ -22,13 +22,13 @@
     width: 100%;
     .ol-popup {
         @include background(null, $white, null, null, null);
-        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
         @include border(all, 1, solid, $gray-80);
         @include position_value(absolute, $top: null, $right: null, $bottom: 12px, $left: -50px);
         @include wh-value(280px, null);
         @include font-style(normal);
-        @include font(null, .765625rem, 400);
+        @include font(null, 0.765625rem, 400);
         @include line-height(1.5);
         text-align: start;
         text-decoration: none;
@@ -39,7 +39,8 @@
         line-break: auto;
         word-wrap: break-word;
         @include roundedCorners(2px);
-        &:after, &:before{
+        &:after,
+        &:before {
             top: 100%;
             @include border(all, 1, solid, transparent);
             content: " ";
@@ -70,4 +71,13 @@
             content: "✖";
         }
     }
+    .close {
+        opacity: 1;
+        background-color: transparent;
+        border: 0;
+        position: absolute;
+        right: 10px;
+        bottom: 213px;
+        font-size: 1.31rem;
+    }
 }
\ No newline at end of file
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
index ac0b502..20081c4 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
@@ -169,16 +169,16 @@
                 valuePrepareFunction: (cell: VIMData, row: VIMData): string => {
                     if (row.operationalState === this.operationalStateFirstStep) {
                         return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-clock text-warning"></i>
-                        </span>`;
+                         <i class="fas fa-clock text-warning"></i>
+                         </span>`;
                     } else if (row.operationalState === this.operationalStateSecondStep) {
                         return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-check-circle text-success"></i>
-                        </span>`;
+                         <i class="fas fa-check-circle text-success"></i>
+                         </span>`;
                     } else if (row.operationalState === this.operationalStateThirdStep) {
                         return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-times-circle text-danger"></i>
-                        </span>`;
+                         <i class="fas fa-times-circle text-danger"></i>
+                         </span>`;
                     } else {
                         return `<span>${row.operationalState}</span>`;
                     }
@@ -360,7 +360,7 @@
                 }
             }
         });
-        if (this.getLocation !== []) {
+        if (this.getLocation.length) {
             this.getLocation.filter((loc: GetLocation) => {
                 if (loc.location !== '') {
                     if (loc.location !== ',,') {
@@ -456,7 +456,7 @@
         this.popupData += '<ul class="list-unstyled m-2">';
         const instnaceData: NSInstanceDetails[] = this.nsData.filter((item: NSInstanceDetails) => {
             if (item.datacenter === feature.values_.Id) {
-                this.popupData += '<li class="m-2"><a class="d-block text-truncate" target="_parent" href="instances/ns/' + item._id + '"><i class="fa-sitemap fas icons mr-1"></i>'
+                this.popupData += '<li class="m-2"><a class="d-block text-truncate" target="_parent" href="instances/ns/' + item._id + '"><i class="fa-sitemap fas icons me-1"></i>'
                     + item.name + '</a></li>';
                 return item;
             }