npm package: @pragma-dev-kit/pragma-ds-angular
Description: 🅰️ Librería de componentes Angular para Pragma Design System
Latest version: 0.0.28

# @pragma-dev-kit/pragma-ds-angular

🅰️ Librería de componentes Angular para Pragma Design System

[![NPM Version](https://img.shields.io/npm/v/@pragma-dev-kit/pragma-ds-angular)](https://www.npmjs.com/package/@pragma-dev-kit/pragma-ds-angular)
[![Angular](https://img.shields.io/badge/Angular-15.2+-red)](https://angular.io/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue)](https://www.typescriptlang.org/)

## 📦 Instalación

```bash
npm install @pragma-dev-kit/pragma-ds-angular
```

O con yarn:

```bash
yarn add @pragma-dev-kit/pragma-ds-angular
```

## ⚙️ Configuración

### 1. Importar estilos globales

Agrega los estilos CSS de Pragma DS en tu archivo `angular.json`:

```json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/@pragma-dev-kit/pragma-ds/dist/pragma-ds/pragma-ds.css"
            ]
          }
        }
      }
    }
  }
}
```

### 2. Importar el módulo de componentes

Importa `ComponentLibraryModule` en tu módulo principal:

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ComponentLibraryModule } from '@pragma-dev-kit/pragma-ds-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ComponentLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### 3. Para aplicaciones standalone (Angular 14+)

Si usas componentes standalone, importa el módulo en tu `main.ts`:

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { ComponentLibraryModule } from '@pragma-dev-kit/pragma-ds-angular';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(ComponentLibraryModule)
  ]
});
```

## 🚀 Uso de componentes

### Ejemplo básico

```html
<div class="app-container">
  <h1>Mi aplicación con Pragma DS</h1>
  
  <pds-input label="Nombre" placeholder="Ingresa tu nombre"></pds-input>
  
  <pds-checkbox label="Acepto términos y condiciones"></pds-checkbox>
  
  <pds-button variant="primary">Enviar</pds-button>
</div>
```

### Ejemplo con formularios reactivos

```typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <pds-input
        label="Nombre"
        formControlName="name"
        placeholder="Ingresa tu nombre"
      ></pds-input>

      <pds-input
        label="Email"
        type="email"
        formControlName="email"
        placeholder="correo@ejemplo.com"
      ></pds-input>

      <pds-checkbox
        label="Acepto términos"
        formControlName="terms"
      ></pds-checkbox>

      <pds-button variant="primary" type="submit">
        Enviar
      </pds-button>
    </form>
  `
})
export class FormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      terms: [false, Validators.requiredTrue]
    });
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}
```

### Ejemplo con eventos

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <pds-button
      variant="primary"
      (click)="handleClick()"
    >
      Click me
    </pds-button>

    <pds-dropdown
      [options]="items"
      (selectionChange)="onSelectionChange($event)"
    ></pds-dropdown>
  `
})
export class ExampleComponent {
  items = [
    { label: 'Opción 1', value: '1' },
    { label: 'Opción 2', value: '2' },
    { label: 'Opción 3', value: '3' }
  ];

  handleClick() {
    console.log('Button clicked!');
  }

  onSelectionChange(event: any) {
    console.log('Selected:', event.detail);
  }
}
```

## 📋 Componentes disponibles

- **pds-button** - Botones con diferentes variantes (primary, secondary, tertiary)
- **pds-input** - Campos de entrada de texto
- **pds-textarea** - Áreas de texto multilínea
- **pds-checkbox** - Casillas de verificación
- **pds-radio** - Botones de radio
- **pds-toggle** - Interruptores de encendido/apagado
- **pds-dropdown** - Menús desplegables
- **pds-avatar** - Avatares de usuario
- **pds-card** - Tarjetas de contenido
- **pds-breadcrumb** - Navegación de migas de pan
- **pds-pagination** - Paginación de contenido
- **pds-toast** - Notificaciones toast
- **pds-tooltip** - Tooltips informativos
- **pds-icon** - Iconos del sistema
- **pds-icon-button** - Botones con iconos
- **pds-accordion** - Acordeones expandibles
- **pds-tab** - Pestañas de navegación
- **pds-tables** - Tablas de datos
- **pds-tags** - Etiquetas
- **pds-loading** - Indicadores de carga
- **pds-stepper** - Pasos de proceso
- **pds-search** - Barra de búsqueda
- **pds-filter** - Filtros
- **pds-calendar** - Calendario

## 💡 Tips y mejores prácticas

### ✅ Recomendaciones

- **Importa solo lo necesario**: El módulo `ComponentLibraryModule` incluye todos los componentes
- **Usa formularios reactivos**: Para mejor control y validación de formularios
- **Aplica estilos consistentes**: Los componentes respetan el tema global de Pragma DS
- **Maneja eventos correctamente**: Usa los eventos personalizados de cada componente
- **TypeScript**: Aprovecha el tipado fuerte para mejor experiencia de desarrollo

### ⚠️ Consideraciones

- **Compatibilidad**: Requiere Angular 15.2 o superior
- **Estilos globales**: Los estilos CSS deben importarse una sola vez en `angular.json`
- **CUSTOM_ELEMENTS_SCHEMA**: No es necesario agregarlo, el módulo ya lo incluye

## 🔧 Integración con formularios

Los componentes de Pragma DS son compatibles con Angular Forms:

```typescript
import { ReactiveFormsModule } from '@angular/forms';
import { ComponentLibraryModule } from '@pragma-dev-kit/pragma-ds-angular';

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

## 📚 Documentación

Para ver ejemplos interactivos y documentación completa de cada componente, visita nuestro [Storybook](https://designsystem-docs.pragma.com.co/).

## 🔗 Enlaces útiles

- [Documentación de Angular](https://angular.io/docs)
- [Guía de formularios reactivos](https://angular.io/guide/reactive-forms)
- [NPM Package](https://www.npmjs.com/package/@pragma-dev-kit/pragma-ds-angular)
- [Repositorio GitHub](https://github.com/talent-solutions-somospragma/pragma-designsystem-stencil)

## 🐛 Reportar problemas

Si encuentras algún problema o tienes sugerencias, por favor abre un issue en nuestro [repositorio de GitHub](https://github.com/talent-solutions-somospragma/pragma-designsystem-stencil/issues).

## 📄 Licencia

ISC