npm package: @nauticad/test-widgets
Description: ### Angular ```shell npm install --save @nauticad/test-widgets ```
Latest version: 1.0.1

# TQ Widgets Component
## Instalación

### Angular
```shell
npm install --save @nauticad/test-widgets
```

### Vanilla Javascript
```html
<!doctype html>
<html lang="en">
<head>
  ...
  <!--Cargar los estilos compilados-->
  <link rel="stylesheet" href="https://tq-components.s3.amazonaws.com/styles.css">
</head>
<body>
...
<!--Cargar los componentes publicados-->
<script src="https://tq-components.s3.amazonaws.com/tq-components.js"></script>
</body>
```

## Componentes
### Buscador
> Componente para capturar texto que agrega un delay para no saturar el servicio de busqueda

Entradas:
* placeholder: Texto de ayuda que aparece en la barra de busqueda

Salidas:
* search: Evento que emite el texto que el usuario ha ingresado en la barra de busqueda


**Angular**
```angular2html
<tq-searcher placeholder="Test"
            (search)="showTerm(event)">
</tq-searcher>
```
```ts
function showTerm(term): void {
    console.log(term)
}
```

**Ejemplo Vanilla JS**
```html
<tq-searcher id="buscador" placeholder="Ejemplo">
</tq-searcher>
<script type="text/javascript">
  (function (){
    document.getElementById('buscador').addEventListener('search', (term) => {
      console.log(`Termino a buscar: ${term.detail}`);
    })    
  })()
</script>
```

###Firma
> Componente para capturar firmas, el formato de retorno es base64

Salidas:

* signature: Evento que emite en base64 la firma recolectada

**Angular**
```angular2html
<tq-signature (sign)="showSign(event)">
</tq-signature>
```
```ts
function showSign(term): void {
    console.log(term)
}
```

**Ejemplo Vanilla JS**
```html
<tq-signature id="signature">
</tq-signature>
<script type="text/javascript">
  (function () {
    document.getElementById('signature').addEventListener('sign', (evt) => {
      console.log(`Firma`, evt.detail);
    });
  )()
</script>
```


### Ordenamiento

> Componente para ordenar un conjunto de elementos

Los Elementos de entrada deben cumplir con la interfaz ```ISortOption```

```ts
interface ISortOption {
    text:string;
}
```

**Entradas**

* sentence: Enunciado de la pregunta
* helperText: Texto de ayuda
* items: Arreglo de tipo ```ISortOption```

**Salidas**

* answer: Arreglo de elementos ordenados de tipo ```ISortOption```

**Ejemplo Angular**
```html
<tq-sort sentence="Pregunta de prueba"
         helperText="Un mensaje de ayuda" 
         [items]="items" 
         (answer)="showAsnwer($event)">
</tq-sort>
```

```ts
const items = [
  {
      text: 'Option 1'
  },
  {
    text: 'Option 2'
  }
]

function showAnswer(answer): void {
    console.log(answer)
}
```

**Ejemplo Vanilla JS**
```html
<tq-sort id="sort" 
         sentence="Pregunta de prueba" 
         helper-text="Un mensaje de ayuda">
</tq-sort>

<script type="text/javascript">
  (function (){
    let items = [
      {
        text: 'Item 1'
      },
      {
        text: 'Item 2'
      }
    ];
    let sortCmpt = document.getElementById('sort');
    sortCmpt.items = items;
    sortCmpt.addEventListener('answer', (evt) => {
      console.log('Elementos organizados', evt.detail);
    });
  })();
</script>
```