feature: upgrade to angular 17

CSETWebNg/package.json

@@ -1,146 +1,80 @@
 {
-  "name": "csetweb-ng",
-  "version": "12.2.6",
-  "license": "MIT",
-  "main": "main-electron.js",
-  "private": true,
-  "snyk": true,
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build --configuration production",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "preinstall": "npx npm-force-resolutions",
-    "start:electron": "ng build --configuration production --source-map=false --base-href ./ && electron .",
-    "build:electron": "electron-packager . \"CSET\" --out=electron-builds --asar --arch=x64 --prune --overwrite --icon=src/favicon_cset.ico --win32metadata.CompanyName=\"CISA\" --ignore=\"(node_modules/.cache*|node_modules/@angular*|node_modules/@angular-devkit*|node_modules/@angular-slider*|.vscode*|.angular*)\"",
-    "version:electron": "electron-packager --version"
-  },
-  "dependencies": {
-    "@angular-devkit/build-webpack": "^0.1601.4",
-    "@angular-devkit/schematics": "^16.1.4",
-    "@angular/animations": "^16.1.6",
-    "@angular/cdk": "^15.2.4",
-    "@angular/cli": "^16.1.4",
-    "@angular/common": "^16.1.6",
-    "@angular/compiler": "^16.1.6",
-    "@angular/core": "^16.1.6",
-    "@angular/elements": "^16.1.6",
-    "@angular/flex-layout": "^15.0.0-beta.42",
-    "@angular/forms": "^16.1.6",
-    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^16.1.6",
-    "@angular/platform-browser-dynamic": "^16.1.6",
-    "@angular/platform-server": "^16.1.6",
-    "@angular/router": "^16.1.6",
-    "@cloudfactorydk/ng2-tooltip-directive": "^16.0.0",
-    "@fortawesome/angular-fontawesome": "0.10.2",
-    "@fortawesome/fontawesome-free": "^6.1.1",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@kolkov/angular-editor": "^3.0.0-beta.0",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.0",
-    "@ng-select/ng-select": "^11.0.0",
-    "@ngneat/transloco": "^3.1.0",
-    "@ngstack/code-editor": "^5.1.0",
-    "@popperjs/core": "^2.11.8",
-    "@snyk/dep-graph": "^2.9.0",
-    "@snyk/java-call-graph-builder": "^1.23.2",
-    "@swimlane/ngx-charts": "^20.0.0",
-    "@types/lodash": "^4.17.7",
-    "@types/offscreencanvas": "^2019.6.4",
-    "@webcomponents/webcomponentsjs": "^2.5.0",
-    "angular2-hotkeys": "^13.1.0",
-    "ansi-styles": "^6.1.1",
-    "array.prototype.fill": "^1.0.2",
-    "bootstrap": "^5.0.0",
-    "chart.js": "^4.4.3",
-    "core-js": "^3.38.1",
-    "datalist-polyfill": "^1.24.4",
-    "document-register-element": "^1.14.10",
-    "electron-log": "^4.4.1",
-    "file-saver": "^2.0.5",
-    "font-awesome": "^4.7.0",
-    "fuse.js": "^6.6.2",
-    "gutenberg-css": "^0.6.1",
-    "handlebars": "^4.7.7",
-    "html-to-pdfmake": "^2.4.19",
-    "intersection-observer": "^0.12.0",
-    "jquery": "^3.6.0",
-    "lodash": "^4.17.21",
-    "luxon": "^3.4.4",
-    "material-design-icons": "^3.0.1",
-    "moment": "^2.30.1",
-    "monaco-editor": "^0.36.1",
-    "mousetrap": "^1.6.5",
-    "ng-sidebar": "^9.4.3",
-    "ng2-currency-mask": "^13.0.0",
-    "ng2-file-upload": "^5.0.0",
-    "ng2-ion-range-slider": "^2.0.0",
-    "ngx-csv": "^0.3.2",
-    "ngx-device-detector": "^6.0.2",
-    "ngx-ellipsis": "^4.1.2",
-    "ngx-slider-v2": "^16.0.2",
-    "pdfmake": "^0.2.7",
-    "request": "^2.88.2",
-    "rxjs": "^6.6.3",
-    "rxjs-compat": "^6.6.3",
-    "sanitize-html": "^2.13.0",
-    "sass": "^1.32.8",
-    "screenfull": "^5.1.0",
-    "snyk": "^1.1293.1",
-    "swiper": "^8.3.2",
-    "tar": "^7.4.3",
-    "tcp-port-used": "^1.0.2",
-    "to": "^0.2.9",
-    "tslib": "^2.1.0",
-    "typescript-string-operations": "^1.4.1",
-    "universal-analytics": "^0.5.3",
-    "zone.js": "^0.13.1"
-  },
-  "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.0",
-    "@angular-devkit/build-angular": "^16.2.15",
-    "@angular-eslint/builder": "^16.1.0",
-    "@angular-eslint/eslint-plugin": "^16.1.0",
-    "@angular-eslint/eslint-plugin-template": "16.1.0",
-    "@angular-eslint/schematics": "^16.1.0",
-    "@angular-eslint/template-parser": "16.1.0",
-    "@angular/compiler-cli": "^16.1.6",
-    "@angular/language-service": "^16.1.6",
-    "@types/chart.js": "^2.9.34",
-    "@types/file-saver": "^2.0.3",
-    "@types/jasmine": "^4.3.1",
-    "@types/jasminewd2": "^2.0.6",
-    "@types/jquery": "^3.5.30",
-    "@types/luxon": "^3.4.2",
-    "@types/node": "^18.0.0",
-    "@types/sanitize-html": "^2.13.0",
-    "@typescript-eslint/eslint-plugin": "8.5.0",
-    "@typescript-eslint/parser": "8.6.0",
-    "css-loader": "^6.7.3",
-    "electron": "^32.1.0",
-    "electron-packager": "^17.1.2",
-    "eslint": "^8.33.0",
-    "jasmine-core": "^4.6.0",
-    "jasmine-spec-reporter": "^7.0.0",
-    "karma": "^6.3.8",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-cli": "^2.0.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "^4.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "prettier": "^2.8.8",
-    "rxjs-tslint": "^0.1.6",
-    "style-loader": "^3.3.2",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.1.6",
-    "webpack": "^5.63.0",
-    "webpack-dev-server": "^4.13.1"
-  },
-  "resolutions": {
-    "minimist": "1.2.6",
-    "tough-cookie": "4.1.3",
-    "xml2js": "0.5.0"
-  }
+    "name": "csetweb-ng",
+    "version": "12.2.6",
+    "license": "MIT",
+    "main": "main-electron.js",
+    "private": true,
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build --configuration production",
+        "test": "ng test",
+        "lint": "ng lint",
+        "preinstall": "npx npm-force-resolutions",
+        "start:electron": "ng build --configuration production --source-map=false --base-href ./ && electron .",
+        "build:electron": "electron-packager . \"CSET\" --out=electron-builds --asar --arch=x64 --prune --overwrite --icon=src/favicon_cset.ico --win32metadata.CompanyName=\"CISA\" --ignore=\"(node_modules/.cache*|node_modules/@angular*|node_modules/@angular-devkit*|node_modules/@angular-slider*|.vscode*|.angular*)\"",
+        "version:electron": "electron-packager --version"
+    },
+    "dependencies": {
+        "@angular-devkit/build-webpack": "^0.1802.5",
+        "@angular-devkit/schematics": "^17.3.9",
+        "@angular-slider/ngx-slider": "^17.0.2",
+        "@angular/animations": "^17.3.12",
+        "@angular/cdk": "^17.3.10",
+        "@angular/cli": "^17.3.9",
+        "@angular/common": "^17.3.12",
+        "@angular/compiler": "^17.3.12",
+        "@angular/core": "^17.3.12",
+        "@angular/elements": "^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/platform-server": "^17.3.12",
+        "@angular/router": "^17.3.12",
+        "@cloudfactorydk/ng2-tooltip-directive": "^17.0.0",
+        "@fortawesome/angular-fontawesome": "^0.14.1",
+        "@fortawesome/fontawesome-free": "^6.6.0",
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@jsverse/transloco": "^7.5.0",
+        "@kolkov/angular-editor": "^3.0.0-beta.0",
+        "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+        "@ngstack/code-editor": "^8.0.0",
+        "@swimlane/ngx-charts": "^20.0.0",
+        "@types/jquery": "^3.5.30",
+        "@types/sanitize-html": "^2.13.0",
+        "angular2-hotkeys": "^16.0.1",
+        "bootstrap": "^5.3.2",
+        "chart.js": "^4.4.4",
+        "document-register-element": "^1.14.10",
+        "electron": "^32.1.1",
+        "electron-log": "^4.4.8",
+        "file-saver": "^2.0.5",
+        "font-awesome": "^4.7.0",
+        "fuse.js": "^6.6.2",
+        "html-to-pdfmake": "^2.5.13",
+        "intersection-observer": "^0.12.2",
+        "jquery": "^3.7.1",
+        "lodash": "^4.17.21",
+        "luxon": "^3.5.0",
+        "material-design-icons": "^3.0.1",
+        "monaco-editor": "^0.51.0",
+        "ng2-currency-mask": "^13.0.3",
+        "ng2-file-upload": "^6.0.0",
+        "ngx-csv": "^0.3.2",
+        "ngx-ellipsis": "^5.0.1",
+        "pdfmake": "^0.2.12",
+        "rxjs": "^7.8.1",
+        "rxjs-compat": "^6.6.3",
+        "sanitize-html": "^2.13.0",
+        "sass": "^1.79.1",
+        "screenfull": "^5.2.0",
+        "style-loader": "^3.3.4",
+        "swiper": "^8.4.7",
+        "typescript": "5.2",
+        "zone.js": "^0.14.1"
+    },
+    "devDependencies": {
+        "@angular-builders/custom-webpack": "^17.0.2"
+    }
 }

