npm package: @ng-zi/extensions-checkbox
Description: Angular Material Extensions for checkbox
Latest version: 0.0.1

## MtxCheckbox Component Overview

The `CheckboxComponent` provides a customizable checkbox implementation built on Angular and Angular Material 18. This component allows developers to integrate checkbox inputs into their applications with flexibility and ease.

## Features

| Feature             | Description                                                                    |
|---------------------|--------------------------------------------------------------------------------|
| **Label**           | Display a descriptive label next to the checkbox.                              |
| **Checked State**   | Control the initial checked state of the checkbox.                             |
| **Disabled State**  | Disable the checkbox to prevent user interaction.                              |
| **Indeterminate State** | Set the checkbox to an indeterminate state, useful for hierarchical selections. |
| **Icon Support**    | Optionally display an icon next to the checkbox label.                         |
| **Color Customization** | Customize the checkbox color to match the application's theme.              |
| **Animation Styles** | Apply animation effects to enhance user interaction.                          |
| **Custom Styles**   | Flexibility to apply custom CSS classes for styling.                           |
| **Accessibility**   | Built-in accessibility features, including ARIA attributes and keyboard navigation support. |

## Usage

The `CheckboxComponent` can be easily integrated into Angular applications. Here's a basic example of usage:

```html
<mtx-checkbox 
  [config]="checkboxConfig" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>
```

### Inputs

| Input          | Type                    | Description                                            |
|----------------|-------------------------|--------------------------------------------------------|
| `config`       | `MtxCheckboxConfig`     | Configuration object for the checkbox component.       |
| `label`        | `string`                | Label text displayed next to the checkbox.             |
| `checked`      | `boolean`               | Initial checked state of the checkbox.                 |
| `disabled`     | `boolean`               | Disables the checkbox if `true`.                       |
| `indeterminate`| `boolean`               | Sets the checkbox to indeterminate state.              |
| `icon`         | `string`                | Icon name displayed next to the checkbox label.        |
| `color`        | `string`                | Color palette for the checkbox.                        |
| `animation`    | `string`                | Animation style for checkbox interaction.              |
| `styleType`    | `string`                | Custom style type for checkbox appearance.             |
| `customClasses`| `string \| string[]`    | Optional custom CSS classes for styling.               |
| `ariaLabel`    | `string`                | Optional ARIA label for accessibility.                 |
| `tabIndex`     | `number`                | Optional tab order for keyboard navigation.            |
| `value`        | `any`                   | Optional value associated with the checkbox.           |

### Outputs

| Output  | Type                             | Description                                       |
|---------|----------------------------------|---------------------------------------------------|
| `change`| `EventEmitter<MatCheckboxChange>`| Emits when the checkbox state changes.            |

## Examples

# Checkbox Component Examples

Explore various usage scenarios and examples of the `CheckboxComponent` in action.

## Basic Example

```html
<mtx-checkbox 
  [config]="{ label: 'Basic Checkbox' }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>
```

## Indeterminate Example

```html
<mtx-checkbox 
  [config]="{ label: 'Indeterminate Checkbox', indeterminate: true }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>
```

## Disabled Example

```html
<mtx-checkbox 
  [config]="{ label: 'Disabled Checkbox', disabled: true }">
</mtx-checkbox>
```

## Example with Icon and Color

```html
<mtx-checkbox 
  [config]="{ label: 'Checkbox with Icon', icon: 'check', color: 'accent' }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>
```

## Example with Animation and Style

```html
<mtx-checkbox 
  [config]="{ label: 'Animated Checkbox', animation: 'bounce', styleType: 'rounded' }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>
```

## API Reference

## MtxCheckbox Component API

The `CheckboxComponent` API documentation outlines the inputs, outputs, and methods available for configuring and interacting with the checkbox component.

## Inputs

### `config`

- **Type**: `MtxCheckboxConfig`
- **Description**: Configuration object for the checkbox component.

  | Property       | Type               | Default Value | Description |
  | -------------- | ------------------ | ------------- | ----------- |
  | `label`        | `string`           | `''`          | Label text displayed next to the checkbox. |
  | `checked`      | `boolean`          | `false`       | Initial checked state of the checkbox. |
  | `disabled`     | `boolean`          | `false`       | Disables the checkbox if `true`. |
  | `indeterminate`| `boolean`          | `false`       | Sets the checkbox to indeterminate state. |
  | `icon`         | `string`           | `''`          | Icon name displayed next to the checkbox label. |
  | `color`        | `string`           | `'primary'`   | Color palette for the checkbox. |
  | `animation`    | `string`           | `''`          | Animation style for checkbox interaction. |
  | `styleType`    | `string`           | `''`          | Custom style type for checkbox appearance. |
  | `customClasses`| `string \| string[]` | `''`        | Optional custom CSS classes for styling. |
  | `ariaLabel`    | `string`           | `''`          | Optional ARIA label for accessibility. |
  | `tabIndex`     | `number`           | `0`           | Optional tab order for keyboard navigation. |
  | `value`        | `any`              | `null`        | Optional value associated with the checkbox. |

### `customClasses`

- **Type**: `string \| string[]`
- **Description**: Optional custom CSS classes to apply to the checkbox component for styling purposes.

## Outputs

### `change`

- **Type**: `EventEmitter<MatCheckboxChange>`
- **Description**: Event emitted when the checkbox state changes.

  - **Properties**
    - `checked`: `boolean` - New checked state of the checkbox.

## Methods

The `CheckboxComponent` does not expose any public methods.

---

This `api.md` document provides a comprehensive overview of the inputs, outputs, and methods (if any) available for your `CheckboxComponent`. Adjust the content and structure as per your specific component implementation and project requirements.