Gales Clipboard

Versao: 1.0.0 Data: 13/03/2026

---

Visao Geral

O componente Gales Clipboard implementa um smart clipboard para copiar dados formatados do sistema. Oferece um menu de opcoes de copia e uma confirmacao antes de colar dados via SmartPaste. Integra-se com os componentes Toast (feedback visual) e Modal (confirmacao de colagem).

---

Estrutura HTML

Menu de Copia

<div class="sidasp-clipboard-copy-menu">
    <button class="sidasp-clipboard-copy-menu__trigger" title="Copiar dados">
        <i class="material-icons">content_copy</i>
    </button>
    <div class="sidasp-clipboard-copy-menu__dropdown">
        <button class="sidasp-clipboard-copy-menu__item" data-copy="json">
            Copiar como JSON
        </button>
        <button class="sidasp-clipboard-copy-menu__item" data-copy="text">
            Copiar como Texto
        </button>
        <button class="sidasp-clipboard-copy-menu__item" data-copy="csv">
            Copiar como CSV
        </button>
    </div>
</div>

Estado de Carregamento

<div class="sidasp-clipboard-copy-menu sidasp-clipboard-copy-menu--loading">
    <button class="sidasp-clipboard-copy-menu__trigger" disabled>
        <i class="material-icons">hourglass_empty</i>
    </button>
</div>

Confirmacao SmartPaste (via Modal)

<div class="modal">
    <div class="modal__content">
        <div class="modal__header">
            <h3>Confirmar SmartPaste</h3>
        </div>
        <div class="modal__body">
            <p>Os seguintes campos serao preenchidos automaticamente:</p>
            <ul class="sidasp-clipboard-paste-preview">
                <li><strong>Nome:</strong> Fazenda Boa Vista</li>
                <li><strong>Municipio:</strong> Goiania - GO</li>
            </ul>
        </div>
        <div class="modal__footer">
            <button class="btn btn--secondary">Cancelar</button>
            <button class="btn btn--primary">Confirmar</button>
        </div>
    </div>
</div>

---

Funcionalidades

1. Menu de copia formatada -- utiliza o padrao dropdown do design system para oferecer diferentes formatos de copia (JSON, texto, CSV)
2. Estado de carregamento -- classe .sidasp-clipboard-copy-menu--loading desabilita o botao e exibe icone de espera enquanto os dados sao preparados
3. Feedback via Toast -- apos a copia, exibe uma notificacao Toast confirmando o sucesso da operacao
4. Confirmacao SmartPaste -- antes de colar dados em um formulario, exibe um Modal com preview dos campos que serao preenchidos, permitindo ao usuario revisar e confirmar

---

Classes CSS

Classe	Descricao
.sidasp-clipboard-copy-menu	Container principal do menu de copia
.sidasp-clipboard-copy-menu__trigger	Botao que abre o menu
.sidasp-clipboard-copy-menu__dropdown	Painel dropdown com opcoes de formato
.sidasp-clipboard-copy-menu__item	Item individual do menu
.sidasp-clipboard-copy-menu--loading	Estado de carregamento
.sidasp-clipboard-paste-preview	Lista de preview dos dados a colar

---

Dependencias

• Dropdown -- o menu de copia utiliza o componente Dropdown base
• Toast -- feedback apos operacao de copia
• Modal -- dialogo de confirmacao do SmartPaste

---

Dark Mode

O menu de copia herda o dark mode do componente Dropdown. O modal de confirmacao segue o padrao dark mode do Modal. Os icones e textos ajustam contraste automaticamente conforme o tema ativo.

---

Mantido por: Equipe Ipeweb