Firma

Firmar un albarán o un consentimiento, de dos formas: dibujando en el recuadro o escribiendo el nombre completo. La segunda no es un adorno: firmar dibujando es imposible con teclado, con un conmutador o con un ratón de cabeza. Se elige con un grupo de botones, y lo elegido manda.

Cuándo usarlo

• La entrega de un pedido, la conformidad de un presupuesto, un consentimiento simple.
• alert para la letra pequeña: a qué se compromete quien firma.
• value y onChange llevan la firma: { mode: 'stroke', image } dibujando (un PNG) o { mode: 'written', name } escribiendo. height cambia el alto del recuadro.
• signatureDone(value) dice si hay algo firmado de verdad (un nombre de tres letras o más, o un trazo), y signatureError(value, mode) qué decir si falta.

Cuándo no

• Solo hace falta aceptar unas condiciones: Checkbox.
• Pedir el nombre sin que valga como firma: TextField.

Teclado: Tab llega al grupo «Cómo quieres firmar», donde las flechas cambian entre «Dibujando» y «Escribiendo», y después al campo del nombre o, si hay un trazo, al botón «Borrar y firmar otra vez». El recuadro de dibujo no se alcanza con el teclado: para eso está firmar escribiendo.

Accesibilidad: el bloque es un grupo que se llama como label y al que describe el alert, así que quien llega tabulando oye qué firma y a qué se compromete. El recuadro se explica solo («Firma dibujando con el dedo o el ratón. Si no puedes, cambia a firmar escribiendo») y el error sale en un role="alert". Cambiar de forma de firmar borra lo anterior. El trazo sale en PNG al levantar el dedo, no en cada punto (un toque sin mover no cuenta como firma), y touch-action: none impide que el móvil tome el trazo por un desplazamiento de la página.

Aspecto fino: sin variables propias: se ajusta con las clases amset-signature__header, amset-signature__box, amset-signature__canvas, amset-signature__footer, amset-signature__alert y amset-signature__error. El trazo se pinta con el color de texto del lienzo. El recuadro ocupa el ancho de su contenedor y dibuja a la resolución real de la pantalla (devicePixelRatio): el trazo cae bajo el dedo a cualquier ancho, y si la caja cambia de tamaño lo firmado se repinta en su sitio.