upgrade/DONE

frontend/angular.json

@@ -26,6 +26,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css",
               "src/theme.scss",
               "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
@@ -95,8 +96,8 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css",
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "./node_modules/@syncfusion/ej2-material-theme/styles/material.css"
             ],
             "scripts": []

frontend/package.json

@@ -11,38 +11,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.0",
+    "@angular/animations": "^16.0.0",
-    "@angular/cdk": "^14.2.0",
+    "@angular/cdk": "^16.2.14",
-    "@angular/common": "^14.2.0",
+    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^14.2.0",
+    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^14.2.0",
+    "@angular/core": "^16.0.0",
-    "@angular/forms": "^14.2.0",
+    "@angular/forms": "^16.0.0",
-    "@angular/material": "^14.2.0",
+    "@angular/material": "^16.2.14",
-    "@angular/material-moment-adapter": "^16.0.1",
+    "@angular/material-moment-adapter": "^16.0.0",
-    "@angular/platform-browser": "^14.2.0",
+    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/router": "^14.2.0",
+    "@angular/router": "^16.0.0",
-    "@syncfusion/ej2-angular-gantt": "^21.2.3",
+    "@syncfusion/ej2-angular-gantt": "^26.1.35",
-    "@syncfusion/ej2-material-theme": "~21.2.3",
+    "@syncfusion/ej2-material-theme": "^26.1.35",
     "jquery": "^3.6.1",
     "moment": "^2.29.4",
-    "rxjs": "~7.5.0",
+    "rxjs": "^7.8.0",
-    "tslib": "^2.3.0",
+    "syncfusion-gantt": "file:",
+    "tslib": "^2.5.0",
     "webfontloader": "^1.6.28",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.5",
+    "@angular-devkit/build-angular": "^16.0.0",
-    "@angular/cli": "~14.2.5",
+    "@angular/cli": "^16.0.0",
-    "@angular/compiler-cli": "^14.2.0",
+    "@angular/compiler-cli": "^16.0.0",
-    "@types/jasmine": "~4.0.0",
+    "@types/jasmine": "~4.3.0",
     "@types/jquery": "^3.5.14",
-    "jasmine-core": "~4.3.0",
+    "@types/node": "^22.1.0",
+    "esbuild": "^0.23.0",
+    "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.7.2"
+    "typescript": "~5.1.6"
   }
 }

frontend/src/app/app.module.ts

@@ -42,6 +42,10 @@ import { DeletePresetDialogComponent } from './delete-preset-dialog/delete-prese
 import { SavePresetUnderDialogComponent } from './save-preset-under-dialog/save-preset-under-dialog.component';
 import {MatBadgeModule} from '@angular/material/badge';
 import { CustomPaginatorIntl } from './custom-paginator-intl.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+
