Pharedata NG Components

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

📦 Installation

npm install pharedata-ng-components@latest

🚀 Quick Start

Import and Use AlertCustomComponent

Method 1: Standalone Component (Recommended)

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

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:

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

<lib-custom-alert
  [isVisible]="showAlert"
  [acceptFunc]="acceptFunc">
</lib-custom-alert>

Alert with Custom Content

<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

<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

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

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:

{
  "@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:

npm install @angular/material @angular/cdk

Angular Material Setup

Include Angular Material themes in your styles:

@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