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

## Definición

Archivo: `induxsoft.controls.js`

Es un compenente que ofrece una interfaz que permite al usuario manipular un conjunto de elementos.

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


## Ejemplos

Maquetación HTML mínima
```html
<stack-edit id="stack"></stack-edit>
```

Este es un ejemplo con todos los atributos que pueden establecerse.
```html
<stack-edit
    id="stack"
    data='[
        {
            "id":"1",
            "a":"01-01-2025","b":"Activo","c":"Verde","d":"Uno",
            "title":"Item Verde",
            "subtitle":"Este es un item de color Verde",
            "styles":"color:#FFFFFF !important; background-color:#198754 !important;"
        },
        {
            "id":"2",
            "a":"01-01-2025","b":"En revisión","c":"Predeterminado","d":"Dos",
            "title":"Item Predeterminado",
            "subtitle":"Este es un item predeterminado"
        }
    ]'
    caption-a="a"
    caption-b="b"
    caption-c="c"
    caption-d="d"
    title="title"
    subtitle="subtitle"
    color-field="#000"
    backcolor-field="#FFF"
    styles-field="styles"
/>
```


**Ejemplos de uso con JavaScript**

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

    stack.captionA = "a";
    stack.captionB = "b";
    stack.captionC = "c";
    stack.captionD = "d";
    stack.title = "title";
    stack.subtitle = "subtitle";
    stack.colorField = "#000";
    stack.backColorField = "#FFF";
    stack.stylesField = "styles";
}

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

Establecer elementos al componente.
```js
function establecer() {
    const stack = document.getElementById("stack");

    let data = [
        {
            id:"1",
            a:"01-01-2025",b:"Activo",c:"Verde",d:"Uno",
            title:"Item Verde",
            subtitle:"Este es un item de color Verde",
            styles:"color:#FFFFFF !important; background-color:#198754 !important;"
        },
        {
            id:"2",
            a:"01-01-2025",b:"En revisión",c:"Predeterminado",d:"Dos",
            title:"Item Predeterminado",
            subtitle:"Este es un item predeterminado"
        }
    ];

    stack.setData(data);
}

establecer();
```

Obtener array de elementos del componente.
```js
const stack = document.getElementById("stack");

let data = stack.getData();
console.log(data); // Salida esperada: [{a:"", b:"", c:"", d:"", title:"", subtitle:""}, ...]
```

Obtener un elemento de la pila. (Es necesario haber definido una propiedad `id` en el conjunto de datos).
```js
const stack = document.getElementById("stack");

let item = stack._getItem("2");
console.log(item); //Salida esperada; {id:"2", ...}
```

Establecer la propiedad `onElementClick`. Se dispara cuando se hace clic en un elemento de la pila.
```js
const stack = document.getElementById("stack");

stack.onElementClick = (item, index) => {
    console.log(index); // Salida esperada: >= 0
    console.log(item); // Salida esperada: {a:"", b:"", c:"", d:"", title:"", subtitle:""}
};
```



## 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 componente imprime los objetos del array en orden descendente a lo definido.

El array de datos usado para establecer los elementos de la pila sigue la siguiente estructura:
```
[
    {
        id: (string) Identificador del elemento (si no se establece: id:GUID).
        a: (string) Texto a mostrar en la esquina superior izquierda de los elementos de la pila.
        b: (string) Texto a mostrar en la esquina superior derecha de los elementos de la pila.
        c: (string) Texto a a mostrar en la esquina inferior izquierda de los elementos de la pila.
        d: (string) Texto a mostrar en la esquina inferior derecha de los elementos de la pila.
        title: (string) Texto a mostrar como título de los elementos de la pila.
        subtitle: (string) Texto a mostrar como subtítulo de los elementos de la pila.
        styles: (string) Estilos css para el contenedor de cada elemento de la pila.
    }
]
```

