<commit_before>import {
  Component, Input, Output, EventEmitter, HostBinding, forwardRef, ViewEncapsulation
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const TOGGLE_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => ToggleComponent),
  multi: true
};

let nextId = 0;

@Component({
  selector: 'ngx-toggle',
  template: `
    <div>
      <input
        #input
        class="ngx-toggle-input"
        type="checkbox"
        [id]="id"
        [(ngModel)]="value"
        [required]="required"
        [tabIndex]="tabIndex"
        [disabled]="disabled"
        [name]="name"
        (blur)="onBlur()"
        (change)="onChange($event)"
      />
      <label [attr.for]="id" class="ngx-toggle-label">
      </label>
      <label [attr.for]="id" class="ngx-toggle-text">
        <span *ngIf="label" [innerHTML]="label"></span>
        <ng-content></ng-content>
      </label>
    </div>
  `,
  styleUrls: ['./toggle.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: [TOGGLE_VALUE_ACCESSOR]
})
export class ToggleComponent implements ControlValueAccessor {

  @Input() id: string = `input-${++nextId}`;
  @Input() name: string = null;
  @Input() disabled: boolean = false;
  @Input() required: boolean = false;
  @Input() tabIndex: number = 0;
  @Input() label: string;

  get value(): boolean {
    return this._value;
  }

  set value(value) {
    if (this.value !== value) {
      this._value = value;
      this.onChangeCallback(this._value);
    }
  }

  @Output() change = new EventEmitter();

  @HostBinding('class')
  private get getHostCssClasses(): string {
    return 'ngx-toggle';
  }

  @HostBinding('class.disabled')
  private get getDisabled(): string {
    return this.disabled ? 'disabled' : '';
  }

  private _value: boolean = false;

  toggle(): void {
    this.value = !this.value;
  }

  onBlur(event): void {
    this.onTouchedCallback();
  }

  onChange(event): void {
    this.toggle();
  }

  writeValue(value: any): void {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }
<commit_msg>Fix toggle component requiring double click to change state<commit_after>import {
  Component, Input, Output, EventEmitter, HostBinding, forwardRef, ViewEncapsulation
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const TOGGLE_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => ToggleComponent),
  multi: true
};

let nextId = 0;

@Component({
  selector: 'ngx-toggle',
  template: `
    <div>
      <input
        #input
        class="ngx-toggle-input"
        type="checkbox"
        [id]="id"
        [(ngModel)]="value"
        [required]="required"
        [tabIndex]="tabIndex"
        [disabled]="disabled"
        [name]="name"
        (blur)="onBlur()"
        (change)="onChange($event)"
      />
      <label [attr.for]="id" class="ngx-toggle-label">
      </label>
      <label [attr.for]="id" class="ngx-toggle-text">
        <span *ngIf="label" [innerHTML]="label"></span>
        <ng-content></ng-content>
      </label>
    </div>
  `,
  styleUrls: ['./toggle.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: [TOGGLE_VALUE_ACCESSOR]
})
export class ToggleComponent implements ControlValueAccessor {

  @Input() id: string = `input-${++nextId}`;
  @Input() name: string = null;
  @Input() disabled: boolean = false;
  @Input() required: boolean = false;
  @Input() tabIndex: number = 0;
  @Input() label: string;

  get value(): boolean {
    return this._value;
  }

  set value(value) {
    if (this.value !== value) {
      this._value = value;
      this.onChangeCallback(this._value);
    }
  }

  @Output() change = new EventEmitter();

  @HostBinding('class')
  private get getHostCssClasses(): string {
    return 'ngx-toggle';
  }

  @HostBinding('class.disabled')
  private get getDisabled(): string {
    return this.disabled ? 'disabled' : '';
  }

  private _value: boolean = false;

  toggle(): void {
    this.value = !this.value;
  }

  onBlur(event): void {
    this.onTouchedCallback();
  }

  onChange(event): void {
    setTimeout(() => {
      this.onChangeCallback(this._value);
    })
  }

  writeValue(value: any): void {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

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

{'fraction_non_alphanumeric': 0.15771155101152926, 'fraction_numerical': 0.0008701326952360235, 'mean_word_length': 3.127468581687612, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3508094', 'n_tokens_mistral': 1548, 'n_tokens_neox': 1512, 'n_words': 315}