CSETWebNg/src/app/app.component.ts

@@ -44,7 +44,7 @@ import { AggregationService } from './services/aggregation.service';
 import { LocalStoreManager } from './services/storage.service';
 import { NavigationService } from './services/navigation/navigation.service';
 import { FooterService } from './services/footer.service';
-import { translate } from '@ngneat/transloco';
+import { translate } from '@jsverse/transloco';
 
 
 declare var $: any;

CSETWebNg/src/app/app.module.ts

@@ -48,7 +48,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 // import { MatExpansionModule } from '@angular/material/expansion';
 // import { MatSliderModule } from '@angular/material/slider';
 
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { A11yModule } from '@angular/cdk/a11y';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import { ClipboardModule } from '@angular/cdk/clipboard';
@@ -98,7 +97,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import { OverlayModule } from '@angular/cdk/overlay';
 
-import { NgxSliderModule } from 'ngx-slider-v2';
+import { NgxSliderModule } from '@angular-slider/ngx-slider';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HotkeyModule } from 'angular2-hotkeys';
@@ -619,7 +618,7 @@ import { CmuAppendixCoverComponent } from './reports/cmu/cmu-appendix-cover/cmu-
 import { OtherRemarksComponent } from './assessment/questions/other-remarks/other-remarks.component';
 import { CmuOtherRemarksComponent } from './reports/cmu/cmu-other-remarks/cmu-other-remarks.component';
 import { TranslocoRootModule } from './transloco-root.module';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 import { UserLanguageComponent } from './dialogs/user-language/user-language.component';
 import { MalcolmUploadErrorComponent } from './dialogs/malcolm/malcolm-upload-error.component';
 import { FooterService } from './services/footer.service';
