Angular 20 upgrade

Author: newmanw

web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss

@@ -367,14 +367,14 @@ $top-panel-list-height: 236px;
       opacity: 1;
       cursor: pointer;
 
-      --mdc-text-button-label-text-color: #1e88e5;
-      --mat-text-button-state-layer-color: #1e88e5;
+      --mat-button-text-label-text-color: #1e88e5;
+      --mat-button-text-state-layer-color: #1e88e5;
 
       &:hover {
         background: rgba(30, 136, 229, 0.08);
         color: #1565c0 !important;
 
-        --mdc-text-button-label-text-color: #1565c0;
+        --mat-button-text-label-text-color: #1565c0;
       }
 
       &:focus-visible {
@@ -394,8 +394,8 @@ $top-panel-list-height: 236px;
       cursor: not-allowed;
       pointer-events: none;
 
-      --mdc-text-button-disabled-label-text-color: #b8b8b8;
-      --mdc-text-button-label-text-color: #b8b8b8;
+      --mat-button-text-disabled-label-text-color: #b8b8b8;
+      --mat-button-text-label-text-color: #b8b8b8;
     }
 
     @media (max-width: 480px),

web-app/admin/src/app/admin/admin-devices/dashboard/devices-dashboard.component.scss

@@ -162,9 +162,9 @@ $font-xs: 12px;
 .button-group .mat-mdc-raised-button,
 .button-group .btn-primary,
 .button-group [mat-flat-button] {
-  --mdc-filled-button-container-color: #1e88e5;
-  --mdc-filled-button-label-text-color: #ffffff;
-  --mat-filled-button-state-layer-color: #1e88e5;
+  --mat-button-filled-container-color: #1e88e5;
+  --mat-button-filled-label-text-color: #ffffff;
+  --mat-button-filled-state-layer-color: #1e88e5;
   background-color: #1e88e5 !important;
   color: #ffffff !important;
   border: 1px solid #1e88e5 !important;

web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss

@@ -8,10 +8,10 @@ $font-xs: 12px;
 
 ::ng-deep .add-field-dialog {
   .mat-mdc-dialog-container {
-    --mdc-dialog-container-color: #ffffff;
-    --mdc-dialog-subhead-color: #1976d2;
-    --mdc-text-button-label-text-color: #333333;
-    --mat-text-button-state-layer-color: transparent;
+    --mat-dialog-container-color: #ffffff;
+    --mat-dialog-subhead-color: #1976d2;
+    --mat-button-text-label-text-color: #333333;
+    --mat-button-text-state-layer-color: transparent;
     padding: 0;
   }
 

web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/symbology-dialog/symbology-dialog.component.scss

@@ -9,7 +9,7 @@ $font-xs: 12px;
 }
 
 :host ::ng-deep .mat-mdc-dialog-container {
-  --mdc-dialog-container-color: #ffffff;
+  --mat-dialog-container-color: #ffffff;
 }
 
 :host ::ng-deep .mdc-dialog__surface {

web-app/admin/src/app/admin/admin-event/dashboard/event-dashboard.component.scss

@@ -162,9 +162,9 @@ $font-xs: 12px;
 .button-group .mat-mdc-raised-button,
 .button-group .btn-primary,
 .button-group [mat-flat-button] {
-  --mdc-filled-button-container-color: #1e88e5;
-  --mdc-filled-button-label-text-color: #ffffff;
-  --mat-filled-button-state-layer-color: #1e88e5;
+  --mat-button-filled-container-color: #1e88e5;
+  --mat-button-filled-label-text-color: #ffffff;
+  --mat-button-filled-state-layer-color: #1e88e5;
   background-color: #1e88e5 !important;
   color: #ffffff !important;
   border: 1px solid #1e88e5 !important;

web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed-edit/admin-feed-edit-item-properties/admin-feed-edit-item-properties.component.ts

@@ -44,11 +44,11 @@ export type SchemaFormValue = KeyedPropertySchemaFormValue[]
 })
 export class AdminFeedEditItemPropertiesComponent implements OnInit, OnChanges {
 
-  @Input() expanded: boolean;
+  @Input() expanded: boolean = false;
   @Input() topicSchema: any = null;
   @Input() feedSchema: any = null;
   @Output() feedSchemaChanged = new EventEmitter<SimpleJsonSchema>();
-  @Output() feedSchemaAccepted = new EventEmitter<SimpleJsonSchema>();
+  @Output() feedSchemaAccepted = new EventEmitter<SimpleJsonSchema | null>();
   @Output() cancelled = new EventEmitter<void>();
   @Output() opened = new EventEmitter<void>();
 
@@ -123,9 +123,9 @@ function syncPropertiesFormToSchemaProperties(form: UntypedFormArray, schema: Si
     const key = currentPropertyFormValue.key
     if (properties.hasOwnProperty(key)) {
       retainedFormKeys[key] = true
-      const incomingPropertySchema = schema.properties[key]
+      const incomingPropertySchema = properties[key]
       const incomingPropertyFormValue = formValueForPopertySchema(key, incomingPropertySchema)
-      form.get([ pos, 'schema' ]).setValue(incomingPropertyFormValue.schema, { emitEvent: false })
+      form.get([ pos, 'schema' ])?.setValue(incomingPropertyFormValue.schema, { emitEvent: false })
     }
     else {
       form.removeAt(pos)
@@ -161,7 +161,7 @@ function applyFormValueToSchema(schemaFormValue: SchemaFormValue, schema: Simple
     return null
   }
   schema = { ...schema }
-  const properties = schema.properties = { ...schema.properties } || {}
+  const properties = schema.properties = { ...schema.properties }
   for (const propertyFormValue of schemaFormValue) {
     const key = propertyFormValue.key
     const formPropertySchema = propertySchemaForFormValue(propertyFormValue)

web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.scss

@@ -333,11 +333,11 @@ mat-form-field {
 :host ::ng-deep .content__events .mat-mdc-list-item-meta.mat-mdc-icon-button,
 :host ::ng-deep .content__events .mat-mdc-icon-button {
   background: transparent !important;
-  --mdc-icon-button-state-layer-size: 0px;
+  --mat-icon-button-state-layer-size: 0px;
+  --mat-icon-button-state-layer-color: transparent;
+  --mat-icon-button-ripple-color: transparent;
   --mat-icon-button-state-layer-color: transparent;
   --mat-icon-button-ripple-color: transparent;
-  --mdc-icon-button-state-layer-color: transparent;
-  --mdc-icon-button-ripple-color: transparent;
 }
 
 :host

web-app/admin/src/app/admin/admin-layers/dashboard/layer-dashboard.component.scss

@@ -162,9 +162,9 @@ $font-xs: 12px;
 .button-group .mat-mdc-raised-button,
 .button-group .btn-primary,
 .button-group [mat-flat-button] {
-  --mdc-filled-button-container-color: #1e88e5;
-  --mdc-filled-button-label-text-color: #ffffff;
-  --mat-filled-button-state-layer-color: #1e88e5;
+  --mat-button-filled-container-color: #1e88e5;
+  --mat-button-filled-label-text-color: #ffffff;
+  --mat-button-filled-state-layer-color: #1e88e5;
   background-color: #1e88e5 !important;
   color: #ffffff !important;
   border: 1px solid #1e88e5 !important;

web-app/admin/src/app/admin/admin-teams/dashboard/team-dashboard.component.scss

@@ -161,9 +161,9 @@ $font-xs: 12px;
 .button-group .btn-primary,
 .button-group .btn-primary.mat-mdc-unelevated-button,
 .button-group .btn-primary.mat-mdc-raised-button {
-  --mdc-filled-button-container-color: #1e88e5;
-  --mdc-filled-button-label-text-color: #ffffff;
-  --mat-filled-button-state-layer-color: #1e88e5;
+  --mat-button-filled-container-color: #1e88e5;
+  --mat-button-filled-label-text-color: #ffffff;
+  --mat-button-filled-state-layer-color: #1e88e5;
   background-color: #1e88e5 !important;
   color: #ffffff !important;
   border: 1px solid #1e88e5 !important;

web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.scss

@@ -161,9 +161,9 @@ $font-xs: 12px;
 .button-group .btn-primary,
 .button-group .btn-primary.mat-mdc-unelevated-button,
 .button-group .btn-primary.mat-mdc-raised-button {
-  --mdc-filled-button-container-color: #1e88e5;
-  --mdc-filled-button-label-text-color: #ffffff;
-  --mat-filled-button-state-layer-color: #1e88e5;
+  --mat-button-filled-container-color: #1e88e5;
+  --mat-button-filled-label-text-color: #ffffff;
+  --mat-button-filled-state-layer-color: #1e88e5;
   background-color: #1e88e5 !important;
   color: #ffffff !important;
   border: 1px solid #1e88e5 !important;