`;
// animação ao inserir
requestAnimationFrame(() => {
card.classList.add('show');
});
// restante (remove, máscara de moeda, etc.)
card.querySelector('.bond-remove').addEventListener('click', () => {
selectedMap.delete(bond.id);
positionValues.delete(bond.id);
const input = elList.querySelector('input[data-bondid="' + bond.id + '"]');
if (input) input.checked = false;
syncState();
});
const inputMoney = card.querySelector('#val_' + bond.id);
inputMoney.addEventListener('input', (e) => {
const num = parseToNumber(e.target.value);
positionValues.set(bond.id, num);
e.target.value = formatBRL(num);
syncHidden();
});
inputMoney.addEventListener('blur', (e) => {
const num = parseToNumber(e.target.value);
e.target.value = formatBRL(num);
});
elCards.appendChild(card);
});
}
// === Sync helpers ===
function syncHidden(){
// salva JSON com valorPosicao (número) + ytw, etc.
const payload = Array.from(selectedMap.values()).map(({id,name,ticker,maturity,maturityBR,ytw}) => ({
id, name, ticker, maturity, maturityBR, ytw,
valorPosicao: positionValues.get(id) || 0
}));
elHidden.value = JSON.stringify(payload);
// dispara change para integrações externas (ex.: Elementor)
elHidden.dispatchEvent(new Event('change',{bubbles:true}));
}
function syncState(){
// Mantém o placeholder sempre visível
elToggle.classList.toggle('has-selection', selectedMap.size > 0);
renderCards();
syncHidden();
}
function applyFilter(term){
const q = term.trim().toLowerCase();
filtered = q ? BONDS.filter(b =>
b.name.toLowerCase().includes(q) ||
b.maturityBR.includes(q) ||
b.maturity.includes(q)
) : [...BONDS];
resetAndRender();
}
// === Eventos ===
elToggle.addEventListener('click',()=>{ elPanel.classList.contains('open') ? closePanel() : openPanel(); });
document.addEventListener('click',e=>{ if(!e.target.closest('.bond-multiselect')) closePanel(); });
elSearch.addEventListener('input',e=>applyFilter(e.target.value));
elList.addEventListener('scroll',()=>{ if(elList.scrollTop + elList.clientHeight >= elList.scrollHeight - 10 && renderedCount {
if(e.target && e.target.matches('input[type="checkbox"]')){
const id = e.target.dataset.bondid;
const bond = BONDS.find(b => b.id === id);
if (!bond) return;
if (e.target.checked) {
selectedMap.set(id, bond);
if (!positionValues.has(id)) positionValues.set(id, 0);
} else {
selectedMap.delete(id);
positionValues.delete(id);
}
syncState();
}
});
// Init
resetAndRender();
syncState();
})();