@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UISignature

    Signature field component supporting drawn strokes, optional pressure- sensitive capture, and image-based input (paste / drop / browse).

    The field integrates with both Angular reactive / template-driven forms (via ControlValueAccessor) and signal-based two-way binding ([(value)]).

    Stroke-based signatures are replayable and exportable as SVG or PNG. Image-based signatures are exportable as PNG only.

    <!-- Signal binding -->
    <ui-signature [(value)]="sig" />

    <!-- Forms binding -->
    <ui-signature [formControl]="sigControl" />

    <!-- Draw-only with pressure -->
    <ui-signature [pressureEnabled]="true" [minStrokeWidth]="1" [maxStrokeWidth]="5" />

    <!-- Image only -->
    <ui-signature [allowDraw]="false" [allowPaste]="true" [allowDrop]="true" [allowBrowse]="true" />

    Implements

    • AfterViewInit
    • ControlValueAccessor
    Index

    Constructors

    constructor

    Properties

    allowBrowse allowDraw allowDrop allowPaste ariaLabel canDraw canInteract cleared disabled emptyHint icons isDisabled isEmpty isImageBased isStrokeBased maxStrokeWidth minStrokeWidth pressureEnabled readOnly strokeColor value

    Methods

    browse canExport clear exportPng exportSvg ngAfterViewInit registerOnChange registerOnTouched replay setDisabledState writeValue

    Constructors

    • Returns UISignature

    Properties

    allowBrowse: InputSignal<boolean> = ...

    Whether a browse/import affordance is shown so the user can select an image file from disk.

    allowDraw: InputSignal<boolean> = ...

    Whether drawing with mouse, touch, or pen is allowed.

    allowDrop: InputSignal<boolean> = ...

    Whether the user can drop an image into the field.

    allowPaste: InputSignal<boolean> = ...

    Whether the user can paste an image into the field.

    ariaLabel: InputSignal<string> = ...

    Accessible label for the canvas.

    canDraw: Signal<boolean> = ...

    Whether the user can currently draw.

    canInteract: Signal<boolean> = ...

    Whether the user can currently interact with the field.

    cleared: OutputEmitterRef<void> = ...

    Emitted when the signature is cleared.

    disabled: InputSignal<boolean> = ...

    Whether the field is disabled. Also set via CVA setDisabledState.

    emptyHint: Signal<string> = ...

    Hint text shown in the empty state, reflecting all enabled input modes.

    icons: {
        browse: "<path d=\"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2\" />";
        clear: "<path d=\"M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21\" /><path d=\"m5.082 11.09 8.828 8.828\" />";
        image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" /><circle cx=\"9\" cy=\"9\" r=\"2\" /><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\" />";
        pen: "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" /><path d=\"m15 5 4 4\" />";
        replay: "<path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" /><path d=\"M3 3v5h5\" />";
    } = ...

    Toolbar icon references exposed to the template.

    isDisabled: Signal<boolean> = ...

    Effective disabled state combining the disabled input and CVA state.

    isEmpty: Signal<boolean> = ...

    Whether the field has no signature.

    isImageBased: Signal<boolean> = ...

    Whether the current value is an image-based signature.

    isStrokeBased: Signal<boolean> = ...

    Whether the current value is a stroke-based signature.

    maxStrokeWidth: InputSignal<number> = ...

    Maximum stroke width in pixels. Used for fixed width when pressure is disabled.

    minStrokeWidth: InputSignal<number> = ...

    Minimum stroke width in pixels (used when pressure is enabled).

    pressureEnabled: InputSignal<boolean> = ...

    Whether to capture and use pointer pressure for variable-width stroke rendering.

    readOnly: InputSignal<boolean> = ...

    Whether the field is read-only (displays value but prevents changes).

    strokeColor: InputSignal<string> = ...

    CSS colour of strokes when drawn and exported.

    value: ModelSignal<SignatureValue> = ...

    Current signature value. Supports two-way binding via [(value)].

    Methods

    • Programmatically open the file browser (requires allowBrowse to be enabled).

      Returns void

    • Returns whether the current value can be exported in the given format.

      Parameters

      • format: "svg" | "png"

        'svg' or 'png'.

      Returns boolean

    • Clears the signature field, removing all stroke or image data. This action is blocked when the field is disabled or read-only.

      Returns void

    • Exports the current signature as a PNG data URL. Supported for both stroke-based and image-based signatures.

      Returns string | null

      PNG data URL string, or null when the field is empty.

    • Exports the current signature as an SVG string. Only supported for stroke-based signatures.

      Returns string | null

      SVG markup string, or null if the current value is not stroke-based.

    • Returns void

    • Parameters

      Returns void

    • Parameters

      • fn: () => void

      Returns void

    • Replays the current stroke-based signature animating the strokes in their original drawing order. Does nothing when the current value is image-based or empty.

      Returns void

    • Parameters

      • isDisabled: boolean

      Returns void

    • Parameters

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods