pharedata-ng-components/README.md

Angular alert/dialog component library with Material Design support

# Pharedata NG Components

A comprehensive Angular library providing customizable alert components with Material Design integration.

## 📦 Installation

```bash
npm install pharedata-ng-components@latest
```

## 🚀 Quick Start

### Import and Use AlertCustomComponent

#### Method 1: Standalone Component (Recommended)

```typescript
import { Component } from '@angular/core';
import { AlertCustomComponent } from 'pharedata-ng-components';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [AlertCustomComponent],
  template: `
    <button (click)="showAlert = true">Show Alert</button>
    
    <lib-custom-alert
      [isVisible]="showAlert"
      [acceptFunc]="acceptFunc">
    </lib-custom-alert>
  `
})
export class MyComponent {
  showAlert = false;
  
  acceptFunc = () => {
    console.log('Accepted!');
    this.showAlert = false;
  };
}
```

#### Method 2: Module-based Setup

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { PharedataNgComponents } from 'pharedata-ng-components';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule,
    PharedataNgComponents
  ],
  // ...
})
export class AppModule { }
```

Then in your component:
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="showAlert = true">Show Alert</button>
    
    <lib-custom-alert
      [isVisible]="showAlert"
      [acceptFunc]="acceptFunc">
    </lib-custom-alert>
  `
})
export class MyComponent {
  showAlert = false;
  
  acceptFunc = () => {
    console.log('Accepted!');
    this.showAlert = false;
  };
}
```

## 📋 API Reference

### AlertCustomComponent

#### Inputs

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `title` | `string` | `"!Exito!"` | Alert title |
| `content` | `string` | `"Este es el contenido del modal"` | Alert content |
| `icon` | `string` | `"success"` | Icon type: `"success"`, `"important"`, `"error"` |
| `acceptLabel` | `string` | `"Aceptar"` | Accept button text |
| `cancelLabel` | `string` | `"Cancelar"` | Cancel button text |
| `acceptFunc` | `() => void` | `undefined` | Function called when accept is clicked |
| `cancelFunc` | `() => void` | `undefined` | Function called when cancel is clicked |
| `closeFunc` | `() => void` | `undefined` | Function called when modal is closed |
| `showGreyBackground` | `() => void` | `undefined` | Function to show grey background |
| `hideGreyBackground` | `() => void` | `undefined` | Function to hide grey background |
| `scrollTo` | `(x: number, y: number) => void` | `undefined` | Function to scroll to position |
| `isVisible` | `boolean` | `false` | Controls alert visibility |

#### Outputs

| Event | Description |
|-------|-------------|
| `closed` | Emitted when alert is closed |
| `accepted` | Emitted when accept button is clicked |
| `canceled` | Emitted when cancel button is clicked |

#### Methods

| Method | Description |
|--------|-------------|
| `show()` | Programmatically show the alert |
| `hide()` | Programmatically hide the alert |

## 🎨 Available Icons

- `"success"` - Green checkmark icon
- `"important"` - Blue information icon  
- `"error"` - Red error icon

## 📝 Usage Examples

### Basic Alert
```html
<lib-custom-alert
  [isVisible]="showAlert"
  [acceptFunc]="acceptFunc">
</lib-custom-alert>
```

### Alert with Custom Content
```html
<lib-custom-alert
  [title]="'¡Atención!'"
  [content]="'Este es un mensaje importante que requiere tu atención.'"
  [icon]="'important'"
  [acceptLabel]="'Entendido'"
  [cancelLabel]="'Más tarde'"
  [acceptFunc]="acceptFunc"
  [cancelFunc]="cancelFunc"
  [isVisible]="showAlert">
</lib-custom-alert>
```

### Alert with All Features
```html
<lib-custom-alert
  [title]="'Confirmación'"
  [content]="'¿Estás seguro de que quieres continuar?'"
  [icon]="'error'"
  [acceptLabel]="'Sí, continuar'"
  [cancelLabel]="'Cancelar'"
  [acceptFunc]="acceptFunc"
  [cancelFunc]="cancelFunc"
  [closeFunc]="closeFunc"
  [showGreyBackground]="showGreyBackground"
  [hideGreyBackground]="hideGreyBackground"
  [scrollTo]="scrollTo"
  [isVisible]="showAlert"
  (closed)="onClosed()"
  (accepted)="onAccepted()"
  (canceled)="onCanceled()">
