diff --git a/ui-ngx/patches/@mat-datetimepicker+core+16.0.1.patch b/ui-ngx/patches/@mat-datetimepicker+core+16.0.1.patch
index 2c65c021d3..72e42dc318 100644
--- a/ui-ngx/patches/@mat-datetimepicker+core+16.0.1.patch
+++ b/ui-ngx/patches/@mat-datetimepicker+core+16.0.1.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
-index 83a6413..70d9c3e 100644
+index 83a6413..6ebae81 100644
 --- a/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
 +++ b/node_modules/@mat-datetimepicker/core/fesm2022/mat-datetimepicker-core.mjs
 @@ -935,9 +935,9 @@ class MatDatetimepickerClockComponent {
@@ -15,3 +15,30 @@ index 83a6413..70d9c3e 100644
              date = this._adapter.createDatetime(this._adapter.getYear(this.activeDate), this._adapter.getMonth(this.activeDate), this._adapter.getDate(this.activeDate), this._adapter.getHour(this.activeDate), value);
          }
          this._timeChanged = true;
+@@ -1889,7 +1889,7 @@ class MatDatetimepickerContentComponent {
+         }
+     }
+     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MatDatetimepickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MatDatetimepickerContentComponent, isStandalone: false, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n  (_userSelection)=\"datetimepicker.close()\"\n  (selectedChange)=\"onSelectionChange($event)\"\n  (viewChanged)=\"datetimepicker._viewChanged($event)\"\n  [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n  [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n  [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n  [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n  [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n  [attr.mode]=\"datetimepicker.mode\"\n  [dateFilter]=\"datetimepicker._dateFilter\"\n  [id]=\"datetimepicker.id\"\n  [maxDate]=\"datetimepicker._maxDate\"\n  [minDate]=\"datetimepicker._minDate\"\n  [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n  [selected]=\"datetimepicker._selected\"\n  [startAt]=\"datetimepicker.startAt\"\n  [startView]=\"datetimepicker.startView\"\n  [timeInterval]=\"datetimepicker.timeInterval\"\n  [twelvehour]=\"datetimepicker.twelvehour\"\n  [type]=\"datetimepicker.type\"\n  cdkTrapFocus\n  class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
++    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MatDatetimepickerContentComponent, isStandalone: false, selector: "mat-datetimepicker-content", host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.mat-datetimepicker-content-touch": "datetimepicker?.touchUi" }, classAttribute: "mat-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatDatetimepickerCalendarComponent, descendants: true, static: true }], ngImport: i0, template: "<mat-datetimepicker-calendar\n  (_userSelection)=\"datetimepicker.close()\"\n  (selectedChange)=\"onSelectionChange($event)\"\n  (viewChanged)=\"datetimepicker._viewChanged($event)\"\n  [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n  [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n  [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n  [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n  [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n  [attr.mode]=\"datetimepicker.mode\"\n  [dateFilter]=\"datetimepicker._dateFilter\"\n  [id]=\"datetimepicker.id\"\n  [maxDate]=\"datetimepicker._maxDate\"\n  [minDate]=\"datetimepicker._minDate\"\n  [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n  [selected]=\"datetimepicker._selected\"\n  [startAt]=\"datetimepicker.startAt\"\n  [startView]=\"datetimepicker.startView\"\n  [timeInterval]=\"datetimepicker.timeInterval\"\n  [twelvehour]=\"datetimepicker.twelvehour\"\n  [type]=\"datetimepicker.type\"\n  cdkTrapFocus\n  class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatDatetimepickerCalendarComponent, selector: "mat-datetimepicker-calendar", inputs: ["multiYearSelector", "startView", "twelvehour", "timeInterval", "dateFilter", "ariaLabel", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "ariaNextMultiYearLabel", "ariaPrevMultiYearLabel", "preventSameDateTimeSelection", "type", "startAt", "selected", "minDate", "maxDate"], outputs: ["_userSelection", "selectedChange", "viewChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+ }
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MatDatetimepickerContentComponent, decorators: [{
+             type: Component,
+@@ -1897,7 +1897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
+                         class: 'mat-datetimepicker-content',
+                         '[class.mat-datetimepicker-content-touch]': 'datetimepicker?.touchUi',
+                         '(keydown)': '_handleKeydown($event)',
+-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-datetimepicker-calendar\n  (_userSelection)=\"datetimepicker.close()\"\n  (selectedChange)=\"onSelectionChange($event)\"\n  (viewChanged)=\"datetimepicker._viewChanged($event)\"\n  [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n  [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n  [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n  [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n  [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n  [attr.mode]=\"datetimepicker.mode\"\n  [dateFilter]=\"datetimepicker._dateFilter\"\n  [id]=\"datetimepicker.id\"\n  [maxDate]=\"datetimepicker._maxDate\"\n  [minDate]=\"datetimepicker._minDate\"\n  [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n  [selected]=\"datetimepicker._selected\"\n  [startAt]=\"datetimepicker.startAt\"\n  [startView]=\"datetimepicker.startView\"\n  [timeInterval]=\"datetimepicker.timeInterval\"\n  [twelvehour]=\"datetimepicker.twelvehour\"\n  [type]=\"datetimepicker.type\"\n  cdkTrapFocus\n  class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:#0009}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
++                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-datetimepicker-calendar\n  (_userSelection)=\"datetimepicker.close()\"\n  (selectedChange)=\"onSelectionChange($event)\"\n  (viewChanged)=\"datetimepicker._viewChanged($event)\"\n  [ariaNextMonthLabel]=\"datetimepicker.ariaNextMonthLabel\"\n  [ariaNextYearLabel]=\"datetimepicker.ariaNextYearLabel\"\n  [ariaPrevMonthLabel]=\"datetimepicker.ariaPrevMonthLabel\"\n  [ariaPrevYearLabel]=\"datetimepicker.ariaPrevYearLabel\"\n  [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n  [attr.mode]=\"datetimepicker.mode\"\n  [dateFilter]=\"datetimepicker._dateFilter\"\n  [id]=\"datetimepicker.id\"\n  [maxDate]=\"datetimepicker._maxDate\"\n  [minDate]=\"datetimepicker._minDate\"\n  [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n  [selected]=\"datetimepicker._selected\"\n  [startAt]=\"datetimepicker.startAt\"\n  [startView]=\"datetimepicker.startView\"\n  [timeInterval]=\"datetimepicker.timeInterval\"\n  [twelvehour]=\"datetimepicker.twelvehour\"\n  [type]=\"datetimepicker.type\"\n  cdkTrapFocus\n  class=\"mat-typography\"\n>\n</mat-datetimepicker-calendar>\n", styles: [".mat-datetimepicker-content{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;display:block;background-color:#fff;border-radius:2px;overflow:hidden}.mat-datetimepicker-calendar{width:296px;height:405px}.mat-datetimepicker-calendar[mode=landscape]{width:446px;height:328px}@media (min-width: 480px){.mat-datetimepicker-calendar[mode=auto]{width:446px;height:328px}}.mat-datetimepicker-content-touch{box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f;display:block;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.mat-datetimepicker-dialog .mat-dialog-container{padding:0}\n"] }]
+         }], propDecorators: { _calendar: [{
+                 type: ViewChild,
+                 args: [MatDatetimepickerCalendarComponent, { static: true }]
+@@ -2150,7 +2150,7 @@ class MatDatetimepickerComponent {
+         const overlayConfig = new OverlayConfig({
+             positionStrategy: this._createPopupPositionStrategy(),
+             hasBackdrop: true,
+-            backdropClass: 'mat-overlay-transparent-backdrop',
++            backdropClass: 'cdk-overlay-transparent-backdrop',
+             direction: this._dir ? this._dir.value : 'ltr',
+             scrollStrategy: this._scrollStrategy(),
+             panelClass: 'mat-datetimepicker-popup',