1
- import { Component , INotifyPropertyChanged , NotifyPropertyChanges , Property } from '@syncfusion/ej2-base' ;
1
+ import { Component , INotifyPropertyChanged , NotifyPropertyChanges , Property , setValue } from '@syncfusion/ej2-base' ;
2
2
import { EmitType , Event , EventHandler , isNullOrUndefined , SanitizeHtmlHelper } from '@syncfusion/ej2-base' ;
3
3
import { addClass , detach , getUniqueID , isRippleEnabled , removeClass , rippleEffect , closest } from '@syncfusion/ej2-base' ;
4
4
import { CheckBoxModel } from './check-box-model' ;
@@ -279,6 +279,13 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
279
279
wrapper . removeAttribute ( key ) ;
280
280
} ) ;
281
281
wrapper . innerHTML = '' ;
282
+ this . element = wrapper as HTMLInputElement ;
283
+ if ( this . refreshing ) {
284
+ [ 'e-control' , 'e-checkbox' , 'e-lib' ] . forEach ( ( key : string ) => {
285
+ this . element . classList . add ( key ) ;
286
+ } ) ;
287
+ setValue ( 'ej2_instances' , [ this ] , this . element ) ;
288
+ }
282
289
}
283
290
}
284
291
}
@@ -323,6 +330,14 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
323
330
}
324
331
}
325
332
333
+ private getLabel ( ) : Element {
334
+ if ( this . element ) {
335
+ return this . element . parentElement ;
336
+ } else {
337
+ return null ;
338
+ }
339
+ }
340
+
326
341
private initialize ( ) : void {
327
342
if ( isNullOrUndefined ( this . initialCheckedValue ) ) {
328
343
this . initialCheckedValue = this . checked ;
@@ -394,6 +409,17 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
394
409
rippleMouseHandler ( e , rippleSpan ) ;
395
410
}
396
411
412
+ private labelMouseLeaveHandler ( e : MouseEvent ) : void {
413
+ const rippleSpan : Element = this . getLabel ( ) . getElementsByClassName ( RIPPLE ) [ 0 ] ;
414
+ if ( rippleSpan ) {
415
+ const rippleElem : NodeListOf < Element > = rippleSpan . querySelectorAll ( '.e-ripple-element' ) ;
416
+ for ( let i : number = rippleElem . length - 1 ; i > 0 ; i -- ) {
417
+ rippleSpan . removeChild ( rippleSpan . childNodes [ i as number ] ) ;
418
+ }
419
+ rippleMouseHandler ( e , rippleSpan ) ;
420
+ }
421
+ }
422
+
397
423
private labelMouseUpHandler ( e : MouseEvent ) : void {
398
424
this . isMouseClick = true ;
399
425
const rippleSpan : Element = this . getWrapper ( ) . getElementsByClassName ( RIPPLE ) [ 0 ] ;
@@ -571,6 +597,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
571
597
const label : Element = wrapper . getElementsByTagName ( 'label' ) [ 0 ] ;
572
598
EventHandler . remove ( label , 'mousedown' , this . labelMouseDownHandler ) ;
573
599
EventHandler . remove ( label , 'mouseup' , this . labelMouseUpHandler ) ;
600
+ EventHandler . remove ( label , 'mouseleave' , this . labelMouseLeaveHandler ) ;
574
601
const formElem : HTMLFormElement = < HTMLFormElement > closest ( this . element , 'form' ) ;
575
602
if ( formElem ) {
576
603
EventHandler . remove ( formElem , 'reset' , this . formResetHandler ) ;
@@ -590,6 +617,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
590
617
const label : Element = wrapper . getElementsByTagName ( 'label' ) [ 0 ] ;
591
618
EventHandler . add ( label , 'mousedown' , this . labelMouseDownHandler , this ) ;
592
619
EventHandler . add ( label , 'mouseup' , this . labelMouseUpHandler , this ) ;
620
+ EventHandler . add ( label , 'mouseleave' , this . labelMouseLeaveHandler , this ) ;
593
621
const formElem : HTMLFormElement = < HTMLFormElement > closest ( this . element , 'form' ) ;
594
622
if ( formElem ) {
595
623
EventHandler . add ( formElem , 'reset' , this . formResetHandler , this ) ;
@@ -649,8 +677,7 @@ export class CheckBox extends Component<HTMLInputElement> implements INotifyProp
649
677
else {
650
678
this . element . setAttribute ( key , this . htmlAttributes [ `${ key } ` ] ) ;
651
679
}
652
- }
653
- else {
680
+ } else {
654
681
wrapper . setAttribute ( key , this . htmlAttributes [ `${ key } ` ] ) ;
655
682
}
656
683
}
0 commit comments