# Credi Components

Librería de componentes reutilizables con Angular Material 15 para proyectos Angular.

## Instalación

```bash
npm install credi-components
```

## Requisitos

- Angular 15.x
- Angular Material 15.x

## Uso

### 1. Importar el módulo en tu aplicación

```typescript
import { CrediComponentsModule } from "credi-components";

@NgModule({
  imports: [CrediComponentsModule],
})
export class AppModule {}
```

### 2. Usar los componentes

#### Button Component

```html
<!-- Botón básico -->
button text="Click me" color="primary" (clicked)="onButtonClick()"> </ssa-button>

<!-- Botón con icono -->
button text="Save" icon="save" color="accent" (clicked)="onSave()"> </ssa-button>

<!-- Botón deshabilitado -->
button text="Disabled" [disabled]="true"> </ssa-button>
```

**Propiedades:**

- `text`: Texto del botón (string)
- `color`: Color del botón - 'primary' | 'accent' | 'warn' (ThemePalette)
- `disabled`: Estado deshabilitado (boolean)
- `icon`: Nombre del icono de Material Icons (string)
- `type`: Tipo de botón - 'button' | 'submit' | 'reset' (string)

**Eventos:**

- `clicked`: Evento emitido al hacer click

#### Card Component

```html
<!-- Card básica -->
card title="Mi Card" subtitle="Subtítulo">
  <p>Contenido de la card</p>
  <div card-actions>
    button text="Action 1"></ssa-button>
    button text="Action 2" color="accent"></ssa-button>
  </div>
</ssa-card>

<!-- Card con imagen -->
card title="Card con imagen" imageUrl="https://example.com/image.jpg" [elevation]="4">
  <p>Contenido aquí</p>
</ssa-card>
```

**Propiedades:**

- `title`: Título de la card (string)
- `subtitle`: Subtítulo de la card (string)
- `imageUrl`: URL de la imagen (string)
- `elevation`: Nivel de elevación (number, default: 2)

## Desarrollo

### Construir la librería

```bash
ng build credi-components
```

### Publicar en npm

```bash
cd dist/credi-components
npm publish
```

## Licencia

MIT