update style adjustment and todo from migration

.browserslistrc

@@ -3,8 +3,6 @@
 # https://github.com/browserslist/browserslist#queries
 # adjust as needed
 > 0.5%
-last 2 versions
+last 2 versions and supports es6-module
 Firefox ESR
-not dead
-not IE 9-10
-not IE 11
+not dead

angular.json

@@ -30,7 +30,7 @@
               "src/assets",
               "src/config",
               "src/contexts",
-              "src/locale"
+              "src/locale",
               {
                 "glob": "**/*",
                 "input": "./node_modules/@igo2/common/assets/",

e2e/tsconfig.e2e.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",

package.json

@@ -78,6 +78,7 @@
     "hammerjs": "^2.0.8",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.5.31",
     "jszip": "^3.10.1",
     "jwt-decode": "^2.2.0",
     "moment": "^2.29.4",
@@ -104,9 +105,9 @@
     "@angular-eslint/eslint-plugin-template": "^15.2.1",
     "@angular-eslint/schematics": "^15.2.1",
     "@angular-eslint/template-parser": "^15.2.1",
-    "@angular/platform-browser-dynamic": "^15.2.9",
     "@angular/cli": "^15.2.9",
     "@angular/compiler-cli": "^15.2.9",
+    "@angular/platform-browser-dynamic": "^15.2.9",
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@compodoc/compodoc": "^1.1.19",
@@ -145,4 +146,4 @@
   "engines": {
     "node": ">=16.19.0"
   }
-}
+}

src/app/app.component.scss

@@ -1,53 +1,38 @@
-@import '../../node_modules/@igo2/core/style/partial/core.variables';
+@import '@igo2/core/style/partial/core.variables';
 @import './pages/portal/portal.variables.scss';
 
-:host {
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
-
-/*** Message-center ***/
-igo-message-center ::ng-deep simple-notifications ::ng-deep div.simple-notification-wrapper {
-  right: 10px;
-}
-
-/*** header-menu overlay adjustment ***/
-
 $header-height: 72px;
 $header-height-mobile: 72px;
 $footer-height: 29px;
 
-::ng-deep .portal-hasHeader {
-  height: $portal-height-hasHeader-mobile !important;
-  display: block;
-}
-
-::ng-deep .portal {
-  height: 100%;
-}
-
-@media (min-width: 768px){
-
+:host {
+  igo-message-center
+    ::ng-deep
+    simple-notifications
+    ::ng-deep
+    div.simple-notification-wrapper {
+    right: 10px;
+  }
   ::ng-deep .portal-hasHeader {
-    height: $portal-height-hasHeader !important;
+    height: $portal-height-hasHeader-mobile !important;
     display: block;
   }
 
-}
-
-igo-spinner {
-  position: absolute;
-  top: 50% !important;
-  right: 50% ;
-  z-index: 100;
-}
+  ::ng-deep .portal {
+    height: 100%;
+  }
 
-/*TODO(mdc-migration): The following rule targets internal classes of tooltip that may no longer apply for the MDC version.*/
-::ng-deep .mat-tooltip-hide { display: none!important; } // temporary fix (https://github.com/angular/components/issues/24614)
+  @media (min-width: 768px) {
+    ::ng-deep .portal-hasHeader {
+      height: $portal-height-hasHeader !important;
+      display: block;
+    }
+  }
 
-/*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-::ng-deep .mat-form-field-suffix {
-  ::ng-deep mat-icon  {
-    width: auto !important;
-    height: -webkit-fill-available !important;
+  igo-spinner {
+    position: absolute;
+    top: 50% !important;
+    right: 50%;
+    z-index: 100;
   }
 }

src/app/app.theming.scss

@@ -1,3 +1,5 @@
-@mixin app-theming($theme) {
-  @include app-portal-theming($theme);
+@use './pages/portal/portal.theming' as portal;
+
+@mixin themes($theme) {
+  @include portal.themes($theme);
 }

src/app/pages/footer/footer.component.scss

@@ -1,6 +1,7 @@
 @import '../portal/portal.variables.scss';
 
-.order2 {
+:host {
+  .order2 {
     order: 2;
     margin-right: 0.5%;
     margin-left: 140px;
@@ -10,51 +11,50 @@
     margin-left: 140px;
     text-align: right !important;
     width: 100%;
-}
+  }
 
-.footer-right {
+  .footer-right {
     z-index: 666;
     background: #ffffffa3;
     font-size: 0.7rem;
     align-items: center;
     height: $footer-height;
     display: flex;
     margin-left: auto;
-}
+  }
 
-span.footer-text {
+  span.footer-text {
     color: #095797;
     align-self: center;
     margin-left: 0.5rem;
-}
+  }
 
-span.footer-text a{
+  span.footer-text a {
     color: #095797;
     text-decoration: none;
-}
-
-::ng-deep .map-hasFooter {
-    height: calc( 100% - #{$footer-height} ) !important;
-}
+  }
 
-// scale
+  ::ng-deep .map-hasFooter {
+    height: calc(100% - #{$footer-height}) !important;
+  }
 
-::ng-deep .ol-scale-line-inner {
+  ::ng-deep .ol-scale-line-inner {
     border: 1px solid black;
     color: black;
     border-top: none;
     order: 1;
   }
-  
+
   ::ng-deep div.ol-scale-line {
-    position: fixed!important;
+    position: fixed !important;
     display: flex;
     flex-direction: row;
-    top: unset!important;
-    left: 10px!important;
-    bottom: 3px!important;
-    background: unset!important;
+    top: unset !important;
+    left: 10px !important;
+    bottom: 3px !important;
+    background: unset !important;
     color: black;
-    z-index: 5!important;
-    transform: unset!important;
-  }
+    z-index: 5 !important;
+    transform: unset !important;
+  }
+}

src/app/pages/header/header.component.html

@@ -1,16 +1,16 @@
 <mat-toolbar class = banner role = banner color="primary">
 	<div class="container">
 		<div class="row">
-			<div class="col-6 col-md-10 d-flex flex-wrap align-items-center zone-logo-title">
+			<div class="col-6 col-md-10 flex flex-wrap align-items-center zone-logo-title">
 				<a class="logo" tabindex="5" routerLink="">
                     <img id="header-logo" alt="Logo" src="{{headerLogo}}">
 
                 </a>
 				<img id="header-logo-print" alt="Logo" src="{{headerLogoPrint}}" width="199" height="60" />
 				<p lang="fr" id="title-desktop" class="zone-title  d-none d-md-block">{{'header.title' | translate}}</p>
 			</div>
-			<div class="col-6 col-md-2 d-flex justify-content-end zone-links">
-				<ul class="nav flex-column">
+			<div class="col-6 col-md-2 flex justify-content-end zone-links">
+				<ul class="nav flex-col">
 					<!--<li><button class="buttonLanguage" disabled (click)="changeLanguage()">{{'header.language'}}</button></li>-->
 					<li><a rel="noopener noreferrer" alt="('header.contactUsUrl' | translate)" href="{{'header.contactUsUrl' | translate}}" target="_blank">{{'header.contactUs' | translate}}</a></li>
 				</ul>