@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-signature-pad.mjs

@@ -0,0 +1,654 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, DestroyRef, model, input, booleanAttribute, numberAttribute, output, signal, computed, viewChild, ElementRef, afterNextRender, untracked, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
+import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
+
+/** Tipografías manuscritas del sistema (sin descargar fuentes) para el modo escrito. */
+const CB_SIGNATURE_FONT = "'Segoe Script', 'Bradley Hand', 'Brush Script MT', 'Snell Roundhand', 'URW Chancery L', cursive";
+const r = (n) => Math.round(n * 100) / 100;
+/**
+ * Convierte un trazo en segmentos de curva (cuadráticas por los puntos medios) con grosor
+ * variable: más fino cuanto más rápido se mueve el trazo y más grueso con más presión.
+ * Un toque sin movimiento es un punto.
+ */
+function strokeSegments(stroke, minWidth, maxWidth) {
+    if (!stroke.length)
+        return [];
+    const widthAt = (speed, pressure) => {
+        const bySpeed = maxWidth - (maxWidth - minWidth) * Math.min(1, speed / 2.5);
+        // Ratón y dedo informan 0.5 (o 0): no alteran el grosor.
+        const byPressure = pressure > 0 && pressure !== 0.5 ? 0.6 + pressure * 0.8 : 1;
+        return Math.max(minWidth * 0.5, bySpeed * byPressure);
+    };
+    if (stroke.length === 1) {
+        const p = stroke[0];
+        return [{ d: `M${r(p.x)} ${r(p.y)}l0 0.01`, width: r(maxWidth * 1.1) }];
+    }
+    const segments = [];
+    let width = widthAt(0, stroke[0].p);
+    const mid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
+    for (let i = 1; i < stroke.length; i++) {
+        const a = stroke[i - 1];
+        const b = stroke[i];
+        const dist = Math.hypot(b.x - a.x, b.y - a.y);
+        const speed = dist / Math.max(1, b.t - a.t);
+        // Suavizado del grosor para que no dé saltos entre segmentos.
+        width = width * 0.65 + widthAt(speed, b.p) * 0.35;
+        const from = i === 1 ? a : mid(stroke[i - 2], a);
+        const to = i === stroke.length - 1 ? b : mid(a, b);
+        const d = i === 1 && stroke.length > 2
+            ? `M${r(from.x)} ${r(from.y)}L${r(to.x)} ${r(to.y)}`
+            : `M${r(from.x)} ${r(from.y)}Q${r(a.x)} ${r(a.y)} ${r(to.x)} ${r(to.y)}`;
+        segments.push({ d, width: r(width) });
+    }
+    return segments;
+}
+/** Tamaño de letra estimado del nombre escrito (el componente lo ajusta midiendo el texto pintado). */
+function typedFontSize(text, width, height) {
+    const chars = Math.max(1, text.trim().length);
+    return Math.round(Math.min(height * 0.42, (width * 0.85) / (chars * 0.55)));
+}
+function escapeXml(text) {
+    return text.replace(/[<>&'"]/g, (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;', "'": '&apos;', '"': '&quot;' })[c]);
+}
+/** ¿Hay algo firmado? */
+function isSignatureEmpty(data) {
+    return data.text !== undefined ? !data.text.trim() : !data.strokes.length;
+}
+/**
+ * La firma como documento SVG independiente (sin dependencias de la página). `background`
+ * vacío o `transparent` lo deja sin fondo; `image` es una firma previa que va debajo.
+ */
+function signatureToSvg(data, options) {
+    const { width: w, height: h } = data;
+    const parts = [];
+    if (options.background && options.background !== 'transparent') {
+        parts.push(`<rect width="${w}" height="${h}" fill="${escapeXml(options.background)}"/>`);
+    }
+    if (options.image)
+        parts.push(`<image href="${escapeXml(options.image)}" width="${w}" height="${h}" preserveAspectRatio="xMidYMid meet"/>`);
+    if (data.text !== undefined) {
+        if (data.text.trim()) {
+            const size = options.fontSize ?? typedFontSize(data.text, w, h);
+            parts.push(`<text x="${w / 2}" y="${r(h * 0.62)}" text-anchor="middle" font-family="${escapeXml(options.font ?? CB_SIGNATURE_FONT)}" font-size="${size}" fill="${escapeXml(data.color)}">${escapeXml(data.text.trim())}</text>`);
+        }
+    }
+    else {
+        const paths = data.strokes
+            .flatMap((s) => strokeSegments(s, options.minWidth, options.maxWidth))
+            .map((seg) => `<path d="${seg.d}" stroke-width="${seg.width}"/>`);
+        if (paths.length) {
+            parts.push(`<g fill="none" stroke="${escapeXml(data.color)}" stroke-linecap="round" stroke-linejoin="round">${paths.join('')}</g>`);
+        }
+    }
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${parts.join('')}</svg>`;
+}
+/** Data URL de un SVG. */
+function svgDataUrl(svg) {
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+/** Pinta el SVG en un canvas y lo devuelve como PNG o JPEG (a `scale` × el tamaño, para que no pixele). */
+async function rasterize(svg, width, height, type, scale = 2) {
+    const img = new Image();
+    img.src = svgDataUrl(svg);
+    await img.decode();
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.round(width * scale);
+    canvas.height = Math.round(height * scale);
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('canvas 2d no disponible');
+    if (type === 'jpeg') {
+        // JPEG no tiene transparencia: fondo blanco si la firma no trae uno.
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL(`image/${type}`, 0.92);
+}
+
+let nextUid = 0;
+/**
+ * Firma digital de CaribeNG: área para firmar con ratón, dedo o lápiz (grosor según velocidad y
+ * presión) o, como alternativa accesible, escribiendo el nombre en letra manuscrita. Devuelve la
+ * firma como PNG, JPEG o SVG (`[(value)]`, también con Angular Forms) y permite deshacer y borrar.
+ *
+ * @example
+ * ```html
+ * <cb-signature-pad [(value)]="firma" format="png" />
+ * ```
+ */
+class CbSignaturePad {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.hintId = `cb-signature-${++nextUid}-hint`;
+        /** Firma como data URL en `format` (`''` si está vacía). Una firma que llega de fuera se muestra de fondo. */
+        this.value = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Formato de `value`: PNG (por defecto), JPEG (fondo blanco) o SVG. */
+        this.format = input('png', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /** Dibujar a mano o escribir el nombre. */
+        this.mode = model('draw', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Ofrece el modo escrito, la alternativa para quien no puede dibujar (teclado, lector de pantalla). */
+        this.typing = input(true, { ...(ngDevMode ? { debugName: "typing" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.penColor = input('#1e293b', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "penColor" }] : /* istanbul ignore next */ []));
+        /** Fondo del área y de la imagen exportada (`transparent` para PNG o SVG sin fondo). */
+        this.background = input('#ffffff', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+        /** Grosor mínimo y máximo del trazo (en píxeles del área). */
+        this.minWidth = input(1, { ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.maxWidth = input(3.2, { ...(ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.height = input('11rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Tipografía del nombre escrito (por defecto, manuscritas del sistema). */
+        this.font = input(CB_SIGNATURE_FONT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "font" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Nombre del área (por defecto, "Área de firma"). */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Empieza un trazo. */
+        this.signStart = output();
+        /** Termina un trazo o cambia el nombre escrito (con la firma completa). */
+        this.signEnd = output();
+        this.cleared = output();
+        this.fieldState = cbFieldState({ invalid: () => this.invalid() });
+        this.cvaDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.strokes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strokes" }] : /* istanbul ignore next */ []));
+        this.current = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+        this.text = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Firma previa (de `value`), pintada de fondo. */
+        this.image = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+        /** Tamaño lógico del lienzo (el del área al montarse). */
+        this.box = signal({ w: 600, h: 200 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.canDraw = computed(() => this.mode() === 'draw' && !this.isDisabled() && !this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canDraw" }] : /* istanbul ignore next */ []));
+        this.segments = computed(() => {
+            const min = this.minWidth();
+            const max = this.maxWidth();
+            return [...this.strokes(), this.current()].flatMap((s) => strokeSegments(s, min, max));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+        /** Tamaño medido para que el nombre quepa (cada tipografía manuscrita tiene su ancho). */
+        this.fittedSize = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fittedSize" }] : /* istanbul ignore next */ []));
+        this.fontSize = computed(() => this.fittedSize() ?? typedFontSize(this.text(), this.box().w, this.box().h), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+        this.empty = computed(() => isSignatureEmpty(this.data()) && !this.image(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+        this.padLabel = computed(() => {
+            const t = this.t();
+            return `${this.ariaLabel() || t.signaturePad}: ${this.empty() ? t.signatureEmptyState : t.signatureSignedState}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "padLabel" }] : /* istanbul ignore next */ []));
+        this.svg = viewChild('svg', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
+        this.pointerId = null;
+        this.lastEmitted = '';
+        this.emitToken = 0;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.announceFlip = false;
+        const registry = inject(CbIconRegistry);
+        for (const [name, body] of Object.entries(ICONS)) {
+            if (!registry.has(name))
+                registry.register({ [name]: body });
+        }
+        // El lienzo toma el tamaño del área (mientras está vacío, también si cambia).
+        const host = inject(ElementRef);
+        afterNextRender(() => {
+            const measure = () => {
+                const el = this.svg()?.nativeElement;
+                if (!el || !untracked(this.empty))
+                    return;
+                const { width, height } = el.getBoundingClientRect();
+                if (width > 0 && height > 0)
+                    this.box.set({ w: Math.round(width), h: Math.round(height) });
+            };
+            measure();
+            if (typeof ResizeObserver !== 'undefined') {
+                const ro = new ResizeObserver(measure);
+                ro.observe(host.nativeElement);
+                this.destroyRef.onDestroy(() => ro.disconnect());
+            }
+        });
+        // Valor que llega de fuera (no el que emitimos): se muestra como firma previa.
+        effect(() => {
+            const value = this.value() ?? '';
+            untracked(() => {
+                if (value === this.lastEmitted)
+                    return;
+                this.lastEmitted = value;
+                this.strokes.set([]);
+                this.current.set([]);
+                this.text.set('');
+                this.image.set(value);
+            });
+        });
+    }
+    // --- API pública ---
+    /** La firma actual (trazos o nombre escrito), para guardarla y restaurarla con `setData`. */
+    data() {
+        const { w, h } = this.box();
+        return this.mode() === 'type'
+            ? { width: w, height: h, strokes: [], text: this.text(), color: this.penColor() }
+            : { width: w, height: h, strokes: this.strokes(), color: this.penColor() };
+    }
+    /** Restaura una firma guardada con `data()`. */
+    setData(data) {
+        this.box.set({ w: data.width, h: data.height });
+        this.image.set('');
+        if (data.text !== undefined) {
+            this.mode.set('type');
+            this.text.set(data.text);
+            this.strokes.set([]);
+        }
+        else {
+            this.mode.set('draw');
+            this.strokes.set(data.strokes);
+            this.text.set('');
+        }
+        this.emit();
+    }
+    /** La firma como SVG independiente. */
+    toSvg() {
+        return signatureToSvg(this.data(), {
+            minWidth: this.minWidth(),
+            maxWidth: this.maxWidth(),
+            background: this.background(),
+            font: this.font(),
+            fontSize: this.mode() === 'type' ? this.fontSize() : undefined,
+            image: this.image() || undefined,
+        });
+    }
+    /** La firma como data URL (PNG y JPEG se generan en un canvas, de forma asíncrona). */
+    async toDataUrl(format = this.format()) {
+        if (this.empty())
+            return '';
+        const svg = this.toSvg();
+        if (format === 'svg')
+            return svgDataUrl(svg);
+        const { w, h } = this.box();
+        return rasterize(svg, w, h, format);
+    }
+    /** Borra la firma. */
+    clear() {
+        if (this.empty())
+            return;
+        this.strokes.set([]);
+        this.current.set([]);
+        this.text.set('');
+        this.image.set('');
+        this.emit();
+        this.cleared.emit();
+        this.announce(this.t().signatureCleared);
+    }
+    /** Deshace el último trazo. */
+    undo() {
+        if (!this.strokes().length)
+            return;
+        this.strokes.update((s) => s.slice(0, -1));
+        this.emit();
+        this.announce(this.t().signatureUndone);
+    }
+    // --- ControlValueAccessor ---
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.cvaDisabled.set(disabled);
+    }
+    // --- Eventos ---
+    setMode(mode) {
+        if (mode === this.mode())
+            return;
+        this.mode.set(mode);
+        this.emit();
+        if (mode === 'type') {
+            afterNextRender(() => this.svg()?.nativeElement.closest('.cb-signature-pad')?.querySelector('.cb-sig__input')?.focus(), {
+                injector: this.injector,
+            });
+        }
+    }
+    onType(event) {
+        this.text.set(event.target.value);
+        this.image.set('');
+        this.fittedSize.set(null);
+        // Tras pintar, se mide el texto y se reduce si no cabe; después se emite con ese tamaño.
+        afterNextRender(() => {
+            this.fitText();
+            this.emit();
+            this.signEnd.emit(this.data());
+        }, { injector: this.injector });
+    }
+    fitText() {
+        const text = this.svg()?.nativeElement.querySelector('text');
+        const width = text && typeof text.getComputedTextLength === 'function' ? text.getComputedTextLength() : 0;
+        const max = this.box().w * 0.9;
+        if (width > max)
+            this.fittedSize.set(Math.floor(this.fontSize() * (max / width)));
+    }
+    onPointerDown(event) {
+        if (!this.canDraw() || (event.pointerType === 'mouse' && event.button !== 0))
+            return;
+        event.preventDefault();
+        this.pointerId = event.pointerId;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        this.current.set([this.point(event)]);
+        this.signStart.emit();
+    }
+    onPointerMove(event) {
+        if (this.pointerId !== event.pointerId)
+            return;
+        const events = typeof event.getCoalescedEvents === 'function' ? event.getCoalescedEvents() : [];
+        const list = events.length ? events : [event];
+        const pts = [...this.current()];
+        for (const e of list) {
+            const p = this.point(e);
+            const last = pts[pts.length - 1];
+            // Puntos casi encima del anterior solo añaden ruido.
+            if (!last || Math.hypot(p.x - last.x, p.y - last.y) > 0.75)
+                pts.push(p);
+        }
+        this.current.set(pts);
+    }
+    onPointerUp(event) {
+        if (this.pointerId !== event.pointerId)
+            return;
+        this.pointerId = null;
+        const stroke = this.current();
+        this.current.set([]);
+        if (!stroke.length)
+            return;
+        const wasEmpty = this.empty();
+        this.strokes.update((s) => [...s, stroke]);
+        this.emit();
+        this.onTouched();
+        this.signEnd.emit(this.data());
+        if (wasEmpty)
+            this.announce(this.t().signatureSignedState);
+    }
+    // --- Internos ---
+    point(event) {
+        const rect = (this.svg()?.nativeElement ?? event.currentTarget).getBoundingClientRect();
+        const { w, h } = this.box();
+        // Sin tamaño (área oculta o sin maquetar) se usan las coordenadas tal cual.
+        const x = rect.width ? ((event.clientX - rect.left) / rect.width) * w : event.clientX;
+        const y = rect.height ? ((event.clientY - rect.top) / rect.height) * h : event.clientY;
+        return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10, t: Math.round(event.timeStamp), p: event.pressure ?? 0.5 };
+    }
+    /** Recalcula `value` (PNG y JPEG llegan cuando termina el canvas; uno viejo se descarta). */
+    emit() {
+        const token = ++this.emitToken;
+        const publish = (url) => {
+            if (token !== this.emitToken)
+                return;
+            this.lastEmitted = url;
+            this.value.set(url);
+            this.onChange(url);
+        };
+        if (this.empty()) {
+            publish('');
+            return;
+        }
+        if (this.format() === 'svg') {
+            publish(svgDataUrl(this.toSvg()));
+            return;
+        }
+        this.toDataUrl().then(publish, () => publish(svgDataUrl(this.toSvg())));
+    }
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    announce(text) {
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSignaturePad, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbSignaturePad, isStandalone: true, selector: "cb-signature-pad", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, typing: { classPropertyName: "typing", publicName: "typing", isSignal: true, isRequired: false, transformFunction: null }, penColor: { classPropertyName: "penColor", publicName: "penColor", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mode: "modeChange", signStart: "signStart", signEnd: "signEnd", cleared: "cleared" }, host: { properties: { "class.cb-is-disabled": "isDisabled()", "class.cb-is-invalid": "fieldState.invalid()" }, classAttribute: "cb-signature-pad" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbSignaturePad), multi: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="cb-sig__bar">
+      @if (typing()) {
+        <div class="cb-sig__modes" role="group" [attr.aria-label]="t().signatureModes">
+          <button type="button" class="cb-sig__mode" [attr.aria-pressed]="mode() === 'draw'" [disabled]="isDisabled() || readonly()" (click)="setMode('draw')">
+            <cb-icon name="pencil" [size]="15" aria-hidden="true" />
+            {{ t().signatureDraw }}
+          </button>
+          <button type="button" class="cb-sig__mode" [attr.aria-pressed]="mode() === 'type'" [disabled]="isDisabled() || readonly()" (click)="setMode('type')">
+            <cb-icon name="cb-type" [size]="15" aria-hidden="true" />
+            {{ t().signatureType }}
+          </button>
+        </div>
+      }
+      <span class="cb-sig__spacer"></span>
+      @if (!readonly()) {
+        @if (mode() === 'draw') {
+          <button
+            type="button"
+            class="cb-sig__tool"
+            [attr.aria-label]="t().signatureUndo"
+            [attr.title]="t().signatureUndo"
+            [disabled]="isDisabled() || !strokes().length"
+            (click)="undo()"
+          >
+            <cb-icon name="cb-undo" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <button type="button" class="cb-sig__tool" [attr.aria-label]="t().signatureClear" [attr.title]="t().signatureClear" [disabled]="isDisabled() || empty()" (click)="clear()">
+          <cb-icon name="trash" [size]="16" aria-hidden="true" />
+        </button>
+      }
+    </div>
+
+    <div class="cb-sig__pad" [style.height]="height()" [style.background]="background() === 'transparent' ? null : background()">
+      <svg
+        #svg
+        class="cb-sig__svg"
+        [class.cb-sig__svg--draw]="canDraw()"
+        [attr.viewBox]="'0 0 ' + box().w + ' ' + box().h"
+        preserveAspectRatio="none"
+        role="img"
+        [attr.aria-label]="padLabel()"
+        [attr.aria-describedby]="hintId"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (lostpointercapture)="onPointerUp($event)"
+      >
+        @if (image()) {
+          <image [attr.href]="image()" [attr.width]="box().w" [attr.height]="box().h" preserveAspectRatio="xMidYMid meet" />
+        }
+        @if (mode() === 'type') {
+          @if (text().trim()) {
+            <text
+              [attr.x]="box().w / 2"
+              [attr.y]="box().h * 0.62"
+              text-anchor="middle"
+              [attr.font-family]="font()"
+              [attr.font-size]="fontSize()"
+              [attr.fill]="penColor()"
+            >{{ text().trim() }}</text>
+          }
+        } @else {
+          <g fill="none" [attr.stroke]="penColor()" stroke-linecap="round" stroke-linejoin="round">
+            @for (seg of segments(); track $index) {
+              <path [attr.d]="seg.d" [attr.stroke-width]="seg.width" />
+            }
+          </g>
+        }
+      </svg>
+      <span class="cb-sig__line" aria-hidden="true"><span class="cb-sig__x">×</span></span>
+      @if (empty() && mode() === 'draw') {
+        <span class="cb-sig__placeholder" aria-hidden="true">{{ placeholder() ?? t().signaturePlaceholder }}</span>
+      }
+    </div>
+
+    @if (mode() === 'type') {
+      <label class="cb-sig__type">
+        <span class="cb-sig__type-label">{{ t().signatureTypeLabel }}</span>
+        <input
+          #typeInput
+          type="text"
+          class="cb-sig__input"
+          autocomplete="name"
+          [value]="text()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+          [attr.aria-required]="fieldState.required() || null"
+          (input)="onType($event)"
+          (blur)="onTouched()"
+        />
+      </label>
+    }
+
+    <span class="cb-sig__sr" [id]="hintId">{{ typing() ? t().signatureHint : t().signatureHintDraw }}</span>
+    <span class="cb-sig__sr" aria-live="polite">{{ announcement() }}</span>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:.5rem;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-sig__bar{display:flex;align-items:center;gap:.5rem;min-height:2rem}.cb-sig__spacer{flex:1}.cb-sig__modes{display:inline-flex;padding:2px;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px)}.cb-sig__mode{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-sig__mode:hover:not(:disabled){color:var(--cb-color-text)}.cb-sig__mode[aria-pressed=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-sig__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-sig__tool:hover:not(:disabled){background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-sig__mode:disabled,.cb-sig__tool:disabled{opacity:.45;cursor:not-allowed}.cb-sig__pad{position:relative;overflow:hidden;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-lg, 8px)}:host(.cb-is-invalid) .cb-sig__pad{border-color:var(--cb-color-danger)}:host(.cb-is-disabled) .cb-sig__pad{opacity:.6}.cb-sig__svg{position:relative;z-index:1;display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.cb-sig__svg--draw{cursor:crosshair}.cb-sig__line{position:absolute;right:8%;bottom:24%;left:8%;border-bottom:1px solid #cbd5e1;pointer-events:none}.cb-sig__x{position:absolute;bottom:.125rem;left:0;color:#94a3b8;font-size:1rem;line-height:1}.cb-sig__placeholder{position:absolute;top:50%;left:50%;color:#94a3b8;transform:translate(-50%,-80%);pointer-events:none}.cb-sig__type{display:flex;flex-direction:column;gap:.25rem}.cb-sig__type-label{font-weight:var(--cb-font-weight-medium, 500)}.cb-sig__input{min-height:2.5rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text);font:inherit}.cb-sig__input[aria-invalid=true]{border-color:var(--cb-color-danger)}.cb-sig__mode:focus-visible,.cb-sig__tool:focus-visible,.cb-sig__input:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-sig__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbSignaturePad, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-signature-pad', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CbSignaturePad), multi: true }], host: {
+                        class: 'cb-signature-pad',
+                        '[class.cb-is-disabled]': 'isDisabled()',
+                        '[class.cb-is-invalid]': 'fieldState.invalid()',
+                    }, template: `
+    <div class="cb-sig__bar">
+      @if (typing()) {
+        <div class="cb-sig__modes" role="group" [attr.aria-label]="t().signatureModes">
+          <button type="button" class="cb-sig__mode" [attr.aria-pressed]="mode() === 'draw'" [disabled]="isDisabled() || readonly()" (click)="setMode('draw')">
+            <cb-icon name="pencil" [size]="15" aria-hidden="true" />
+            {{ t().signatureDraw }}
+          </button>
+          <button type="button" class="cb-sig__mode" [attr.aria-pressed]="mode() === 'type'" [disabled]="isDisabled() || readonly()" (click)="setMode('type')">
+            <cb-icon name="cb-type" [size]="15" aria-hidden="true" />
+            {{ t().signatureType }}
+          </button>
+        </div>
+      }
+      <span class="cb-sig__spacer"></span>
+      @if (!readonly()) {
+        @if (mode() === 'draw') {
+          <button
+            type="button"
+            class="cb-sig__tool"
+            [attr.aria-label]="t().signatureUndo"
+            [attr.title]="t().signatureUndo"
+            [disabled]="isDisabled() || !strokes().length"
+            (click)="undo()"
+          >
+            <cb-icon name="cb-undo" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <button type="button" class="cb-sig__tool" [attr.aria-label]="t().signatureClear" [attr.title]="t().signatureClear" [disabled]="isDisabled() || empty()" (click)="clear()">
+          <cb-icon name="trash" [size]="16" aria-hidden="true" />
+        </button>
+      }
+    </div>
+
+    <div class="cb-sig__pad" [style.height]="height()" [style.background]="background() === 'transparent' ? null : background()">
+      <svg
+        #svg
+        class="cb-sig__svg"
+        [class.cb-sig__svg--draw]="canDraw()"
+        [attr.viewBox]="'0 0 ' + box().w + ' ' + box().h"
+        preserveAspectRatio="none"
+        role="img"
+        [attr.aria-label]="padLabel()"
+        [attr.aria-describedby]="hintId"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (lostpointercapture)="onPointerUp($event)"
+      >
+        @if (image()) {
+          <image [attr.href]="image()" [attr.width]="box().w" [attr.height]="box().h" preserveAspectRatio="xMidYMid meet" />
+        }
+        @if (mode() === 'type') {
+          @if (text().trim()) {
+            <text
+              [attr.x]="box().w / 2"
+              [attr.y]="box().h * 0.62"
+              text-anchor="middle"
+              [attr.font-family]="font()"
+              [attr.font-size]="fontSize()"
+              [attr.fill]="penColor()"
+            >{{ text().trim() }}</text>
+          }
+        } @else {
+          <g fill="none" [attr.stroke]="penColor()" stroke-linecap="round" stroke-linejoin="round">
+            @for (seg of segments(); track $index) {
+              <path [attr.d]="seg.d" [attr.stroke-width]="seg.width" />
+            }
+          </g>
+        }
+      </svg>
+      <span class="cb-sig__line" aria-hidden="true"><span class="cb-sig__x">×</span></span>
+      @if (empty() && mode() === 'draw') {
+        <span class="cb-sig__placeholder" aria-hidden="true">{{ placeholder() ?? t().signaturePlaceholder }}</span>
+      }
+    </div>
+
+    @if (mode() === 'type') {
+      <label class="cb-sig__type">
+        <span class="cb-sig__type-label">{{ t().signatureTypeLabel }}</span>
+        <input
+          #typeInput
+          type="text"
+          class="cb-sig__input"
+          autocomplete="name"
+          [value]="text()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
+          [attr.aria-required]="fieldState.required() || null"
+          (input)="onType($event)"
+          (blur)="onTouched()"
+        />
+      </label>
+    }
+
+    <span class="cb-sig__sr" [id]="hintId">{{ typing() ? t().signatureHint : t().signatureHintDraw }}</span>
+    <span class="cb-sig__sr" aria-live="polite">{{ announcement() }}</span>
+  `, styles: [":host{display:flex;flex-direction:column;gap:.5rem;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-sig__bar{display:flex;align-items:center;gap:.5rem;min-height:2rem}.cb-sig__spacer{flex:1}.cb-sig__modes{display:inline-flex;padding:2px;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px)}.cb-sig__mode{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-sig__mode:hover:not(:disabled){color:var(--cb-color-text)}.cb-sig__mode[aria-pressed=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-sig__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--cb-radius-md, 6px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-sig__tool:hover:not(:disabled){background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-sig__mode:disabled,.cb-sig__tool:disabled{opacity:.45;cursor:not-allowed}.cb-sig__pad{position:relative;overflow:hidden;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-lg, 8px)}:host(.cb-is-invalid) .cb-sig__pad{border-color:var(--cb-color-danger)}:host(.cb-is-disabled) .cb-sig__pad{opacity:.6}.cb-sig__svg{position:relative;z-index:1;display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.cb-sig__svg--draw{cursor:crosshair}.cb-sig__line{position:absolute;right:8%;bottom:24%;left:8%;border-bottom:1px solid #cbd5e1;pointer-events:none}.cb-sig__x{position:absolute;bottom:.125rem;left:0;color:#94a3b8;font-size:1rem;line-height:1}.cb-sig__placeholder{position:absolute;top:50%;left:50%;color:#94a3b8;transform:translate(-50%,-80%);pointer-events:none}.cb-sig__type{display:flex;flex-direction:column;gap:.25rem}.cb-sig__type-label{font-weight:var(--cb-font-weight-medium, 500)}.cb-sig__input{min-height:2.5rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text);font:inherit}.cb-sig__input[aria-invalid=true]{border-color:var(--cb-color-danger)}.cb-sig__mode:focus-visible,.cb-sig__tool:focus-visible,.cb-sig__input:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-sig__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], typing: [{ type: i0.Input, args: [{ isSignal: true, alias: "typing", required: false }] }], penColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "penColor", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], font: [{ type: i0.Input, args: [{ isSignal: true, alias: "font", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], signStart: [{ type: i0.Output, args: ["signStart"] }], signEnd: [{ type: i0.Output, args: ["signEnd"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], svg: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });
+/** Iconos propios (Lucide `undo-2` y `type`). */
+const ICONS = {
+    'cb-undo': '<path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" />',
+    'cb-type': '<path d="M12 4v16" /><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" /><path d="M9 20h6" />',
+};
+
+/*
+ * Public API Surface de @caribeng/ui/signature-pad
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CB_SIGNATURE_FONT, CbSignaturePad, signatureToSvg as cbSignatureToSvg };