@theseam/ui-common 1.0.2-beta.58 → 1.0.2-beta.59

package/fesm2022/theseam-ui-common-signature-input.mjs

@@ -0,0 +1,743 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, computed, signal, ChangeDetectionStrategy, Component, input, output, viewChild, afterNextRender, effect, isDevMode } from '@angular/core';
+import * as i1$2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { of, from, map, switchMap as switchMap$1, combineLatest } from 'rxjs';
+import { faSignature, faUpload, faKeyboard } from '@fortawesome/free-solid-svg-icons';
+import * as i3 from '@theseam/ui-common/buttons';
+import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
+import * as i4 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
+import { TheSeamLayoutService } from '@theseam/ui-common/layout';
+import { ModalRef } from '@theseam/ui-common/modal';
+import { TheSeamAutoFocusDirective, TheSeamDisableControlDirective } from '@theseam/ui-common/shared';
+import { readFileAsDataUrlAsync, observeControlValue, observeControlValid } from '@theseam/ui-common/utils';
+import { switchMap, debounceTime } from 'rxjs/operators';
+import * as i1 from 'ngx-file-drop';
+import { NgxFileDropModule } from 'ngx-file-drop';
+import * as i1$1 from '@almothafar/angular-signature-pad';
+import { AngularSignaturePadModule } from '@almothafar/angular-signature-pad';
+import { TheSeamFontLoaderService } from '@theseam/ui-common/services';
+import * as i2$1 from '@theseam/ui-common/form-field';
+import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
+import { ComponentHarness } from '@angular/cdk/testing';
+
+const THESEAM_SIGNATURE_INPUT_CONTAINER = new InjectionToken('THESEAM_SIGNATURE_INPUT_CONTAINER');
+
+const MAX_FILE_SIZE_BYTES = 2 * 1024 * 1024;
+const maxFileSizeValidator = (control) => {
+    const value = control.value;
+    if (!(value instanceof File)) {
+        return null;
+    }
+    return value.size > MAX_FILE_SIZE_BYTES ? { maxFileSize: {} } : null;
+};
+class TheSeamSignatureInputImgComponent {
+    static MAX_FILE_SIZE = MAX_FILE_SIZE_BYTES;
+    _container = inject(THESEAM_SIGNATURE_INPUT_CONTAINER, {
+        optional: true,
+    });
+    _destroyRef = inject(DestroyRef);
+    /**
+     * The File is only needed for validation at selection time. Once it's been
+     * converted to a data URL and stored in the form value, we don't need the
+     * File again — so there's no point trying to round-trip it through
+     * writeValue / form state. The preview renders off the current form value.
+     */
+    _fileControl = new FormControl(null, {
+        validators: [maxFileSizeValidator],
+    });
+    _fileStatus = toSignal(this._fileControl.statusChanges, {
+        initialValue: this._fileControl.status,
+    });
+    _sizeError = computed(() => {
+        // Touch the status signal so this re-runs on validity changes.
+        this._fileStatus();
+        return this._fileControl.getError('maxFileSize')
+            ? 'File size has exceeded 2MB.'
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "_sizeError" }] : []));
+    /**
+     * Single source of truth for both the form value and the preview image.
+     * External writes (writeValue) and successful uploads both funnel through
+     * here, so switching tabs and coming back always shows the last committed
+     * signature.
+     */
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _previewDataUrl = computed(() => this._value(), ...(ngDevMode ? [{ debugName: "_previewDataUrl" }] : []));
+    _previewBackgroundImage = computed(() => {
+        const url = this._value();
+        return url ? `url("${url}")` : null;
+    }, ...(ngDevMode ? [{ debugName: "_previewBackgroundImage" }] : []));
+    _onChange = () => undefined;
+    _onTouched = () => undefined;
+    constructor() {
+        if (this._container) {
+            this._container.registerInputItem('img', this);
+            this._destroyRef.onDestroy(() => this._container?.unregisterInputItem('img', this));
+        }
+        // Valid file uploads convert to a data URL and become both the preview
+        // and the form value. Invalid (too large) files clear both.
+        this._fileControl.valueChanges
+            .pipe(switchMap(() => {
+            const file = this._fileControl.value;
+            if (!file || this._fileControl.invalid) {
+                return of(null);
+            }
+            return from(readFileAsDataUrlAsync(file));
+        }), takeUntilDestroyed())
+            .subscribe((dataUrl) => this._setValue(dataUrl));
+    }
+    writeValue(value) {
+        this._value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this._fileControl.disabled === isDisabled)
+            return;
+        if (isDisabled)
+            this._fileControl.disable();
+        else
+            this._fileControl.enable();
+    }
+    clear() {
+        // valueChanges subscription propagates this to `_value` (null) and to the
+        // form value.
+        this._fileControl.setValue(null);
+    }
+    openFileBrowse() {
+        const fileInput = document.createElement('input');
+        fileInput.setAttribute('type', 'file');
+        const cleanup = () => {
+            // Give the 'change' event a moment to fire before assuming the user
+            // canceled the dialog.
+            setTimeout(() => {
+                fileInput.removeEventListener('change', onFileChange);
+                document.body.removeEventListener('focus', onFocusReturned);
+                window.removeEventListener('focus', onFocusReturned);
+            }, 1000);
+        };
+        const onFileChange = (event) => {
+            const input = event.target;
+            if (input.files && input.files.length > 0) {
+                this._fileControl.setValue(input.files[0]);
+            }
+            cleanup();
+        };
+        fileInput.addEventListener('change', onFileChange);
+        // Detect file browser canceled without making a selection.
+        const onFocusReturned = () => cleanup();
+        document.body.addEventListener('focus', onFocusReturned);
+        window.addEventListener('focus', onFocusReturned);
+        fileInput.click();
+    }
+    _onFileDropped(files) {
+        for (const droppedFile of files) {
+            if (droppedFile.fileEntry.isFile) {
+                const fileEntry = droppedFile.fileEntry;
+                fileEntry.file((file) => this._fileControl.setValue(file));
+                break;
+            }
+        }
+    }
+    _setValue(value) {
+        this._value.set(value);
+        this._onChange(value);
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputImgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TheSeamSignatureInputImgComponent, isStandalone: true, selector: "seam-signature-input-img", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: TheSeamSignatureInputImgComponent,
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"seam-signature-input-img\">\n  <div class=\"seam-signature-input-img__upload-container\">\n    <div class=\"seam-signature-input-img__header h-100\">\n      <div\n        class=\"seam-signature-input-img__upload-box h-100\"\n        [class.has-preview]=\"!!_previewDataUrl()\"\n        [style.background-image]=\"_previewBackgroundImage()\"\n        tabindex=\"0\"\n        (click)=\"openFileBrowse()\"\n        (keydown.enter)=\"openFileBrowse()\"\n      >\n        <ngx-file-drop\n          contentClassName=\"border-0\"\n          dropZoneClassName=\"border-0\"\n          (onFileDrop)=\"_onFileDropped($event)\"\n        >\n          <ng-template ngx-file-drop-content-tmp>\n            @if (!_previewDataUrl()) {\n              <div class=\"seam-signature-input-img__drop-prompt\">\n                <strong>Choose a file</strong> or drag it here\n              </div>\n            }\n          </ng-template>\n        </ngx-file-drop>\n      </div>\n\n      @if (_sizeError(); as err) {\n        <div class=\"seam-signature-input-img__size-error\">{{ err }}</div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.seam-signature-input-img{border-bottom:1px solid black}.seam-signature-input-img__header{font-weight:500}.seam-signature-input-img__upload-container{height:174px;position:relative}.seam-signature-input-img__upload-box{position:relative;text-align:center;cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:contain}.seam-signature-input-img__upload-box.has-preview{background-color:#fff}.seam-signature-input-img__size-error{color:var(--bs-danger, #dc3545)}ngx-file-drop ::ng-deep>div{height:100%}ngx-file-drop ::ng-deep .content{height:100%}ngx-file-drop ::ng-deep #dropZone{min-height:125px}\n"], dependencies: [{ kind: "ngmodule", type: NgxFileDropModule }, { kind: "component", type: i1.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i1.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputImgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-signature-input-img', imports: [NgxFileDropModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TheSeamSignatureInputImgComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"seam-signature-input-img\">\n  <div class=\"seam-signature-input-img__upload-container\">\n    <div class=\"seam-signature-input-img__header h-100\">\n      <div\n        class=\"seam-signature-input-img__upload-box h-100\"\n        [class.has-preview]=\"!!_previewDataUrl()\"\n        [style.background-image]=\"_previewBackgroundImage()\"\n        tabindex=\"0\"\n        (click)=\"openFileBrowse()\"\n        (keydown.enter)=\"openFileBrowse()\"\n      >\n        <ngx-file-drop\n          contentClassName=\"border-0\"\n          dropZoneClassName=\"border-0\"\n          (onFileDrop)=\"_onFileDropped($event)\"\n        >\n          <ng-template ngx-file-drop-content-tmp>\n            @if (!_previewDataUrl()) {\n              <div class=\"seam-signature-input-img__drop-prompt\">\n                <strong>Choose a file</strong> or drag it here\n              </div>\n            }\n          </ng-template>\n        </ngx-file-drop>\n      </div>\n\n      @if (_sizeError(); as err) {\n        <div class=\"seam-signature-input-img__size-error\">{{ err }}</div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.seam-signature-input-img{border-bottom:1px solid black}.seam-signature-input-img__header{font-weight:500}.seam-signature-input-img__upload-container{height:174px;position:relative}.seam-signature-input-img__upload-box{position:relative;text-align:center;cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:contain}.seam-signature-input-img__upload-box.has-preview{background-color:#fff}.seam-signature-input-img__size-error{color:var(--bs-danger, #dc3545)}ngx-file-drop ::ng-deep>div{height:100%}ngx-file-drop ::ng-deep .content{height:100%}ngx-file-drop ::ng-deep #dropZone{min-height:125px}\n"] }]
+        }], ctorParameters: () => [] });
+
+const DEFAULT_OPTIONS = {
+    canvasWidth: 500,
+    canvasHeight: 150,
+};
+class TheSeamSignatureInputPenComponent {
+    _container = inject(THESEAM_SIGNATURE_INPUT_CONTAINER, {
+        optional: true,
+    });
+    _destroyRef = inject(DestroyRef);
+    options = input(DEFAULT_OPTIONS, ...(ngDevMode ? [{ debugName: "options", transform: (value) => ({ ...DEFAULT_OPTIONS, ...value }) }] : [{ transform: (value) => ({ ...DEFAULT_OPTIONS, ...value }) }]));
+    beginDrawing = output();
+    endDrawing = output();
+    // Optional (not required) because writeValue may be called before the view
+    // is rendered — callers must null-check when reading.
+    _signaturePad = viewChild('sigPad', ...(ngDevMode ? [{ debugName: "_signaturePad" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _canvasWidth = computed(() => this.options().canvasWidth ?? DEFAULT_OPTIONS.canvasWidth, ...(ngDevMode ? [{ debugName: "_canvasWidth" }] : []));
+    _canvasHeight = computed(() => this.options().canvasHeight ?? DEFAULT_OPTIONS.canvasHeight, ...(ngDevMode ? [{ debugName: "_canvasHeight" }] : []));
+    _onChange = () => undefined;
+    _onTouched = () => undefined;
+    constructor() {
+        if (this._container) {
+            this._container.registerInputItem('pen', this);
+            this._destroyRef.onDestroy(() => this._container?.unregisterInputItem('pen', this));
+        }
+        // Restore any value written before the canvas was ready (the common case
+        // when this component mounts via @switch with an existing form value).
+        afterNextRender(() => this._applyValueToPad());
+    }
+    writeValue(value) {
+        this._value.set(value);
+        this._applyValueToPad();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    clear() {
+        this._signaturePad()?.clear();
+        this._setValue(null);
+    }
+    _drawStart(event) {
+        this.beginDrawing.emit(event);
+    }
+    _drawComplete(event) {
+        this._setValue(this._getDataURL());
+        this.endDrawing.emit(event);
+    }
+    _getDataURL() {
+        const pad = this._signaturePad();
+        if (!pad || pad.isEmpty()) {
+            return null;
+        }
+        return pad.toDataURL();
+    }
+    _applyValueToPad() {
+        const pad = this._signaturePad();
+        if (!pad) {
+            return;
+        }
+        try {
+            const value = this._value();
+            if (value) {
+                // fromDataURL is async and rejects on malformed input. Swallow errors
+                // so a corrupted stored value can't crash the component — the form
+                // control still retains the raw string.
+                pad.fromDataURL(value).catch(() => undefined);
+            }
+            else {
+                pad.clear();
+            }
+        }
+        catch {
+            // The SignaturePadComponent instance is available as soon as the view
+            // query resolves, but its internal signature_pad isn't constructed
+            // until ngAfterContentInit. writeValue can be called before that
+            // (during form-control wire-up). afterNextRender re-invokes this once
+            // the canvas is fully initialized.
+        }
+    }
+    _setValue(value) {
+        this._value.set(value);
+        this._onChange(value);
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: TheSeamSignatureInputPenComponent, isStandalone: true, selector: "seam-signature-input-pen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { beginDrawing: "beginDrawing", endDrawing: "endDrawing" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: TheSeamSignatureInputPenComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "_signaturePad", first: true, predicate: ["sigPad"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"seam-signature-input-pen__canvas-wrap\"\n  [style.width.px]=\"_canvasWidth()\"\n  [style.height.px]=\"_canvasHeight()\"\n>\n  <signature-pad\n    #sigPad\n    [options]=\"options()\"\n    (drawStart)=\"_drawStart($event)\"\n    (drawEnd)=\"_drawComplete($event)\"\n  ></signature-pad>\n</div>\n", styles: [":host{display:block;overflow:hidden;position:relative}.seam-signature-input-pen__canvas-wrap{border-bottom:1px solid black}signature-pad{background:none!important}signature-pad ::ng-deep .signature-pad-canvas{border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: AngularSignaturePadModule }, { kind: "component", type: i1$1.SignaturePadComponent, selector: "signature-pad", inputs: ["options"], outputs: ["drawStart", "drawBeforeUpdate", "drawAfterUpdate", "drawEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputPenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-signature-input-pen', imports: [AngularSignaturePadModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TheSeamSignatureInputPenComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"seam-signature-input-pen__canvas-wrap\"\n  [style.width.px]=\"_canvasWidth()\"\n  [style.height.px]=\"_canvasHeight()\"\n>\n  <signature-pad\n    #sigPad\n    [options]=\"options()\"\n    (drawStart)=\"_drawStart($event)\"\n    (drawEnd)=\"_drawComplete($event)\"\n  ></signature-pad>\n</div>\n", styles: [":host{display:block;overflow:hidden;position:relative}.seam-signature-input-pen__canvas-wrap{border-bottom:1px solid black}signature-pad{background:none!important}signature-pad ::ng-deep .signature-pad-canvas{border:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], beginDrawing: [{ type: i0.Output, args: ["beginDrawing"] }], endDrawing: [{ type: i0.Output, args: ["endDrawing"] }], _signaturePad: [{ type: i0.ViewChild, args: ['sigPad', { isSignal: true }] }] } });
+
+const SIGNATURE_FONT_FAMILY = 'Homemade Apple';
+const CANVAS_WIDTH = 500;
+const CANVAS_HEIGHT = 127;
+class TheSeamSignatureInputTextComponent {
+    _fontLoader = inject(TheSeamFontLoaderService);
+    _container = inject(THESEAM_SIGNATURE_INPUT_CONTAINER, {
+        optional: true,
+    });
+    _destroyRef = inject(DestroyRef);
+    // Optional (not required) because writeValue may be called before the
+    // canvas is in the DOM — callers must null-check when reading.
+    _typeCanvas = viewChild('typeCanvas', ...(ngDevMode ? [{ debugName: "_typeCanvas" }] : []));
+    _nameControl = new FormControl(null);
+    _fontState = signal('loading', ...(ngDevMode ? [{ debugName: "_fontState" }] : []));
+    _fontLoading = computed(() => this._fontState() === 'loading', ...(ngDevMode ? [{ debugName: "_fontLoading" }] : []));
+    _fontInactive = computed(() => this._fontState() === 'inactive', ...(ngDevMode ? [{ debugName: "_fontInactive" }] : []));
+    _fontNotActive = computed(() => this._fontState() !== 'active', ...(ngDevMode ? [{ debugName: "_fontNotActive" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _disabledOrFontNotActive = computed(() => this._disabled() || this._fontNotActive(), ...(ngDevMode ? [{ debugName: "_disabledOrFontNotActive" }] : []));
+    _canvasWidth = CANVAS_WIDTH;
+    _canvasHeight = CANVAS_HEIGHT;
+    /** Current form value (rendered bitmap data URL). */
+    _value = null;
+    /**
+     * When the user last typed a name (if any) on this instance. `null` means
+     * there is no user-typed signature on this instance — the canvas should
+     * keep whatever image was restored from `_value`.
+     */
+    _renderedText = null;
+    _onChange = () => undefined;
+    _onTouched = () => undefined;
+    constructor() {
+        if (this._container) {
+            this._container.registerInputItem('text', this);
+            this._destroyRef.onDestroy(() => this._container?.unregisterInputItem('text', this));
+        }
+        this._fontLoader
+            .load({ google: { families: [SIGNATURE_FONT_FAMILY] } })
+            .pipe(takeUntilDestroyed())
+            .subscribe((e) => {
+            if (e.type === 'loading' ||
+                e.type === 'inactive' ||
+                e.type === 'active') {
+                this._fontState.set(e.type);
+            }
+        });
+        // Debounced redraw of the user-typed name.
+        this._nameControl.valueChanges
+            .pipe(debounceTime(100), takeUntilDestroyed())
+            .subscribe(() => this._drawTextToCanvas());
+        // When the font flips to active and a name has been typed on this
+        // instance, redraw the text so the now-loaded font replaces the fallback.
+        // We do NOT touch the canvas otherwise — if there's a restored image but
+        // no typed name, this effect must leave the image alone.
+        effect(() => {
+            if (this._fontState() === 'active' && this._renderedText) {
+                this._drawTextToCanvas();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Paint any previously-written form value onto the canvas now that the
+        // view is in place. writeValue may have been invoked earlier as part of
+        // form-control wire-up, before the canvas existed.
+        if (this._value) {
+            this._drawImageToCanvas(this._value);
+        }
+    }
+    writeValue(value) {
+        this._value = value;
+        this._renderedText = null;
+        // emitEvent: false so the debounced valueChanges subscriber doesn't fire
+        // and redraw as text (which would clobber the restored image).
+        this._nameControl.setValue(null, { emitEvent: false });
+        this._drawImageToCanvas(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    clear() {
+        this._clearCanvas();
+        this._renderedText = null;
+        this._nameControl.setValue(null, { emitEvent: false });
+        this._setValue(null);
+    }
+    _onKeyDownEnter() {
+        this._drawTextToCanvas();
+    }
+    _onNameInputBlur() {
+        this._drawTextToCanvas();
+    }
+    /**
+     * Paint the given data URL onto the canvas as an image. Used when the
+     * component mounts with a pre-existing form value — the user's typed name
+     * isn't recoverable from the rendered bitmap, only the bitmap itself.
+     */
+    _drawImageToCanvas(dataUrl) {
+        const canvas = this._typeCanvas()?.nativeElement;
+        if (!canvas) {
+            return;
+        }
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return;
+        }
+        context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+        if (!dataUrl) {
+            return;
+        }
+        const img = new Image();
+        img.onload = () => {
+            context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+            context.drawImage(img, 0, 0);
+        };
+        img.src = dataUrl;
+    }
+    /**
+     * Render `_nameControl.value` as text onto the canvas and publish the
+     * result as the form value. A null/empty name clears both.
+     */
+    _drawTextToCanvas() {
+        const canvas = this._typeCanvas()?.nativeElement;
+        if (!canvas) {
+            return;
+        }
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return;
+        }
+        const text = this._nameControl.value;
+        if (!text || text.trim().length === 0) {
+            // Only clear if the user had previously rendered text on this instance.
+            // Otherwise we'd wipe a restored image that writeValue just painted.
+            if (this._renderedText !== null) {
+                context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+                this._renderedText = null;
+                this._setValue(null);
+            }
+            return;
+        }
+        context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+        context.fillStyle = 'black';
+        context.textBaseline = 'bottom';
+        context.textAlign = 'center';
+        let fontsize = 60;
+        do {
+            fontsize--;
+            context.font = `${fontsize}px ${SIGNATURE_FONT_FAMILY}, cursive`;
+        } while (context.measureText(text).width > CANVAS_WIDTH);
+        context.fillText(text, CANVAS_WIDTH / 2, 100);
+        this._renderedText = text;
+        this._setValue(canvas.toDataURL());
+    }
+    _clearCanvas() {
+        const context = this._typeCanvas()?.nativeElement.getContext('2d');
+        context?.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+    }
+    _setValue(value) {
+        if (this._value === value) {
+            return;
+        }
+        this._value = value;
+        this._onChange(value);
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TheSeamSignatureInputTextComponent, isStandalone: true, selector: "seam-signature-input-text", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: TheSeamSignatureInputTextComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "_typeCanvas", first: true, predicate: ["typeCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"seam-signature-input-text\">\n  <div class=\"seam-signature-input-text__header d-flex flex-row\">\n    <seam-form-field\n      [inline]=\"true\"\n      class=\"flex-grow-1 mr-2\"\n      [numPaddingErrors]=\"0\"\n    >\n      <span *seamFormFieldLabelTpl class=\"text-nowrap mr-2\"\n        >Enter Full Name:</span\n      >\n      <input\n        seamInput\n        [formControl]=\"_nameControl\"\n        class=\"pl-1 flex-grow-1\"\n        autocomplete=\"off\"\n        (keydown.enter)=\"_onKeyDownEnter()\"\n        (blur)=\"_onNameInputBlur()\"\n        [seamDisableControl]=\"_disabledOrFontNotActive()\"\n        seamAutoFocus\n      />\n    </seam-form-field>\n  </div>\n\n  <div\n    class=\"seam-signature-input-text__canvas-wrap overflow-hidden position-relative\"\n    [style.height.px]=\"_canvasHeight\"\n  >\n    @if (_fontLoading()) {\n      <div class=\"seam-signature-input-text__status\">Font Loading</div>\n    }\n\n    @if (_fontInactive()) {\n      <div class=\"seam-signature-input-text__status text-warning\">\n        <div class=\"seam-signature-input-text__status-headline\">\n          Font failed to load.\n        </div>\n        <div>\n          To use the typed signature, try refreshing the page or using another\n          web browser. If you still have issues please contact support and let\n          us know.\n        </div>\n      </div>\n    }\n\n    <canvas\n      #typeCanvas\n      class=\"position-absolute\"\n      [attr.width]=\"_canvasWidth\"\n      [attr.height]=\"_canvasHeight\"\n      [style.top.px]=\"0\"\n      [style.left.px]=\"0\"\n    ></canvas>\n  </div>\n</div>\n", styles: [":host{display:block}.seam-signature-input-text{border-bottom:1px solid black}.seam-signature-input-text__header{font-weight:500}.seam-signature-input-text__status{display:block;position:absolute;width:100%;padding-top:1rem;text-align:center;font-size:20px}.seam-signature-input-text__status-headline{font-size:20px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TheSeamFormFieldModule }, { kind: "component", type: i2$1.TheSeamFormFieldComponent, selector: "seam-form-field", inputs: ["inline", "label", "labelPosition", "labelClass", "maxErrors", "numPaddingErrors", "labelId", "helpText", "helpTextId"] }, { kind: "directive", type: i2$1.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput], seam-rich-text[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: i2$1.FormFieldLabelTplDirective, selector: "[seamFormFieldLabelTpl]" }, { kind: "directive", type: TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "directive", type: TheSeamDisableControlDirective, selector: "[seamDisableControl]", inputs: ["seamDisableControl"], exportAs: ["seamDisableControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-signature-input-text', imports: [
+                        ReactiveFormsModule,
+                        TheSeamFormFieldModule,
+                        TheSeamAutoFocusDirective,
+                        TheSeamDisableControlDirective,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TheSeamSignatureInputTextComponent,
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"seam-signature-input-text\">\n  <div class=\"seam-signature-input-text__header d-flex flex-row\">\n    <seam-form-field\n      [inline]=\"true\"\n      class=\"flex-grow-1 mr-2\"\n      [numPaddingErrors]=\"0\"\n    >\n      <span *seamFormFieldLabelTpl class=\"text-nowrap mr-2\"\n        >Enter Full Name:</span\n      >\n      <input\n        seamInput\n        [formControl]=\"_nameControl\"\n        class=\"pl-1 flex-grow-1\"\n        autocomplete=\"off\"\n        (keydown.enter)=\"_onKeyDownEnter()\"\n        (blur)=\"_onNameInputBlur()\"\n        [seamDisableControl]=\"_disabledOrFontNotActive()\"\n        seamAutoFocus\n      />\n    </seam-form-field>\n  </div>\n\n  <div\n    class=\"seam-signature-input-text__canvas-wrap overflow-hidden position-relative\"\n    [style.height.px]=\"_canvasHeight\"\n  >\n    @if (_fontLoading()) {\n      <div class=\"seam-signature-input-text__status\">Font Loading</div>\n    }\n\n    @if (_fontInactive()) {\n      <div class=\"seam-signature-input-text__status text-warning\">\n        <div class=\"seam-signature-input-text__status-headline\">\n          Font failed to load.\n        </div>\n        <div>\n          To use the typed signature, try refreshing the page or using another\n          web browser. If you still have issues please contact support and let\n          us know.\n        </div>\n      </div>\n    }\n\n    <canvas\n      #typeCanvas\n      class=\"position-absolute\"\n      [attr.width]=\"_canvasWidth\"\n      [attr.height]=\"_canvasHeight\"\n      [style.top.px]=\"0\"\n      [style.left.px]=\"0\"\n    ></canvas>\n  </div>\n</div>\n", styles: [":host{display:block}.seam-signature-input-text{border-bottom:1px solid black}.seam-signature-input-text__header{font-weight:500}.seam-signature-input-text__status{display:block;position:absolute;width:100%;padding-top:1rem;text-align:center;font-size:20px}.seam-signature-input-text__status-headline{font-size:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _typeCanvas: [{ type: i0.ViewChild, args: ['typeCanvas', { isSignal: true }] }] } });
+
+const isValueEmpty = (value) => typeof value !== 'string' || value.trim().length === 0;
+class TheSeamSignatureInputPanelComponent {
+    _layout = inject(TheSeamLayoutService);
+    _modalRef = inject(ModalRef, { optional: true });
+    /** Emitted when the panel is submitted or canceled. */
+    result = output();
+    _faSignature = faSignature;
+    _faUpload = faUpload;
+    _faKeyboard = faKeyboard;
+    _activeType = signal('pen', ...(ngDevMode ? [{ debugName: "_activeType" }] : []));
+    _resetType = computed(() => this._activeType() === 'img' ? 'delete' : 'cancel', ...(ngDevMode ? [{ debugName: "_resetType" }] : []));
+    _form = new FormGroup({
+        pen: new FormControl(null),
+        text: new FormControl(null),
+        img: new FormControl(null),
+    });
+    _registeredInputItems = new Map();
+    // Observables are used here because the active control changes, which makes
+    // a pure-signal approach awkward (signals don't naturally switch between
+    // observable sources). We derive the active control, its value, and its
+    // validity via rxjs, then expose the results as signals for the template.
+    _activeControl$ = toObservable(this._activeType).pipe(map((type) => this._form.controls[type]));
+    _activeValue$ = this._activeControl$.pipe(switchMap$1((control) => observeControlValue(control)), map((value) => (isValueEmpty(value) ? null : value)));
+    _canSubmit$ = combineLatest([
+        this._activeControl$.pipe(switchMap$1((c) => observeControlValid(c))),
+        this._activeValue$,
+    ]).pipe(map(([valid, value]) => valid && value !== null));
+    _value = toSignal(this._activeValue$, {
+        initialValue: null,
+    });
+    _valueEmpty = computed(() => this._value() === null, ...(ngDevMode ? [{ debugName: "_valueEmpty" }] : []));
+    _canSubmit = toSignal(this._canSubmit$, {
+        initialValue: false,
+    });
+    _isSm = toSignal(this._layout.observe('sm'), {
+        initialValue: false,
+    });
+    showType(type) {
+        this._activeType.set(type);
+    }
+    registerInputItem(type, item) {
+        if (this._registeredInputItems.has(type)) {
+            if (isDevMode()) {
+                // eslint-disable-next-line no-console
+                console.warn(`[TheSeamSignatureInputPanelComponent] Input item '${type}' is already registered.`);
+            }
+            return false;
+        }
+        this._registeredInputItems.set(type, item);
+        return true;
+    }
+    unregisterInputItem(type, item) {
+        const registered = this._registeredInputItems.get(type);
+        if (!registered) {
+            if (isDevMode()) {
+                // eslint-disable-next-line no-console
+                console.warn(`[TheSeamSignatureInputPanelComponent] Input item '${type}' can't be unregistered.`);
+            }
+            return false;
+        }
+        if (isDevMode() && registered !== item) {
+            // eslint-disable-next-line no-console
+            console.warn(`[TheSeamSignatureInputPanelComponent] Registered item for type '${type}' doesn't match the item being unregistered.`);
+        }
+        this._registeredInputItems.delete(type);
+        return true;
+    }
+    reset() {
+        this._form.reset({ pen: null, text: null, img: null });
+    }
+    _onClearBtnClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this._registeredInputItems.get(this._activeType())?.clear();
+    }
+    _onCancelBtnClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.reset();
+        this._emit({ type: 'cancel' });
+    }
+    _onSubmitBtnClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this._canSubmit()) {
+            return;
+        }
+        const value = this._value();
+        if (value === null) {
+            return;
+        }
+        this._emit({ type: 'submit', value });
+    }
+    _emit(result) {
+        this.result.emit(result);
+        this._modalRef?.close(result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TheSeamSignatureInputPanelComponent, isStandalone: true, selector: "seam-signature-input-panel", outputs: { result: "result" }, host: { properties: { "attr.tabIndex": "-1" } }, providers: [
+            {
+                provide: THESEAM_SIGNATURE_INPUT_CONTAINER,
+                useExisting: TheSeamSignatureInputPanelComponent,
+            },
+        ], ngImport: i0, template: "<div class=\"seam-signature-input-panel\">\n  <div class=\"seam-signature-input-panel__content\" cdkTrapFocus>\n    <div class=\"seam-signature-input-panel__options pb-2 mb-1\">\n      <button\n        seamButton\n        theme=\"primary\"\n        [class.btn-sm]=\"_isSm()\"\n        class=\"text-nowrap mr-1\"\n        [class.active]=\"_activeType() === 'pen'\"\n        (click)=\"showType('pen')\"\n      >\n        <seam-icon [icon]=\"_faSignature\" size=\"sm\"></seam-icon> Draw\n      </button>\n      <button\n        seamButton\n        theme=\"primary\"\n        [class.btn-sm]=\"_isSm()\"\n        class=\"text-nowrap mx-1\"\n        [class.active]=\"_activeType() === 'text'\"\n        (click)=\"showType('text')\"\n      >\n        <seam-icon [icon]=\"_faKeyboard\" size=\"sm\"></seam-icon> Type\n      </button>\n      <button\n        seamButton\n        theme=\"primary\"\n        [class.btn-sm]=\"_isSm()\"\n        class=\"text-nowrap ml-1\"\n        [class.active]=\"_activeType() === 'img'\"\n        (click)=\"showType('img')\"\n      >\n        <seam-icon [icon]=\"_faUpload\" size=\"sm\"></seam-icon> Upload\n      </button>\n    </div>\n\n    <form [formGroup]=\"_form\">\n      @switch (_activeType()) {\n        @case ('pen') {\n          <seam-signature-input-pen\n            formControlName=\"pen\"\n          ></seam-signature-input-pen>\n        }\n        @case ('text') {\n          <seam-signature-input-text\n            formControlName=\"text\"\n          ></seam-signature-input-text>\n        }\n        @case ('img') {\n          <seam-signature-input-img\n            formControlName=\"img\"\n          ></seam-signature-input-img>\n        }\n      }\n    </form>\n\n    <div class=\"seam-signature-input-panel__footer mt-1\">\n      <div>\n        @if (_resetType() === 'delete') {\n          <button\n            seamButton\n            theme=\"danger\"\n            [class.btn-sm]=\"_isSm()\"\n            [disabled]=\"_valueEmpty()\"\n            (click)=\"_onClearBtnClick($event)\"\n          >\n            Delete\n          </button>\n        } @else {\n          <button\n            seamButton\n            theme=\"lightgray\"\n            [class.btn-sm]=\"_isSm()\"\n            [disabled]=\"_valueEmpty()\"\n            (click)=\"_onClearBtnClick($event)\"\n          >\n            Clear\n          </button>\n        }\n      </div>\n      <div>\n        <button\n          seamButton\n          theme=\"lightgray\"\n          [class.btn-sm]=\"_isSm()\"\n          seamAutoFocus\n          (click)=\"_onCancelBtnClick($event)\"\n        >\n          Cancel\n        </button>\n        <button\n          seamButton\n          theme=\"primary\"\n          [class.btn-sm]=\"_isSm()\"\n          [disabled]=\"!_canSubmit()\"\n          (click)=\"_onSubmitBtnClick($event)\"\n        >\n          Apply Signature\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.seam-signature-input-panel{background-color:#fff;border-radius:4px}.seam-signature-input-panel__options{padding:8px 8px 0;border-bottom:1px solid black;display:flex;flex-direction:row;justify-content:flex-end}.seam-signature-input-panel__footer{padding:0 8px 8px;display:flex;flex-direction:row;justify-content:space-between;margin-top:2px}.seam-signature-input-panel__footer>div>*:not(:last-child){margin-right:6px}.seam-signature-input-panel__footer button{height:36px;margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TheSeamButtonsModule }, { kind: "component", type: i3.TheSeamButtonComponent, selector: "button[seamButton]", inputs: ["disabled", "theme", "size", "type"], exportAs: ["seamButton"] }, { kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i4.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: TheSeamAutoFocusDirective, selector: "[seamAutoFocus]", inputs: ["seamAutoFocus"], exportAs: ["seamAutoFocus"] }, { kind: "component", type: TheSeamSignatureInputPenComponent, selector: "seam-signature-input-pen", inputs: ["options"], outputs: ["beginDrawing", "endDrawing"] }, { kind: "component", type: TheSeamSignatureInputTextComponent, selector: "seam-signature-input-text" }, { kind: "component", type: TheSeamSignatureInputImgComponent, selector: "seam-signature-input-img" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSignatureInputPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-signature-input-panel', imports: [
+                        A11yModule,
+                        ReactiveFormsModule,
+                        TheSeamButtonsModule,
+                        TheSeamIconModule,
+                        TheSeamAutoFocusDirective,
+                        TheSeamSignatureInputPenComponent,
+                        TheSeamSignatureInputTextComponent,
+                        TheSeamSignatureInputImgComponent,
+                    ], providers: [
+                        {
+                            provide: THESEAM_SIGNATURE_INPUT_CONTAINER,
+                            useExisting: TheSeamSignatureInputPanelComponent,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        /**
+                         * Allow focusing the host element via `focus()` without it being part of the
+                         * tab order (the inner inputs handle keyboard navigation).
+                         */
+                        '[attr.tabIndex]': '-1',
+                    }, template: "<div class=\"seam-signature-input-panel\">\n  <div class=\"seam-signature-input-panel__content\" cdkTrapFocus>\n    <div class=\"seam-signature-input-panel__options pb-2 mb-1\">\n      <button\n        seamButton\n        theme=\"primary\"\n        [class.btn-sm]=\"_isSm()\"\n        class=\"text-nowrap mr-1\"\n        [class.active]=\"_activeType() === 'pen'\"\n        (click)=\"showType('pen')\"\n      >\n        <seam-icon [icon]=\"_faSignature\" size=\"sm\"></seam-icon> Draw\n      </button>\n      <button\n        seamButton\n        theme=\"primary\"\n        [class.btn-sm]=\"_isSm()\"\n        class=\"text-nowrap mx-1\"\n        [class.active]=\"_activeType() === 'text'\"\n        (click)=\"showType('text')\"\n      >\n        <seam-icon [icon]=\"_faKeyboard\" size=\"sm\"></seam-icon> Type\n      </button>\n      <button\n        seamButton\n        theme=\"primary\"\n        [class.btn-sm]=\"_isSm()\"\n        class=\"text-nowrap ml-1\"\n        [class.active]=\"_activeType() === 'img'\"\n        (click)=\"showType('img')\"\n      >\n        <seam-icon [icon]=\"_faUpload\" size=\"sm\"></seam-icon> Upload\n      </button>\n    </div>\n\n    <form [formGroup]=\"_form\">\n      @switch (_activeType()) {\n        @case ('pen') {\n          <seam-signature-input-pen\n            formControlName=\"pen\"\n          ></seam-signature-input-pen>\n        }\n        @case ('text') {\n          <seam-signature-input-text\n            formControlName=\"text\"\n          ></seam-signature-input-text>\n        }\n        @case ('img') {\n          <seam-signature-input-img\n            formControlName=\"img\"\n          ></seam-signature-input-img>\n        }\n      }\n    </form>\n\n    <div class=\"seam-signature-input-panel__footer mt-1\">\n      <div>\n        @if (_resetType() === 'delete') {\n          <button\n            seamButton\n            theme=\"danger\"\n            [class.btn-sm]=\"_isSm()\"\n            [disabled]=\"_valueEmpty()\"\n            (click)=\"_onClearBtnClick($event)\"\n          >\n            Delete\n          </button>\n        } @else {\n          <button\n            seamButton\n            theme=\"lightgray\"\n            [class.btn-sm]=\"_isSm()\"\n            [disabled]=\"_valueEmpty()\"\n            (click)=\"_onClearBtnClick($event)\"\n          >\n            Clear\n          </button>\n        }\n      </div>\n      <div>\n        <button\n          seamButton\n          theme=\"lightgray\"\n          [class.btn-sm]=\"_isSm()\"\n          seamAutoFocus\n          (click)=\"_onCancelBtnClick($event)\"\n        >\n          Cancel\n        </button>\n        <button\n          seamButton\n          theme=\"primary\"\n          [class.btn-sm]=\"_isSm()\"\n          [disabled]=\"!_canSubmit()\"\n          (click)=\"_onSubmitBtnClick($event)\"\n        >\n          Apply Signature\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.seam-signature-input-panel{background-color:#fff;border-radius:4px}.seam-signature-input-panel__options{padding:8px 8px 0;border-bottom:1px solid black;display:flex;flex-direction:row;justify-content:flex-end}.seam-signature-input-panel__footer{padding:0 8px 8px;display:flex;flex-direction:row;justify-content:space-between;margin-top:2px}.seam-signature-input-panel__footer>div>*:not(:last-child){margin-right:6px}.seam-signature-input-panel__footer button{height:36px;margin-top:6px}\n"] }]
+        }], propDecorators: { result: [{ type: i0.Output, args: ["result"] }] } });
+
+class TheSeamSignatureInputImgHarness extends ComponentHarness {
+    static hostSelector = 'seam-signature-input-img';
+    _fileDrop = this.locatorFor('ngx-file-drop');
+    _sizeError = this.locatorForOptional('.seam-signature-input-img__size-error');
+    _preview = this.locatorForOptional('.seam-signature-input-img__preview');
+    async getSizeError() {
+        const el = await this._sizeError();
+        return el ? (await el.text()).trim() : null;
+    }
+    async hasPreview() {
+        return (await this._preview()) !== null;
+    }
+    async getPreviewSrc() {
+        const el = await this._preview();
+        return el ? el.getAttribute('src') : null;
+    }
+    async getFileDrop() {
+        return this._fileDrop();
+    }
+}
+
+class TheSeamSignatureInputPenHarness extends ComponentHarness {
+    static hostSelector = 'seam-signature-input-pen';
+    _canvas = this.locatorFor('canvas');
+    async getCanvas() {
+        return this._canvas();
+    }
+    async getCanvasWidth() {
+        const canvas = await this._canvas();
+        const attr = await canvas.getAttribute('width');
+        return attr ? Number(attr) : null;
+    }
+    async getCanvasHeight() {
+        const canvas = await this._canvas();
+        const attr = await canvas.getAttribute('height');
+        return attr ? Number(attr) : null;
+    }
+}
+
+class TheSeamSignatureInputTextHarness extends ComponentHarness {
+    static hostSelector = 'seam-signature-input-text';
+    _input = this.locatorFor('input');
+    _canvas = this.locatorFor('canvas');
+    async getInput() {
+        return this._input();
+    }
+    async enterName(text) {
+        const input = await this._input();
+        await input.clear();
+        await input.sendKeys(text);
+    }
+    async getInputValue() {
+        const input = await this._input();
+        return input.getProperty('value');
+    }
+    async isInputDisabled() {
+        const input = await this._input();
+        return (await input.getAttribute('disabled')) !== null;
+    }
+    async getCanvas() {
+        return this._canvas();
+    }
+}
+
+class TheSeamSignatureInputPanelHarness extends ComponentHarness {
+    static hostSelector = 'seam-signature-input-panel';
+    _drawBtn = this.locatorFor('button:nth-of-type(1)');
+    _typeBtn = this.locatorFor('button:nth-of-type(2)');
+    _uploadBtn = this.locatorFor('button:nth-of-type(3)');
+    _footerBtns = this.locatorForAll('.seam-signature-input-panel__footer button');
+    _penHarness = this.locatorForOptional(TheSeamSignatureInputPenHarness);
+    _textHarness = this.locatorForOptional(TheSeamSignatureInputTextHarness);
+    _imgHarness = this.locatorForOptional(TheSeamSignatureInputImgHarness);
+    async showType(type) {
+        const btn = type === 'pen'
+            ? await this._drawBtn()
+            : type === 'text'
+                ? await this._typeBtn()
+                : await this._uploadBtn();
+        await btn.click();
+    }
+    async getActiveType() {
+        if (await this._penHarness())
+            return 'pen';
+        if (await this._textHarness())
+            return 'text';
+        if (await this._imgHarness())
+            return 'img';
+        return null;
+    }
+    async getPen() {
+        return this._penHarness();
+    }
+    async getText() {
+        return this._textHarness();
+    }
+    async getImg() {
+        return this._imgHarness();
+    }
+    async getClearOrDeleteButton() {
+        const [btn] = await this._footerBtns();
+        return btn;
+    }
+    async getCancelButton() {
+        const buttons = await this._footerBtns();
+        return buttons[buttons.length - 2];
+    }
+    async getSubmitButton() {
+        const buttons = await this._footerBtns();
+        return buttons[buttons.length - 1];
+    }
+    async isSubmitDisabled() {
+        const btn = await this.getSubmitButton();
+        return (await btn.getAttribute('disabled')) !== null;
+    }
+    async cancel() {
+        const btn = await this.getCancelButton();
+        await btn.click();
+    }
+    async submit() {
+        const btn = await this.getSubmitButton();
+        await btn.click();
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { THESEAM_SIGNATURE_INPUT_CONTAINER, TheSeamSignatureInputImgComponent, TheSeamSignatureInputImgHarness, TheSeamSignatureInputPanelComponent, TheSeamSignatureInputPanelHarness, TheSeamSignatureInputPenComponent, TheSeamSignatureInputPenHarness, TheSeamSignatureInputTextComponent, TheSeamSignatureInputTextHarness };
+//# sourceMappingURL=theseam-ui-common-signature-input.mjs.map