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

## MtxButton Component Overview

The `MtxButton` component is a versatile and highly customizable button component built using Angular Material 18. It extends the functionality of the `MatButton` component, providing additional configurations for appearance, size, shape, and loading state.

## Features

| Feature                      | Description                                                                           |
|------------------------------|---------------------------------------------------------------------------------------|
| **Customizable Appearance**  | Supports multiple button appearances, including flat, raised, stroked, FAB, and mini-FAB. |
| **Loading State**            | Built-in support for displaying a loading spinner within the button.                  |
| **Configurable Properties**  | Allows configuration of button size, shape, color, and additional classes via a configuration object. |
| **Encapsulation and Change Detection** | Utilizes `ViewEncapsulation.None` and `ChangeDetectionStrategy.OnPush` for efficient rendering and style encapsulation. |

## Basic Usage

To use the `MtxButton` component, import the `MtxButtonModule` into your Angular module and include the `<mtx-button>` selector in your templates.

### Example

**app.module.ts**
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MtxButtonModule } from './path-to-your-mtx-button-module';

@NgModule({
  declarations: [
    // Your components
  ],
  imports: [
    BrowserModule,
    MtxButtonModule
  ],
  providers: [],
  bootstrap: [/* Your main component */]
})
export class AppModule { }
```

**app.component.html**
```html
<mtx-button
  [buttonconfig]="{
    color: 'primary',
    appearance: 'raised',
    size: 'large',
    shape: 'rounded',
    loading: false
  }">
  Click Me
</mtx-button>
```

## Configuration

The `MtxButton` component accepts a configuration object (`MtxButtonConfig`) to customize its appearance and behavior.

### Configuration Properties

| Property    | Type      | Default | Description                                                |
|-------------|-----------|---------|------------------------------------------------------------|
| `color`     | `string`  | `basic` | The color of the button. Can be any color supported by Angular Material. |
| `appearance`| `string`  | `flat`  | The appearance of the button. Supported values are `flat`, `raised`, `stroked`, `FAB`, `mini-FAB`. |
| `size`      | `string`  | `medium`| The size of the button. Can be any valid size class.       |
| `shape`     | `string`  | `''`    | The shape of the button. Can be any valid shape class.     |
| `loading`   | `boolean` | `false` | A boolean indicating whether to show a loading spinner inside the button. |
| `disabled`  | `boolean` | `false` | A boolean indicating whether the button is disabled.       |
| `classes`   | `string`  | `''`    | Additional CSS classes to apply to the button.             |

### Default Configuration

The `MtxButton` component uses a default configuration (`defaultMtxButtonConfig`) which can be overridden by providing a custom configuration object.

**Example Default Configuration:**
```typescript
export const defaultMtxButtonConfig: MtxButtonConfig = {
  color: 'basic',
  appearance: 'flat',
  size: 'medium',
  shape: '',
  loading: false,
  disabled: false,
  classes: ''
};
```

## Loading State

The `MtxButton` component includes a loading state feature. When the `loading` property is set to `true`, a spinner is displayed inside the button, replacing its content.

**Example Usage:**
```html
<mtx-button
  [buttonconfig]="{
    color: 'accent',
    appearance: 'raised',
    size: 'small',
    shape: 'rounded',
    loading: true
  }">
  Save
</mtx-button>
```

## Summary

The `MtxButton` component is a powerful and flexible button component that extends the capabilities of Angular Material buttons. With its extensive configuration options and built-in loading state support, it can be used to create a wide variety of button styles and behaviors in your Angular applications.

---