From 1657dbac08f423ff8c9ea1b1bff1ba9585cb7681 Mon Sep 17 00:00:00 2001
From: joaogoncalves <joao@klippa.com>
Date: Mon, 19 Aug 2024 15:11:55 +0200
Subject: [PATCH] wip fix date picker

---
 .../date-time-picker.component.scss           | 49 ++++++++++++-------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/date-time-picker/date-time-picker.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/elements/date-time-picker/date-time-picker.component.scss
index dbc5540..6b6effa 100644
--- a/projects/klippa/ngx-enhancy-forms/src/lib/elements/date-time-picker/date-time-picker.component.scss
+++ b/projects/klippa/ngx-enhancy-forms/src/lib/elements/date-time-picker/date-time-picker.component.scss
@@ -5,47 +5,53 @@
 	display: block;
 	// patching some styling in the native material date picker so it is inline with our own styling
 	::ng-deep {
-		mat-form-field {
+		.mat-mdc-form-field {
 			display: block;
 			height: 100%;
-			/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-			.mat-form-field-label {
+			.mat-mdc-text-field-wrapper, .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay {
+				background-color: unset;
+				&:hover {
+					background-color: unset;
+				}
+			}
+
+			.mat-mdc-form-field-subscript-wrapper {
+				display: none
+			}
+
+			.mdc-line-ripple::before, .mdc-line-ripple::after {
+				display: none;
+			}
+
+			.mat-mdc-form-field-label {
 				color: $default-gray-faded-dark;
 			}
-			/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-			&.mat-focused .mat-form-field-label {
+			&.mat-mdc-focused .mat-mdc-form-field-label {
 				color: $default-gray-faded-dark;
 			}
 		}
-		.mat-datepicker-toggle-active {
+		.mat-mdc-datepicker-toggle-active {
 			color: $default-gray-dark;
 		}
-		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-		.mat-form-field-wrapper {
+		.mat-mdc-form-field-wrapper {
 			padding-bottom: 0;
 		}
-		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-		.mat-form-field-flex {
+		.mat-mdc-form-field-flex {
 			flex-direction: row-reverse;
 		}
-		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-		.mat-form-field-infix {
+		.mat-mdc-form-field-infix {
 			border-top: none;
 			width: auto;
 		}
-		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-		.mat-form-field-suffix {
+		.mat-mdc-form-field-suffix {
 			margin-right: $spacing-small;
 			&:hover {
-				/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
-				.mat-button-focus-overlay {
+				.mat-mdc-button-focus-overlay {
 					opacity: 0.1;
 				}
 			}
 		}
-		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
-		.mat-form-field-underline {
+		.mat-mdc-form-field-underline {
 			display: none;
 		}
 		.daysSelectedCaption {
@@ -57,6 +63,11 @@
 		.inputForMultipleDays {
 			display: none;
 		}
+
+		.mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
+			opacity: unset;
+			background-color: unset;
+		}
 	}
 }