npm package: @ng-zi/extensions-accordion
Description: Angular Material Extension for Accordion Component
Latest version: 0.0.14

## MtxAccordion Component Overview

The `mtx-accordion` component is a versatile and customizable accordion component built on Angular Material. It provides a rich set of features, including support for nested accordions, custom templates, lazy loading, animations, event bindings, custom icons, and expand/collapse all functionality. It is designed to be flexible and powerful, making it a great choice for a wide range of use cases.

| Feature                  | Description                                                                                                                                                      |
|--------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Multiple Panels**      | Supports multiple collapsible panels that can be expanded or collapsed independently or simultaneously.                                                        |
| **Customizable Templates** | Allows customization of panel headers, content, and footers using Angular templates.                                                                            |
| **Accessibility**        | Ensures accessibility with appropriate ARIA roles and attributes for screen readers.                                                                            |
| **Animation**            | Provides smooth transitions for panel expand/collapse actions with optional animations.                                                                         |
| **Control Value Accessor** | Integrates seamlessly with Angular forms using Control Value Accessor to manage panel states programmatically.                                                 |
| **Custom Icons**         | Allows customization of icons for indicating expand/collapse state.                                                                                             |
| **Styling**              | Supports custom CSS classes for flexible styling. CSS classes are prefixed with `mtx-` for easy integration and styling consistency.                            |

## Usage
### Installation

1. Import the `MtxAccordionModule` into your Angular module:
    ```typescript
    import { MtxAccordionModule } from '@ng-zi/extensions/accordion';

    @NgModule({
      declarations: [
        // your components
      ],
      imports: [
        // other modules
        MtxAutocompleteModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    ``` 

### Basic Example
```html
<mtx-accordion [accordionConfig]="accordionConfig"></mtx-accordion>
```

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-accordion-demo',
  templateUrl: './accordion-demo.component.html'
})
export class AccordionDemoComponent {
  basicAccordionConfig = {
    panels: [
      { header: 'Panel 1', content: 'Content 1' },
      { header: 'Panel 2', content: 'Content 2' },
      { header: 'Panel 3', content: 'Content 3' },
    ],
    multi: true,
    animationsEnabled: true,
  };
}
```

### Configuration

The `MtxAccordion` Component accepts a configuration object (`MtxAccordionConfig`) with the following properties:

| Property           | Type                        | Description                                                                                      |
|--------------------|-----------------------------|--------------------------------------------------------------------------------------------------|
| `panels`           | `MtxAccordionPanel[]`       | An array of objects defining each panel's header, content, and optional footer.                   |
| `multi`            | `boolean`                   | Indicates whether multiple panels can be expanded simultaneously.                                 |
| `customClass`      | `string \| string[]`        | Optional CSS class or array of classes to apply to the accordion component.                       |
| `defaultExpanded`  | `boolean`                   | Indicates whether panels should be expanded by default.                                           |
| `animationsEnabled`| `boolean`                   | Enables or disables animations for panel transitions.                                              |
| `hideToggle`       | `boolean`                   | Hides the toggle icon for expanding/collapsing panels.                                            |
| `expandAllOnInit`  | `boolean`                   | Expands all panels on component initialization.                                                   |
| `closeOthersOnOpen`| `boolean`                   | Closes other open panels when opening a new one.                                                  |
| `disableRipple`    | `boolean`                   | Disables the ripple effect on panel headers.                                                      |

### Events

The `MtxAccordion` Componentemits the following events:

| Event Name         | Payload       | Description                                         |
|--------------------|---------------|-----------------------------------------------------|
| `panelOpened`      | `number`      | Emitted when a panel is expanded.                   |
| `panelClosed`      | `number`      | Emitted when a panel is collapsed.                  |

## Accessibility

Ensures accessibility by using appropriate ARIA roles and attributes to support navigation and interaction via screen readers.

## Styling

Customize the appearance of `MtxAccordion` Component using CSS classes and styles. CSS classes are prefixed with `mtx-` for easy integration and styling consistency.

---

This structured overview.md provides a comprehensive overview of your `MtxAccordion` Component, highlighting its features, usage examples, configuration options, events, accessibility considerations, and styling guidelines in a clear and organized table format. Adjust the content and examples based on your specific implementation and design requirements.

## Summary

The `mtx-accordion` component is a powerful and flexible solution for creating accordion interfaces in your Angular applications. With support for custom templates, lazy loading, animations, and more, it provides all the features you need to build a robust and user-friendly accordion component.