feat: #732 Angular 19 Upgrade

admin/package.json

@@ -8,66 +8,63 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.12",
-    "@angular/cdk": "^17.3.10",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/forms": "^17.3.12",
-    "@angular/material": "^17.3.10",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/router": "^17.3.12",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@auth0/angular-jwt": "^5.1.0",
-    "@fortawesome/angular-fontawesome": "^0.14.0",
+    "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-    "@ngx-dropzone/cdk": "^17.3.0",
-    "@ngx-dropzone/material": "^17.3.0",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "@ngx-dropzone/cdk": "^19.0.0",
+    "@ngx-dropzone/material": "^19.0.0",
     "@rxweb/reactive-form-validators": "~13.0.0",
     "@types/file-saver-es": "^2.0.3",
     "@types/luxon": "^3.4.2",
-    "amazon-cognito-identity-js": "^6.3.12",
-    "apexcharts": "^3.54.1",
+    "apexcharts": "^4.0.0",
     "aws-amplify": "^6.12.0",
     "bootstrap": "~5.3.0",
     "file-saver-es": "^2.0.5",
     "jquery": "^3.6.0",
+    "jwt-decode": "^4.0.0",
     "leaflet": "~1.9.0",
     "leaflet.markercluster": "~1.5.3",
     "luxon": "^3.5.0",
-    "ng-apexcharts": "^1.10.0",
-    "ngx-bootstrap": "^12.0.0",
+    "ng-apexcharts": "~1.15.0",
+    "ngx-bootstrap": "^19.0.0",
     "remeda": "^2.19.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.5.0",
-    "zone.js": "^0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1703.11",
-    "@angular-devkit/build-angular": "^17.3.11",
-    "@angular-devkit/core": "^17.3.11",
-    "@angular-eslint/builder": "~17.5.3",
-    "@angular-eslint/eslint-plugin": "~17.5.3",
-    "@angular-eslint/eslint-plugin-template": "~17.5.3",
-    "@angular-eslint/schematics": "~17.5.3",
-    "@angular-eslint/template-parser": "~17.5.3",
-    "@angular/cli": "^17.3.11",
-    "@angular/compiler-cli": "^17.3.12",
+    "@angular-devkit/architect": "^0.1900.0",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular-devkit/core": "^19.0.0",
+    "@angular-eslint/builder": "^19.0.0",
+    "@angular-eslint/eslint-plugin": "^19.0.0",
+    "@angular-eslint/eslint-plugin-template": "^19.0.0",
+    "@angular-eslint/schematics": "^19.0.0",
+    "@angular-eslint/template-parser": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jest": "^29.0.0",
     "@types/leaflet": "~1.9.0",
     "@types/leaflet.markercluster": "~1.5.1",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "eslint": "^8.57.0",
-    "jest": "^29.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
+    "jest": "^29.0.0",
     "jest-preset-angular": "^14.0.0",
-    "ts-jest": "^29.1.0",
-    "ts-node": "~9.1.1",
-    "typescript": "^5.4.5"
-  },
-  "overrides": {
-    "micromatch@<4.0.8": "4.0.8"
+    "ts-jest": "^29.0.0",
+    "ts-node": "^10.0.0",
+    "typescript": "~5.5.0"
   }
-}
+}

admin/src/app/about/about.component.scss

