Lib-dev-kit NPM

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.