Del ejemplo anterior las propiedades [a,b,c,d,title,subtile,styles] hacen referencia a los nombres definidos en los atributos: `caption-a`, `caption-b`, `caption-c`, `caption-d`, `title`, `subtitle`, `styles-field`.



## Atributos

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

Tipo: `string`, Predeterminado: `""`
```html
<stack-edit id="stack">
```

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

Tipo: `array`, Predeterminado: `""`
```html
<stack-edit data='[{"a":"0000-00-00","b":"Activo","c":"Verde","d":"Uno","title":"Item Verde","subtitle":"Este es un item de color Verde"}]'>
```

#### caption-a (opcional)
Campo a mostrar en la esquina superior izquierda de los elementos de la pila.

Tipo: `string`, Predeterminado: `a`
```html
<stack-edit caption-a="a">
```

#### caption-b (opcional)
Campo a mostrar en la esquina superior derecha de los elementos de la pila.

Tipo: `string`, Predeterminado: `b`
```html
<stack-edit caption-b="b">
```

#### caption-c (opcional)
Campo a a mostrar en la esquina inferior izquierda de los elementos de la pila.

Tipo: `string`, Predeterminado: `c`
```html
<stack-edit caption-c="c">
```

#### caption-d (opcional)
Campo a mostrar en la esquina inferior derecha de los elementos de la pila.

Tipo: `string`, Predeterminado: `d`
```html
<stack-edit caption-d="d">
```

#### title (opcional)
Campo a mostrar como título de los elementos de la pila.

Tipo: `string`, Predeterminado: `title`
```html
<stack-edit title="title">
```

#### subtitle (opcional)
Campo a mostrar como subtítulo de los elementos de la pila.

Tipo: `string`, Predeterminado: `subtitle`
```html
<stack-edit subtitle="subtitle">
```

#### color-field (opcional)
Color del texto de los elementos de la pila.

Tipo: `string`, Predeterminado: `#000`
```html
<stack-edit color-field="#000">
```

#### backcolor-field (opcional)
Color de fondo de los elementos de la pila.

Tipo: `string`, Predeterminado: `#FFF`
```html
<stack-edit backcolor-field="#FFF">
```

#### control-styles (opcional)
Establece los estilos (css) personalizados que se le aplicarán al control.

Tipo: `string`, Predeterminado: `""`
```html
<stack-edit control-styles="">
```

#### styles-field (opcional)
Especifica el campo en el objeto del array (data) con los estilos para cada contenedor de los elementos de la pila.

Tipo: `string`, Predeterminado: `styles`
```html
<stack-edit styles-field="styles">
```



## Propiedades

- `data`: (list) Datos de la pila.
- `captionA`: (string) Campo a mostrar en la esquina superior derecha de los elementos de la pila.
- `captionB`: (string) Campo a mostrar en la esquina superior izquierda de los elementos de la pila.
- `captionC`: (string) Campo a mostrar en la esquina inferior derecha de los elementos de la pila.
- `captionD`: (string) Campo a mostrar en la esquina inferior izquierda de los elementos de la pila.
- `title`: (string) Campo a mostrar como título de los elementos de la pila.
- `subtitle`: (string) Campo a mostrar como subtítulo de los elementos de la pila.
- `colorField`: (string) Color del texto de los elementos de la pila (def: #000).
- `backColorField`: (string) Color de fondo de los elementos de la pila (def: #FFF).
- `stylesField`: (string) Especifica el campo en el objeto del array (data) con los estilos para cada contenedor de los elementos de la pila.
- `onElementClick`: (function) Se dispara cuando se hace clic en un elemento de la pila.



## Métodos

#### setData
Establece los datos de la pila.

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

```js
setData(data): void
```

#### getData
Retorna los datos de la pila.

```js
getData(): array[]
```

#### _getItem
Retorna la información de un elemento de la pila.

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

```js
_getItem(id, withoutindex=true): array{} | null
```

#### _refreshView
Actualiza la interfaz de la pila.

```js
_refreshView(): void
```


<!--
## Eventos
-->