From ffe6ba026483645fd6a3f3554c8bb138578136d4 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 3 Feb 2026 14:19:42 +0200
Subject: [PATCH] Angular 20 migration

---
 ui-ngx/package.json                           |  6 ++--
 .../cf-alarm-rule-condition.component.scss    |  2 +-
 ...alarm-rule-filter-predicate.component.html |  2 +-
 ...t-api-key-description-panel.component.scss |  2 +-
 .../calculated-field-dialog.component.scss    |  4 +--
 .../calculated-field-output.component.html    |  2 +-
 .../github-badge/github-badge.component.scss  | 10 +++---
 ...emetry-from-database-config.component.scss |  4 +--
 .../lib/cards/api-usage-widget.component.scss | 16 ++++-----
 .../usage-info-widget.component.scss          |  8 ++---
 .../home/components/widget/lib/maps/map.scss  |  2 +-
 .../panels/map-timeline-panel.component.scss  |  4 +--
 .../lib/multiple-input-widget.component.ts    |  2 +-
 .../lib/rpc/slider-widget.component.scss      | 24 ++++++-------
 .../common/key/data-keys.component.scss       |  6 ++--
 ...-layer-color-settings-panel.component.scss |  2 +-
 .../map/map-data-layer-dialog.component.scss  |  2 +-
 .../widget/lib/table-widget.models.ts         | 14 ++++----
 .../components/widget/lib/table-widget.scss   |  2 +-
 .../components/widget/widget.component.ts     | 16 ++++-----
 .../remove-app-dialog.component.scss          |  2 +-
 .../layout/custom-mobile-page.component.scss  |  2 +-
 .../default-mobile-page-panel.component.scss  |  2 +-
 .../mobile-bundle-dialog.component.scss       |  2 +-
 .../sent-notification-dialog.component.scss   |  4 +--
 ...tion-template-configuration.component.scss |  6 ++--
 ...emplate-notification-dialog.component.scss |  4 +--
 .../rulechain/rule-node-config.component.scss |  2 +-
 ...force-two-factor-auth-login.component.scss |  2 +-
 .../pages/login/link-expired.component.scss   |  2 +-
 .../login/pages/login/login.component.scss    |  8 ++---
 .../login/pages/login/password.component.scss |  2 +-
 .../two-factor-auth-login.component.scss      |  2 +-
 .../components/script-lang.component.scss     |  2 +-
 ...string-pattern-autocomplete.component.scss |  6 ++--
 .../time/timewindow-panel.component.scss      |  2 +-
 ui-ngx/src/form.scss                          | 22 ++++++------
 ui-ngx/src/styles.scss                        | 18 +++++-----
 ui-ngx/src/theme-overwrites.scss              |  2 +-
 ui-ngx/yarn.lock                              | 35 ++++++++-----------
 40 files changed, 125 insertions(+), 132 deletions(-)

diff --git a/ui-ngx/package.json b/ui-ngx/package.json
index 46b88e6698..6757300da0 100644
--- a/ui-ngx/package.json
+++ b/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",
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.scss b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.scss
index 62876c2476..96494ab98d 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/cf-alarm-rule-condition.component.scss
@@ -21,7 +21,7 @@
     display: flex;
     flex: 1;
     &-button {
-      --mat-outlined-button-horizontal-padding: 3px 0px 12px;
+      --mat-button-outlined-horizontal-padding: 3px 0px 12px;
       display: block;
       width: 100%;
     }
diff --git a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
index 9d3ad7286a..273535d394 100644
--- a/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm-rules/filter/alarm-rule-filter-predicate.component.html
@@ -58,7 +58,7 @@
       }
       @case (filterPredicateType.COMPLEX) {
         <div class="tb-form-row no-border no-padding flex-1">
-          <button type="button" style="--mat-outlined-button-horizontal-padding: 3px 0px 12px;"
+          <button type="button" style="--mat-button-outlined-horizontal-padding: 3px 0px 12px;"
                   class="block w-full"
                   mat-stroked-button [color]="predicateValid ? 'primary' : 'warn'"
                   (click)="openComplexFilterDialog()">
diff --git a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss
index 5dcf029470..bf6c450d94 100644
--- a/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss
@@ -15,7 +15,7 @@
  */
 
 .tb-edit-api-key-description-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);
 
   width: 400px;
   max-width: 90vw;
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
index fb02408d02..b34e717714 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
@@ -18,8 +18,8 @@
   max-width: 100%;
   display: grid;
   grid-template-rows: min-content minmax(auto, 1fr) min-content;
