Chore/update angular

springwolf-ui/package.json

@@ -12,26 +12,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^14.2.6",
-    "@angular/common": "^14.2.6",
-    "@angular/core": "^14.2.6",
-    "@angular/flex-layout": "^14.0.0-beta.41",
-    "@angular/forms": "^14.2.8",
-    "@angular/material": "^14.2.6",
-    "@angular/platform-browser": "^14.2.8",
-    "@angular/platform-browser-dynamic": "^14.2.8",
-    "@angular/router": "^14.2.8",
+    "@angular/cdk": "^16.0.3",
+    "@angular/common": "^16.0.4",
+    "@angular/core": "^16.0.4",
+    "@angular/forms": "^16.0.4",
+    "@angular/material": "^16.0.3",
+    "@angular/platform-browser": "^16.0.4",
+    "@angular/platform-browser-dynamic": "^16.0.4",
+    "@angular/router": "^16.0.4",
     "font-awesome": "^4.7.0",
     "ngx-highlightjs": "^7.0.1",
     "rxjs": "^7.8.1",
-    "zone.js": "^0.11.8"
+    "zone.js": "^0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.7",
-    "@angular/cli": "^14.2.7",
-    "@angular/compiler-cli": "^14.2.8",
+    "@angular-devkit/build-angular": "^16.0.4",
+    "@angular/cli": "^16.0.4",
+    "@angular/compiler-cli": "^16.0.4",
     "@types/node": "^12.11.1",
-    "angular-in-memory-web-api": "^0.14.0",
-    "typescript": "^4.8.4"
+    "angular-in-memory-web-api": "^0.16.0",
+    "typescript": "^5.0.4"
   }
 }

springwolf-ui/src/app/app.component.html

@@ -1,5 +1,5 @@
 <app-header></app-header>
-<main fxLayout="column" fxLayoutGap="24px">
+<main class="flex-column">
     <app-info></app-info>
     <app-servers></app-servers>
     <app-channels></app-channels>

springwolf-ui/src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
@@ -38,7 +37,6 @@ import {AsyncApiMapperService} from "./shared/asyncapi-mapper.service";
     BrowserModule,
     BrowserAnimationsModule,
     MaterialModule,
-    FlexLayoutModule,
     HighlightModule,
     HttpClientModule,
     FormsModule,

springwolf-ui/src/app/channels/channel-main/channel-main.component.css

@@ -1,6 +1,7 @@
 textarea {
-    margin-top: 16px;
+    width: calc(100% - 16px);
     padding: 8px;
+    margin-top: 16px;
     border-radius: 4px;
     border-width: 0;
     line-height: 24px;
@@ -34,6 +35,10 @@ button {
   font-weight: normal;
 }
 
+.button-container {
+  height: 50px;
+}
+
 [hidden] {
   display: none !important;
 }

springwolf-ui/src/app/channels/channel-main/channel-main.component.html

@@ -6,8 +6,8 @@ <h4>{{ operation.message.description }}</h4>
     </div>
     <mat-tab-group animationDuration="0ms">
       <mat-tab label="Example">
-        <div fxLayout="column">
-          <div [hidden]="isEmptyObject(operation.message.bindings.get(protocolName))" fxLayout="column" fxLayoutGap="5px">
+        <div class="flex-column">
+          <div [hidden]="isEmptyObject(operation.message.bindings.get(protocolName))" class="flex-column">
             <h4>Message Binding</h4>
             <textarea spellcheck="false"
                       #bindingTextArea
@@ -16,7 +16,7 @@ <h4>Message Binding</h4>
                       (keyup)="recalculateLineCount('massageBindingExample', bindingTextArea.value)"
             ></textarea>
           </div>
-          <div [hidden]="!(headersExample?.lineCount > 1)" fxLayout="column" fxLayoutGap="0px">
+          <div [hidden]="!(headersExample?.lineCount > 1)" class="flex-column">
 
               <h4>Header</h4>
               <textarea spellcheck="false"
@@ -27,7 +27,7 @@ <h4>Header</h4>
               ></textarea>
 
           </div>
-          <div fxLayout="column" fxLayoutGap="5px">
+          <div class="flex-column">
             <h4>Message</h4>
             <textarea spellcheck="false"
                       #messageTextArea
@@ -36,7 +36,7 @@ <h4>Message</h4>
                       (keyup)="recalculateLineCount('example', messageTextArea.value)"
             ></textarea>
           </div>
-          <div fxLayout fxLayoutGap="8px">
+          <div class="button-container flex gap-8">
             <button mat-raised-button color="primary"
                     (click)="publish(messageTextArea.value, headersTextArea?.value, bindingTextArea?.value)">
               Publish
@@ -72,7 +72,7 @@ <h4>
           </span>
         </h4>
         <app-schema *ngIf="headers" [schema]="headers"></app-schema>
-        <div fxLayout="column">
+        <div class="flex-column">
           <app-json [json]="headersExample?.value"></app-json>
         </div>
       </mat-tab>

springwolf-ui/src/app/channels/channels.component.html

@@ -21,7 +21,7 @@ <h1>Channels</h1>
 <mat-accordion>
     <mat-expansion-panel *ngFor="let channel of channels" [id]="channel.anchorIdentifier" [expanded]="selectedChannel == channel.anchorIdentifier" (opened)="this.setChannelSelection(channel)">
         <mat-expansion-panel-header>
-            <mat-panel-title fxLayout fxLayoutAlign="flex-start center" fxLayoutGap="16px">
+            <mat-panel-title class="flex-column gap-16 flex-start items-center">
                 <div class="badge protocol-badge" >
                     {{ channel.operation.protocol }}
                 </div>

springwolf-ui/src/app/header/header.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar color="primary" fxLayout fxLayoutAlign="space-between center">
+<mat-toolbar color="primary" class="flex-column space-between items-center">
   <img src="assets/springwolf-logo.png" class="logo" alt="Logo" />
   <h2>springwolf</h2>
     <a href="https://github.com/stavshamir/springwolf">

springwolf-ui/src/app/servers/servers.component.html

@@ -1,7 +1,9 @@
 <h1>Servers</h1>
-<mat-card *ngFor="let server of servers | keyvalue">
-    <mat-card-title>{{ server.key }}</mat-card-title>
+<mat-card appearance="outlined" *ngFor="let server of servers | keyvalue">
+    <mat-card-header>
+      <mat-card-title>{{ server.key }}</mat-card-title>
+    </mat-card-header>
     <mat-card-content>
         {{ server.value.url }}
     </mat-card-content>
-</mat-card>
+</mat-card>

springwolf-ui/src/styles.css

@@ -4,10 +4,21 @@
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
-.mat-card {
-    background-color: #F5F5F5;
+.mat-mdc-card {
+    background-color: #F5F5F5 !important;
 }
 
 .mat-expansion-panel {
     background-color: #F5F5F5;
-}
+}
+
+/* Migration away from @angular/flex-layout (https://github.com/angular/flex-layout/issues/1426) */
+.flex { display: flex; }
+.flex-row { display: flex; flex-direction: row; }
+.flex-col { display: flex; flex-direction: column; }
+.gap-8 { gap: 8px; }
+.gap-16 { gap: 16px; }
+.space-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.items-center { align-items: center; }
+.flex-start { align-items: start; }

springwolf-ui/src/test.ts

@@ -7,19 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

springwolf-ui/tsconfig.json

@@ -10,13 +10,14 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "ES2022",
     "lib": [
       "es2018",
       "dom"
     ],
     "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,