gp-crm-ui/components/crm-checkbox/crm-checkbox.component.ts

Модуль компонентов UI Имя модуля: `gp-crm-ui`

import {
	Component,
	forwardRef,
	HostListener
} from '@angular/core';
import {
	ControlValueAccessor,
	NG_VALUE_ACCESSOR
} from '@angular/forms';

/**
 * Компонент чекбокс
 * применяется на тег label в качестве атрибута
 * https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
 */
@Component({
	selector: '[crm-checkbox]',
	templateUrl: './crm-checkbox.component.html',
	styleUrls: ['./crm-checkbox.component.scss'],
	providers: [{
		provide: NG_VALUE_ACCESSOR,
		useExisting: forwardRef(() => CrmCheckboxComponent),
		multi: true
	}]
})
export class CrmCheckboxComponent implements ControlValueAccessor {

	// Вызовем когда значение изменится
	private onChange: (value: boolean) => void;

	// Вызовем при любом дествии пользователя с контроллом
	private onTouched: () => void;

	// Флаг, выбрано
	public _checked: boolean = false;
	public get checked(): boolean {
		return this._checked;
	}
	public set checked(value: boolean) {
		this._checked = value;
		if (this.onChange) {
			this.onChange(value);
		}
	}

	// Флаг, отключено
	public disabled: boolean = false;

	// Реакция на клик хост-элемента
	@HostListener('click') public onClick(): void {
		if (this.onTouched) {
			this.onTouched();
		}
	}

	// Вызовет форма, если значение изменилось извне
	public writeValue(checked: boolean): void {
		this._checked = checked;
	}

	// Сохраняем обратный вызов для изменений
	public registerOnChange(fn: any): void {
		this.onChange = fn;
	}

	// Сохраняем обратный вызов для "касаний"
	public registerOnTouched(fn: any): void {
		this.onTouched = fn;
	}

	// Установка состояния disabled
	public setDisabledState(isDisabled: boolean): void {
		this.disabled = isDisabled;
	}
}