npm package: @ng-zi/extensions-progress-bar
Description: Angular Material Extensions for progress-bar
Latest version: 0.0.2

## MtxProgressBar Component Overview

The `MtxProgressBar` component is a customizable progress bar component that visualizes the progression of a task. It can be used to indicate loading status, completion percentage, or any other form of progress.

## Usage

### Installation

Before using the `MtxProgressBar` component, ensure you have Angular Material installed in your project:

```bash
ng add @angular/material
```

Next, import the `MtxProgressBarModule` into your application module:

```typescript
import { MtxProgressBarModule } from 'your-library-path';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // other imports
    MtxProgressBarModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### Basic Example

```html
<mtx-progress-bar value="50"></mtx-progress-bar>
```

### Advanced Example

```html
<mtx-progress-bar
  [config]="{
    value: 40,
    bufferValue: 60,
    mode: 'buffer',
    color: 'warn',
    appearance: 'standard',
    showLabel: true,
    labelPosition: 'inside',
    animationDuration: 500,
    customLabel: 'Loading...'
  }">
</mtx-progress-bar>
```

## API

### Inputs

| Name              | Type                           | Description                                  |
|-------------------|--------------------------------|----------------------------------------------|
| `config`          | `MtxProgressBarConfig`         | Configuration object for the progress bar.   |

### Config

The `MtxProgressBarConfig` interface defines the properties that can be configured for the progress bar.

| Property           | Type                           | Default       | Description                                  |
|-------------------|--------------------------------|---------------|----------------------------------------------|
| `value`           | `number`                       | `0`           | The current value of the progress bar.       |
| `bufferValue`     | `number`                       | `0`           | The buffer value of the progress bar.        |
| `mode`            | `'determinate' \| 'indeterminate' \| 'buffer' \| 'query'` | `'determinate'` | The mode of the progress bar. |
| `color`           | `ThemePalette`                 | `'primary'`   | The color of the progress bar.               |
| `appearance`      | `'standard' \| 'inline'`       | `'standard'`  | The appearance of the progress bar.          |
| `showLabel`       | `boolean`                      | `false`       | Whether to display a label on the progress bar. |
| `labelPosition`   | `'inside' \| 'outside'`        | `'inside'`    | The position of the label relative to the progress bar. |
| `animationDuration` | `number`                     | `300`         | The duration of the progress bar animation in milliseconds. |
| `customLabel`     | `string`                       | `''`          | Custom label to display on the progress bar. |

### Styling

You can customize the appearance of the progress bar component using standard CSS or SCSS.

### Notes

- Ensure that you have the necessary Angular Material theme included in your project.
- The `MtxProgressBar` component is designed to be used with Angular Material 18 and may not be fully compatible with earlier versions.