checkbox.ts

import {
  Component,
  Input,
  ViewChild,
  ElementRef,
  forwardRef,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  OnInit,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';

@Component({
  selector: 'jci-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CheckboxComponent),
      multi: true,
    },
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckboxComponent implements OnInit, ControlValueAccessor {
  private isChecked: boolean;
  private onTouched: () => {};
  private onChange: (_: any) => {};

  @Input() value: string;
  @Input() name: string | null = null;
  @Input() control = new FormControl();
  @Input() type = '';

  @Input()
  set checked(value: boolean) {
    const newValue = `${value}` === '' ? true : this.castToSafeBoolean(value);

    if (newValue !== this.isChecked) {
      this.isChecked = newValue;
      this.changeDetectorRef.markForCheck();
    }
  }
  get checked(): boolean {
    return this.isChecked;
  }


  @ViewChild('inputElement', { static: false }) inputElementRef: ElementRef<HTMLInputElement>;

  constructor(private readonly changeDetectorRef: ChangeDetectorRef) {
    this.isChecked = false;
  }

  ngOnInit(): void {
    if (this.control) {
      this.control.valueChanges.subscribe(_ => {
        this.changeDetectorRef.markForCheck();
      });
    }
  }

  getStyles(type) {
    switch (type) {
      case 'no-file-uploaded':
        return {
          background: 'studio-background',
        };
      case 'file-uploaded-complete':
        return {
          background: 'razzmatazz-background',
        };
      case 'translation-complete':
        return {
          background: 'fuelyellow-background',
        };
      case 'file-processed':
        return {
          background: 'atlantis-background',
        };
      case 'complete':
        return {
          background: 'java-background',
        };
      default:
        return {
          background: 'white-background',
        };
    }
  }

  writeValue(value: any): void {
    if (value !== null) {
      this.checked = this.castToSafeBoolean(value);
      this.changeDetectorRef.markForCheck();
    }
  }

  registerOnChange(fn: (value: any) => any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }

  onInputClick(event) {
    event.stopPropagation();
    const modelToPropagate = event.target.checked;
    this.onChange(modelToPropagate);
    this.onTouched();
    this.writeValue(modelToPropagate);
  }

  onInputChange(event: Event) {
    // We always have to stop propagation on the change event.
    // Otherwise the change event, from the input element, will bubble up and
    // emit its event object to the `change` output.
    event.stopPropagation();
  }

  /**
   * Converts any falsey/truthy value to fixed boolean type
   * @param value value to be converted to boolean.
   */
  castToSafeBoolean(value: any) {
    return !!(value !== '' && value !== null && typeof value !== 'undefined' && `${value}` !== 'false');
  }
}