-  --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
-  --mdc-outlined-text-field-container-shape: 6px;
+  --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
+  --mat-form-field-outlined-container-shape: 6px;
   --mat-form-field-trailing-icon-color: rgba(0, 0, 0, 0.56);
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
index 8a6bc2abe8..aef5126fc3 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/output/calculated-field-output.component.html
@@ -80,7 +80,7 @@
       <mat-expansion-panel-header class="flex flex-row flex-wrap">
         <mat-panel-title>
           <div class="flex flex-1 flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
-            <div class="tb-form-panel-title" [style.color]="disabled ? 'var(--mdc-outlined-text-field-disabled-input-text-color)' : 'var(--mat-expansion-header-text-color)'" tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.strategy' | translate }}">
+            <div class="tb-form-panel-title" [style.color]="disabled ? 'var(--mat-form-field-outlined-disabled-input-text-color)' : 'var(--mat-expansion-header-text-color)'" tb-hint-tooltip-icon="{{ 'calculated-fields.output-strategy.hint.strategy' | translate }}">
               {{ 'calculated-fields.output-strategy.strategy' | translate }}
             </div>
             <tb-toggle-select formControlName="type" selectMediaBreakpoint="xs" disablePagination appearance="fill" (click)="$event.stopPropagation()">
diff --git a/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss b/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss
index a434e430f2..74f346c2aa 100644
--- a/ui-ngx/src/app/modules/home/components/github-badge/github-badge.component.scss
+++ b/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;
-  --mdc-outlined-button-container-height: 30px;
-  --mdc-outlined-button-label-text-size: 12px;
-  --mat-outlined-button-hover-state-layer-opacity: 0;
+  --mat-button-outlined-horizontal-padding: 8px;
+  --mat-button-outlined-container-height: 30px;
+  --mat-button-outlined-label-text-size: 12px;
+  --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);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.scss b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.scss
index abc7f75946..2a692d58e2 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/get-telemetry-from-database-config.component.scss
+++ b/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);
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.scss
index b3ea52c2a8..fbd2ba3c3f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.scss
@@ -50,8 +50,8 @@ $warning-color: #FAA405;
             color: $enabled-color;
           }
           .mat-mdc-progress-bar {
-            --mdc-linear-progress-track-color: #{rgba($enabled-color, 0.06)};
-            --mdc-linear-progress-active-indicator-color: #{$enabled-color};
+            --mat-progress-bar-track-color: #{rgba($enabled-color, 0.06)};
+            --mat-progress-bar-active-indicator-color: #{$enabled-color};
           }
         }
         &.disabled {
@@ -59,8 +59,8 @@ $warning-color: #FAA405;
             color: $disabled-color;
           }
           .mat-mdc-progress-bar {
-            --mdc-linear-progress-track-color: #{rgba($disabled-color, 0.06)};
-            --mdc-linear-progress-active-indicator-color: #{$disabled-color};
+            --mat-progress-bar-track-color: #{rgba($disabled-color, 0.06)};
+            --mat-progress-bar-active-indicator-color: #{$disabled-color};
           }
         }
         &.warning {
@@ -68,8 +68,8 @@ $warning-color: #FAA405;
             color: $warning-color;
           }
           .mat-mdc-progress-bar {
-            --mdc-linear-progress-track-color: #{rgba($warning-color, 0.06)};
-            --mdc-linear-progress-active-indicator-color: #{$warning-color};
+            --mat-progress-bar-track-color: #{rgba($warning-color, 0.06)};
+            --mat-progress-bar-active-indicator-color: #{$warning-color};
           }
         }
 
