Money input + monedă

Sumă cu selector de monedă atașat, în două mărimi. Eroul — Inter 700 · 48px · tabular-nums — pe ecranele unde suma e decizia (facturare, one-field-per-screen): autoscale dacă valoarea nu încape, zecimale doar când sunt tastate. Mărimea normală, cât orice alt câmp, pe formulare. La amândouă moneda e select-ul: dropdown inline cu drapele (NU modal), aceeași listă, bifa de brand la capătul rândului ales — nu radio.

Markup canonic · components/money-input.json

sursa = JSON · generat de scripts/build-catalog.py — eroul. Click pe monedă: lista e a select-ului
0

Când folosești · două mărimi

  • Ecran dedicat facturare — suma e câmpul central, restul (client, dată) e secundar. Eroul.
  • Quick add / scadență / sumă target — orice flow unde valoarea în Lei e decizia primară. Eroul.
  • Formular cu 5+ câmpuri — acolo suma nu mai e decizia principală, e un câmp printre altele. Mărimea normală: .input-group cu moneda în addon-ul inline-end — text fix sau select.
Erou · .amount-fieldNormală · .input-group
Suma.amount-value · 48px / 700, tabular.input · 40px — 44 cu .lg, obligatoriu sub 1024px
Moneda.select-trigger.lg · 44px, lângă valoare.select-trigger.sm.bare · 30px, în addon inline-end
Lista.popover.lg, dedusă din trigger · rânduri de 40px la 16px.popover.align-end · rânduri de 36px la 14px
Rândul ales.popover-item.is-selected — bifa .popover-check la capăt + weight 600, fără fundal. Regula e a select-ului, la ambele mărimi.

Default · gol

.amount-field · placeholder „0" · .select-trigger.lg
0
Suma fără TVA, în moneda aleasă.

Activ · focus cu caret

.amount-value.is-active — caret 2px neutru, animație blink (NU brand)
4.250
Suma fără TVA, în moneda aleasă.

Completat · cu zecimale

.amount-dec — span pentru zecimale, font-size 0.44em, color mist
4.250,50
Suma fără TVA, în moneda aleasă.

Disabled · static — moneda nu se alege

.amount-value culoare mist + .select-trigger:disabled (bej-1 bg, chev hidden)
18.500
Suma preluată din factura originală.
.select-trigger.lg.static — moneda e fixă, dar nimic nu e blocat. Fără chevron: n-are ce deschide
4.250
Contul facturează doar în Lei.

Eroare · pe sumă

.amount-field.is-error — value + dec devin var(--c-error); .field-help.error pentru mesaj
120.000
Suma depășește plafonul de 50.000 Lei pe factură. Împarte în mai multe facturi.

Eroare · pe selector monedă

.select-trigger.lg.error — border + bg eroare; valoarea rămâne neutră. Moneda se poate schimba, deci trigger-ul deschide lista
4.250
Nu am cursul BNR pentru GBP azi. Alege altă monedă sau încearcă mai târziu.

Mărime normală · în formular

Pe un formular cu 5+ câmpuri suma e un câmp printre altele, deci are înălțimea lor: un .input-group de 40px — 44 cu .lg, obligatoriu sub 1024px — cu moneda în addon-ul inline-end. Moneda rămâne select-ul, la treapta care încape în carcasă: .select-trigger.sm.bare — 30px și fără chenar, fiindcă bordura e deja a carcasei. Lista e aceeași ca la erou, la mărimea implicită, și pleacă din dreapta (.popover.align-end). Moneda fixă nu e un control: e text, .input-group-text.ink.

deschis · .popover.align-end — lista pleacă din marginea câmpului; bifa pe rândul ales. Halo-ul e al carcasei; moneda își ține doar fill-ul bej
repaus · monedă fixă · eroare · dezactivat · .lg — trigger-ul rămâne .sm.bare și în carcasa de 44px
Lei
Avansul depășește totalul facturii.

Reguli

  1. Două mărimi, o singură monedă — eroul (.amount-field) pe ecranul unde suma e decizia; mărimea normală (.input-group) pe formulare cu 5+ câmpuri. Eroul nu se micșorează ca să intre într-un formular.
  2. Inter 700 · 48px · tabular-nums la erou — non-negociabil. Hero size pentru valoare.
  3. Zecimale doar dacă sunt tastate (sau preluate). Niciodată „0,00" în placeholder — placeholder e doar „0" gri mist.
  4. Caret neutru (ink 2px), NU pink — accent pe sumă vine din mărime, nu din culoare.
  5. Selector lângă valoare, NU sub. Poziția selector-ului nu se schimbă între monede.
  6. Dropdown inline, NU modal. Click în afară / Escape închide.
  7. Autoscale pentru valori lungi — fontul scade de la 48 la min 20px. Implementare în JS consumer.
  8. Selectorul nu-și are propriul CSS — e .select-anchor + .select-trigger (components/select.html): .lg lângă erou, .sm.bare în addon la mărime normală. Din .amount-row primește doar greutatea 600 și padding-ul strâns: e însoțitorul unei valori, nu un câmp de formular. .cur-select / .cur-select-trigger rămân valide ca alias-uri (v8.0), se scot cel mai devreme la N+2.
  9. Lista e a select-ului, la ambele mărimi — role="listbox", rânduri .popover-item cu drapel și cod. Rândul ales e .is-selected + aria-selected="true": bifa .popover-check la capăt și weight 600, fără fundal. Bifa stă pe toate rândurile și se aprinde pe cel ales. Nu radio — ăla era markupul din v8.1.
  10. Moneda e o valoare, nu o acțiune — în addon e .select-trigger, nu .btn. Fixă: .input-group-text.ink „Lei" la mărime normală, .static fără chevron la erou.
  11. Eroare pe sumă → .amount-field.is-error la erou, .input-group.error la mărime normală. Eroare pe monedă → .select-trigger.error (trigger devine error, valoarea rămâne neutră).