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

## Definición

Archivo: `induxsoft.controls.js`

Produce un campo de entrada similar al `select` de Html que además permite al usuario insertar una nueva entrada por lo que no está limitado a la lista proporcionada inicialmente.

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

## Ejemplos

Maquetación HTML básica
```html
<edit-select name="option" id="select">
    <option value="" disabled hidden selected>Selecciona una opción</option>
    <option value="1">Opción 1</option>
    <option value="2">Opción 2</option>
    <option value="3">Opción 3</option>
</edit-select>
```

**Ejemplos de uso con JavaScript**

Establecer un nuevo valor al componente.
```js
const select = document.getElementById("select");
select.setValue(2);
```

Obtener valor actual del componente.
```js
const select = document.getElementById("select");

let value = select.getValue();
console.log(value); // Salida esperada: "2"
```

Establecer evento `change` al componente.
```js
const select = document.getElementById("select");

select.onChanging = () => {
    alert("Se ha establecido un nuevo valor: " + select.getValue());
}
```

Uso de `reloadSelect()` para sobreescribir opciones.
```js
function sobreescribirOpciones() {
    const select = document.getElementById("select");

    for (let i = 1; i <= 10; i++) {
        const option = document.createElement("option");
        option.value = 1;
        option.text = "Opción " + i;
        
        select.appendChild(option);
    }

    select.reloadSelect();
}
```

<!--
## Comentarios
...
-->
## Atributos

#### name (requerido)
Nombre del componente, este nombre sera tomado por el navegador para la carga útil.

Tipo: `string`, Predeterminado: `""`
```html
<edit-select name="option">
```

#### value (opcional)
Es el valor que se asigna al componente, este valor sera enviado por el formulario al campo establecido en el atributo `name`

Tipo: `string`, Predeterminado: `""`
```html
<edit-select value="2">
```

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

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

#### edit-options (opcional)
Permite que al hacer doble click sobre un `<option>` el valor de este pueda ser modificado.
Es decir que aquellos valores existentes puedan ser modificados por el usuario, además de poder insertar otros nuevos.

Tipo: `bool`, valor predeterminado: `false`
```html
<edit-select edit-options="true"> ...
```

#### manual-text (opcional)
Establece el texto (placeholder) a mostrar para la opción editable.

Tipo: `string`, valor predeterminado: `Escribir manualmente...`
```html
<edit-select manual-text="Indique un nuevo valor aquí... ">
```

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

Tipo: `string`, valor predeterminado: `""`
```html
<edit-select control-styles="">
```

## Propiedades

- `onChanging`: (function) Permite establecer una función (callback) que sera invocada cada que se establezca un nuevo valor en el componente.

## Métodos

#### setValue
Establece un nuevo valor al control e inmediatamente se invoca el callback definido en `onChanging`

**Parámetros:**
- `string|number` **value** Nuevo valor que será establecido en el control. (requerido)
- `boolean` **allowFocus** Establece el foco y selecciona el nuevo valor establecido. (opcional)

```js
setValue(value, allowFocus=true): void
```

#### getValue
Obtiene el valor actual del control.
```js
getValue(): string | null
```

#### reloadSelect
```js
reloadSelect(): void
```

<!--
## Eventos
-->