@@ -120,8 +120,8 @@ $warning-color: #FAA405;
               font-size: 14px;
             }
             &-progress {
-              --mdc-linear-progress-track-height: 8px;
-              --mdc-linear-progress-active-indicator-height: 8px;
+              --mat-progress-bar-track-height: 8px;
+              --mat-progress-bar-active-indicator-height: 8px;
               padding: 4px 0;
               .mat-mdc-progress-bar {
                 border-radius: 6px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss
index a2a05779c8..ed4b2afe37 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss
+++ b/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;
-    --mdc-linear-progress-active-indicator-height: 8px;
+    --mat-progress-bar-track-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);
-        --mdc-linear-progress-active-indicator-color: #D12730;
+        --mat-progress-bar-track-color: rgba(209, 39, 48, 0.06);
+        --mat-progress-bar-active-indicator-color: #D12730;
       }
     }
     .mdc-linear-progress {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
index 2cd4868e7f..8387b1aff7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.scss
@@ -416,7 +416,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;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.scss
index 13ebe12166..c9d109b736 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/panels/map-timeline-panel.component.scss
+++ b/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;
         }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index 5abdbc495e..8096eb2172 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/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};`
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
index 90eae89139..be6ca5255c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
+++ b/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};
-    --mdc-slider-handle-color: #{$mainColor};
-    --mdc-slider-focus-handle-color: #{$mainColor};
-    --mdc-slider-hover-handle-color: #{$mainColor};
+    --mat-slider-active-track-color: #{$mainColor};
+    --mat-slider-handle-color: #{$mainColor};
+    --mat-slider-focus-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};
-    --mdc-slider-disabled-handle-color: #{$mainColorDisabled};
+    --mat-slider-disabled-active-track-color: #{$mainColorDisabled};
+    --mat-slider-disabled-handle-color: #{$mainColorDisabled};
 
-    --mdc-slider-disabled-inactive-track-color: #{$backgroundColorDisabled};
-    --mdc-slider-with-tick-marks-disabled-container-color: #{$mainColorDisabled};
+    --mat-slider-disabled-inactive-track-color: #{$backgroundColorDisabled};
+    --mat-slider-with-tick-marks-disabled-container-color: #{$mainColorDisabled};
 
-    --mdc-slider-handle-width: 16px;
-    --mdc-slider-handle-height: 16px;
+    --mat-slider-handle-width: 16px;
+    --mat-slider-handle-height: 16px;
   }
 
   width: 100%;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.scss
index ecfd9c6ee2..32c703bb23 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-keys.component.scss
+++ b/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);
-    border-radius: var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);
+    background-color: var(--mat-chip-elevated-container-color, transparent);
+    border-radius: var(--mat-chip-container-shape-radius, 16px 16px 16px 16px);
     overflow: hidden;
     height: 32px;
     line-height: 20px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.scss
index d66cb5e23d..6c0c156130 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.scss
+++ b/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;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.scss
index 1f570016d9..c2598b447f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.scss
+++ b/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;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index 0826b0a5e7..3a3c4b5150 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@@ -454,23 +454,23 @@ export function constructTableCssString(widgetConfig: WidgetConfig): string {
   
   const cssString = ` {
     --mat-toolbar-container-text-color: ${mdDark};
-    --mat-tab-header-active-label-text-color: ${mdDark};
-    --mat-tab-header-inactive-label-text-color: ${mdDark};
-    --mat-tab-header-pagination-icon-color: ${mdDark};
-    --mat-tab-header-pagination-disabled-icon-color: ${mdDarkDisabled2};
+    --mat-tab-active-label-text-color: ${mdDark};
+    --mat-tab-inactive-label-text-color: ${mdDark};
+    --mat-tab-pagination-icon-color: ${mdDark};
+    --mat-tab-pagination-disabled-icon-color: ${mdDarkDisabled2};
     --mat-table-header-headline-color: ${mdDarkSecondary};
     --mat-table-row-item-label-text-color: ${mdDark};
     --mat-icon-color: ${mdDarkSecondary};
-    --mdc-icon-button-disabled-icon-color: ${mdDarkDisabled};
+    --mat-icon-button-disabled-icon-color: ${mdDarkDisabled};
     --mat-divider-color: ${mdDarkDivider};
     --mat-paginator-container-text-color: ${mdDarkSecondary};
-    --mdc-icon-button-icon-color: ${mdDarkSecondary};
+    --mat-icon-button-icon-color: ${mdDarkSecondary};
     --mat-paginator-enabled-icon-color: ${mdDarkSecondary};
     --mat-paginator-disabled-icon-color: ${mdDarkDisabled};
     --mat-select-enabled-trigger-text-color: ${mdDarkSecondary};
     --mat-select-disabled-trigger-text-color: ${mdDarkDisabled};
     --mat-table-row-item-outline-color: ${mdDarkDivider};
-    --mdc-checkbox-unselected-focus-icon-color: ${mdDarkSecondary};
+    --mat-checkbox-unselected-focus-icon-color: ${mdDarkSecondary};
 
     --tb-orig-background-color: ${origBackgroundColor};
     --tb-current-entity-color: ${currentEntityColor};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
index c75500651e..91c6dbb317 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.scss
@@ -46,7 +46,7 @@
     }
 
     .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {
-      border-color: var(--mat-tab-header-pagination-disabled-icon-color);
+      border-color: var(--mat-tab-pagination-disabled-icon-color);
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index f70d7a751b..443c801633 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -378,23 +378,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['--mdc-protected-button-container-color'] = backgroundColor;
+        buttonStyle['--mat-button-protected-label-text-color'] = buttonColor;
+        buttonStyle['--mat-button-protected-container-color'] = backgroundColor;
         break;
       case WidgetHeaderActionButtonType.stroked:
-        buttonStyle['--mdc-outlined-button-label-text-color'] = buttonColor;
-        buttonStyle['--mdc-outlined-button-outline-color'] = borderColor;
+        buttonStyle['--mat-button-outlined-label-text-color'] = buttonColor;
+        buttonStyle['--mat-button-outlined-outline-color'] = borderColor;
         break;
       case WidgetHeaderActionButtonType.flat:
-        buttonStyle['--mdc-filled-button-label-text-color'] = buttonColor;
-        buttonStyle['--mdc-filled-button-container-color'] = backgroundColor;
+        buttonStyle['--mat-button-filled-label-text-color'] = buttonColor;
+        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;
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.scss
index c7f636367b..e2d3654c56 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/applications/remove-app-dialog.component.scss
+++ b/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);
 }
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.scss b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.scss
index 5546fb629a..5d02045480 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/custom-mobile-page.component.scss
+++ b/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;
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.scss b/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.scss
index af103c84ac..2aa92b7fc9 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/layout/default-mobile-page-panel.component.scss
+++ b/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;
   }