</lib-custom-alert>
```

### Programmatic Control
```typescript
import { Component, ViewChild } from '@angular/core';
import { AlertCustomComponent } from 'pharedata-ng-components';

export class YourComponent {
  @ViewChild(AlertCustomComponent) alert!: AlertCustomComponent;
  
  showAlert() {
    this.alert.show();
  }
  
  hideAlert() {
    this.alert.hide();
  }
}
```

### Complete Example with All Functions
```typescript
import { Component } from '@angular/core';
import { AlertCustomComponent } from 'pharedata-ng-components';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [AlertCustomComponent],
  template: `
    <button (click)="showAlert = true">Show Alert</button>
    
    <lib-custom-alert
      [title]="'¡Atención!'"
      [content]="'Este es un mensaje importante'"
      [icon]="'important'"
      [acceptLabel]="'Entendido'"
      [cancelLabel]="'Cancelar'"
      [acceptFunc]="acceptFunc"
      [cancelFunc]="cancelFunc"
      [closeFunc]="closeFunc"
      [showGreyBackground]="showGreyBackground"
      [hideGreyBackground]="hideGreyBackground"
      [scrollTo]="scrollTo"
      [isVisible]="showAlert"
      (closed)="onClosed()"
      (accepted)="onAccepted()"
      (canceled)="onCanceled()">
    </lib-custom-alert>
  `
})
export class MyComponent {
  showAlert = false;

  acceptFunc = () => {
    console.log('Accepted!');
    this.showAlert = false;
  };

  cancelFunc = () => {
    console.log('Canceled!');
    this.showAlert = false;
  };

  closeFunc = () => {
    console.log('Closed!');
    this.showAlert = false;
  };

  showGreyBackground = () => {
    // Your grey background logic
    document.body.style.overflow = 'hidden';
  };

  hideGreyBackground = () => {
    // Your hide grey background logic
    document.body.style.overflow = 'auto';
  };

  scrollTo = (x: number, y: number) => {
    window.scrollTo(x, y);
  };

  onClosed() {
    console.log('Alert closed');
  }

  onAccepted() {
    console.log('Alert accepted');
  }

  onCanceled() {
    console.log('Alert canceled');
  }
}
```

## 🔧 Configuration

### Prerequisites

This library requires the following peer dependencies in your Angular project:

```json
{
  "@angular/common": "^20.1.0",
  "@angular/core": "^20.1.0",
  "@angular/material": "^20.1.0",
  "rxjs": "~7.8.0"
}
```

Make sure you have Angular Material installed in your project:

```bash
npm install @angular/material @angular/cdk
```

### Angular Material Setup

Include Angular Material themes in your styles:

```scss
@import '@angular/material/prebuilt-themes/indigo-pink.css';
```

## 🎯 Features

- ✅ **Material Design Integration** - Seamless integration with Angular Material
- ✅ **Customizable Styling** - Full control over appearance
- ✅ **TypeScript Support** - Complete type safety
- ✅ **Event Handling** - Rich event system for user interactions
- ✅ **Programmatic Control** - Show/hide methods for dynamic control
- ✅ **Responsive Design** - Works on all screen sizes
- ✅ **Accessibility** - Built with accessibility in mind
- ✅ **Asset Bundling** - Images included in the package
- ✅ **Standalone Components** - Modern Angular approach

## 📦 Bundle Size

- **Package Size:** ~130.6 kB (compressed)
- **Unpacked Size:** ~205.8 kB
- **Main Bundle:** ~148.6 kB

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

## 📄 License

This project is licensed under the MIT License.

## 🐛 Issues

If you encounter any issues, please report them on the GitHub repository.

## 📞 Support

For support and questions, please open an issue on the GitHub repository.

---

**Made with ❤️ for the Angular community**