# MUK CHECKBOX

## Usage

```html

<lib-muk-checkbox
        [controller]="controller"
        [label]="label"
        [value]="value"
        [isChecked]="isChecked"
        [hasSubCheckBox]="hasSubCheckBox"
        [color]="color"
        [nestedCheckboxList]="nestedCheckboxList"
        [labelPosition]="labelPosition"
        [isRequired]="isRequired"
        [isDisabled]="isDisabled"
        (inputValueChanged)="onInputValueChanged($event)"
></lib-muk-checkbox>
```

```typescript
import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    controller = new FormControl();
    label = 'Label';
    value = 'Value';
    isChecked = false;
    hasSubCheckBox = false;
    color = 'primary';
    nestedCheckboxList = [
        {
            label: 'Nested label 1',
            value: 'Nested value 1',
            isChecked: false,
            hasSubCheckBox: false,
            color: 'primary',
            nestedCheckboxList: [],
            labelPosition: 'after',
            isRequired: false,
            isDisabled: false
        },
        {
            label: 'Nested label 2',
            value: 'Nested value 2',
            isChecked: false,
            hasSubCheckBox: false,
            color: 'primary',
            nestedCheckboxList: [],
            labelPosition: 'after',
            isRequired: false,
            isDisabled: false
        }
    ];
    labelPosition = 'after';
    isRequired = false;
    isDisabled = false;

    onInputValueChanged(event: InputValueChanged) {
        console.log(event);
    }
}
```

### Properties

| Name               | Type            | Description                                   |
|--------------------|-----------------|-----------------------------------------------|
| controller         | FormControl     | The form control associated to the input      |
| label              | string          | The label of the input                        |
| value              | string          | The value of the input                        |
| isChecked          | boolean         | The checked state of the input                |
| hasSubCheckBox     | boolean         | The state of the input to show sub checkboxes |
| color              | MukThemePalette | The color of the input                        |
| nestedCheckboxList | ICheckBox[]     | The list of nested checkboxes to show         |
| labelPosition      | LabelPosition   | The position of the label                     |
| isRequired         | boolean         | The required state of the input               |
| isDisabled         | boolean         | The disabled state of the input               |

### Events

| Name              | Type              | Description                                                                                                 |
|-------------------|-------------------|-------------------------------------------------------------------------------------------------------------|
| inputValueChanged | InputValueChanged | The event emitted when the value of the input changes. The event contains the value of the input and the id |