diff --git a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.scss
index 54a73ec652..1cbd5da660 100644
--- a/ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-dialog.component.scss
+++ b/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;
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index e365022df4..51108c1c5e 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/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);
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss
index 7b651fab21..34bff387e6 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss
+++ b/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);
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
index 2dcf24faa0..60faa86791 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
+++ b/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);
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
index 3c5fb83105..0d342442a9 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
+++ b/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 {
diff --git a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
index bd37554922..46b613b1f1 100644
--- a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.scss
@@ -23,7 +23,7 @@
 
   .tb-two-factor-auth-login-content {
     background-color: #eee;
-    --mdc-elevated-card-container-elevation: none;
+    --mat-card-elevated-container-elevation: none;
 
     .progress-bar {
       z-index: 10;
diff --git a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.scss b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.scss
index 3186eefbd5..7ec064c7ad 100644
--- a/ui-ngx/src/app/modules/login/pages/login/link-expired.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/link-expired.component.scss
@@ -20,7 +20,7 @@
   flex: 1 1 0;
   .tb-expired-link-content {
     background-color: #eee;
-    --mdc-elevated-card-container-elevation: none;
+    --mat-card-elevated-container-elevation: none;
     .tb-expired-link-card {
       letter-spacing: 0.15px;
       line-height: 24px;
diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.scss b/ui-ngx/src/app/modules/login/pages/login/login.component.scss
index bf39ab93aa..a671f14fb9 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/login.component.scss
@@ -23,15 +23,15 @@
     margin-top: 36px;
     margin-bottom: 76px;
     background-color: #eee;
-    --mdc-elevated-card-container-elevation: none;
+    --mat-card-elevated-container-elevation: none;
     .tb-login-form {
       @media #{$mat-gt-xs} {
         width: 480px !important;
       }
 
       .forgot-password {
-        --mat-text-button-horizontal-padding: 0;
-        --mdc-text-button-container-height: 20px;
+        --mat-button-text-horizontal-padding: 0;
+        --mat-button-text-container-height: 20px;
       }
 
       .tb-action-button{
@@ -48,7 +48,7 @@
       margin-bottom: 16px;
 
       .mat-divider-horizontal{
-        --mat-divider-color: var(--mdc-outlined-text-field-outline-color);
+        --mat-divider-color: var(--mat-form-field-outlined-outline-color);
       }
 
       .text {
diff --git a/ui-ngx/src/app/modules/login/pages/login/password.component.scss b/ui-ngx/src/app/modules/login/pages/login/password.component.scss
index 34d93f5d38..c4f9e393ec 100644
--- a/ui-ngx/src/app/modules/login/pages/login/password.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/password.component.scss
@@ -20,7 +20,7 @@
   flex: 1 1 0;
   .tb-password-content {
     background-color: #eee;
-    --mdc-elevated-card-container-elevation: none;
+    --mat-card-elevated-container-elevation: none;
     .tb-password-card {
       @media #{$mat-gt-xs} {
         width: 450px !important;
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
index c215525ec5..1f5faee280 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.scss
@@ -21,7 +21,7 @@
 
   .tb-two-factor-auth-login-content {
     background-color: #eee;
-    --mdc-elevated-card-container-elevation: none;
+    --mat-card-elevated-container-elevation: none;
 
     .tb-two-factor-auth-login-card {
       padding: 48px 48px 48px 16px;
diff --git a/ui-ngx/src/app/shared/components/script-lang.component.scss b/ui-ngx/src/app/shared/components/script-lang.component.scss
index 6309681f15..a228450e61 100644
--- a/ui-ngx/src/app/shared/components/script-lang.component.scss
+++ b/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;
diff --git a/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss
index aa68113205..acd26041ef 100644
--- a/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss
+++ b/ui-ngx/src/app/shared/components/string-pattern-autocomplete.component.scss
@@ -29,10 +29,10 @@
     text-decoration: inherit;
     text-transform: inherit;
     overflow: hidden;
-    color: var(--mdc-filled-text-field-input-text-color, var(--mat-app-on-surface));
+    color: var(--mat-form-field-filled-input-text-color, var(--mat-app-on-surface));
 
     &.disabled {
-      color: var(--mdc-filled-text-field-disabled-input-text-color);
+      color: var(--mat-form-field-filled-disabled-input-text-color);
     }
   }
 
@@ -63,7 +63,7 @@
     &.disabled {
       .highlight {
         color: $tb-primary-color-light;
-        text-shadow: 0 0 0.5px var($tb-primary-color-light, var(--mdc-filled-text-field-disabled-input-text-color));
+        text-shadow: 0 0 0.5px var($tb-primary-color-light, var(--mat-form-field-filled-disabled-input-text-color));
       }
     }
   }
diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
index 8eabb2df49..b278b59a85 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.scss
@@ -41,7 +41,7 @@
     }
 
     &-checkbox {
-      --mdc-checkbox-state-layer-size: 24px;
+      --mat-checkbox-state-layer-size: 24px;
     }
   }
 }
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 1a6ee74f80..bb5cf50977 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -108,7 +108,7 @@
       }
     }
     &.disabled {
-      color: var(--mdc-outlined-text-field-disabled-input-text-color);
+      color: var(--mat-form-field-outlined-disabled-input-text-color);
     }
     .mat-expansion-panel {
       &.tb-settings {
@@ -164,9 +164,9 @@
   }
 
   .tb-form-panel-disabled {
-    color: var(--mdc-outlined-text-field-disabled-input-text-color);
+    color: var(--mat-form-field-outlined-disabled-input-text-color);
     .tb-form-panel {
-      color: var(--mdc-outlined-text-field-disabled-input-text-color);
+      color: var(--mat-form-field-outlined-disabled-input-text-color);
     }
   }
 
@@ -191,10 +191,10 @@
   }
   .tb-form-hint {
     padding: 12px 16px;
-    font-size: var(--mdc-typography-caption-font-size, 12px);
-    line-height: var(--mdc-typography-caption-line-height, 20px);
-    font-weight: var(--mdc-typography-caption-font-weight, 400);
-    letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
+    font-size: var(--mat-typography-caption-font-size, 12px);
+    line-height: var(--mat-typography-caption-line-height, 20px);
+    font-weight: var(--mat-typography-caption-font-weight, 400);
+    letter-spacing: var(--mat-typography-caption-letter-spacing, 0.0333333333em);
     color: rgba(0, 0, 0, 0.6);
     white-space: normal;
     border-radius: 6px;
@@ -845,8 +845,8 @@
   }
 
   .tb-form-panel.outlined {
-    --mdc-outlined-text-field-outline-color: rgba(0,0,0,0.12);
-    --mdc-outlined-text-field-container-shape: 6px;
+    --mat-form-field-outlined-outline-color: rgba(0,0,0,0.12);
+    --mat-form-field-outlined-container-shape: 6px;
     --mat-form-field-trailing-icon-color: rgba(0, 0, 0, 0.56);
 
     box-shadow: none;
@@ -875,8 +875,8 @@
       height: 56px;
       margin-bottom: 22px;
       &.disabled {
-        border-color: var(--mdc-outlined-text-field-disabled-outline-color);
-        color: var(--mdc-outlined-text-field-disabled-input-text-color);
+        border-color: var(--mat-form-field-outlined-disabled-outline-color);
+        color: var(--mat-form-field-outlined-disabled-input-text-color);
       }
     }
   }
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index cdac88d00b..93422abfde 100644
--- a/ui-ngx/src/styles.scss
+++ b/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);
-  line-height: var(--mdc-typography-caption-line-height, 20px);
-  font-weight: var(--mdc-typography-caption-font-weight, 400);
-  letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em);
+  font-size: var(--mat-typography-caption-font-size, 12px);
+  line-height: var(--mat-typography-caption-line-height, 20px);
+  font-weight: var(--mat-typography-caption-font-weight, 400);
+  letter-spacing: var(--mat-typography-caption-letter-spacing, 0.0333333333em);
   color: rgba(0, 0, 0, 0.6);
   white-space: normal;
 }
