juvo-rafa-library/README.md

A comprehensive Angular component library featuring real-world components and validators extracted from the Juvo Rafa backoffice application. Now with improved select components and bug fixes.

# Juvo Rafa Library v2.1.0

Complete Angular component library with all real-world components and validators extracted from the Juvo Rafa backoffice application.

## 🚀 Features

- **Complete Component Suite**: All backoffice components now available
- **Production-Ready**: Battle-tested components from real enterprise applications
- **Comprehensive Validators**: Network and device validation utilities
- **Standalone Components**: Modern Angular architecture with standalone components
- **TypeScript Support**: Full TypeScript definitions and documentation
- **Zero Dependencies**: Only requires Angular as peer dependency

## 📦 Installation

```bash
npm install juvo-rafa-library
```

## 🎯 Components

### Action Components

#### JuvoButtonActionComponent
Button group component for form actions.

```typescript
import { JuvoButtonActionComponent } from 'juvo-rafa-library';
```

### Loading Components

#### JuvoLoadingComponent
Flexible loading indicator with overlay support.

#### JuvoScreenLoadingComponent
Screen-wide loading overlay for blocking interactions during operations.

```typescript
import { JuvoLoadingComponent, JuvoScreenLoadingComponent } from 'juvo-rafa-library';
```

### Form Components

#### JuvoInputComponent
Comprehensive input component supporting text, email, password, number, textarea, and select inputs.

```typescript
import { JuvoInputComponent } from 'juvo-rafa-library';

// Basic usage
<juvo-input
  label="Full Name"
  placeholder="Enter your full name"
  [(ngModel)]="name">
</juvo-input>

// Select dropdown
<juvo-input
  type="select"
  label="Country"
  [options]="countryOptions"
  [(ngModel)]="selectedCountry">
</juvo-input>
```

### Data Display Components

#### JuvoListComponent
Simple list component for displaying tabular data with basic functionality.

#### JuvoTableComponent
Comprehensive table component with pagination, sorting, selection, and actions.

```typescript
import { JuvoListComponent, JuvoTableComponent } from 'juvo-rafa-library';

// Table example
<juvo-table
  [data$]="tableData$"
  [columns]="[
    { key: 'id', label: 'ID', width: '80px' },
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email', sortable: true },
    { key: 'actions', label: 'Actions', type: 'actions' }
  ]"
  [paginator]="true"
  [rows]="10"
  (rowSelected)="onRowSelected($event)">
</juvo-table>
```

### Navigation Components

#### JuvoTabMenuComponent
Horizontal tab navigation component with icons, badges, and multiple variants.

```typescript
import { JuvoTabMenuComponent } from 'juvo-rafa-library';

<juvo-tab-menu
  [items]="[
    { id: 'overview', label: 'Overview', icon: '📊' },
    { id: 'users', label: 'Users', icon: '👥', badge: '12' },
    { id: 'settings', label: 'Settings', icon: '⚙️' }
  ]"
  [activeItemId]="currentTab"
  variant="pills"
  (tabChange)="handleTabChange($event)">
</juvo-tab-menu>
```

### Feedback Components

#### JuvoNotificationComponent
Flexible notification system with different types and positions.

#### JuvoConfirmationDialogComponent
Modal confirmation dialog for critical actions.

```typescript
import { JuvoNotificationComponent, JuvoConfirmationDialogComponent } from 'juvo-rafa-library';

// Notification
<juvo-notification
  type="success"
  title="Operation successful"
  message="The item was saved successfully."
  [duration]="5000">
</juvo-notification>

// Confirmation Dialog
<juvo-confirmation-dialog
  *ngIf="showDialog"
  header="Delete Item"
  message="Are you sure you want to delete this item?"
  (actionAcceptTriggered)="onConfirm()"
  (actionCancelTriggered)="onCancel()">
</juvo-confirmation-dialog>
```

### File Upload Components

#### JuvoImagePickerComponent
Drag-and-drop image picker with preview and validation.

```typescript
import { JuvoImagePickerComponent } from 'juvo-rafa-library';

<juvo-image-picker
  [multiple]="true"
  [maxFiles]="5"
  [showPreview]="true"
  acceptedTypes="image/*"
  (filesSelected)="onFilesSelected($event)">
</juvo-image-picker>
```

## 🔧 Validators

### Network Validators

```typescript
import { 
  ipAddressValidator,
  macAddressValidator,
  portValidator,
  serialPortValidator 
} from 'juvo-rafa-library';

// Form usage
this.form = this.fb.group({
  serverIp: ['', [Validators.required, ipAddressValidator()]],
  macAddress: ['', [Validators.required, macAddressValidator()]],
  port: ['', [Validators.required, portValidator()]],
  serialPort: ['', [Validators.required, serialPortValidator()]]
});
```

#### Available Validators:
- **ipAddressValidator()** - Validates IPv4 addresses
- **macAddressValidator()** - Validates MAC addresses (colon/hyphen format)
- **portValidator()** - Validates network ports (0-65535)
- **serialPortValidator()** - Validates serial port names (Windows/Linux/macOS)

## 📄 Complete Component List

| Component | Description | Version |
|-----------|-------------|---------|
| `JuvoButtonActionComponent` | Form action buttons | 2.0.0+ |
| `JuvoLoadingComponent` | Loading indicator | 2.0.0+ |
| `JuvoScreenLoadingComponent` | Screen overlay loading | 2.1.0+ |
| `JuvoInputComponent` | Form input component | 2.1.0+ |
| `JuvoListComponent` | Data list display | 2.1.0+ |
| `JuvoTableComponent` | Data table with features | 2.1.0+ |
| `JuvoTabMenuComponent` | Tab navigation | 2.1.0+ |
| `JuvoNotificationComponent` | Notification system | 2.1.0+ |
| `JuvoConfirmationDialogComponent` | Confirmation dialog | 2.1.0+ |
| `JuvoImagePickerComponent` | File upload component | 2.1.0+ |

## 🔄 Migration Guide

### From v2.0.x to v2.1.0

Version 2.1.0 adds all remaining backoffice components without breaking changes.

**New Components:**
- `JuvoScreenLoadingComponent`
- `JuvoInputComponent`
- `JuvoListComponent`
- `JuvoTableComponent`
- `JuvoTabMenuComponent`
- `JuvoNotificationComponent`
- `JuvoConfirmationDialogComponent`
- `JuvoImagePickerComponent`

**No Breaking Changes** - All existing components remain unchanged.

## 📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 🤝 Contributing

This library contains components extracted from the Juvo Rafa backoffice application. Components are maintained and updated based on real-world usage patterns.

## 📄 License

MIT License. See [LICENSE](LICENSE) file for details.

## 🔗 Links

- [NPM Package](https://www.npmjs.com/package/juvo-rafa-library)
- [GitHub Repository](https://github.com/juvo-rafa/library)
- [Issues](https://github.com/juvo-rafa/library/issues)

---

Built with ❤️ by the Juvo Rafa Team

**Complete backoffice component suite now available!**