# Referencia: Componentes HTML do Fluig Style Guide

Catalogo completo de componentes HTML para formularios Fluig.
Todos os componentes usam exclusivamente classes do Fluig Style Guide.

## Campo de texto simples
```html
<div class="row">
    <div class="form-group col-xs-12 col-md-6">
        <label for="${CAMPO}">${LABEL} <span class="text-danger">*</span></label>
        <input type="text" class="form-control" name="${CAMPO}" id="${CAMPO}" />
    </div>
</div>
```

## Select com Dataset inline
```html
<div class="col-xs-12 col-md-4">
    <label>${LABEL} <span class="text-danger">*</span></label>
    <select class="form-control" name="${CAMPO}" id="${CAMPO}"
        dataset="${DATASET_ID}" datasetkey="${COLUNA_VALOR}"
        datasetvalue="${COLUNA_DISPLAY}" addBlankLine="true">
    </select>
</div>
```

## Zoom Field (busca com pesquisa)
```html
<div class="col-xs-12 col-md-6">
    <label>${LABEL}</label>
    <input type="zoom" name="${CAMPO}" id="${CAMPO}"
        data-zoom="{
            'displayKey':'${DISPLAY_KEY}',
            'datasetId':'${DATASET_ID}',
            'filterValues': '${FILTRO_KEY},${FILTRO_VALUE}',
            'maximumSelectionLength':'1',
            'placeholder':'${PLACEHOLDER}',
            'fields':[
                {'field':'${FIELD_1}','label':'${LABEL_1}','standard':'true','search':'true'},
                {'field':'${FIELD_2}','label':'${LABEL_2}'}
            ]
        }" />
    <input type="hidden" name="${CAMPO_HIDDEN}" id="${CAMPO_HIDDEN}" />
</div>
```

## Zoom com constraints (filtro fixo)
```html
<input type="zoom" class="form-control" id="${CAMPO}" name="${CAMPO}"
    data-zoom='{
        "displayKey": "${DISPLAY_KEY}",
        "placeholder": "${PLACEHOLDER}",
        "datasetId": "${DATASET_ID}",
        "maximumSelectionLength": "1",
        "fields": [
            {"field": "${FIELD_1}", "label": "${LABEL_1}", "standard": true},
            {"field": "${FIELD_2}", "label": "${LABEL_2}"}
        ],
        "constraints": [
            {"name": "${CAMPO_FILTRO}", "value": "${VALOR_FILTRO}"}
        ]
    }'>
<input type="hidden" id="hidden_${CAMPO}" name="hidden_${CAMPO}">
```
> **Nota:** Em zooms com `data-zoom` em formato JSON, usar **aspas duplas** (padrao JSON valido).

## Radio Sim/Nao (padrao aprovacao BPM)
```html
<div class="form-group col-xs-12 col-md-12">
    <label>${PERGUNTA}</label><br>
    <div class="custom-radio custom-radio-inline custom-radio-success">
        <input type="radio" name="${CAMPO}" id="${CAMPO}Sim" value="S" />
        <label for="${CAMPO}Sim">Sim</label>
    </div>
    <div class="custom-radio custom-radio-inline custom-radio-danger">
        <input type="radio" name="${CAMPO}" id="${CAMPO}Nao" value="N" />
        <label for="${CAMPO}Nao">Nao</label>
    </div>
</div>
```

## Checkbox estilizado
```html
<div class="custom-checkbox custom-checkbox-primary">
    <input type="checkbox" name="${CAMPO}" id="${CAMPO}" />
    <label for="${CAMPO}">${LABEL}</label>
</div>
```

## Switch (toggle)
```html
<div class="switch switch-primary">
    <input class="switch-input" type="checkbox" name="${CAMPO}" id="${CAMPO}" />
    <label class="switch-button" for="${CAMPO}">${LABEL}</label>
</div>
```

## Campo de data (com icone calendario)
```html
<div class="col-xs-12 col-md-3">
    <label>${LABEL}</label>
    <div class="input-group date">
        <input type="text" class="form-control" name="${CAMPO}" id="${CAMPO}" />
        <span class="input-group-addon">
            <span class="fluigicon fluigicon-calendar"></span>
        </span>
    </div>
</div>
```
JS para inicializar: `FLUIGC.calendar('#${CAMPO}');`

## Campo monetario (com mascara)
```html
<div class="col-xs-12 col-md-3">
    <label>${LABEL}</label>
    <input type="text" class="form-control" name="${CAMPO}" id="${CAMPO}"
        mask="#00.000.000.000.000,00" />
</div>
```
Exige jQuery Mask: `<script src="jquery.mask.min.js"></script>`

## Textarea
```html
<div class="form-group col-xs-12 col-md-12">
    <label for="${CAMPO}">${LABEL}</label>
    <textarea class="form-control" name="${CAMPO}" id="${CAMPO}" rows="4"></textarea>
</div>
```

## Helper text (texto de ajuda)
```html
<div class="form-group col-xs-12 col-md-6">
    <label for="${CAMPO}">${LABEL}</label>
    <input type="text" class="form-control" name="${CAMPO}" id="${CAMPO}" />
    <p class="help-block">${TEXTO_AJUDA}</p>
</div>
```

## Alert (mensagem informativa no formulario)
```html
<div class="alert alert-info" role="alert">
    <strong>Instrucoes:</strong> Preencha todos os campos obrigatorios marcados com <span class="text-danger">*</span>.
</div>
```
Tipos disponiveis: `alert-info`, `alert-success`, `alert-warning`, `alert-danger`

## Tabela Pai-Filho
```html
<div class="col-xs-12 col-md-12 table-responsive">
    <table tablename="${TABELA}" id="${TABELA}" class="table table-hover"
        noaddbutton="true" nodeletebutton="true">
        <thead>
            <tr>
                <th></th><!-- Coluna delete -->
                <th>${COLUNA_1} <span class="text-danger">*</span></th>
                <th>${COLUNA_2}</th>
                <th>${COLUNA_3}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <button class="btn btn-danger btn-sm" name="btDelete${TABELA}"
                        onclick="fnCustomDelete(this, this.name)">
                        <i class="fluigicon fluigicon-trash icon-sm"></i>
                    </button>
                </td>
                <td><input type="text" class="form-control" name="${CAMPO_1}" id="${CAMPO_1}" /></td>
                <td><input type="text" class="form-control" name="${CAMPO_2}" id="${CAMPO_2}" /></td>
                <td><input type="text" class="form-control" name="${CAMPO_3}" id="${CAMPO_3}" /></td>
            </tr>
        </tbody>
    </table>
    <button class="btn btn-primary" type="button"
        onclick="wdkAddChild('${TABELA}')">Novo</button>
</div>
```