@@ -1,7 +1,9 @@
-@import "../../assets/styles/base/base.scss";
+@use "../../assets/styles/base/base.scss";
+@use "../../assets/styles/abstracts/mixins.scss" as mixins;
+@use "../../assets/styles/themes/default.scss" as theme;
 
 :host {
-  @include flex(1 1 auto);
+  @include mixins.flex(1 1 auto);
 }
 
 section {
@@ -19,18 +21,18 @@ section {
 .related-links {
   section {
     padding-top: 1.5rem;
-    border-top: 1px solid $gray4;
+  border-top: 1px solid theme.$gray4;
 
     div {
-      @include flex(1 1 auto);
+  @include mixins.flex(1 1 auto);
 
       p {
         margin-bottom: 0;
       }
     }
 
     .btn {
-      @include flex(0 0 auto);
+  @include mixins.flex(0 0 auto);
 
       align-self: flex-start;
       margin-top: 0.75rem;

admin/src/app/analytics-dashboard/analytics-dashboard.component.scss

@@ -1,10 +1,12 @@
-@import "../../assets/styles/base/base.scss";
-@import "../../assets/styles/layout/layout.scss";
+@use "../../assets/styles/base/base.scss";
+@use "../../assets/styles/layout/layout.scss";
+@use "../../assets/styles/abstracts/mixins.scss" as mixins;
+@use "../../assets/styles/themes/default.scss" as theme;
 
 :host {
-  @include flex-box();
-  @include flex-direction(column);
-  @include flex(1 1 auto);
+  @include mixins.flex-box();
+  @include mixins.flex-direction(column);
+  @include mixins.flex(1 1 auto);
 
   overflow: hidden;
 }
@@ -87,7 +89,7 @@ $stats-blue-1: #123B64;
     background: $stats-blue-1;
     font-weight: 700;
     text-align: center;
-    color: $white;
+    color: theme.$white;
     font-weight: bold;
 
     .total-fom-content-title {
@@ -114,7 +116,7 @@ $stats-blue-1: #123B64;
   justify-content: center;
   align-items: center;
   gap: 1.2rem;
-  color: $white;
+  color: theme.$white;
   font-weight: bold;
 
   .unique-fc-vtxt {

admin/src/app/analytics-dashboard/analytics-dashboard.component.ts

@@ -1,8 +1,5 @@
-import { UploadBoxComponent } from '@admin-core/components/file-upload-box/file-upload-box.component';
-import { AppFormControlDirective } from '@admin-core/directives/form-control.directive';
-import { NewlinesPipe } from '@admin-core/pipes/newlines.pipe';
 import { ANALYTICS_DATA_DEFAULT_SIZE, DEFAULT_ISO_DATE_FORMAT, FOM_GO_LIVE_DATE } from '@admin-core/utils/constants';
-import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
+import { DatePipe, NgFor } from '@angular/common';
 import { AfterViewInit, Component, OnInit, signal, ViewChild } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
@@ -22,16 +19,11 @@ import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 @Component({
     standalone: true,
     imports: [
-      NgIf,
       FormsModule,
       ReactiveFormsModule,
       BsDatepickerModule,
-      NgClass,
       NgApexchartsModule,
       NgFor,
-      AppFormControlDirective,
-      NewlinesPipe,
-      UploadBoxComponent,
       MatFormFieldModule,
       MatSelectModule,
       MatOptionModule

admin/src/app/app.component.scss

@@ -1,10 +1,11 @@
-@import "../assets/styles/base/base.scss";
+@use "../assets/styles/base/base.scss";
+@use "../assets/styles/abstracts/mixins.scss" as mixins;
 
 :host {
   display: block;
 
-  @include flex-box();
-  @include flex-direction(column);
+  @include mixins.flex-box();
+  @include mixins.flex-direction(column);
 
   position: fixed;
   top: 0;
@@ -15,13 +16,13 @@
 }
 
 app-header {
-  @include flex(0 0 auto);
+  @include mixins.flex(0 0 auto);
 }
 
 .app-body {
-  @include flex-box();
-  @include flex(1 1 auto);
-  @include flex-direction(column);
+  @include mixins.flex-box();
+  @include mixins.flex(1 1 auto);
+  @include mixins.flex-direction(column);
 
   position: relative;
   overflow-y: auto;

admin/src/app/foms/details-map/details-map.component.scss

@@ -1,4 +1,4 @@
-@import "../../../assets/styles/base/base.scss";
+@use "../../../assets/styles/base/base.scss";
 
 .map-thumbnail {
   position: relative;

admin/src/app/foms/fom-add-edit/fom-add-edit.component.scss

@@ -1,10 +1,12 @@
-@import "../../../assets/styles/base/base.scss";
-@import "../../../assets/styles/layout/layout.scss";
+@use "../../../assets/styles/base/base.scss";
+@use "../../../assets/styles/abstracts/mixins.scss" as mixins;
+@use "../../../assets/styles/layout/layout.scss";
+@use "../../../assets/styles/themes/default.scss" as theme;
 
 :host {
-  @include flex-box();
-  @include flex-direction(column);
-  @include flex(1 1 auto);
+  @include mixins.flex-box();
+  @include mixins.flex-direction(column);
+  @include mixins.flex(1 1 auto);
 
   overflow: hidden;
 }
@@ -25,7 +27,7 @@ form {
 
 // Public Review Dates
 .review-dates {
-  @include clearfix();
+  @include mixins.clearfix();
 
   .form-group {
     display: inline-block;
@@ -67,7 +69,7 @@ form {
 
   .btn {
     border: none;
-    background: $lightgray;
+    background: theme.$lightgray;
   }
 
   &__list {

admin/src/app/foms/fom-add-edit/fom-add-edit.component.ts

@@ -29,7 +29,6 @@ import { FomAddEditForm } from './fom-add-edit.form';
 import { UploadBoxComponent } from '@admin-core/components/file-upload-box/file-upload-box.component';
 import { AppFormControlDirective } from '@admin-core/directives/form-control.directive';
 import { ICodeTable } from '@admin-core/models/code-tables';
-import { NewlinesPipe } from '@admin-core/pipes/newlines.pipe';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BsDatepickerConfig, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
@@ -45,7 +44,6 @@ type ApplicationPageType = 'create' | 'edit';
         NgClass,
         NgFor,
         AppFormControlDirective,
-        NewlinesPipe,
         UploadBoxComponent
     ],
     selector: 'app-application-add-edit',

admin/src/app/foms/fom-detail/fom-detail.component.scss

@@ -1,22 +1,26 @@
-@import "../../../assets/styles/base/base.scss";
+@use "../../../assets/styles/base/base.scss";
+@use "../../../assets/styles/abstracts/mixins.scss" as mixins;
+@use "../../../assets/styles/themes/default.scss" as theme;
 
 $card-bg: #fff;
 $card-title-bg: #f7f8fa;
 $card-shadow: 0.02rem 0 0.2rem rgba(#000, 0.15);
 
 :host {
-  @include flex-box();
-  @include flex-direction(column);
-  @include flex(1 1 auto);
+  @include mixins.flex-box();
+  @include mixins.flex-direction(column);
+  @include mixins.flex(1 1 auto);
 
   overflow: hidden;
 }
 
+
 .main-card {
   background: $card-bg;
   box-shadow: $card-shadow;
 }
 
+
 .aside-card {
   background: $card-bg;
   box-shadow: $card-shadow;
@@ -101,26 +105,26 @@ section {
   border-bottom: 1px dotted #ccc;
 
   li {
-    @include flex-box();
+    @include mixins.flex-box();
 
     padding: 0.5rem 0;
     border-top: 1px dotted #ccc;
     background: #fff;
   }
 
   span.name {
-    @include flex(0 0 13rem);
+    @include mixins.flex(0 0 13rem);
 
     margin: 0;
   }
 
   span.value {
-    @include flex(1 1 auto);
+    @include mixins.flex(1 1 auto);
   }
 }
 
 .invalid-type-msg {
-  color: $fc-invalid-color
+  color: theme.$fc-invalid-color
 }
 
 .shapefile-list {
@@ -167,7 +171,7 @@ ngb-alert {
 }
 
 .title-container__title {
-  @include flex-box();
+  @include mixins.flex-box();
 
   h1 {
     padding: 3px;

admin/src/app/foms/fom-detail/fom-detail.component.ts

@@ -13,7 +13,7 @@ import { takeUntil } from 'rxjs/operators';
 import { EnddateChangeModalComponent } from './enddate-change-modal/enddate-change-modal.component';
 
 import { NewlinesPipe } from "@admin-core/pipes/newlines.pipe";
-import { DatePipe, NgClass, NgFor, NgIf, TitleCasePipe } from "@angular/common";
+import { DatePipe, NgClass, NgFor, NgIf } from "@angular/common";
 import { DetailsMapComponent } from "../details-map/details-map.component";
 import { ShapeInfoComponent } from "../shape-info/shape-info.component";
 
@@ -27,8 +27,7 @@ import { ShapeInfoComponent } from "../shape-info/shape-info.component";
         NgFor, 
         DetailsMapComponent, 
         ShapeInfoComponent,
-        NgClass, 
-        TitleCasePipe, 
+        NgClass,
         DatePipe, 
         NewlinesPipe
     ],