@@ -751,7 +750,6 @@ import { ReportListCommonComponent } from './assessment/results/reports/report-l
     // MatListModule,
     // MatMenuModule,
     // MatTabsModule,
-    FlexLayoutModule,
     ReactiveFormsModule,
     NgxSliderModule,
     // TextareaAutosizeModule,

CSETWebNg/src/app/assessment/assessment.component.ts

@@ -23,18 +23,18 @@
 ////////////////////////////////
 
 import {
-  Component,
-  EventEmitter,
-  OnInit,
-  Output, HostListener,
-  ApplicationRef
+    Component,
+    EventEmitter,
+    OnInit,
+    Output, HostListener,
+    ApplicationRef
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AssessmentService } from '../services/assessment.service';
 import { LayoutService } from '../services/layout.service';
 import { NavTreeService } from '../services/navigation/nav-tree.service';
 import { NavigationService } from '../services/navigation/navigation.service';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 import { ConfigService } from '../services/config.service';
 
 @Component({

CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/assessment-contacts.component.ts

@@ -23,7 +23,7 @@
 ////////////////////////////////
 import { Component, EventEmitter, OnInit, Output, ViewChildren } from "@angular/core";
 import { MatDialog, MatDialogRef } from "@angular/material/dialog";
-import { TranslocoService } from "@ngneat/transloco";
+import { TranslocoService } from "@jsverse/transloco";
 import { AlertComponent } from "../../../../dialogs/alert/alert.component";
 import { ConfirmComponent } from "../../../../dialogs/confirm/confirm.component";
 import { EmailComponent } from "../../../../dialogs/email/email.component";
@@ -84,7 +84,7 @@ export class AssessmentContactsComponent implements OnInit {
   }
 
   changeOccurred() {
-    this.triggerChange.next();
+    this.triggerChange.next("Initialized");
   }
 
   moveUser() {

CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/contact-item/contact-item.component.ts

@@ -32,7 +32,7 @@ import { AuthenticationService } from "../../../../../services/authentication.se
 import { ConfigService } from "../../../../../services/config.service";
 import { EmailService } from "../../../../../services/email.service";
 import { LayoutService } from "../../../../../services/layout.service";
-import { TranslocoService } from "@ngneat/transloco";
+import { TranslocoService } from "@jsverse/transloco";
 
 @Component({
   selector: "app-contact-item",

CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-convert-cf/assessment-convert-cf.component.ts

@@ -4,7 +4,7 @@ import { ConversionService } from '../../../../services/conversion.service';
 import { OkayComponent } from '../../../../dialogs/okay/okay.component';
 import { MatDialog, MatDialogRef } from "@angular/material/dialog";
 import { ConfirmComponent } from '../../../../dialogs/confirm/confirm.component';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 import { NavigationService } from '../../../../services/navigation/navigation.service';
 
 @Component({

CSETWebNg/src/app/assessment/prepare/irp-summary/irp-summary.component.ts

@@ -30,7 +30,7 @@ import { ACETService } from '../../../services/acet.service';
 import { AcetFilteringService } from '../../../services/filtering/maturity-filtering/acet-filtering.service';
 import { NCUAService } from '../../../services/ncua.service';
 import { LayoutService } from '../../../services/layout.service';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 
 
 @Component({

CSETWebNg/src/app/assessment/prepare/irp/irp.component.ts

@@ -28,7 +28,7 @@ import { IRPService } from '../../../services/irp.service';
 import { IRPResponse, IRP } from '../../../models/irp.model';
 import { NavigationService } from '../../../services/navigation/navigation.service';
 import { ACETService } from '../../../services/acet.service';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 
 @Component({
     selector: 'app-irp',

CSETWebNg/src/app/assessment/prepare/maturity/tutorial-cie/quick-facts-cie/quick-facts-cie.component.html

@@ -87,7 +87,7 @@ <h2>CIE Implementation Guide Quick Facts</h2>
       <p>
         The authors expect and welcome robust feedback from the stakeholder community and
         plan to conduct a revision cycle of this Implementation Guide over the next year. Contact
-        CIE@inl.gov to offer input.
+        CIE&#64;inl.gov to offer input.
       </p>
     </div>
   </div>

CSETWebNg/src/app/assessment/prepare/sals/sal-gen/sal-gen.component.ts

@@ -27,7 +27,7 @@ import { GeneralSalDescriptionsWeights } from '../../../../models/sal.model';
 import { AssessmentService } from '../../../../services/assessment.service';
 import { Sal } from '../../../../models/sal.model';
 import { SalService } from '../../../../services/sal.service';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 
 
 

CSETWebNg/src/app/assessment/prepare/sals/sal-nist/sal-nist.component.ts

@@ -29,7 +29,7 @@ import { SalService } from '../../../../services/sal.service';
 import { ConfigService } from '../../../../services/config.service';
 import { Sal } from '../../../../models/sal.model';
 import { ConfirmComponent } from '../../../../dialogs/confirm/confirm.component';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-sal-nist',

CSETWebNg/src/app/assessment/questions/domain-maturity-filter/domain-maturity-filter.component.ts

@@ -29,7 +29,7 @@ import { AcetFilteringService } from '../../../services/filtering/maturity-filte
 import { NCUAService } from '../../../services/ncua.service';
 import { AssessmentService } from '../../../services/assessment.service';
 import { ACETService } from '../../../services/acet.service';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 
 
 /**

CSETWebNg/src/app/assessment/questions/maturity-questions/maturity-questions-acet.component.ts

@@ -35,7 +35,7 @@ import { AcetFilteringService } from '../../../services/filtering/maturity-filte
 import { MaturityFilteringService } from '../../../services/filtering/maturity-filtering/maturity-filtering.service';
 import { CompletionService } from '../../../services/completion.service';
 import { ACETService } from '../../../services/acet.service';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoService } from '@jsverse/transloco';
 
 
 @Component({