Angular 20 migration

ui-ngx/package.json

@@ -14,12 +14,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "20.3.16",
-    "@angular/cdk": "19.2.19",
+    "@angular/cdk": "20.2.14",
     "@angular/common": "20.3.16",
     "@angular/compiler": "20.3.16",
     "@angular/core": "20.3.16",
     "@angular/forms": "20.3.16",
-    "@angular/material": "19.2.19",
+    "@angular/material": "20.2.14",
     "@angular/platform-browser": "20.3.16",
     "@angular/platform-browser-dynamic": "20.3.16",
     "@angular/router": "20.3.16",
@@ -28,7 +28,7 @@
     "@flowjs/ngx-flow": "20.0.2",
     "@geoman-io/leaflet-geoman-free": "2.18.3",
     "@iplab/ngx-color-picker": "^20.0.0",
-    "@mat-datetimepicker/core": "~15.0.2",
+    "@mat-datetimepicker/core": "~16.0.1",
     "@mdi/svg": "^7.4.47",
     "@messageformat/core": "^3.4.0",
     "@ngrx/effects": "^20.1.0",

ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss

@@ -17,10 +17,10 @@
   &:has(section) {
     height: 100%;
   }
-  --mat-outlined-button-horizontal-padding: 8px;
+  --mat-button-outlined-horizontal-padding: 8px;
-  --mdc-outlined-button-container-height: 30px;
+  --mat-button-outlined-container-height: 30px;
-  --mdc-outlined-button-label-text-size: 12px;
+  --mat-button-outlined-label-text-size: 12px;
-  --mat-outlined-button-hover-state-layer-opacity: 0;
+  --mat-button-outlined-hover-state-layer-opacity: 0;
   --mat-icon-button-hover-state-layer-opacity: 0;
 
   .group {
@@ -45,6 +45,6 @@
 
   .button-label {
     height: 28px;
-    --mat-divider-color: var(--mdc-outlined-button-label-text-color);
+    --mat-divider-color: var(--mat-button-outlined-label-text-color);
   }
 }

ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.scss

