# CheckList
<style>
    img {
        max-width: 100%;
    }
    pre {
        background-color: #F5F5F5;
        padding: .5rem;
    }
</style>

## Definición

Archivo: `induxsoft.controls.js`

Es un componente que ofrece una interfaz que permite al usuario manipular cada elemento como una lista de tareas.

<img src="/es/api/web-components/img/checklist-demo-01.jpg">


## Ejemplos

Maquetación HTML mínima
```html
<check-list id="lista"/>
```

Este es un ejemplo con todos los atributos que pueden establecerse.
```html
<check-list 
    id="lista"
    data='{
        "text": "Lista de compras",
        "items": [
            {"id":"1", "text":"3 Tomates", "done":false},
            {"id":"2", "text":"1 Cebolla", "done":false},
            {"id":"3", "text":"3 Habaneros", "done":false},
            {"id":"4", "text":"4 Huevos", "done":false},
            {"id":"5", "text":"4 Naranjas", "done":true}
        ]
    }'
    data-locked="false"
    data-done-style="0"
    radio-style="false"
    hide-header="false"
    can-add="false"
    can-edit="false"
    can-remove="false"
    can-move="false"
    can-check="true"
/>
```

**Ejemplos de uso con JavaScript**

Inicializar componente.
```js
function inicializar() {
    const lista = document.getElementById("lista");

    lista.locked = false;
    lista.doneStyle = 0;
    lista.radioStyle = false;
    lista.hideHeader = false;
    lista.canAdd = true;
    lista.canEdit = true;
    lista.canRemove = true;
    lista.canMove = true;
    lista.canCheck = false;
}

document.addEventListener("DOMContentLoaded", () => {
    inicializar();
});
```

Establecer elementos a la lista.
```js
function establecer() {
    const lista = document.getElementById("lista");

    let data = {
        text: "Lista de compras",
        items: [
            {id:"1", text:"3 Tomates", done:false},
            {id:"2", text:"1 Cebolla", done:false},
            {id:"3", text:"3 Habaneros", done:false},
            {id:"4", text:"4 Huevos", done:false},
            {id:"5", text:"4 Naranjas", done:true}
        ]
    };

    lista.setData(data);
}

establecer();
```

Obtener los datos del componente.
```js
const lista = document.getElementById("lista");

let data = lista.getData();
console.log(data); // Salida esperada: {text:"", items:[{id:"", text:"", done:false, _meta:{percent:0, progress:100}}, ...]}
```

Obtener un elemento de la lista.
```js
const lista = document.getElementById("lista");

let item = lista.getItem("2",false);
console.log(item); // Salida esperada: {index:1, id:"2", text:"1 Cebolla", done:false, _meta:{percent:0, progress:100}}
```

Uso de la propiedad `onItemChanged`.
```js
const lista = document.getElementById("lista");

lista.onItemChanged = (item) => {
    alert(item.text+" ha cambiado");
    console.log(item); // Salida esperada: {id:"", text:"", done:true/false, _meta:{percent:0, progress:100}}
};
```

Uso de la propiedad `onItemChecked`.
```js
const lista = document.getElementById("lista");

lista.onItemChecked = (item) => {
    alert(item.text+" ha sido marcado");
    console.log(item); // Salida esperada: {id:"", text:"", done:true, _meta:{percent:0, progress:100}}
};
```

Uso de la propiedad `onItemMoved`.
```js
const lista = document.getElementById("lista");

lista.onItemMoved = (sourceItem) => {
    alert(sourceItem.text+" ha cambiado de posición");
    console.log(sourceItem); // Salida esperada: {id:"", text:"", done:true/false, _meta:{percent:0, progress:100}}
};
```


## Comentarios

El componente no envía nada como parte de la carga útil del formulario al que estuviera relacionado, por lo que si necesitamos enviar información al backend necesitaremos apoyarnos de javascript.

El array de datos usado para establecer los elementos de la lista sigue la siguiente estructura:
```
{
    text: (string) Título de la lista. [requerido]
    items: [
        {
            id: (string) Identificador del elemento. [requerido]
            text: (string) Texto a usar como etiqueta del elemento. [requerido]
            done: (boolean) Indica si la tarea ha sido completada. [requerido]

            items: (array) Array de objetos con la información a mostrar como parte de elementos hijos. [opcional]
            [{},...]
        },
        ...
    ]
}
```
Observe que a los elementos (items) también puede anidarse otros elementos (items) que formaran parte del elemento principal como elementos hijos.
Solo se permite un nivel de anidación por elemento.



