Todos los componentes (204)

Líneas de factura

Gestión · InvoiceLinesEditor · .amset-invoice

Qué es y cuándo usarlo

Las líneas de una factura, editables: concepto, cantidad, precio unitario, descuento, IVA y retención de IRPF por línea, con el importe de cada una y debajo el desglose: base imponible, IVA por tipo, retención por tipo y total.

Cómo calcula (calculateInvoice, que también sale suelta)

Cada línea: cantidad × precio, menos el descuento, redondeada al céntimo.
El IVA y la retención se calculan una vez por tipo, sobre la suma de las bases de ese tipo: así cuadran con el desglose que lleva la factura (calcularlos línea a línea descuadra céntimos).
El recargo de equivalencia (cliente en ese régimen, típico del comercio minorista) se suma al IVA según su tipo: 5,2 % con el 21 %, 1,4 % con el 10 % y 0,5 % con el 4 % (art. 161 de la Ley 37/1992). Tiene su fila en el desglose, también una vez por tipo.
Total = base + IVA + recargo − retención. Una cantidad negativa es un abono.

Cuándo usarlo

Emitir facturas, presupuestos o abonos. onChange entrega las líneas y los totales ya calculados.
equivalenceSurcharge pone el recargo de equivalencia en TODA la factura; con surchargePerLine cada línea trae su casilla «Recargo de equivalencia» y la de la línea manda sobre la de la factura. surchargeRates cambia los tipos (por ejemplo el transitorio del 0,62 % con el 5 %, que no va por defecto).
withWithholding={false} quita la columna de IRPF; vatRates y withholdingRates cambian los tipos que se ofrecen (IGIC de Canarias, otro país); minLines y maxLines acotan cuántas líneas hay.

Cuándo no

Solo mostrar una factura ya emitida: una Table o OrderSummary.
Varias monedas en la misma factura o prorrata: no los trae. Tampoco decide si tu cliente está en recargo de equivalencia: eso lo sabes tú y se lo dices con equivalenceSurcharge.

Teclado: las líneas se recorren con Tab. «Añadir línea» deja el foco en el concepto de la nueva; al quitar una, el foco pasa a la anterior.

Accesibilidad: cada línea es un grupo («Línea 2»); añadir y quitar se anuncian; el total va en role="status". En pantalla ancha las etiquetas se ven solo en la primera línea y siguen presentes para el lector en las demás.

Cómo se ve

Líneas de la factura

Concepto

Cantidad

Precio unitario

Descuento (%)

IVA

IRPF

Importe1800,00 €

Concepto

Cantidad

Precio unitario

Descuento (%)

IVA

IRPF

Importe324,00 €

Concepto

Cantidad

Precio unitario

Descuento (%)

IVA

IRPF

Importe74,70 €

Base imponible: 2198,70 €
IVA 21 % sobre 2124,00 €: 446,04 €
IVA 4 % sobre 74,70 €: 2,99 €
Retención IRPF 15 % sobre 2124,00 €: -318,60 €
Total factura: Total factura: 2329,13 €

<InvoiceLinesEditor
  label="Líneas de la factura"
  initialValue={lineas}
  onChange={setLineas}
/>

Props

Se importa con import { InvoiceLinesEditor } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: nombra el grupo de lineas para el lector de pantalla.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`currency`	`string`	La moneda. `EUR` por defecto.
`defaultVatRate`	`number`	El IVA de una linea nueva. Por defecto, 21.
`disabled`	`boolean`	—
`equivalenceSurcharge`	`boolean`	Recargo de equivalencia en TODA la factura (cliente en ese regimen: comercio minorista). Se suma al IVA de cada linea segun su tipo (5,2 % con el 21 %, 1,4 % con el 10 %, 0,5 % con el 4 %) y sale en el desglose. Por defecto, `false`.
`error`	`string`	Error de fuera (del servidor).
`hint`	`string`	—
`initialValue`	`readonly InvoiceLine[]`	Las lineas al empezar, sin controlarlas desde fuera. Sin ellas, una linea vacia.
`maxLines`	`number`	Lo maximo de lineas. Sin tope por defecto.
`minLines`	`number`	Lo minimo de lineas: no se puede quitar por debajo. Por defecto, 1.
`onChange`	`(lines: readonly InvoiceLine[], totals: InvoiceTotals) => void`	Avisa con las lineas y los totales ya calculados cada vez que algo cambia.
`readOnly`	`boolean`	—
`surchargePerLine`	`boolean`	Una casilla «Recargo de equivalencia» en cada linea, para decidirlo linea a linea: la casilla de una linea manda sobre `equivalenceSurcharge`. Por defecto, `false`.
`surchargeRates`	`Readonly<Record<number, number>>`	El recargo de cada tipo de IVA, en porcentaje. Por defecto, los españoles vigentes (`SPANISH_SURCHARGE_RATES`).
`value`	`readonly InvoiceLine[]`	Las lineas, controladas desde fuera.
`vatRates`	`readonly number[]`	Los tipos de IVA que se ofrecen. Por defecto, los españoles (21, 10, 4 y 0).
`withholdingRates`	`readonly number[]`	Las retenciones de IRPF que se ofrecen. Por defecto, 0, 7, 15 y 19.
`withWithholding`	`boolean`	Con `false` no hay columna de retencion. Por defecto, `true`.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-invoice-gap`	`var(--amset-space-3)`

Cómo se cambia

.amset-invoice {
  --amset-invoice-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: