972599: To resolve Git Dependabot alerts

package.json

@@ -11,39 +11,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
-    "@angular/common": "~7.1.0",
-    "@angular/compiler": "~7.1.0",
-    "@angular/core": "~7.1.0",
-    "@angular/forms": "~7.1.0",
-    "@angular/platform-browser": "~7.1.0",
-    "@angular/platform-browser-dynamic": "~7.1.0",
-    "@angular/router": "~7.1.0",
-    "@syncfusion/ej2-angular-maps": "^16.4.42",
+    "@angular/animations": "~10.2.5",
+    "@angular/common": "~10.2.5",
+    "@angular/compiler": "~10.2.5",
+    "@angular/core": "~10.2.5",
+    "@angular/forms": "~10.2.5",
+    "@angular/platform-browser": "~10.2.5",
+    "@angular/platform-browser-dynamic": "~10.2.5",
+    "@angular/router": "~10.2.5",
+    "@syncfusion/ej2-angular-buttons": "^30.1.37",
+    "@syncfusion/ej2-angular-maps": "^18.3.53",
+    "@syncfusion/ej2-angular-navigations": "^30.1.42",
+    "@syncfusion/ej2-angular-notifications": "^30.1.37",
     "core-js": "^2.5.4",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
-    "@angular/cli": "~7.1.4",
-    "@angular/compiler-cli": "~7.1.0",
-    "@angular/language-service": "~7.1.0",
-    "@types/node": "~8.9.4",
-    "@types/jasmine": "~2.8.8",
+    "@angular-devkit/build-angular": "~0.1002.3",
+    "@angular/cli": "~10.2.3",
+    "@angular/compiler-cli": "~10.2.5",
+    "@angular/language-service": "~10.2.5",
+    "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "6.3.16",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.8.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.16",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.2"
   }
 }

src/app/app.component.css

@@ -0,0 +1,165 @@
+/* Vibrant, modern and glassy UI experience for Tour of Heroes */
+html, body {
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
+  background: linear-gradient(135deg, #d8e3ff 0%, #f5eaff 40%, #c8faef 100%);
+  background-attachment: fixed;
+}
+
+/* Faded glass morphism card */
+div[style*="text-align:center"] {
+  margin: 44px auto 20px auto;
+  max-width: 540px;
+  padding: 32px 36px 22px 36px;
+  box-shadow: 0 6px 40px 0 rgba(48,33,132, 0.24), 0 2px 8px rgba(0,0,0,0.04);
+  border-radius: 1.5rem;
+  background: rgba(255,255,255,0.70);
+  backdrop-filter: blur(8px);
+  position: relative;
+  animation: fadeinup 1s both;
+}
+
+@keyframes fadeinup {
+  from { opacity:0; transform: translateY(40px); }
+  to { opacity:1; transform: none; }
+}
+
+h1 {
+  font-size: 2.8rem;
+  font-weight: 800;
+  letter-spacing: 0.03em;
+  background: linear-gradient(90deg, #1686fa 30%, #5f51da 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 8px;
+  margin-top: 2px;
+  text-shadow: 0 4px 24px rgba(13,110,253,0.07);
+  padding: 0 4px;
+}
+
+img {
+  margin-top: 18px;
+  margin-bottom: 6px;
+  width: 220px;
+  height: 100px;
+  object-fit: contain;
+  border-radius: 1rem;
+  border: 2.5px solid #9ebfff7a;
+  box-shadow: 0 4px 32px #c1d7ff36, 0 1px 6px #3649b140;
+  background: rgba(226, 239, 255, 0.5);
+  filter: hue-rotate(-8deg) saturate(1.18);
+}
+
+h2 {
+  color: #3f468e;
+  font-size: 1.22rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  margin: 20px 0 10px 0;
+  padding-top: 10px;
+  text-align: left;
+  animation: fadeinup 1.2s 0.1s both;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  max-width: 450px;
+  margin: 0 auto 26px auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  animation: fadeinup 1.2s 0.19s both;
+}
+
+li {
+  border-radius: 18px;
+  background: rgba(246,249,255,0.94);
+  box-shadow: 0 2px 16px 0 #d4dbf9cc, 0 1px 8px 0 #9fa7b5a6;
+  margin: 0;
+  transition: 
+    box-shadow 0.20s,
+    background 0.23s,
+    transform 0.22s;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid #e2e9fe;
+}
+
+li:hover {
+  box-shadow: 0 4px 40px 0 #64a4fa51;
+  transform: translateY(-4px) scale(1.025);
+  background: rgba(199,226,255,0.98);
+  border-color: #aedaea;
+}
+
+li h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 1.12rem;
+  text-align: center;
+  background: none;
+  color: #3262a0;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  transition: color 0.18s;
+}
+
+a {
+  color: #237bf5;
+  text-decoration: none;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  font-size: 1.13rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  transition: color .18s, background .16s;
+  background: linear-gradient(90deg, #fff 70%,#e9f6ff 100%);
+}
+
+a:hover {
+  color: #1971c2;
+  background: linear-gradient(93deg, #e0eafd 50%,#e7fffb 140%);
+}
+
+/* Animated router outlet region */
+router-outlet {
+  display: block;
+  margin-top: 28px;
+  animation: fadeinup 0.8s 0.4s both;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 660px) {
+  div[style*="text-align:center"] {
+    max-width: 99vw;
+    padding: 20px 7vw 19px 7vw;
+  }
+  ul {
+    max-width: 97vw;
+    gap: 14px;
+  }
+  img {
+    width: 84vw;
+    height: auto;
+  }
+}
+
+@media (max-width: 399px) {
+  h1 {
+    font-size: 1.35rem;
+  }
+  div[style*="text-align:center"] {
+    padding: 10px 0 10px 0;
+  }
+  ul {
+    gap: 8px;
+  }
+}

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'mapapps';
+  title = 'myapps';
 }

tsconfig.json

@@ -5,18 +5,20 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
+    "downlevelIteration": true,
     "experimentalDecorators": true,
+    "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
+    "target": "es2015",
+    "module": "es2020",
     "lib": [
       "es2018",
       "dom"
     ]
+  },
+  "angularCompilerOptions": {
+    "enableIvy": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
   }
 }