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

## MtxCard Component Overview 

The `mtx-card` component is a versatile and customizable card component built on top of Angular Material 18. It extends the functionality of the standard Angular Material card, allowing for additional customization and features. The component is designed to be flexible and easy to use, providing a wide range of options for displaying content in a card format.

## Features

- **Custom Templates**: Supports custom templates for the header, content, and footer sections.
- **Image and Media Support**: Allows adding an image or media section to the card.
- **Configurable Elevation**: Multiple elevation levels to control the card's shadow.
- **Selectable and Expandable States**: Cards can be selectable and expandable.
- **Ribbons and Badges**: Supports adding ribbons or badges to the card.
- **Custom Classes**: Apply custom CSS classes to the card.
- **Loading State**: Display a loading spinner overlay on the card.
- **Single Config Input**: All configurations are handled through a single `config` input.

## Basic Card

A basic card with only content can be created using the `mtx-card` component:

```html
<mtx-card [config]="{ contentTemplate: content }">
  <ng-template #content>
    <p>This is a basic card with only content.</p>
  </ng-template>
</mtx-card>
```

## Card with Header, Content, and Footer

The `mtx-card` component allows you to define custom templates for the header, content, and footer:

```html
<mtx-card [config]="{ headerTemplate: header, contentTemplate: content, footerTemplate: footer }">
  <ng-template #header>
    <mat-card-header>
      <mat-card-title>Card Title</mat-card-title>
      <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
    </mat-card-header>
  </ng-template>
  <ng-template #content>
    <p>This is the card content.</p>
  </ng-template>
  <ng-template #footer>
    <button mat-button>Action</button>
  </ng-template>
</mtx-card>
```

## Card with Image

You can add an image to the card using the `imageSrc` property in the config:

```html
<mtx-card [config]="{ imageSrc: 'path/to/image.jpg', contentTemplate: content }">
  <ng-template #content>
    <p>This is the card content with an image.</p>
  </ng-template>
</mtx-card>
```

## Selectable and Expandable Card

The card can be made selectable and expandable with the `selectable` and `expandable` properties:

```html
<mtx-card [config]="{ selectable: true, expandable: true, contentTemplate: content }">
  <ng-template #content>
    <p>This card is selectable and expandable. Click the expand button to toggle the content.</p>
  </ng-template>
</mtx-card>
```

## Card with Ribbon

Add a ribbon to the card using the `ribbonText` property:

```html
<mtx-card [config]="{ ribbonText: 'New', contentTemplate: content }">
  <ng-template #content>
    <p>This card has a ribbon.</p>
  </ng-template>
</mtx-card>
```

## Config Options

The `mtx-card` component takes a single `config` input with the following options:

- `headerTemplate`: Template for the card header.
- `contentTemplate`: Template for the card content.
- `footerTemplate`: Template for the card footer.
- `imageSrc`: Source URL for the card image.
- `elevation`: Elevation level of the card (default is 1).
- `selectable`: Whether the card is selectable (default is false).
- `expandable`: Whether the card is expandable (default is false).
- `expanded`: Whether the card is expanded (default is false).
- `ribbonText`: Text for the ribbon.
- `customClasses`: Custom CSS classes to apply to the card (default is '').
- `loading`: Whether the card is in a loading state (default is false).

## Examples

### Basic Card

```html
<mtx-card [config]="{ contentTemplate: content }">
  <ng-template #content>
    <p>This is a basic card with only content.</p>
  </ng-template>
</mtx-card>
```

### Card with Header, Content, and Footer

```html
<mtx-card [config]="{ headerTemplate: header, contentTemplate: content, footerTemplate: footer }">
  <ng-template #header>
    <mat-card-header>
      <mat-card-title>Card Title</mat-card-title>
      <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
    </mat-card-header>
  </ng-template>
  <ng-template #content>
    <p>This is the card content.</p>
  </ng-template>
  <ng-template #footer>
    <button mat-button>Action</button>
  </ng-template>
</mtx-card>
```

### Card with Image

```html
<mtx-card [config]="{ imageSrc: 'path/to/image.jpg', contentTemplate: content }">
  <ng-template #content>
    <p>This is the card content with an image.</p>
  </ng-template>
</mtx-card>
```

### Selectable and Expandable Card

```html
<mtx-card [config]="{ selectable: true, expandable: true, contentTemplate: content }">
  <ng-template #content>
    <p>This card is selectable and expandable. Click the expand button to toggle the content.</p>
  </ng-template>
</mtx-card>
```

### Card with Ribbon

```html
<mtx-card [config]="{ ribbonText: 'New', contentTemplate: content }">
  <ng-template #content>
    <p>This card has a ribbon.</p>
  </ng-template>
</mtx-card>
```

### Installation

```bash
npm install @angular/material
```

### Import the Module

```typescript
import { CardModule } from './path/to/Card.module';

@NgModule({
  imports: [
    // other imports...
    CardModule
  ]
})
export class AppModule { }
```

## Summary

The `mtx-card` component provides an enhanced and flexible card component for Angular applications, making it easy to create rich, interactive card-based UIs with customizable templates and features.