## Atributos

#### id (opcional)
Identificador del componente, este Puede ser usado para acceder facilmente al componente mediante javascript.

Tipo: `string`, Predeterminado: `""`
```html
<check-list id="list">
```

#### data (opcional)
Una cadena que representa un objeto JSON con la información de los elementos a mostrar.

Tipo: `array`, Predeterminado: `""`
```html
<check-list data='{
    "text": "Lista de compras",
    "items": [
        {"id":"1", "text":"3 Tomates", "done":false},
        {"id":"2", "text":"1 Cebolla", "done":false},
        {"id":"3", "text":"3 Habaneros", "done":false},
        {"id":"4", "text":"4 Huevos", "done":false},
        {"id":"5", "text":"4 Naranjas", "done":true}
    ]
}'>
```

#### data-locked (opcional)
Elementos marcados ya no pueden desmarcarse.

Tipo: `bool`, Predeterminado: `false`
```html
<check-list data-locked="true">
```

#### data-done-style (opcional)
Visualización de elementos marcados: 0-Permanecen en su sitio, 1-Desaparecen, 2-Se apilan en una lista en la parte inferior.

Tipo: `number`, Predeterminado: `0`
```html
<check-list data-done-style="1">
```

#### can-add (opcional)
Pueden agregarse elementos

Tipo: `bool`, Predeterminado: `true`
```html
<check-list can-add="true">
```

#### can-edit (opcional)
Pueden editarse elementos

Tipo: `bool`, Predeterminado: `false`
```html
<check-list can-edit="true">
```

#### can-remove (opcional)
Pueden eliminarse elementos

Tipo: `bool`, Predeterminado: `false`
```html
<check-list can-remove="true">
```

#### can-move (opcional)
Pueden moverse elementos

Tipo: `bool`, Predeterminado: `false`
```html
<check-list can-move="true">
```

#### can-check (opcional)
Pueden marcarse como completados o actualizar su progreso.

Tipo: `bool`, Predeterminado: `true`
```html
<check-list can-check="false">
```

#### hide-header (opcional)
Permite ocultar la sección del título del componente.

Tipo: `bool`, Predeterminado: `false`
```html
<check-list hide-header="false">
```

#### radio-style (opcional)
Mecanismo de marcado por radio buttons (Si - No), Si es false o no se establece: el mecanismo será un check.

Tipo: `bool`, Predeterminado: `false`
```html
<check-list radio-style="false">
```


## Propiedades

- `data`: (array) Datos de la lista.
- `locked`: (bool) Elementos marcados ya no pueden desmarcarse.
- `doneStyle`: (number) Visualización de elementos marcados: 0-Permanecen en su sitio, 1-Desaparecen, 2-Se apilan en una lista en la parte inferior.
- `canAdd`: (bool) Pueden agregarse elementos.
- `canEdit`: (bool) Pueden editarse elementos.
- `canRemove`: (bool) Pueden eliminarse elementos.
- `canMove`: (bool) Pueden moverse elementos.
- `canCheck`: (bool) Pueden marcarse como completados o actualizar su progreso.
- `hideHeader`: (bool) Permite ocultar la sección del título del componente.
- `radioStyle`: (bool) Mecanismo de marcado por radio buttons (Si - No).
- `onItemChanged`: (function) Se dispara cuando se modifica un elemento.
- `onItemChecked`: (function) Se dispara cuando se completa (o desmarca) un elemento.
- `onItemMoved`: (function) Se dispara cuando un elemento ha sido movido a otra posición en el árbol de lista.

## Métodos

#### setData

Establece los datos de la lista

**Parámetros:**
- `array` **data** Array de objetos a mostrarse en la lista.

```Js
setData(data): void
```

#### getData

Retorna los datos de la lista

**Parámetros:**
- `boolean` **withoutmeta** Devuelve los datos sin la propiedad meta.

```Js
getData(withoutmeta = false): array{}
```

#### getItem

Retorna la información de un elemento de la lista

**Parámetros:**
- `string` **id** Identificador del elemento.
- `boolean` **withoutindex** Elimina la información del índice del elemento.

```Js
getItem(id, withoutindex = true): array{}
```

#### _refreshView

Actualiza la interfaz de la lista.

```Js
_refreshView(): void
```


<!--
## Eventos
-->