...
...
...
```
### Layout
```html
...
...
...
```
## Uso
### HTML Basico
```html
```
### Jinja2 Macro (PHD_CURANS)
```jinja
{% from 'partials/_sms.html' import sms %}
{{ sms(
field='primary_pack',
label='Embalagem Primaria',
icon='fa-box',
options=[
{'value': 1, 'label': 'Blister'},
{'value': 2, 'label': 'Frasco'},
{'value': 3, 'label': 'Ampola'},
{'value': 4, 'label': 'Bisnaga'},
],
more_options=[
{'value': 5, 'label': 'Sache'},
{'value': 6, 'label': 'Flaconete'},
],
selected=1,
auto=False
) }}
```
### Com Auto-Mapping
```jinja
{{ sms(
field='secondary_pack',
label='Embalagem Secundaria',
icon='fa-boxes-stacked',
options=top_4_options,
more_options=remaining_options,
selected=suggested_value,
auto=True # Ativa badge Auto e pre-selecao
) }}
```
## Comportamentos
### Ordenacao Estatistica
As opcoes devem ser passadas ja ordenadas por frequencia descendente. As 4 primeiras aparecem inline, as demais vao para o popup.
```python
# Backend - ordenar por frequencia
options = get_mapping_options_ordered_by_frequency(field)
top_4 = options[:4]
remaining = options[4:]
```
### Eventos JavaScript
O componente dispara eventos customizados para integracao:
```javascript
// Escutar mudancas
document.addEventListener('sms:change', (e) => {
console.log('Campo:', e.detail.field);
console.log('Valor:', e.detail.value);
console.log('Label:', e.detail.label);
console.log('Auto:', e.detail.auto);
console.log('Do Popup:', e.detail.fromPopup);
});
```
### HTMX Integration
```html