import { Component , Input , EventEmitter , Output , forwardRef , ViewEncapsulation , ChangeDetectionStrategy , ChangeDetectorRef , HostBinding } from '@angular/core' ; import { NG_VALUE_ACCESSOR , ControlValueAccessor } from '@angular/forms' ; import { CoerceNumberProperty } from '../../utils/coerce/coerce-number' ; import { CoerceBooleanProperty } from '../../utils/coerce/coerce-boolean' ; const CHECKBOX_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => CheckboxComponent ) , multi : true } ; let nextId = 0 ; @ Component ( { selector : 'ngx-checkbox' , exportAs : 'ngxCheckbox' , templateUrl : './checkbox.component.html' , styleUrls : [ './checkbox.component.scss' ] , host : { class : 'ngx-checkbox' , '[class.disabled]' : 'disabled' , '[class.round]' : 'round' , '(blur)' : 'onBlur($event)' } , providers : [ CHECKBOX_VALUE_ACCESSOR ] , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class CheckboxComponent implements ControlValueAccessor { @ HostBinding ( ) @ Input ( ) id = `checkbox-${ ++ nextId }` ; @ Input ( ) name ? : string ; @ Input ( ) diameter = '18px' ; @ Input ( 'checked' ) set value ( value ) { if ( this . _value !== value ) { this . _value = value ; this . cdr . markForCheck ( ) ; this . onChangeCallback ( this . _value ) ; this . checkedChange . emit ( this . _value ) ; } } get value ( ) : boolean { return this . _value ; } @ Input ( ) @ CoerceNumberProperty ( ) tabindex = 0 ; @ Input ( ) @ CoerceBooleanProperty ( ) disabled = false ; @ Input ( ) @ CoerceBooleanProperty ( ) round = false ; @ Output ( ) change = new EventEmitter < Event > ( ) ; @ Output ( ) checkedChange = new EventEmitter < boolean > ( ) ; @ Output ( ) blur = new EventEmitter < FocusEvent > ( ) ; @ Output ( ) focus = new EventEmitter < FocusEvent > ( ) ; private _value = false ; constructor ( private readonly cdr ) { } onBlur ( _ ) { this . onTouchedCallback ( ) ; } onKeyup ( ev ) { ev . stopPropagation ( ) ; ev . preventDefault ( ) ; this . toggle ( ) ; } toggle ( ) { this . value = ! this . value ; this . cdr . markForCheck ( ) ; } writeValue ( value ) { this . value = value ; this . cdr . markForCheck ( ) ; } registerOnChange ( fn ) { this . onChangeCallback = fn ; } registerOnTouched ( fn ) { this . onTouchedCallback = fn ; } setDisabledState ( disabled ) { this . disabled = disabled ; } private onTouchedCallback = ( ) => { } ; private onChangeCallback = ( _ ) => { } ; }