@@ -44,10 +44,10 @@
     }
 
     &.error {
-      color: var(--mdc-theme-error, #f44336);
+      color: var(--mat-theme-error, #f44336);
 
       .description-icon {
-        color: var(--mdc-theme-error, #f44336);
+        color: var(--mat-theme-error, #f44336);
       }
     }
   }

ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss

@@ -44,16 +44,16 @@
   }
 
   .tb-usage-items-progress {
-    --mdc-linear-progress-track-height: 8px;
+    --mat-progress-bar-track-height: 8px;
-    --mdc-linear-progress-active-indicator-height: 8px;
+    --mat-progress-bar-active-indicator-height: 8px;
     width: 34px;
     @media #{$mat-md} {
       display: none;
     }
     .mat-mdc-progress-bar {
       &.critical {
-        --mdc-linear-progress-track-color: rgba(209, 39, 48, 0.06);
+        --mat-progress-bar-track-color: rgba(209, 39, 48, 0.06);
-        --mdc-linear-progress-active-indicator-color: #D12730;
+        --mat-progress-bar-active-indicator-color: #D12730;
       }
     }
     .mdc-linear-progress {

ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss

@@ -413,7 +413,7 @@ div.tb-widget .tb-widget-content.tb-no-interaction {
             min-height: 20px;
             margin: 4px;
             cursor: pointer;
-            accent-color: var(--mdc-checkbox-selected-icon-color, var(--mat-app-primary));
+            accent-color: var(--mat-checkbox-selected-icon-color, var(--mat-app-primary));
           }
           .tb-group-label {
             padding-left: 12px;

ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.scss

@@ -36,9 +36,9 @@
     }
     .tb-timeline-buttons {
       .mat-mdc-mini-fab.mat-primary {
-        --mdc-fab-small-container-color:  rgba(0,0,0,0);
+        --mat-fab-small-container-color:  rgba(0,0,0,0);
         --mat-fab-small-foreground-color: rgba(0,0,0,0.54);
-        --mdc-fab-small-container-elevation-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
+        --mat-fab-small-container-elevation-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
         &:before {
           opacity: 0.1;
         }

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts

@@ -573,7 +573,7 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
 
   public radioButtonSelectedColor(radioColor: string) {
     if (isDefinedAndNotNull(radioColor)) {
-      return `--mdc-radio-selected-icon-color: ${radioColor}; --mdc-radio-selected-focus-icon-color: ${radioColor}; --mdc-radio-selected-hover-icon-color: ${radioColor}; --mdc-radio-selected-pressed-icon-color: ${radioColor}; --mat-radio-checked-ripple-color: ${radioColor};`
+      return `--mat-radio-selected-icon-color: ${radioColor}; --mat-radio-selected-focus-icon-color: ${radioColor}; --mat-radio-selected-hover-icon-color: ${radioColor}; --mat-radio-selected-pressed-icon-color: ${radioColor}; --mat-radio-checked-ripple-color: ${radioColor};`
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss

@@ -25,27 +25,27 @@ $backgroundColorDisabled: var(--tb-slider-background-color-disabled, #D5D7E5);
 .tb-slider-panel {
 
   .mat-mdc-slider.mat-primary.tb-slider {
-    --mdc-slider-active-track-color: #{$mainColor};
+    --mat-slider-active-track-color: #{$mainColor};
-    --mdc-slider-handle-color: #{$mainColor};
+    --mat-slider-handle-color: #{$mainColor};
-    --mdc-slider-focus-handle-color: #{$mainColor};
+    --mat-slider-focus-handle-color: #{$mainColor};
-    --mdc-slider-hover-handle-color: #{$mainColor};
+    --mat-slider-hover-handle-color: #{$mainColor};
 
-    --mdc-slider-with-tick-marks-inactive-container-color: #{$tickMarksColor};
+    --mat-slider-with-tick-marks-inactive-container-color: #{$tickMarksColor};
     --mat-mdc-slider-ripple-color: #{$mainColor};
 
     --mat-mdc-slider-hover-ripple-color: #{$hoverRippleColor};
     --mat-mdc-slider-focus-ripple-color: #{$focusRippleColor};
 
-    --mdc-slider-inactive-track-color: #{$backgroundColor};
+    --mat-slider-inactive-track-color: #{$backgroundColor};
 
-    --mdc-slider-disabled-active-track-color: #{$mainColorDisabled};
+    --mat-slider-disabled-active-track-color: #{$mainColorDisabled};
-    --mdc-slider-disabled-handle-color: #{$mainColorDisabled};
+    --mat-slider-disabled-handle-color: #{$mainColorDisabled};
 
-    --mdc-slider-disabled-inactive-track-color: #{$backgroundColorDisabled};
+    --mat-slider-disabled-inactive-track-color: #{$backgroundColorDisabled};
-    --mdc-slider-with-tick-marks-disabled-container-color: #{$mainColorDisabled};
+    --mat-slider-with-tick-marks-disabled-container-color: #{$mainColorDisabled};
 
-    --mdc-slider-handle-width: 16px;
+    --mat-slider-handle-width: 16px;
-    --mdc-slider-handle-height: 16px;
+    --mat-slider-handle-height: 16px;
   }
 
   width: 100%;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.scss

@@ -126,13 +126,13 @@
   }
   .tb-dragging-chip-image-fill {
     background-color: rgba(0,0,0,0.3);
-    border-radius: var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);
+    border-radius: var(--mat-chip-container-shape-radius, 16px 16px 16px 16px);
     display: none;
     pointer-events: none;
   }
   .tb-dragging-chip-image {
-    background-color: var(--mdc-chip-elevated-container-color, transparent);
+    background-color: var(--mat-chip-elevated-container-color, transparent);
-    border-radius: var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);
+    border-radius: var(--mat-chip-container-shape-radius, 16px 16px 16px 16px);
     overflow: hidden;
     height: 32px;
     line-height: 20px;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.scss

@@ -16,7 +16,7 @@
 @import '../../../../../../../../../scss/constants';
 
 .tb-data-layer-color-settings-panel {
-  --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+  --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
   --mat-form-field-trailing-icon-color: rgba(0,0,0,0.38);
   width: 700px;
   max-width: 90vw;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 .tb-map-data-layer-dialog {
-  --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+  --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
   --mat-form-field-trailing-icon-color: rgba(0,0,0,0.38);
   .tb-inline-chips {
     --mat-form-field-container-vertical-padding: 12px;

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -376,23 +376,23 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     const buttonStyle = {};
     switch (buttonType) {
       case WidgetHeaderActionButtonType.basic:
-        buttonStyle['--mdc-text-button-label-text-color'] = buttonColor;
+        buttonStyle['--mat-button-text-label-text-color'] = buttonColor;
         break;
       case WidgetHeaderActionButtonType.raised:
-        buttonStyle['--mdc-protected-button-label-text-color'] = buttonColor;
+        buttonStyle['--mat-button-protected-label-text-color'] = buttonColor;
-        buttonStyle['--mdc-protected-button-container-color'] = backgroundColor;
+        buttonStyle['--mat-button-protected-container-color'] = backgroundColor;
         break;
       case WidgetHeaderActionButtonType.stroked:
-        buttonStyle['--mdc-outlined-button-label-text-color'] = buttonColor;
+        buttonStyle['--mat-button-outlined-label-text-color'] = buttonColor;
-        buttonStyle['--mdc-outlined-button-outline-color'] = borderColor;
+        buttonStyle['--mat-button-outlined-outline-color'] = borderColor;
         break;
       case WidgetHeaderActionButtonType.flat:
-        buttonStyle['--mdc-filled-button-label-text-color'] = buttonColor;
+        buttonStyle['--mat-button-filled-label-text-color'] = buttonColor;
-        buttonStyle['--mdc-filled-button-container-color'] = backgroundColor;
+        buttonStyle['--mat-button-filled-container-color'] = backgroundColor;
         break;
       case WidgetHeaderActionButtonType.miniFab:
         buttonStyle['--mat-fab-small-foreground-color'] = buttonColor;
-        buttonStyle['--mdc-fab-small-container-color'] = backgroundColor;
+        buttonStyle['--mat-fab-small-container-color'] = backgroundColor;
         break;
       default:
         buttonStyle['--mat-icon-color'] = buttonColor;

ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.scss

@@ -20,5 +20,5 @@
   max-height: 100vh;
   display: grid;
   grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;
-  --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+  --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
 }

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 :host{
-  --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+  --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
 
   .mobile-page-form {
     display: flex;

ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.scss

@@ -20,7 +20,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+  --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
   @media #{$mat-lt-md} {
     width: 90vw;
   }

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.scss

@@ -22,7 +22,7 @@
   max-height: 100vh;
   display: grid;
   grid-template-rows: min-content 4px minmax(auto, 1fr) min-content;
-  --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+  --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
 
   .mat-mdc-slide-toggle {
     margin-bottom: 16px;

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss

@@ -52,10 +52,10 @@
     }
 
     &.tb-error {
-      color: var(--mdc-theme-error, #f44336);
+      color: var(--mat-theme-error, #f44336);
 
       &.tb-required::after {
-        color: var(--mdc-theme-error, #f44336);
+        color: var(--mat-theme-error, #f44336);
       }
     }
   }

ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss

@@ -19,7 +19,7 @@
     top: 0;
     z-index: 5;
     padding-bottom: 12px;
-    background-color: var(--mdc-dialog-container-color, white);
+    background-color: var(--mat-dialog-container-color, white);
 
     .tb-hint-available-params {
       color: rgba(0, 0, 0, 0.54);
@@ -54,10 +54,10 @@
     }
 
     &.tb-error {
-      color: var(--mdc-theme-error, #f44336);
+      color: var(--mat-theme-error, #f44336);
 
       &.tb-required::after {
-        color: var(--mdc-theme-error, #f44336);
+        color: var(--mat-theme-error, #f44336);
       }
     }
   }

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss

@@ -54,10 +54,10 @@
     }
 
     &.tb-error {
-      color: var(--mdc-theme-error, #f44336);
+      color: var(--mat-theme-error, #f44336);
 
       &.tb-required::after {
-        color: var(--mdc-theme-error, #f44336);
+        color: var(--mat-theme-error, #f44336);
       }
     }
   }

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss

@@ -29,7 +29,7 @@
 
   .tb-error {
     letter-spacing: 0.25px;
-    color: var(--mdc-theme-error, #f44336);
+    color: var(--mat-theme-error, #f44336);
   }
 
   .tb-required::after {

ui-ngx/src/app/shared/components/script-lang.component.scss

@@ -23,7 +23,7 @@
     }
   }
   .mat-button-toggle {
-    --mat-standard-button-toggle-disabled-selected-state-background-color: rgba(0, 0, 0, 0.06);
+    --mat-button-toggle-disabled-selected-state-background-color: rgba(0, 0, 0, 0.06);
     background: rgba(0, 0, 0, 0.06);
     height: 36px;
     align-items: center;

ui-ngx/src/form.scss

@@ -180,10 +180,10 @@
   }
   .tb-form-hint {
     padding: 12px 16px;
-    font-size: var(--mdc-typography-caption-font-size, 12px);
+    font-size: var(--mat-typography-caption-font-size, 12px);
-    line-height: var(--mdc-typography-caption-line-height, 20px);
+    line-height: var(--mat-typography-caption-line-height, 20px);
-    font-weight: var(--mdc-typography-caption-font-weight, 400);
+    font-weight: var(--mat-typography-caption-font-weight, 400);
-    letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
+    letter-spacing: var(--mat-typography-caption-letter-spacing, 0.0333333333em);
     color: rgba(0, 0, 0, 0.6);
     white-space: normal;
     border-radius: 6px;
@@ -824,8 +824,8 @@
   }
 
   .tb-form-panel.outlined {
-    --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
+    --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
-    --mdc-outlined-text-field-container-shape: 6px;
+    --mat-form-field-outlined-container-shape: 6px;
     --mat-form-field-trailing-icon-color: rgba(0, 0, 0, 0.56);
 
     box-shadow: none;
@@ -854,8 +854,8 @@
       height: 56px;
       margin-bottom: 22px;
       &.disabled {
-        border-color: var(--mdc-outlined-text-field-disabled-outline-color);
+        border-color: var(--mat-form-field-outlined-disabled-outline-color);
-        color: var(--mdc-outlined-text-field-disabled-input-text-color);
+        color: var(--mat-form-field-outlined-disabled-input-text-color);
       }
     }
   }

ui-ngx/src/styles.scss

@@ -224,10 +224,10 @@ div {
 
 .tb-hint {
   padding: 0 16px 16px;
-  font-size: var(--mdc-typography-caption-font-size, 12px);
+  font-size: var(--mat-typography-caption-font-size, 12px);
-  line-height: var(--mdc-typography-caption-line-height, 20px);
+  line-height: var(--mat-typography-caption-line-height, 20px);
-  font-weight: var(--mdc-typography-caption-font-weight, 400);
+  font-weight: var(--mat-typography-caption-font-weight, 400);
-  letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
+  letter-spacing: var(--mat-typography-caption-letter-spacing, 0.0333333333em);
   color: rgba(0, 0, 0, 0.6);
   white-space: normal;
 }
@@ -1292,7 +1292,7 @@ pre.tb-highlight {
     }
 
     &.active:not(:disabled) {
-      --mdc-outlined-button-outline-color: $primary;
+      --mat-button-outlined-outline-color: $primary;
     }
 
     &:disabled {

ui-ngx/src/theme-overwrites.scss

@@ -63,7 +63,7 @@
 @mixin _mat-button-overwrites($primary, $config-or-theme) {
   .mat-toolbar {
     .mat-mdc-outlined-button {
-      --mdc-outlined-button-outline-color: inherit;
+      --mat-button-outlined-outline-color: inherit;
       &:not(:disabled) {
         border-color: inherit;
       }

ui-ngx/yarn.lock

@@ -392,12 +392,12 @@
   optionalDependencies:
     lmdb "3.4.2"
 
-"@angular/cdk@19.2.19":
+"@angular/cdk@20.2.14":
-  version "19.2.19"
+  version "20.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-19.2.19.tgz#25ba3b8f565e6bcd9cd59159c0d9a4244cf3c7ee"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-20.2.14.tgz#5da8d29a0688cf0c6f58db77aee8afa0a05faaea"
-  integrity sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==
+  integrity sha512-7bZxc01URbiPiIBWThQ69XwOxVduqEKN4PhpbF2AAyfMc/W8Hcr4VoIJOwL0O1Nkq5beS8pCAqoOeIgFyXd/kg==
   dependencies:
-    parse5 "^7.1.2"
+    parse5 "^8.0.0"
     tslib "^2.3.0"
 
 "@angular/cli@20.3.15":
@@ -471,10 +471,10 @@
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-20.3.16.tgz#8d570c24ca2347a2c884b96be34077e181e08ff3"
   integrity sha512-0A/tSQPq5geIz2mMcZA5fzzbzT39v+ADQksnfPr8htNxtkYWy+EI5+d0+++k59NuvjLY4uTBqhRTRB9b1PKrjw==
 
-"@angular/material@19.2.19":
+"@angular/material@20.2.14":
-  version "19.2.19"
+  version "20.2.14"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-19.2.19.tgz#dd10669e260109c4f944303dcff3d92fed2e5566"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-20.2.14.tgz#93027a9eb052d639e8e4f1bd7a3d65e072dc2702"
-  integrity sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==
+  integrity sha512-IbAgV6XLsvmHiJzxycVhcNC1PA4M30qi+ERCOir6cT333Bxm8vDV32gsOjfL52uzG5YRARroPC+8s1XqR2oxeA==
   dependencies:
     tslib "^2.3.0"
 
@@ -2345,10 +2345,10 @@
     rw "^1.3.3"
     tinyqueue "^3.0.0"
 
-"@mat-datetimepicker/core@~15.0.2":
+"@mat-datetimepicker/core@~16.0.1":
-  version "15.0.2"
+  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-15.0.2.tgz#ea0749b7c749dc2975c28d570a623ca3a212f05e"
+  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-16.0.1.tgz#f2b19b6ed85f83a83f93be866af1a9564ac0d978"
-  integrity sha512-2vyKub5uCSAWoKC7UlUbNFOwHrHu9gdaK1xluMiimj8GibkxuP0uh2AP1tRsYz2514CAFvsSkD39X6qy0kz7Iw==
+  integrity sha512-WknoCOBP3E9VQfRrFGQ5oQlm6EHvfaGjjlHdat7mP0qdfIHqq1efVXZ4/0aXEhiV6s9KM5m4y9ZUfJDLWIz0Zg==
   dependencies:
     tslib "~2.8.1"
 
@@ -5635,7 +5635,7 @@ enhanced-resolve@^5.17.4:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-entities@^4.2.0, entities@^4.5.0:
+entities@^4.2.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -8757,13 +8757,6 @@ parse5-sax-parser@^8.0.0:
   dependencies:
     parse5 "^8.0.0"
 
-parse5@^7.1.2:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.2.1.tgz#8928f55915e6125f430cc44309765bf17556a33a"
-  integrity sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==
-  dependencies:
-    entities "^4.5.0"
-
 parse5@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-8.0.0.tgz#aceb267f6b15f9b6e6ba9e35bfdd481fc2167b12"