+
 
 
 @NgModule({
@@ -86,7 +90,8 @@ import { CustomPaginatorIntl } from './custom-paginator-intl.service';
     MomentDateModule,
     MatButtonToggleModule,
     MatCardModule,
-    MatBadgeModule
+    MatBadgeModule,
+    BrowserAnimationsModule
   ],
 
   providers: [ToolbarService,

frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html

@@ -1,5 +1,5 @@
 <div class="chip-list-wrapper">
-  <mat-chip-list #chipList>
+  <mat-chip-listbox #chipList>
     <ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
       <mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
         {{ select.item }}
@@ -9,7 +9,7 @@
     <mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">...
       {{selectData.length-20}} weitere
     </mat-chip>
-  </mat-chip-list>
+  </mat-chip-listbox>
 </div>
 
 <mat-form-field class="full-width custom-form-field" appearance="fill">
@@ -40,4 +40,4 @@
   </cdk-virtual-scroll-viewport>
 </mat-autocomplete>
 
-<!-- </mat-form-field> -->
+<!-- </mat-form-field> -->

frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.ts

@@ -3,8 +3,9 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
+import { MatChipsModule } from '@angular/material/chips'; // Importiere MatChipsModule
 ​
-
+import * as WebFont from 'webfontloader'; // Verwende import * as
 export interface ItemData {
   item: string;
   selected: boolean;
@@ -57,7 +58,6 @@ export class MultiselectAutocompleteComponent implements OnInit {
       this.rawData.push({ item, selected: false });
     });
 
-    var WebFont = require('webfontloader');
     WebFont.load({
        google: {
           families: [

frontend/src/app/ntt-gantt/ntt-gantt.component.ts

@@ -24,6 +24,7 @@ import { environment } from 'src/environments/environment';
 import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
 import { DateAdapter } from '@angular/material/core';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
+import * as WebFont from 'webfontloader'; // Verwende import * as
 
 
 export const MY_DATE_FORMATS = {
@@ -207,7 +208,6 @@ export class NttGanttComponent implements OnInit {
    * The function ngOnInit sets values which are required for rendering the gantt Chart. Furthermore it triggers the Dataservice to fetch Changes from the backend and trims the resources (Changes Array) and sets the paginator to the first page.
    */
   public ngOnInit(): void {
-    var WebFont = require('webfontloader');
     WebFont.load({ google: { families: ['Material Icons',], }, });
     this.renderGantt = false;
     this.firstLoad = true;

frontend/src/index.html

@@ -11,8 +11,11 @@
       rel="stylesheet"
     />
 
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

frontend/src/main.ts

@@ -3,7 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import {registerLicense} from '@syncfusion/ej2-base'
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-registerLicense("Mgo+DSMBaFt+QHJqVk1hXk5Hd0BLVGpAblJ3T2ZQdVt5ZDU7a15RRnVfSl1rSX1QfkZgXX9XcQ==;Mgo+DSMBPh8sVXJ1S0R+X1pFdEBBXHxAd1p/VWJYdVt5flBPcDwsT3RfQF5jQX5bdkZgUXxddHZTRw==;ORg4AjUWIQA/Gnt2VFhiQlJPd11dXmJWd1p/THNYflR1fV9DaUwxOX1dQl9gSXZTfkVgWnddc3BRTmE=;MjYyOTg5NkAzMjMxMmUzMDJlMzBCRWpXaG05ZjUzUFJvRWVRRlpUZ0VZdnQzdklwZWNadXVBTlJHWmVGWlJ3PQ==;MjYyOTg5N0AzMjMxMmUzMDJlMzBia3lqMDR0SmV5UFNkWERVanhIeEZqcFMrQzZlWFB5S1h2TEY5dDJEMHY4PQ==;NRAiBiAaIQQuGjN/V0d+Xk9HfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hSn5bdk1jWnxWc3dQRGJd;MjYyOTg5OUAzMjMxMmUzMDJlMzBEaEdrSnNqOGs0ZWxuWTl4M3VzTjcyb2dhcnBoekhnMFJGUXJOSW4yT0ZNPQ==;MjYyOTkwMEAzMjMxMmUzMDJlMzBUbHJNQ2k3QzJSL0g1aVhJRWlXSEF5Q28zVHZBZEt0ZDhabTM0Y1oxa1RrPQ==;Mgo+DSMBMAY9C3t2VFhiQlJPd11dXmJWd1p/THNYflR1fV9DaUwxOX1dQl9gSXZTfkVgWnddc3JURmE=;MjYyOTkwMkAzMjMxMmUzMDJlMzBnUzEySUdLVlgxck9PTWw2ZUpPNmVQem1KMTRlWmY5RVFTamZIVktmY0djPQ==;MjYyOTkwM0AzMjMxMmUzMDJlMzBpSnVJMkFxcXZqUlk1KzdYbVVFVE1uWlQvOXpaTDZ5QjdOOHB6a0MrbjBnPQ==;MjYyOTkwNEAzMjMxMmUzMDJlMzBEaEdrSnNqOGs0ZWxuWTl4M3VzTjcyb2dhcnBoekhnMFJGUXJOSW4yT0ZNPQ==");
+registerLicense("Ngo9BigBOggjHTQxAR8/V1NCaF5cXmZCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXdedXRcQmJeVUZzV0Y=");
 if (environment.production) {
   enableProdMode();
 }

frontend/src/styles.css

@@ -13,6 +13,7 @@
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
 .green-snackbar {
   background: green!important;
@@ -36,3 +37,6 @@
 html, body {
   /* overflow: hidden !important; */
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

frontend/tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "types": ["node"],
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "Tech-Supporting.ITSM.ChangeKalender",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}