@@ -637,8 +637,8 @@ pre.tb-highlight {
   }
 
   .tb-autofilled:has(input:-webkit-autofill){
-    --mdc-outlined-text-field-label-text-color: var(--mdc-outlined-text-field-input-text-color);
-    --mdc-outlined-text-field-hover-label-text-color: var(--mdc-outlined-text-field-input-text-color);
+    --mat-form-field-outlined-label-text-color: var(--mat-form-field-outlined-input-text-color);
+    --mat-form-field-outlined-hover-label-text-color: var(--mat-form-field-outlined-input-text-color);
     .mat-mdc-form-field-flex {
       &:before {
         display: block;
@@ -663,10 +663,10 @@ pre.tb-highlight {
         &:-webkit-autofill:focus,
         &:-webkit-autofill:active {
           -webkit-background-clip: text !important;
-          -webkit-text-fill-color: var(--mdc-outlined-text-field-input-text-color);
+          -webkit-text-fill-color: var(--mat-form-field-outlined-input-text-color);
         }
         &::spelling-error {
-          color: var(--mdc-outlined-text-field-input-text-color);
+          color: var(--mat-form-field-outlined-input-text-color);
           text-decoration: none;
         }
       }
@@ -1329,7 +1329,7 @@ pre.tb-highlight {
     }
 
     &.active:not(:disabled) {
-      --mdc-outlined-button-outline-color: $primary;
+      --mat-button-outlined-outline-color: $primary;
     }
 
     &:disabled {
diff --git a/ui-ngx/src/theme-overwrites.scss b/ui-ngx/src/theme-overwrites.scss
index 483511197f..ab2891d014 100644
--- a/ui-ngx/src/theme-overwrites.scss
+++ b/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;
       }
diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock
index 6330c345a1..b442b8930c 100644
--- a/ui-ngx/yarn.lock
+++ b/ui-ngx/yarn.lock
@@ -392,12 +392,12 @@
   optionalDependencies:
     lmdb "3.4.2"
 
-"@angular/cdk@19.2.19":
-  version "19.2.19"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-19.2.19.tgz#25ba3b8f565e6bcd9cd59159c0d9a4244cf3c7ee"
-  integrity sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==
+"@angular/cdk@20.2.14":
+  version "20.2.14"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-20.2.14.tgz#5da8d29a0688cf0c6f58db77aee8afa0a05faaea"
+  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":
-  version "19.2.19"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-19.2.19.tgz#dd10669e260109c4f944303dcff3d92fed2e5566"
-  integrity sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==
+"@angular/material@20.2.14":
+  version "20.2.14"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-20.2.14.tgz#93027a9eb052d639e8e4f1bd7a3d65e072dc2702"
+  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":
-  version "15.0.2"
-  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-15.0.2.tgz#ea0749b7c749dc2975c28d570a623ca3a212f05e"
-  integrity sha512-2vyKub5uCSAWoKC7UlUbNFOwHrHu9gdaK1xluMiimj8GibkxuP0uh2AP1tRsYz2514CAFvsSkD39X6qy0kz7Iw==
+"@mat-datetimepicker/core@~16.0.1":
+  version "16.0.1"
+  resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-16.0.1.tgz#f2b19b6ed85f83a83f93be866af1a9564ac0d978"
+  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"