Librería de componentes 🚀

Esta librería está realizada con Angular version 14.2.0 Angular CLI.

Aquí podrás encontrar los componentes reutilizables, testeados , que necesites para realizar proyectos retadores.

Los componentes están basados en un Design System (UI Kit)

Como usar los componentes

Para poder usar los componentes debemos de importar el modulo de los componentes.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from 'lib-dev-kit';

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

En el caso anterior podemos ver que importamos el componente button. y asi poder ser usado en el archivo html:

<p-button [title]="'Continuar'"></p-button>

Componentes:

Button Component

Este componente permite tener un boton personalizado.

< p-button >< / p-button >

Valores de entrada

• title: string: Te permite darle un nombre al boton.
• theme: string: Te permite darle un estilo al boton :
  • primary
  • secondary
  • tertiary
  • primary-white
  • secondary-white
  • tertiary-white
• disable : boolean: Te permite activar o deshabilitar el boton.
• size : string: Te permite darle tamaño al boton.
  • mediun
  • small
  • all-width
• font : string: Te permite darle una fuente a las letras, puedes enviar la fuente que deseas(Poppins-Regular, Poppins-SemiBold, Poppins-Bold,etc).

Valores de salida

• onClick:Evento emitido por el componente.

Toast Component

Este componente te permite realizar una alerta personalizada

< p-toast >< / p-toast >

los tipos de alerta son los siguientes :

• danger: El toast en color rojo.

• success: El toast en color verde.

• warning: El toast en color amarillo.

• exclaim: El toast en color morado.

Valores de entrada

• data: Representa la información que se debe enviar, contiene lo siguiente:

  • type :Se indica el tipo alerta a mostrar
  • title :Se indica el título de la alerta.
  • description :Se indica el cuerpo de la alerta, la descripción.
  • icon :Se indica en iconco que debe aparecer, puede ser personalizado, las referencias de los íconos están en Fontawesome. https://fontawesome.com/ , un ejemplo de un icono que se podría pasar sería el siguiente : fa-solid fa-check

• show: Indica si el toast se debería mostrar o no.

Ejemplo de uso del Toast:

• En el archivo .ts:

import { Component } from '@angular/core';
import { ToastService } from 'lib-dev-kit';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {

  constructor(
    public toastService: ToastService
  ) {}
}

• En el archivo .html:

<ng-container *ngIf="toastService.show | async">
  <app-toast [data]="(toastService.show | async) || undefined"></app-toast>
</ng-container>

Checkbox Component

Este componente permite usar un checkbox personalizando el tamaño y emitiendo el valor del checkbox.

<p-checkbox> </p-checkbox>

Valores de entrada

disabled : boolean : permite habilitar o deshabilitar el checkbox, el valor por defecto es false. checked : boolean : permite dar valor al checkbox, el valor por defecto es false. size : SizeObj : objeto con el cualse definen los tamaños del checkbox.

SizeObj = { width:string; height:string; "font-size":string; }

Nota: dentro del mismo componente esta la interfaz del SizeObj.

Valores de salida

check : boolean : emite el valor actual del checkbox.

Input Component

<p-input> </ p-input>

Este componente permite tener un input personalizado,donde cambiará dependiendo si está vacio el testo o si se está ingresando de manera incorrecta.

Valores de entrada

• debounceTime: number: Indica el tiempo que demorará el debounce en devolver el texto.

• searchStyle: Indica la clase de estilo que tendrá el input, el cual acepta success, danger, disable y el por defacto que sería el del color morado.

  • success :

  • danger :

  • disable :

  • default(Es representado con comillas simples '') :

• standar : Indica si desea que el input tenga los íconos, si estandar es true entonces no lo tendrá.

• font : Te permite personalizar el tipo de letra del texto del input.

• icon : Te permite personalizar el ícono que aparecerá en el input,ejemplo:

  • fa-solid fa-check
  • fa-solid fa-triangle-exclamation
  • fa-solid fa-xmark

Valores de salida

• EventEmitter : Permite emitir el valor del input cada vez que se escriba, dependiendo de la cantidad de tiempo que se le indique al debounceTime, pasado esa cantidad de tiempo emitirá el evento con el valor.

Icon Component

< p-icon >< / p-icon >

Este componente te permite pasarle una clave como url para que te muestre el icono que gustes.

Valores de entrada

• url : Te permite indicar que icono deseas insertar.

Search Component

< p-search >< / p-search >

Este componente te permite tener una buscador el cual te permite tener una preview del resultado que esperas en una lista.

Valores de entrada

• debounceTime: Representa el tiempo de demora en la que emitirá el valor del buscador.

• isLarge: Indica si el buscador tendrá un tamaño largo, se representa con true o false.

• searchStyle: Indica si el buscador estará en modo disable.

• dataList: Indica la lista de resultados de la busqueda.

• font: Menciona el estilo de letra del buscador

Valores de salida

• dataEmitter: Emite el valor del buscador.

Tag component

< p-tag >< / p-tag >

Este componente te permite tener una etiqueta con la información del usuario, una foto y su correo.

Valores de entrada

• default : boolean: Indica si el tag tendrá la opción de la x para poder borrar el elemento.

• data: Representa el objeto a mandar este está compuesto por el email y la url de la foto.
• fontText : string: Te permite darle una fuente a las letras, puedes enviar la fuente que deseas(Poppins-Regular, Poppins-SemiBold, Poppins-Bold,etc
• isDisable: Indica si el tag estará deshabilitado.

Output

removeEmail : Emite el elemnto eliminado al dar click en el ícono de la X.

pagination Component

Este componente permite usar un paginador ingresando el maximo de paginas y emite el numero de pagina en la que se encuentra.

<p-pagination> </p-pagination>

Valores de entrada

maxPage : number : Cantidad total de paginas, el valor por defecto es 1.

Valores de salida

onClick : EventEmitter : emite el numero de la pagina actual.

Dropdown Component

<p-dropdown> </p-dropdown>

Valores de entrada

dataList : Array : lista de string. placeholder : string : placeholder de tu input.

Valores de salida

onItemSelected : EventEmitter : emite la opcion seleccionada.

Radio Button Component

<p-rbutton> </p-rbutton>

Valores de entrada

isActive : boolean : coloca check el componente. isDisable : boolean : deshabilita el check.

Valores de salida

radioChange : EventEmitter : evento que emite el stado del radio button.