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

$3

#### 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:
Show Alert

[isVisible]="showAlert"
[acceptFunc]="acceptFunc">


})
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:
Show Alert

[isVisible]="showAlert"
[acceptFunc]="acceptFunc">


})
export class MyComponent {
showAlert = false;

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

📋 API Reference

$3

#### 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

$3


`html
[isVisible]="showAlert"
[acceptFunc]="acceptFunc">

`

$3

`html
[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">

`

$3

`html
[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()">

`

$3

`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();
}
}
`

$3


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

@Component({
selector: 'app-my-component',
standalone: true,
imports: [AlertCustomComponent],
template:
Show 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()">


})
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

$3

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
`

$3

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