1
1
import { BooleanInput , coerceBooleanProperty } from '@angular/cdk/coercion' ;
2
2
import {
3
+ AfterViewInit ,
3
4
Directive ,
4
5
DoCheck ,
5
6
ElementRef ,
@@ -21,7 +22,7 @@ import { MdbAbstractFormControl } from './form-control';
21
22
providers : [ { provide : MdbAbstractFormControl , useExisting : MdbInputDirective } ] ,
22
23
} )
23
24
// eslint-disable-next-line @angular-eslint/component-class-suffix
24
- export class MdbInputDirective implements MdbAbstractFormControl < any > , DoCheck {
25
+ export class MdbInputDirective implements MdbAbstractFormControl < any > , DoCheck , AfterViewInit {
25
26
constructor (
26
27
private _elementRef : ElementRef ,
27
28
private _renderer : Renderer2 ,
@@ -31,6 +32,14 @@ export class MdbInputDirective implements MdbAbstractFormControl<any>, DoCheck {
31
32
readonly stateChanges : Subject < void > = new Subject < void > ( ) ;
32
33
33
34
private _focused = false ;
35
+ private _color = '' ;
36
+
37
+ ngAfterViewInit ( ) {
38
+ this . _color = getComputedStyle ( this . _elementRef . nativeElement ) . color ;
39
+ if ( this . _elementRef . nativeElement . type === 'date' ) {
40
+ this . _updateTextColorForDateType ( ) ;
41
+ }
42
+ }
34
43
35
44
private _currentNativeValue : any ;
36
45
@@ -74,21 +83,35 @@ export class MdbInputDirective implements MdbAbstractFormControl<any>, DoCheck {
74
83
}
75
84
private _value : any ;
76
85
86
+ private _updateTextColorForDateType ( ) {
87
+ const actualColor = getComputedStyle ( this . _elementRef . nativeElement ) . color ;
88
+ this . _color = actualColor !== 'rgba(0, 0, 0, 0)' ? actualColor : this . _color ;
89
+
90
+ const color = this . labelActive ? this . _color : `transparent` ;
91
+
92
+ this . _renderer . setStyle ( this . _elementRef . nativeElement , 'color' , color ) ;
93
+ }
94
+
77
95
@HostListener ( 'focus' )
78
96
_onFocus ( ) : void {
79
97
this . _focused = true ;
98
+ if ( this . _elementRef . nativeElement . type === 'date' ) {
99
+ this . _updateTextColorForDateType ( ) ;
100
+ }
80
101
this . stateChanges . next ( ) ;
81
102
}
82
103
83
104
@HostListener ( 'blur' )
84
105
_onBlur ( ) : void {
85
106
this . _focused = false ;
107
+ if ( this . _elementRef . nativeElement . type === 'date' ) {
108
+ this . _updateTextColorForDateType ( ) ;
109
+ }
86
110
this . stateChanges . next ( ) ;
87
111
}
88
112
89
113
ngDoCheck ( ) : void {
90
114
const value = this . _elementRef . nativeElement . value ;
91
-
92
115
if ( this . _currentNativeValue !== value ) {
93
116
this . _currentNativeValue = value ;
94
117
this . stateChanges . next ( ) ;
0 commit comments