## Librería de componentes 🚀

Esta librería está realizada con Angular version 14.2.0 [Angular CLI](https://github.com/angular/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.

<!-- ![image-4.png](./img/image-4.png) -->

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

<!-- ![image.png](./img/image.png) -->

- **success**: El toast en color verde.

<!-- ![image-1.png](./img/image-1.png) -->

- **warning**: El toast en color amarillo.

<!-- ![image-2.png](./img/image-2.png) -->

- **exclaim**: El toast en color morado.

<!-- ![image-3.png](./img/image-3.png) -->

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

    <!-- ![image-3.png](./img/input-text-success.png) -->

  - danger :

    <!-- ![image-3.png](./img/input-text-danger.png) -->

  - disable :

    <!-- ![image-3.png](./img/disable.png) -->

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

    <!-- ![image-3.png](./img/input-text.png) -->

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

  <!-- ![image-3.png](./img/standar1.png) -->

  <!-- ![image-3.png](./img/standar2.png) -->

  <!-- ![image-3.png](./img/standar3.png) -->

  <!-- ![image-3.png](./img/standar4.png) -->

- **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.

  <!-- ![largesearchnew.png](./img/largesearchnew.png) -->

- **searchStyle**: Indica si el buscador estará en modo disable.
  <!-- ![image-3.png](./img/disablesearch.png) -->

- **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.

<!-- ![defaultTrue.png](./img/defaultTrue.png) -->

<!-- ![defaultFalse.png](./img/defaultFalse.png) -->

- **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.

<!-- ![tagActivado.png](./img/tagActivado.png) -->

<!-- ![tagDesactivado.png](./img/tagDesactivado.png) -->

### 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<number>** : 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<string>** : 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<boolean>** : evento que emite el stado del radio button.

<!-- ## Tooltip Component -->

<!-- ###### `<p-rbutton> </p-rbutton>`

#### Valores de entrada

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

#### Valores de salida

**radioChange : EventEmitter<boolean>** : evento que emite el stado del radio button. -->