@forgeroute/ui 0.4.57 → 0.4.58

package/fesm2022/forgeroute-ui-pdf.mjs

@@ -1,6 +1,9 @@
 import { isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, InjectionToken, Injector, PLATFORM_ID, afterNextRender, computed, effect, inject, input, makeEnvironmentProviders, output, signal, untracked } from "@angular/core";
+import { AlertComponent, ButtonComponent, DetailCardComponent, HintComponent, IconComponent, ModalComponent, SectionHeaderComponent, SkeletonComponent, StackComponent, TextInputComponent } from "@forgeroute/ui";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
 const PDF_VIEWER_WORKER_SRC = new InjectionToken("PDF_VIEWER_WORKER_SRC", {
 	providedIn: "root",
 	factory: () => ""
@@ -48,12 +51,14 @@ var PdfViewerComponent = class PdfViewerComponent {
 		this.maxPageWidth = input(DEFAULT_MAX_WIDTH, ...ngDevMode ? [{ debugName: "maxPageWidth" }] : /* istanbul ignore next */ []);
 		this.pixelRatio = input(null, ...ngDevMode ? [{ debugName: "pixelRatio" }] : /* istanbul ignore next */ []);
 		this.fields = input([], ...ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []);
+		this.hotspots = input([], ...ngDevMode ? [{ debugName: "hotspots" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.loadingText = input("Loading document…", ...ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []);
 		this.errorText = input("Failed to load document.", ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
 		this.unsupportedText = input("This browser can't show the document preview.", ...ngDevMode ? [{ debugName: "unsupportedText" }] : /* istanbul ignore next */ []);
 		this.openText = input("Open the document", ...ngDevMode ? [{ debugName: "openText" }] : /* istanbul ignore next */ []);
 		this.checkBrowserSupport = input(true, ...ngDevMode ? [{ debugName: "checkBrowserSupport" }] : /* istanbul ignore next */ []);
+		this.hotspotActivate = output();
 		this.loaded = output();
 		this.loadFailed = output();
 		this.pagesRendered = output();
@@ -121,13 +126,22 @@ var PdfViewerComponent = class PdfViewerComponent {
 						fontPx: Math.max(9, h * scale * .7)
 					};
 				});
+				const hotspots = this.hotspots().filter((h) => h.page === i + 1).map((h) => ({
+					hotspot: h,
+					left: h.x / size.width * 100,
+					top: (size.height - h.y - h.height) / size.height * 100,
+					width: h.width / size.width * 100,
+					height: h.height / size.height * 100,
+					fontPx: Math.max(7, Math.min(11, h.height * scale * .25))
+				}));
 				return {
 					number: i + 1,
 					cssWidth,
 					cssHeight,
 					canvasWidth: sized[i].w,
 					canvasHeight: sized[i].h,
-					fields
+					fields,
+					hotspots
 				};
 			});
 		}, ...ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []);
@@ -421,6 +435,13 @@ var PdfViewerComponent = class PdfViewerComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				hotspots: {
+					classPropertyName: "hotspots",
+					publicName: "hotspots",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				ariaLabel: {
 					classPropertyName: "ariaLabel",
 					publicName: "ariaLabel",
@@ -465,6 +486,7 @@ var PdfViewerComponent = class PdfViewerComponent {
 				}
 			},
 			outputs: {
+				hotspotActivate: "hotspotActivate",
 				loaded: "loaded",
 				loadFailed: "loadFailed",
 				pagesRendered: "pagesRendered"
@@ -498,6 +520,20 @@ var PdfViewerComponent = class PdfViewerComponent {
                     <span class="pv-field-label">{{ f.label }}</span>
                   </div>
                 }
+                @for (h of p.hotspots; track h.hotspot.id) {
+                  <div class="pv-hotspot" [attr.data-state]="h.hotspot.state" [attr.data-testid]="'pdf-hotspot-' + h.hotspot.id"
+                       [style.left.%]="h.left" [style.top.%]="h.top" [style.width.%]="h.width" [style.height.%]="h.height">
+                    @if (h.hotspot.state === 'signed' && h.hotspot.image) {
+                      <img class="pv-hotspot-image" [src]="h.hotspot.image" [alt]="h.hotspot.imageAlt || 'Applied signature'" />
+                    } @else {
+                      <button type="button" class="pv-hotspot-button" [class.pv-hotspot-ready]="h.hotspot.state === 'ready'"
+                              [disabled]="h.hotspot.state !== 'ready'" [attr.aria-label]="h.hotspot.ariaLabel || null"
+                              [style.font-size.px]="h.fontPx" (click)="hotspotActivate.emit(h.hotspot.id)">
+                        <span class="pv-hotspot-text">{{ h.hotspot.state === 'blocked' ? (h.hotspot.blockedLabel || h.hotspot.label || '') : (h.hotspot.label || '') }}</span>
+                      </button>
+                    }
+                  </div>
+                }
               </div>
             }
           </div>
@@ -506,7 +542,7 @@ var PdfViewerComponent = class PdfViewerComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;width:100%}.pv-root{position:relative}.pv-live,.pv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pv-state{display:flex;align-items:center;justify-content:center;width:100%;min-height:12rem;padding:0 16px;text-align:center;font-size:.8125rem;line-height:1.4;overflow-wrap:anywhere;box-sizing:border-box}.pv-loading{color:#64748b}.pv-error{color:#dc2626}.pv-unsupported{flex-direction:column;gap:8px;color:#334155}.pv-unsupported-text{margin:0}.pv-open{display:inline-flex;align-items:center;justify-content:center;position:relative;min-height:44px;min-width:44px;padding:0 16px;box-sizing:border-box;color:#1d4ed8;font-weight:600;text-decoration:underline;border-radius:6px}.pv-open:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}.pv-pages{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%}.pv-page{position:relative;margin:0 auto;max-width:100%}.pv-canvas{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.pv-field{position:absolute;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;overflow:hidden;pointer-events:none;border:1px solid;border-radius:2px;-webkit-user-select:none;user-select:none}.pv-field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pv-tone-blue{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.pv-tone-green{background:#dcfce7;border-color:#86efac;color:#15803d}.pv-tone-amber{background:#fef3c7;border-color:#fcd34d;color:#92400e}.pv-tone-red{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}.pv-tone-slate{background:#f1f5f9;border-color:#cbd5e1;color:#334155}\n"],
+			styles: [":host{display:block;width:100%}.pv-root{position:relative}.pv-live,.pv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pv-state{display:flex;align-items:center;justify-content:center;width:100%;min-height:12rem;padding:0 16px;text-align:center;font-size:.8125rem;line-height:1.4;overflow-wrap:anywhere;box-sizing:border-box}.pv-loading{color:#64748b}.pv-error{color:#dc2626}.pv-unsupported{flex-direction:column;gap:8px;color:#334155}.pv-unsupported-text{margin:0}.pv-open{display:inline-flex;align-items:center;justify-content:center;position:relative;min-height:44px;min-width:44px;padding:0 16px;box-sizing:border-box;color:#1d4ed8;font-weight:600;text-decoration:underline;border-radius:6px}.pv-open:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}.pv-pages{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%}.pv-page{position:relative;margin:0 auto;max-width:100%}.pv-canvas{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.pv-field{position:absolute;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;overflow:hidden;pointer-events:none;border:1px solid;border-radius:2px;-webkit-user-select:none;user-select:none}.pv-field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pv-hotspot{position:absolute;box-sizing:border-box}.pv-hotspot-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.pv-hotspot-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e}.pv-hotspot-button.pv-hotspot-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.pv-hotspot-button.pv-hotspot-ready:hover{background:#bfdbfe}.pv-hotspot-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.pv-hotspot-text{display:block;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media(pointer:coarse){.pv-hotspot-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:44px;transform:translateY(-50%)}}.pv-tone-blue{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.pv-tone-green{background:#dcfce7;border-color:#86efac;color:#15803d}.pv-tone-amber{background:#fef3c7;border-color:#fcd34d;color:#92400e}.pv-tone-red{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}.pv-tone-slate{background:#f1f5f9;border-color:#cbd5e1;color:#334155}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -550,6 +586,20 @@ i0.ɵɵngDeclareClassMetadata({
                     <span class="pv-field-label">{{ f.label }}</span>
                   </div>
                 }
+                @for (h of p.hotspots; track h.hotspot.id) {
+                  <div class="pv-hotspot" [attr.data-state]="h.hotspot.state" [attr.data-testid]="'pdf-hotspot-' + h.hotspot.id"
+                       [style.left.%]="h.left" [style.top.%]="h.top" [style.width.%]="h.width" [style.height.%]="h.height">
+                    @if (h.hotspot.state === 'signed' && h.hotspot.image) {
+                      <img class="pv-hotspot-image" [src]="h.hotspot.image" [alt]="h.hotspot.imageAlt || 'Applied signature'" />
+                    } @else {
+                      <button type="button" class="pv-hotspot-button" [class.pv-hotspot-ready]="h.hotspot.state === 'ready'"
+                              [disabled]="h.hotspot.state !== 'ready'" [attr.aria-label]="h.hotspot.ariaLabel || null"
+                              [style.font-size.px]="h.fontPx" (click)="hotspotActivate.emit(h.hotspot.id)">
+                        <span class="pv-hotspot-text">{{ h.hotspot.state === 'blocked' ? (h.hotspot.blockedLabel || h.hotspot.label || '') : (h.hotspot.label || '') }}</span>
+                      </button>
+                    }
+                  </div>
+                }
               </div>
             }
           </div>
@@ -557,7 +607,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block;width:100%}.pv-root{position:relative}.pv-live,.pv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pv-state{display:flex;align-items:center;justify-content:center;width:100%;min-height:12rem;padding:0 16px;text-align:center;font-size:.8125rem;line-height:1.4;overflow-wrap:anywhere;box-sizing:border-box}.pv-loading{color:#64748b}.pv-error{color:#dc2626}.pv-unsupported{flex-direction:column;gap:8px;color:#334155}.pv-unsupported-text{margin:0}.pv-open{display:inline-flex;align-items:center;justify-content:center;position:relative;min-height:44px;min-width:44px;padding:0 16px;box-sizing:border-box;color:#1d4ed8;font-weight:600;text-decoration:underline;border-radius:6px}.pv-open:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}.pv-pages{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%}.pv-page{position:relative;margin:0 auto;max-width:100%}.pv-canvas{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.pv-field{position:absolute;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;overflow:hidden;pointer-events:none;border:1px solid;border-radius:2px;-webkit-user-select:none;user-select:none}.pv-field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pv-tone-blue{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.pv-tone-green{background:#dcfce7;border-color:#86efac;color:#15803d}.pv-tone-amber{background:#fef3c7;border-color:#fcd34d;color:#92400e}.pv-tone-red{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}.pv-tone-slate{background:#f1f5f9;border-color:#cbd5e1;color:#334155}\n"]
+			styles: [":host{display:block;width:100%}.pv-root{position:relative}.pv-live,.pv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pv-state{display:flex;align-items:center;justify-content:center;width:100%;min-height:12rem;padding:0 16px;text-align:center;font-size:.8125rem;line-height:1.4;overflow-wrap:anywhere;box-sizing:border-box}.pv-loading{color:#64748b}.pv-error{color:#dc2626}.pv-unsupported{flex-direction:column;gap:8px;color:#334155}.pv-unsupported-text{margin:0}.pv-open{display:inline-flex;align-items:center;justify-content:center;position:relative;min-height:44px;min-width:44px;padding:0 16px;box-sizing:border-box;color:#1d4ed8;font-weight:600;text-decoration:underline;border-radius:6px}.pv-open:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}.pv-pages{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%}.pv-page{position:relative;margin:0 auto;max-width:100%}.pv-canvas{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.pv-field{position:absolute;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;overflow:hidden;pointer-events:none;border:1px solid;border-radius:2px;-webkit-user-select:none;user-select:none}.pv-field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pv-hotspot{position:absolute;box-sizing:border-box}.pv-hotspot-image{display:block;width:100%;height:100%;object-fit:contain;object-position:left}.pv-hotspot-button{position:relative;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;font:inherit;font-weight:500;line-height:1;border:2px solid #d1d5db;background:#f3f4f6;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 10px #0000002e}.pv-hotspot-button.pv-hotspot-ready{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;cursor:pointer}.pv-hotspot-button.pv-hotspot-ready:hover{background:#bfdbfe}.pv-hotspot-button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.pv-hotspot-text{display:block;overflow:hidden;text-overflow:ellipsis;line-height:1.2}@media(pointer:coarse){.pv-hotspot-button:after{content:\"\";position:absolute;left:0;right:0;top:50%;height:100%;min-height:44px;transform:translateY(-50%)}}.pv-tone-blue{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.pv-tone-green{background:#dcfce7;border-color:#86efac;color:#15803d}.pv-tone-amber{background:#fef3c7;border-color:#fcd34d;color:#92400e}.pv-tone-red{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}.pv-tone-slate{background:#f1f5f9;border-color:#cbd5e1;color:#334155}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -626,6 +676,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		hotspots: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hotspots",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -674,6 +732,10 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		hotspotActivate: [{
+			type: i0.Output,
+			args: ["hotspotActivate"]
+		}],
 		loaded: [{
 			type: i0.Output,
 			args: ["loaded"]
@@ -696,6 +758,1114 @@ function provideForgeroutePdf(options) {
 		useValue: workerSrc
 	}]);
 }
-export { PDF_VIEWER_REQUIRED_FEATURES, PDF_VIEWER_WORKER_SRC, PdfViewerComponent, PdfViewerUnsupportedError, findMissingPdfFeatures, provideForgeroutePdf };
+var DocumentViewerModalComponent = class DocumentViewerModalComponent {
+	constructor() {
+		this.open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.fileName = input("Document", ...ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []);
+		this.data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.loadingText = input("Loading document…", ...ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []);
+		this.closed = output();
+		this.hasData = computed(() => !!this.data() && !this.loading() && !this.error(), ...ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []);
+	}
+	blob() {
+		const bytes = this.data();
+		return bytes ? new Blob([bytes], { type: "application/pdf" }) : null;
+	}
+	download() {
+		const blob = this.blob();
+		if (!blob) return;
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = this.fileName() || "document.pdf";
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
+		URL.revokeObjectURL(url);
+	}
+	print() {
+		const blob = this.blob();
+		if (!blob) return;
+		const url = URL.createObjectURL(blob);
+		const frame = document.createElement("iframe");
+		frame.style.cssText = "position:fixed;top:-10000px;left:-10000px;width:1px;height:1px;";
+		frame.src = url;
+		const cleanup = () => {
+			frame.remove();
+			URL.revokeObjectURL(url);
+		};
+		frame.onload = () => {
+			try {
+				frame.contentWindow?.addEventListener("afterprint", cleanup);
+				frame.contentWindow?.print();
+			} catch {
+				window.open(url, "_blank");
+				cleanup();
+			}
+		};
+		document.body.appendChild(frame);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DocumentViewerModalComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: DocumentViewerModalComponent,
+			isStandalone: true,
+			selector: "ui-document-viewer-modal",
+			inputs: {
+				open: {
+					classPropertyName: "open",
+					publicName: "open",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fileName: {
+					classPropertyName: "fileName",
+					publicName: "fileName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				data: {
+					classPropertyName: "data",
+					publicName: "data",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				error: {
+					classPropertyName: "error",
+					publicName: "error",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadingText: {
+					classPropertyName: "loadingText",
+					publicName: "loadingText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { closed: "closed" },
+			ngImport: i0,
+			template: `
+    <ui-modal [open]="open()" [title]="fileName()" maxWidth="64rem" dialogTestId="document-viewer" (close)="closed.emit()">
+      <div class="dvm-actions" modal-header-end>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-download" [disabled]="!hasData()" ariaLabel="Download document" (click)="download()">
+          <ui-icon name="download" [interactive]="false" /> Download
+        </ui-button>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-print" [disabled]="!hasData()" ariaLabel="Print document" (click)="print()">
+          <ui-icon name="print" [interactive]="false" /> Print
+        </ui-button>
+      </div>
+      @if (loading()) {
+        <div class="dvm-state" role="status" aria-live="polite" data-testid="document-viewer-loading">
+          <ui-skeleton [height]="320" />
+          <span class="dvm-sr">{{ loadingText() }}</span>
+        </div>
+      } @else if (error()) {
+        <ui-alert variant="danger" data-testid="document-viewer-error">{{ error() }}</ui-alert>
+      } @else if (data(); as bytes) {
+        <ui-pdf-viewer [data]="bytes" [ariaLabel]="fileName()" [loadingText]="loadingText()" />
+      }
+    </ui-modal>
+  `,
+			isInline: true,
+			styles: [".dvm-actions{display:inline-flex;gap:8px;align-items:center}.dvm-state{display:block}.dvm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: ModalComponent,
+					selector: "ui-modal",
+					inputs: [
+						"open",
+						"title",
+						"description",
+						"maxWidth",
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable",
+						"layout",
+						"closeOnBackdrop",
+						"closeOnEscape",
+						"busy",
+						"returnFocusTo"
+					],
+					outputs: ["close"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"name",
+						"tooltip",
+						"ariaLabel",
+						"size",
+						"variant",
+						"disabled",
+						"loading",
+						"interactive"
+					],
+					outputs: ["iconClick"]
+				},
+				{
+					kind: "component",
+					type: AlertComponent,
+					selector: "ui-alert",
+					inputs: [
+						"variant",
+						"title",
+						"dismissible",
+						"dismissAriaLabel",
+						"quiet",
+						"compact",
+						"inline",
+						"fill"
+					],
+					outputs: ["dismissed"]
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"height",
+						"width",
+						"radius",
+						"mb",
+						"ariaLabel"
+					]
+				},
+				{
+					kind: "component",
+					type: PdfViewerComponent,
+					selector: "ui-pdf-viewer",
+					inputs: [
+						"src",
+						"data",
+						"httpHeaders",
+						"withCredentials",
+						"workerSrc",
+						"maxPageWidth",
+						"pixelRatio",
+						"fields",
+						"hotspots",
+						"ariaLabel",
+						"loadingText",
+						"errorText",
+						"unsupportedText",
+						"openText",
+						"checkBrowserSupport"
+					],
+					outputs: [
+						"hotspotActivate",
+						"loaded",
+						"loadFailed",
+						"pagesRendered"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: DocumentViewerModalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-document-viewer-modal",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ModalComponent,
+				ButtonComponent,
+				IconComponent,
+				AlertComponent,
+				SkeletonComponent,
+				PdfViewerComponent
+			],
+			template: `
+    <ui-modal [open]="open()" [title]="fileName()" maxWidth="64rem" dialogTestId="document-viewer" (close)="closed.emit()">
+      <div class="dvm-actions" modal-header-end>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-download" [disabled]="!hasData()" ariaLabel="Download document" (click)="download()">
+          <ui-icon name="download" [interactive]="false" /> Download
+        </ui-button>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-print" [disabled]="!hasData()" ariaLabel="Print document" (click)="print()">
+          <ui-icon name="print" [interactive]="false" /> Print
+        </ui-button>
+      </div>
+      @if (loading()) {
+        <div class="dvm-state" role="status" aria-live="polite" data-testid="document-viewer-loading">
+          <ui-skeleton [height]="320" />
+          <span class="dvm-sr">{{ loadingText() }}</span>
+        </div>
+      } @else if (error()) {
+        <ui-alert variant="danger" data-testid="document-viewer-error">{{ error() }}</ui-alert>
+      } @else if (data(); as bytes) {
+        <ui-pdf-viewer [data]="bytes" [ariaLabel]="fileName()" [loadingText]="loadingText()" />
+      }
+    </ui-modal>
+  `,
+			styles: [".dvm-actions{display:inline-flex;gap:8px;align-items:center}.dvm-state{display:block}.dvm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"]
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		fileName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fileName",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		loadingText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingText",
+				required: false
+			}]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+const DEFAULT_TEXTS = {
+	title: "Sign Document",
+	loading: "Loading document…",
+	step1: "Step 1: Create Your Signature",
+	namePlaceholder: "Type your full name",
+	previewEmpty: "Preview appears here",
+	saveSignature: "Save Signature",
+	change: "Change",
+	step2: "Step 2: Click the buttons below to apply your signature",
+	signHere: "Sign Here",
+	addSignatureFirst: "Add signature above",
+	allSigned: "All signatures completed",
+	cancel: "Cancel",
+	complete: "Complete Signing",
+	submitting: "Submitting...",
+	noFields: "This document has no place to sign."
+};
+const SIGNATURE_WIDTH = 600;
+const SIGNATURE_HEIGHT = 60;
+var DocumentSignModalComponent = class DocumentSignModalComponent {
+	constructor() {
+		this.open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+		this.fields = input([], ...ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.error = input("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.signerName = input("", ...ngDevMode ? [{ debugName: "signerName" }] : /* istanbul ignore next */ []);
+		this.savedSignature = input(null, ...ngDevMode ? [{ debugName: "savedSignature" }] : /* istanbul ignore next */ []);
+		this.submitting = input(false, ...ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []);
+		this.texts = input({}, ...ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []);
+		this.signed = output();
+		this.signatureCreated = output();
+		this.closed = output();
+		this.t = computed(() => ({
+			...DEFAULT_TEXTS,
+			...this.texts()
+		}), ...ngDevMode ? [{ debugName: "t" }] : /* istanbul ignore next */ []);
+		this.typedName = signal("", ...ngDevMode ? [{ debugName: "typedName" }] : /* istanbul ignore next */ []);
+		this.signature = signal(null, ...ngDevMode ? [{ debugName: "signature" }] : /* istanbul ignore next */ []);
+		this.applied = signal({}, ...ngDevMode ? [{ debugName: "applied" }] : /* istanbul ignore next */ []);
+		this.resolved = computed(() => this.fields().map((f, i) => ({
+			...f,
+			id: f.id ?? String(i + 1)
+		})), ...ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []);
+		this.signedCount = computed(() => this.resolved().filter((f) => !!this.applied()[f.id]).length, ...ngDevMode ? [{ debugName: "signedCount" }] : /* istanbul ignore next */ []);
+		this.allSigned = computed(() => this.resolved().length > 0 && this.signedCount() === this.resolved().length, ...ngDevMode ? [{ debugName: "allSigned" }] : /* istanbul ignore next */ []);
+		this.hotspots = computed(() => {
+			const fields = this.resolved();
+			const image = this.signature();
+			return fields.map((f, i) => {
+				const applied = this.applied()[f.id];
+				const label = `Sign field ${i + 1} of ${fields.length}`;
+				return {
+					id: f.id,
+					page: f.page,
+					x: f.x,
+					y: f.y,
+					width: f.width,
+					height: f.height,
+					state: applied ? "signed" : image ? "ready" : "blocked",
+					label: this.t().signHere,
+					blockedLabel: this.t().addSignatureFirst,
+					ariaLabel: image ? label : `${label} - add your signature above first to enable signing`,
+					image: applied ?? null,
+					imageAlt: "Applied signature"
+				};
+			});
+		}, ...ngDevMode ? [{ debugName: "hotspots" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			if (!this.open()) return;
+			untracked(() => {
+				this.applied.set({});
+				this.typedName.set(this.signerName());
+				this.signature.set(null);
+				const saved = this.savedSignature();
+				if (saved) this.normalize(saved).then((image) => {
+					if (this.open() && !this.signature()) this.signature.set(image);
+				});
+			});
+		});
+	}
+	cancel() {
+		this.closed.emit();
+	}
+	async saveTypedSignature() {
+		const name = this.typedName().trim();
+		if (!name) return;
+		try {
+			await document.fonts?.ready;
+		} catch {}
+		const canvas = document.createElement("canvas");
+		canvas.width = SIGNATURE_WIDTH;
+		canvas.height = SIGNATURE_HEIGHT;
+		const ctx = canvas.getContext("2d");
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.fillStyle = "#000";
+		ctx.textAlign = "left";
+		ctx.textBaseline = "middle";
+		const maxWidth = canvas.width - 10;
+		let size = 48;
+		ctx.font = `bold ${size}px 'Dancing Script', cursive`;
+		while (ctx.measureText(name).width > maxWidth && size > 24) {
+			size -= 2;
+			ctx.font = `bold ${size}px 'Dancing Script', cursive`;
+		}
+		ctx.fillText(name, 5, canvas.height / 2);
+		const image = canvas.toDataURL("image/png");
+		this.signature.set(image);
+		this.signatureCreated.emit(image);
+	}
+	changeSignature() {
+		this.signature.set(null);
+		this.typedName.set("");
+		this.applied.set({});
+	}
+	apply(fieldId) {
+		const image = this.signature();
+		if (!image || !this.resolved().some((f) => f.id === fieldId)) return;
+		this.applied.update((a) => ({
+			...a,
+			[fieldId]: image
+		}));
+	}
+	complete() {
+		if (!this.allSigned() || this.submitting()) return;
+		const fields = this.resolved().map((f) => ({
+			id: f.id,
+			page: f.page,
+			x: f.x,
+			y: f.y,
+			width: f.width,
+			height: f.height,
+			signatureImage: this.applied()[f.id]
+		}));
+		this.signed.emit({
+			signatureDataUrl: fields[0].signatureImage,
+			signedAt: (/* @__PURE__ */ new Date()).toISOString(),
+			fields
+		});
+	}
+	normalize(dataUrl) {
+		return new Promise((resolve) => {
+			const img = new Image();
+			img.onload = () => {
+				const out = document.createElement("canvas");
+				out.width = SIGNATURE_WIDTH;
+				out.height = SIGNATURE_HEIGHT;
+				const scale = Math.min(out.width / img.width, out.height / img.height);
+				const w = img.width * scale;
+				const h = img.height * scale;
+				out.getContext("2d").drawImage(img, 0, (out.height - h) / 2, w, h);
+				resolve(out.toDataURL("image/png"));
+			};
+			img.onerror = () => resolve(dataUrl);
+			img.src = dataUrl;
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DocumentSignModalComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: DocumentSignModalComponent,
+			isStandalone: true,
+			selector: "ui-document-sign-modal",
+			inputs: {
+				open: {
+					classPropertyName: "open",
+					publicName: "open",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				data: {
+					classPropertyName: "data",
+					publicName: "data",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fields: {
+					classPropertyName: "fields",
+					publicName: "fields",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				error: {
+					classPropertyName: "error",
+					publicName: "error",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				signerName: {
+					classPropertyName: "signerName",
+					publicName: "signerName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				savedSignature: {
+					classPropertyName: "savedSignature",
+					publicName: "savedSignature",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				submitting: {
+					classPropertyName: "submitting",
+					publicName: "submitting",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				texts: {
+					classPropertyName: "texts",
+					publicName: "texts",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				signed: "signed",
+				signatureCreated: "signatureCreated",
+				closed: "closed"
+			},
+			ngImport: i0,
+			template: `
+    <ui-modal [open]="open()" [title]="t().title" maxWidth="56rem" bodyOverflow="auto" dialogTestId="sign-modal" (close)="cancel()">
+      @if (loading()) {
+        <ui-stack gap="md" align="center" role="status" aria-live="polite" data-testid="sign-loading">
+          <ui-skeleton [height]="24" width="60%" />
+          <ui-hint>{{ t().loading }}</ui-hint>
+        </ui-stack>
+      } @else if (error()) {
+        <ui-alert variant="danger" data-testid="sign-error">{{ error() }}</ui-alert>
+      } @else {
+        <ui-stack gap="md">
+          <ui-detail-card [title]="t().step1" [headingLevel]="4" [collapsible]="false" data-testid="signature-step">
+            @if (!signature()) {
+              <ui-stack gap="sm">
+                <ui-text-input data-testid="typed-name-input" [placeholder]="t().namePlaceholder" [ariaLabel]="t().namePlaceholder"
+                               [ngModel]="typedName()" (ngModelChange)="typedName.set($event ?? '')" />
+                <div class="ds-preview">
+                  @if (typedName()) {
+                    <span class="ds-typed" data-testid="typed-signature-preview">{{ typedName() }}</span>
+                  } @else {
+                    <span class="ds-empty">{{ t().previewEmpty }}</span>
+                  }
+                </div>
+                <ui-button variant="primary" [fullWidth]="true" [disabled]="!typedName().trim()" data-testid="save-typed-signature" (click)="saveTypedSignature()">
+                  <ui-icon name="check" [size]="16" [interactive]="false" /> {{ t().saveSignature }}
+                </ui-button>
+              </ui-stack>
+            } @else {
+              <ui-stack gap="sm">
+                <div class="ds-saved"><img [src]="signature()!" alt="Your saved signature" class="ds-saved-img"></div>
+                <ui-button variant="secondary" [ariaLabel]="t().change + ' signature'" data-testid="redraw-signature" (click)="changeSignature()">
+                  <ui-icon name="edit" [size]="16" [interactive]="false" /> {{ t().change }}
+                </ui-button>
+              </ui-stack>
+            }
+          </ui-detail-card>
+
+          @if (signature()) {
+            <ui-section-header [level]="4" size="sm" [title]="t().step2" data-testid="apply-step" />
+          }
+
+          <ui-pdf-viewer [data]="data()" [hotspots]="hotspots()" [ariaLabel]="t().title" [loadingText]="t().loading" (hotspotActivate)="apply($event)" />
+        </ui-stack>
+      }
+
+      <ui-hint modal-footer-left role="status" aria-live="polite" aria-atomic="true" data-testid="sign-progress">
+        @if (fields().length === 0) { {{ t().noFields }} } @else if (allSigned()) { {{ t().allSigned }} } @else { {{ signedCount() }} of {{ fields().length }} signed }
+      </ui-hint>
+      <ui-stack modal-footer-right direction="horizontal" gap="sm" [wrap]="true">
+        <ui-button variant="secondary" data-testid="sign-cancel" (click)="cancel()"><ui-icon name="close" [size]="16" [interactive]="false" /> {{ t().cancel }}</ui-button>
+        <ui-button variant="primary" data-testid="sign-complete" [disabled]="!allSigned() || submitting()" [loading]="submitting()" (click)="complete()">
+          <ui-icon name="check" [size]="16" [interactive]="false" /> {{ submitting() ? t().submitting : t().complete }}
+        </ui-button>
+      </ui-stack>
+    </ui-modal>
+  `,
+			isInline: true,
+			styles: [".ds-preview{display:flex;align-items:center;min-height:64px;padding:4px 12px;border:1px dashed #cbd5e1;border-radius:8px;background:#fff;overflow:hidden}.ds-empty{color:#94a3b8;font-size:.875rem}.ds-typed{font-family:Dancing Script,cursive;font-weight:700;font-size:2.25rem;line-height:1.2;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-saved{display:flex;align-items:center;min-height:64px;padding:4px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff}.ds-saved-img{display:block;max-width:100%;height:60px;object-fit:contain;object-position:left}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "component",
+					type: AlertComponent,
+					selector: "ui-alert",
+					inputs: [
+						"variant",
+						"title",
+						"dismissible",
+						"dismissAriaLabel",
+						"quiet",
+						"compact",
+						"inline",
+						"fill"
+					],
+					outputs: ["dismissed"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: DetailCardComponent,
+					selector: "ui-detail-card",
+					inputs: [
+						"title",
+						"uppercaseTitle",
+						"headingLevel",
+						"titleId",
+						"ariaLabel",
+						"subtitle",
+						"background",
+						"headerBackground",
+						"footerBackground",
+						"textColor",
+						"showHeader",
+						"collapsible",
+						"expanded",
+						"showEdit",
+						"editLabel",
+						"editTestId",
+						"editIcon",
+						"editAriaLabel",
+						"fill",
+						"maxBodyHeight",
+						"selectable",
+						"selected",
+						"selectedColor",
+						"selectedBackground"
+					],
+					outputs: [
+						"expandedChange",
+						"editClick",
+						"selectedChange"
+					]
+				},
+				{
+					kind: "component",
+					type: HintComponent,
+					selector: "ui-hint"
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"name",
+						"tooltip",
+						"ariaLabel",
+						"size",
+						"variant",
+						"disabled",
+						"loading",
+						"interactive"
+					],
+					outputs: ["iconClick"]
+				},
+				{
+					kind: "component",
+					type: ModalComponent,
+					selector: "ui-modal",
+					inputs: [
+						"open",
+						"title",
+						"description",
+						"maxWidth",
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable",
+						"layout",
+						"closeOnBackdrop",
+						"closeOnEscape",
+						"busy",
+						"returnFocusTo"
+					],
+					outputs: ["close"]
+				},
+				{
+					kind: "component",
+					type: SectionHeaderComponent,
+					selector: "ui-section-header",
+					inputs: [
+						"title",
+						"description",
+						"icon",
+						"level",
+						"background",
+						"textColor",
+						"iconColor",
+						"iconBackground",
+						"bordered",
+						"size",
+						"noPaddingTop",
+						"noPaddingLeft",
+						"noPaddingBottom"
+					]
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"height",
+						"width",
+						"radius",
+						"mb",
+						"ariaLabel"
+					]
+				},
+				{
+					kind: "component",
+					type: StackComponent,
+					selector: "ui-stack",
+					inputs: [
+						"gap",
+						"direction",
+						"align",
+						"justify",
+						"wrap",
+						"minHeight",
+						"width",
+						"maxWidth",
+						"padding",
+						"centered"
+					]
+				},
+				{
+					kind: "component",
+					type: TextInputComponent,
+					selector: "ui-text-input",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"inputTestId",
+						"placeholder",
+						"prefix",
+						"revealable",
+						"passwordRequirements",
+						"passwordRules",
+						"type",
+						"maxlength",
+						"required",
+						"autocomplete",
+						"inputmode",
+						"readonly",
+						"hint",
+						"ariaDescribedBy",
+						"error",
+						"phoneFormat",
+						"min",
+						"max",
+						"maxDecimals",
+						"step",
+						"valueType",
+						"formatter",
+						"integer",
+						"showErrors",
+						"disabled"
+					],
+					outputs: [
+						"valueChange",
+						"focused",
+						"blurred",
+						"invalidChange"
+					]
+				},
+				{
+					kind: "component",
+					type: PdfViewerComponent,
+					selector: "ui-pdf-viewer",
+					inputs: [
+						"src",
+						"data",
+						"httpHeaders",
+						"withCredentials",
+						"workerSrc",
+						"maxPageWidth",
+						"pixelRatio",
+						"fields",
+						"hotspots",
+						"ariaLabel",
+						"loadingText",
+						"errorText",
+						"unsupportedText",
+						"openText",
+						"checkBrowserSupport"
+					],
+					outputs: [
+						"hotspotActivate",
+						"loaded",
+						"loadFailed",
+						"pagesRendered"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: DocumentSignModalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-document-sign-modal",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				AlertComponent,
+				ButtonComponent,
+				DetailCardComponent,
+				HintComponent,
+				IconComponent,
+				ModalComponent,
+				SectionHeaderComponent,
+				SkeletonComponent,
+				StackComponent,
+				TextInputComponent,
+				PdfViewerComponent
+			],
+			template: `
+    <ui-modal [open]="open()" [title]="t().title" maxWidth="56rem" bodyOverflow="auto" dialogTestId="sign-modal" (close)="cancel()">
+      @if (loading()) {
+        <ui-stack gap="md" align="center" role="status" aria-live="polite" data-testid="sign-loading">
+          <ui-skeleton [height]="24" width="60%" />
+          <ui-hint>{{ t().loading }}</ui-hint>
+        </ui-stack>
+      } @else if (error()) {
+        <ui-alert variant="danger" data-testid="sign-error">{{ error() }}</ui-alert>
+      } @else {
+        <ui-stack gap="md">
+          <ui-detail-card [title]="t().step1" [headingLevel]="4" [collapsible]="false" data-testid="signature-step">
+            @if (!signature()) {
+              <ui-stack gap="sm">
+                <ui-text-input data-testid="typed-name-input" [placeholder]="t().namePlaceholder" [ariaLabel]="t().namePlaceholder"
+                               [ngModel]="typedName()" (ngModelChange)="typedName.set($event ?? '')" />
+                <div class="ds-preview">
+                  @if (typedName()) {
+                    <span class="ds-typed" data-testid="typed-signature-preview">{{ typedName() }}</span>
+                  } @else {
+                    <span class="ds-empty">{{ t().previewEmpty }}</span>
+                  }
+                </div>
+                <ui-button variant="primary" [fullWidth]="true" [disabled]="!typedName().trim()" data-testid="save-typed-signature" (click)="saveTypedSignature()">
+                  <ui-icon name="check" [size]="16" [interactive]="false" /> {{ t().saveSignature }}
+                </ui-button>
+              </ui-stack>
+            } @else {
+              <ui-stack gap="sm">
+                <div class="ds-saved"><img [src]="signature()!" alt="Your saved signature" class="ds-saved-img"></div>
+                <ui-button variant="secondary" [ariaLabel]="t().change + ' signature'" data-testid="redraw-signature" (click)="changeSignature()">
+                  <ui-icon name="edit" [size]="16" [interactive]="false" /> {{ t().change }}
+                </ui-button>
+              </ui-stack>
+            }
+          </ui-detail-card>
+
+          @if (signature()) {
+            <ui-section-header [level]="4" size="sm" [title]="t().step2" data-testid="apply-step" />
+          }
+
+          <ui-pdf-viewer [data]="data()" [hotspots]="hotspots()" [ariaLabel]="t().title" [loadingText]="t().loading" (hotspotActivate)="apply($event)" />
+        </ui-stack>
+      }
+
+      <ui-hint modal-footer-left role="status" aria-live="polite" aria-atomic="true" data-testid="sign-progress">
+        @if (fields().length === 0) { {{ t().noFields }} } @else if (allSigned()) { {{ t().allSigned }} } @else { {{ signedCount() }} of {{ fields().length }} signed }
+      </ui-hint>
+      <ui-stack modal-footer-right direction="horizontal" gap="sm" [wrap]="true">
+        <ui-button variant="secondary" data-testid="sign-cancel" (click)="cancel()"><ui-icon name="close" [size]="16" [interactive]="false" /> {{ t().cancel }}</ui-button>
+        <ui-button variant="primary" data-testid="sign-complete" [disabled]="!allSigned() || submitting()" [loading]="submitting()" (click)="complete()">
+          <ui-icon name="check" [size]="16" [interactive]="false" /> {{ submitting() ? t().submitting : t().complete }}
+        </ui-button>
+      </ui-stack>
+    </ui-modal>
+  `,
+			styles: [".ds-preview{display:flex;align-items:center;min-height:64px;padding:4px 12px;border:1px dashed #cbd5e1;border-radius:8px;background:#fff;overflow:hidden}.ds-empty{color:#94a3b8;font-size:.875rem}.ds-typed{font-family:Dancing Script,cursive;font-weight:700;font-size:2.25rem;line-height:1.2;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-saved{display:flex;align-items:center;min-height:64px;padding:4px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff}.ds-saved-img{display:block;max-width:100%;height:60px;object-fit:contain;object-position:left}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		fields: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fields",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		signerName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "signerName",
+				required: false
+			}]
+		}],
+		savedSignature: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "savedSignature",
+				required: false
+			}]
+		}],
+		submitting: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "submitting",
+				required: false
+			}]
+		}],
+		texts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "texts",
+				required: false
+			}]
+		}],
+		signed: [{
+			type: i0.Output,
+			args: ["signed"]
+		}],
+		signatureCreated: [{
+			type: i0.Output,
+			args: ["signatureCreated"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+export { DocumentSignModalComponent, DocumentViewerModalComponent, PDF_VIEWER_REQUIRED_FEATURES, PDF_VIEWER_WORKER_SRC, PdfViewerComponent, PdfViewerUnsupportedError, findMissingPdfFeatures, provideForgeroutePdf };
 
 //# sourceMappingURL=forgeroute-ui-pdf.mjs.map