fix(datepicker): fix datepicker issues when clearing value and notch border (#1894)

Author: didimmova

src/components/date-picker/themes/shared/date-picker.material.scss

@@ -3,6 +3,12 @@
 
 $theme: $material;
 
+:host([outlined]) {
+    igc-date-time-input::part(notch) {
+        border-block-start: rem(2px) solid transparent;
+    }
+}
+
 :host([outlined][readonly]:hover) {
     igc-date-time-input::part(start),
     igc-date-time-input::part(end),
@@ -83,7 +89,7 @@ $theme: $material;
         border-color: var-get($theme, 'error-secondary-color');
     }
 
-    &::part(notch) {
+    igc-date-time-input::part(notch) {
         border-bottom-color: var-get($theme, 'error-secondary-color');
     }
 }

src/components/date-range-picker/themes/shared/date-range-picker.common.scss

@@ -60,6 +60,12 @@ $theme: $material;
     }
 }
 
+:host([outlined]) {
+    igc-date-time-input::part(notch) {
+        border-block-start: rem(2px) solid transparent;
+    }
+}
+
 :host(:not([readonly])) {
     --affix-color: #{var-get($theme, 'input-prefix-color')};
 

src/components/date-time-input/date-time-input.ts

@@ -535,6 +535,10 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
       return mask;
     }
 
+    if (this.readOnly) {
+      return '';
+    }
+
     return this._maskedValue === '' ? mask : this._maskedValue;
   }