@forgeroute/ui 0.4.77 → 0.4.79

package/fesm2022/forgeroute-ui-pdf.mjs

@@ -1,7 +1,7 @@
 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 { AlertComponent, ButtonComponent, DetailCardComponent, HintComponent, IconComponent, ModalComponent, SectionHeaderComponent, SkeletonComponent, StackComponent, TextInputComponent, UiLabelsService } 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", {
@@ -43,6 +43,7 @@ var PdfViewerUnsupportedError = class extends Error {
 };
 var PdfViewerComponent = class PdfViewerComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
 		this.data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
 		this.httpHeaders = input({}, ...ngDevMode ? [{ debugName: "httpHeaders" }] : /* istanbul ignore next */ []);
@@ -53,10 +54,26 @@ var PdfViewerComponent = class PdfViewerComponent {
 		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.loadingTextInput = input(null, {
+			...ngDevMode ? { debugName: "loadingTextInput" } : /* istanbul ignore next */ {},
+			alias: "loadingText"
+		});
+		this.loadingText = computed(() => this.loadingTextInput() ?? this.labels.t("pdfPdfViewer.loadingText"), ...ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []);
+		this.errorTextInput = input(null, {
+			...ngDevMode ? { debugName: "errorTextInput" } : /* istanbul ignore next */ {},
+			alias: "errorText"
+		});
+		this.errorText = computed(() => this.errorTextInput() ?? this.labels.t("pdfPdfViewer.errorText"), ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
+		this.unsupportedTextInput = input(null, {
+			...ngDevMode ? { debugName: "unsupportedTextInput" } : /* istanbul ignore next */ {},
+			alias: "unsupportedText"
+		});
+		this.unsupportedText = computed(() => this.unsupportedTextInput() ?? this.labels.t("pdfViewer.unsupported"), ...ngDevMode ? [{ debugName: "unsupportedText" }] : /* istanbul ignore next */ []);
+		this.openTextInput = input(null, {
+			...ngDevMode ? { debugName: "openTextInput" } : /* istanbul ignore next */ {},
+			alias: "openText"
+		});
+		this.openText = computed(() => this.openTextInput() ?? this.labels.t("pdfPdfViewer.openText"), ...ngDevMode ? [{ debugName: "openText" }] : /* istanbul ignore next */ []);
 		this.checkBrowserSupport = input(true, ...ngDevMode ? [{ debugName: "checkBrowserSupport" }] : /* istanbul ignore next */ []);
 		this.hotspotActivate = output();
 		this.loaded = output();
@@ -233,7 +250,7 @@ var PdfViewerComponent = class PdfViewerComponent {
 			const worker = this.workerSrc() || this.tokenWorkerSrc;
 			if (worker) pdfjs.GlobalWorkerOptions.workerSrc = worker;
 			else if (!pdfjs.GlobalWorkerOptions.workerSrc) {
-				this.fail(/* @__PURE__ */ new Error(WORKER_MISSING), WORKER_MISSING);
+				this.fail(/* @__PURE__ */ new Error(WORKER_MISSING), this.labels.t("pdfViewer.workerMissing"));
 				return;
 			}
 			const params = data != null ? { data: data instanceof Uint8Array ? data.slice() : new Uint8Array(data.slice(0)) } : { url: src };
@@ -449,29 +466,29 @@ var PdfViewerComponent = class PdfViewerComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				loadingText: {
-					classPropertyName: "loadingText",
+				loadingTextInput: {
+					classPropertyName: "loadingTextInput",
 					publicName: "loadingText",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				errorText: {
-					classPropertyName: "errorText",
+				errorTextInput: {
+					classPropertyName: "errorTextInput",
 					publicName: "errorText",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				unsupportedText: {
-					classPropertyName: "unsupportedText",
+				unsupportedTextInput: {
+					classPropertyName: "unsupportedTextInput",
 					publicName: "unsupportedText",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				openText: {
-					classPropertyName: "openText",
+				openTextInput: {
+					classPropertyName: "openTextInput",
 					publicName: "openText",
 					isSignal: true,
 					isRequired: false,
@@ -503,7 +520,7 @@ var PdfViewerComponent = class PdfViewerComponent {
           <div class="pv-state pv-unsupported">
             <p class="pv-unsupported-text">{{ unsupportedText() }}</p>
             @if (openUrl(); as url) {
-              <a class="pv-open" [href]="url" target="_blank" rel="noopener">{{ openText() }}<span class="pv-sr"> (opens in a new tab)</span></a>
+              <a class="pv-open" [href]="url" target="_blank" rel="noopener">{{ openText() }}<span class="pv-sr"> {{ labels.t('dataTable.opensInNewTab') }}</span></a>
             }
           </div>
         }
@@ -511,7 +528,7 @@ var PdfViewerComponent = class PdfViewerComponent {
           <div class="pv-pages">
             @for (p of views(); track p.number) {
               <div class="pv-page" [style.width.px]="p.cssWidth">
-                <canvas class="pv-canvas" role="img" [attr.aria-label]="'Page ' + p.number + ' of ' + views().length"
+                <canvas class="pv-canvas" role="img" [attr.aria-label]="labels.t('pdfViewer.pageOf', { n: p.number, total: views().length })"
                         [attr.width]="p.canvasWidth" [attr.height]="p.canvasHeight"></canvas>
                 @for (f of p.fields; track $index) {
                   <div class="pv-field pv-tone-{{ f.tone }}"
@@ -524,7 +541,7 @@ var PdfViewerComponent = class PdfViewerComponent {
                   <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'" />
+                      <img class="pv-hotspot-image" [src]="h.hotspot.image" [alt]="h.hotspot.imageAlt || labels.t('pdfDocumentSignModal.appliedSignature')" />
                     } @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"
@@ -569,7 +586,7 @@ i0.ɵɵngDeclareClassMetadata({
           <div class="pv-state pv-unsupported">
             <p class="pv-unsupported-text">{{ unsupportedText() }}</p>
             @if (openUrl(); as url) {
-              <a class="pv-open" [href]="url" target="_blank" rel="noopener">{{ openText() }}<span class="pv-sr"> (opens in a new tab)</span></a>
+              <a class="pv-open" [href]="url" target="_blank" rel="noopener">{{ openText() }}<span class="pv-sr"> {{ labels.t('dataTable.opensInNewTab') }}</span></a>
             }
           </div>
         }
@@ -577,7 +594,7 @@ i0.ɵɵngDeclareClassMetadata({
           <div class="pv-pages">
             @for (p of views(); track p.number) {
               <div class="pv-page" [style.width.px]="p.cssWidth">
-                <canvas class="pv-canvas" role="img" [attr.aria-label]="'Page ' + p.number + ' of ' + views().length"
+                <canvas class="pv-canvas" role="img" [attr.aria-label]="labels.t('pdfViewer.pageOf', { n: p.number, total: views().length })"
                         [attr.width]="p.canvasWidth" [attr.height]="p.canvasHeight"></canvas>
                 @for (f of p.fields; track $index) {
                   <div class="pv-field pv-tone-{{ f.tone }}"
@@ -590,7 +607,7 @@ i0.ɵɵngDeclareClassMetadata({
                   <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'" />
+                      <img class="pv-hotspot-image" [src]="h.hotspot.image" [alt]="h.hotspot.imageAlt || labels.t('pdfDocumentSignModal.appliedSignature')" />
                     } @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"
@@ -692,7 +709,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		loadingText: [{
+		loadingTextInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -700,7 +717,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		errorText: [{
+		errorTextInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -708,7 +725,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		unsupportedText: [{
+		unsupportedTextInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -716,7 +733,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		openText: [{
+		openTextInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -760,12 +777,21 @@ function provideForgeroutePdf(options) {
 }
 var DocumentViewerModalComponent = class DocumentViewerModalComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
-		this.fileName = input("Document", ...ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []);
+		this.fileNameInput = input(null, {
+			...ngDevMode ? { debugName: "fileNameInput" } : /* istanbul ignore next */ {},
+			alias: "fileName"
+		});
+		this.fileName = computed(() => this.fileNameInput() ?? this.labels.t("pdfDocumentViewerModal.fileName"), ...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.loadingTextInput = input(null, {
+			...ngDevMode ? { debugName: "loadingTextInput" } : /* istanbul ignore next */ {},
+			alias: "loadingText"
+		});
+		this.loadingText = computed(() => this.loadingTextInput() ?? this.labels.t("pdfDocumentViewerModal.loadingText"), ...ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []);
 		this.closed = output();
 		this.hasData = computed(() => !!this.data() && !this.loading() && !this.error(), ...ngDevMode ? [{ debugName: "hasData" }] : /* istanbul ignore next */ []);
 	}
@@ -832,8 +858,8 @@ var DocumentViewerModalComponent = class DocumentViewerModalComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				fileName: {
-					classPropertyName: "fileName",
+				fileNameInput: {
+					classPropertyName: "fileNameInput",
 					publicName: "fileName",
 					isSignal: true,
 					isRequired: false,
@@ -860,8 +886,8 @@ var DocumentViewerModalComponent = class DocumentViewerModalComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				loadingText: {
-					classPropertyName: "loadingText",
+				loadingTextInput: {
+					classPropertyName: "loadingTextInput",
 					publicName: "loadingText",
 					isSignal: true,
 					isRequired: false,
@@ -873,12 +899,10 @@ var DocumentViewerModalComponent = class DocumentViewerModalComponent {
 			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>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-download" [disabled]="!hasData()" [ariaLabel]="labels.t('pdfDocumentViewerModal.downloadDocument')" (click)="download()">
+          <ui-icon name="download" [interactive]="false" />{{ labels.t('common.download') }}</ui-button>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-print" [disabled]="!hasData()" [ariaLabel]="labels.t('pdfDocumentViewerModal.printDocument')" (click)="print()">
+          <ui-icon name="print" [interactive]="false" />{{ labels.t('common.print') }}</ui-button>
       </div>
       @if (loading()) {
         <div class="dvm-state" role="status" aria-live="polite" data-testid="document-viewer-loading">
@@ -1046,12 +1070,10 @@ i0.ɵɵngDeclareClassMetadata({
 			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>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-download" [disabled]="!hasData()" [ariaLabel]="labels.t('pdfDocumentViewerModal.downloadDocument')" (click)="download()">
+          <ui-icon name="download" [interactive]="false" />{{ labels.t('common.download') }}</ui-button>
+        <ui-button variant="secondary" size="sm" data-testid="document-viewer-print" [disabled]="!hasData()" [ariaLabel]="labels.t('pdfDocumentViewerModal.printDocument')" (click)="print()">
+          <ui-icon name="print" [interactive]="false" />{{ labels.t('common.print') }}</ui-button>
       </div>
       @if (loading()) {
         <div class="dvm-state" role="status" aria-live="polite" data-testid="document-viewer-loading">
@@ -1077,7 +1099,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		fileName: [{
+		fileNameInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -1109,7 +1131,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		loadingText: [{
+		loadingTextInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -1123,27 +1145,30 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-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."
-};
+function defaultTexts(uiText) {
+	return {
+		title: uiText("pdfDocumentSignModal.title"),
+		loading: uiText("pdfDocumentSignModal.loading"),
+		step1: uiText("pdfDocumentSignModal.step1"),
+		namePlaceholder: uiText("pdfDocumentSignModal.namePlaceholder"),
+		previewEmpty: uiText("pdfDocumentSignModal.previewEmpty"),
+		saveSignature: uiText("pdfDocumentSignModal.saveSignature"),
+		change: uiText("pdfDocumentSignModal.change"),
+		step2: uiText("pdfDocumentSignModal.step2"),
+		signHere: uiText("pdfDocumentSignModal.signHere"),
+		addSignatureFirst: uiText("pdfDocumentSignModal.addSignatureFirst"),
+		allSigned: uiText("pdfDocumentSignModal.allSigned"),
+		cancel: uiText("common.cancel"),
+		complete: uiText("pdfDocumentSignModal.complete"),
+		submitting: uiText("pdfDocumentSignModal.submitting"),
+		noFields: uiText("pdfDocumentSignModal.noFields")
+	};
+}
 const SIGNATURE_WIDTH = 600;
 const SIGNATURE_HEIGHT = 60;
 var DocumentSignModalComponent = class DocumentSignModalComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		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 */ []);
@@ -1157,9 +1182,13 @@ var DocumentSignModalComponent = class DocumentSignModalComponent {
 		this.signatureCreated = output();
 		this.closed = output();
 		this.t = computed(() => ({
-			...DEFAULT_TEXTS,
+			...defaultTexts((key) => this.labels.t(key)),
 			...this.texts()
 		}), ...ngDevMode ? [{ debugName: "t" }] : /* istanbul ignore next */ []);
+		this.changeAriaLabel = computed(() => {
+			const change = this.t().change;
+			return change === this.labels.t("pdfDocumentSignModal.change") ? this.labels.t("pdfDocumentSignModal.changeSignature") : this.labels.t("pdfDocumentSignModal.changeNamed", { change });
+		}, ...ngDevMode ? [{ debugName: "changeAriaLabel" }] : /* 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 */ []);
@@ -1174,7 +1203,10 @@ var DocumentSignModalComponent = class DocumentSignModalComponent {
 			const image = this.signature();
 			return fields.map((f, i) => {
 				const applied = this.applied()[f.id];
-				const label = `Sign field ${i + 1} of ${fields.length}`;
+				const label = this.labels.t("pdfDocumentSignModal.signField", {
+					n: i + 1,
+					total: fields.length
+				});
 				return {
 					id: f.id,
 					page: f.page,
@@ -1185,9 +1217,9 @@ var DocumentSignModalComponent = class DocumentSignModalComponent {
 					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`,
+					ariaLabel: image ? label : this.labels.t("pdfDocumentSignModal.signFieldDisabled", { label }),
 					image: applied ?? null,
-					imageAlt: "Applied signature"
+					imageAlt: this.labels.t("pdfDocumentSignModal.appliedSignature")
 				};
 			});
 		}, ...ngDevMode ? [{ debugName: "hotspots" }] : /* istanbul ignore next */ []);
@@ -1397,8 +1429,8 @@ var DocumentSignModalComponent = class DocumentSignModalComponent {
               </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()">
+                <div class="ds-saved"><img [src]="signature()!" [attr.alt]="labels.t('pdfDocumentSignModal.yourSavedSignature')" class="ds-saved-img"></div>
+                <ui-button variant="secondary" [ariaLabel]="changeAriaLabel()" data-testid="redraw-signature" (click)="changeSignature()">
                   <ui-icon name="edit" [size]="16" [interactive]="false" /> {{ t().change }}
                 </ui-button>
               </ui-stack>
@@ -1414,7 +1446,7 @@ var DocumentSignModalComponent = class DocumentSignModalComponent {
       }
 
       <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 }
+        @if (fields().length === 0) { {{ t().noFields }} } @else if (allSigned()) { {{ t().allSigned }} } @else { {{ labels.t('pdfDocumentSignModal.progress', { count: signedCount(), total: fields().length }) }} }
       </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>
@@ -1520,6 +1552,7 @@ var DocumentSignModalComponent = class DocumentSignModalComponent {
 						"editIcon",
 						"editAriaLabel",
 						"fill",
+						"noPadding",
 						"maxBodyHeight",
 						"selectable",
 						"selected",
@@ -1753,8 +1786,8 @@ i0.ɵɵngDeclareClassMetadata({
               </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()">
+                <div class="ds-saved"><img [src]="signature()!" [attr.alt]="labels.t('pdfDocumentSignModal.yourSavedSignature')" class="ds-saved-img"></div>
+                <ui-button variant="secondary" [ariaLabel]="changeAriaLabel()" data-testid="redraw-signature" (click)="changeSignature()">
                   <ui-icon name="edit" [size]="16" [interactive]="false" /> {{ t().change }}
                 </ui-button>
               </ui-stack>
@@ -1770,7 +1803,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
 
       <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 }
+        @if (fields().length === 0) { {{ t().noFields }} } @else if (allSigned()) { {{ t().allSigned }} } @else { {{ labels.t('pdfDocumentSignModal.progress', { count: signedCount(), total: fields().length }) }} }
       </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>