# Selector de Color - Web Component

Este proyecto implementa un componente web personalizado para seleccionar colores, diseñado para ser fácilmente integrado en formularios HTML.

## Características

- 🎨 Selector de color personalizable
- 📝 Compatible con formularios HTML (formAssociated)
- 🎯 Fácil integración
- 🔧 Altamente configurable
- 📱 Diseño responsive

## Instalación

Instala el paquete usando npm:

```bash
npm install color-selector-component
```

## Uso

### Importación

Primero, importa el componente en tu proyecto:

```javascript
import 'color-selector-component';
```

### Uso Básico

Para usar el selector de color con la configuración predeterminada:

```html
<color-selector name="color1"></color-selector>
```

### Uso Personalizado

Puedes personalizar el selector de color con diferentes opciones:

```html
<color-selector
  name="color2"
  width="120px"
  height="25px"
  colors='[
    {"value":"#f44336","label":"Rojo intenso"},
    {"value":"#4caf50","label":"Verde brillante"},
    {"value":"#2196f3","label":"Azul claro"},
    {"value":"#ffeb3b","label":"Amarillo sol"}
  ]'
></color-selector>
```

### Atributos Disponibles

- `name`: Nombre del campo para el formulario (requerido)
- `width`: Ancho del selector (opcional)
- `height`: Alto del selector (opcional)
- `colors`: Array JSON de colores personalizados (opcional)
  - Cada color debe tener:
    - `value`: Código hexadecimal del color
    - `label`: Etiqueta descriptiva del color

## Integración con Formularios

El componente está diseñado para funcionar perfectamente con formularios HTML:

```html
<form method="POST" action="/tu-endpoint">
  <color-selector name="color"></color-selector>
  <button type="submit">Enviar</button>
</form>
```

## Ejemplo Completo

```html
<!DOCTYPE html>
<html>
<head>
  <title>Selector de Color</title>
</head>
<body>
  <form method="POST" action="/enviar">
    <!-- Selector básico -->
    <color-selector name="color1"></color-selector>

    <!-- Selector personalizado -->
    <color-selector
      name="color2"
      width="120px"
      height="25px"
      colors='[
        {"value":"#f44336","label":"Rojo intenso"},
        {"value":"#4caf50","label":"Verde brillante"}
      ]'
    ></color-selector>

    <button type="submit">Enviar</button>
  </form>

  <script type="module">
    import 'color-selector-component';
  </script>
</body>
</html>
```

## Licencia

Este proyecto está bajo la Licencia MIT.