import { Directive , HostBinding , HostListener , Input , OnInit , forwardRef } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; export const CHECKBOX_CONTROL_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => ButtonCheckboxDirective ) , multi : true } ; /**
* Add checkbox functionality to any element
*/ @ Directive ( { selector : '[mdbCheckbox]' , providers : [ CHECKBOX_CONTROL_VALUE_ACCESSOR ] } ) export class ButtonCheckboxDirective implements ControlValueAccessor , OnInit { /** Truthy value, will be set to ngModel */ @ Input ( ) public btnCheckboxTrue : any = true ; /** Falsy value, will be set to ngModel */ @ Input ( ) public btnCheckboxFalse : any = false ; @ HostBinding ( 'class.active' ) public state = false ; protected value : any ; protected isDisabled : boolean ; protected onChange : any = Function . prototype ; protected onTouched : any = Function . prototype ; @ HostListener ( 'click' ) public onClick ( ) { if ( this . isDisabled ) { return ; } this . toggle ( ! this . state ) ; this . onChange ( this . value ) ; } public ngOnInit ( ) { this . toggle ( this . trueValue === this . value ) ; } protected get trueValue ( ) : boolean { return typeof this . btnCheckboxTrue !== 'undefined' ? this . btnCheckboxTrue : true ; } protected get falseValue ( ) : boolean { return typeof this . btnCheckboxFalse !== 'undefined' ? this . btnCheckboxFalse : false ; } public toggle ( state ) { this . state = state ; this . value = this . state ? this . trueValue : this . falseValue ; } public writeValue ( value ) { this . state = this . trueValue === value ; this . value = value ? this . trueValue : this . falseValue ; } public setDisabledState ( isDisabled ) { this . isDisabled = isDisabled ; } public registerOnChange ( fn ) { this . onChange = fn ; } public registerOnTouched ( fn ) { this . onTouched = fn ; } }