@design.estate/dees-document 1.1.0 → 1.3.0

package/npmextra.json

@@ -5,29 +5,26 @@
       "githost": "code.foss.global",
       "gitscope": "designestate/private",
       "gitrepo": "dedocument-catalog",
-      "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
+      "description": "A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.",
       "npmPackagename": "@designestate_private/dedocument-catalog",
       "license": "MIT",
       "projectDomain": "design.estate",
       "shortDescription": "undefined variable",
       "keywords": [
         "document generation",
-        "invoices",
+        "invoice automation",
+        "business documentation",
+        "dynamic rendering",
         "PDF creation",
-        "TypeScript",
         "web components",
+        "Node.js",
+        "TypeScript",
         "templating",
-        "dynamic rendering",
+        "modern web technologies",
         "responsive design",
-        "business documentation",
-        "automated workflows",
-        "modular architecture",
-        "smart contracts",
-        "javascript",
         "QR code",
-        "custom elements",
-        "nodejs",
-        "data-driven"
+        "modular architecture",
+        "automated workflows"
       ]
     }
   },

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": false,
-  "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
+  "description": "A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "exports": {
@@ -22,6 +22,7 @@
     "@push.rocks/smartpdf": "^3.1.8",
     "@push.rocks/smarttime": "^4.0.8",
     "@tsclass/tsclass": "^4.1.2",
+    "@types/node": "^22.10.1",
     "@types/qrcode": "^1.5.5",
     "qrcode": "^1.5.4"
   },
@@ -59,22 +60,19 @@
   "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
   "keywords": [
     "document generation",
-    "invoices",
+    "invoice automation",
+    "business documentation",
+    "dynamic rendering",
     "PDF creation",
-    "TypeScript",
     "web components",
+    "Node.js",
+    "TypeScript",
     "templating",
-    "dynamic rendering",
+    "modern web technologies",
     "responsive design",
-    "business documentation",
-    "automated workflows",
-    "modular architecture",
-    "smart contracts",
-    "javascript",
     "QR code",
-    "custom elements",
-    "nodejs",
-    "data-driven"
+    "modular architecture",
+    "automated workflows"
   ],
   "scripts": {
     "test": "npm run build && tstest test/",

package/readme.md

@@ -1,31 +1,32 @@
+```markdown
 # @design.estate/dees-document
 
-A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.
+A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.
 
 ## Install
 
-To add `@design.estate/dees-document` to your project, run the following command in your terminal:
+To incorporate `@design.estate/dees-document` into your project, execute the following command in your terminal:
 
 ```shell
 npm install @design.estate/dees-document --save
 ```
 
-This will install the package and add it to your project's dependencies, ensuring all required modules are available in your `node_modules` directory.
+This command will install the package and add it to your project's dependencies, thus making all the necessary modules available within your `node_modules` directory.
 
 ## Usage
 
-The `@design.estate/dees-document` package provides a robust framework for creating documents including invoices, contracts, and various other business-related documents. It is built on modern web technologies including TypeScript and ES modules to ensure a type-safe and easy-to-integrate experience. Below, we will guide you through the comprehensive usage of this package, from setting up your environment to generating PDF documents. 
+The `@design.estate/dees-document` package serves as a robust framework to facilitate the generation of business documents, such as invoices and contracts. Leveraging modern web technologies, this package integrates seamlessly with TypeScript and ES modules, offering a type-safe environment conducive to efficient, dynamic document creation. Presented here is a comprehensive guide to utilizing this package, ranging from initializing your environment to generating complete PDF documents.
 
 ### Getting Started
 
-Before creating documents, initialize the document service which is central to this package. This is typically done at the beginning of your application.
+To embark on a document creation journey, initiate the document service. This service constitutes the core of this package and is typically started at the application's outset.
 
 ```typescript
 import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
 
 async function setupPdfService() {
   const options: IPdfServiceConstructorOptions = {
-    // Add necessary configuration here
+    // configure your options here
   };
   
   const pdfService = await PdfService.createAndStart(options);
@@ -34,15 +35,15 @@ async function setupPdfService() {
 }
 ```
 
-This script initializes `PdfService`. Modify the options to tailor the service to your needs.
+The above code initializes the `PdfService`. Tailor the configuration options to suit your specific requirements.
 
 ### Creating Documents
 
-With the PDF service ready, you can proceed to generate documents. The following section provides a detailed example of creating an invoice. This example is applicable to various document types with necessary adjustments.
+With the PDF service initialized, you can now proceed to generate your documents. In the following section, you will find a detailed walkthrough for creating an invoice. This method can be adapted to other document types with necessary modifications.
 
 #### Step-by-Step: Create an Invoice
 
-1. **Define the Data Structure**: Describe the invoice details. This includes sender and recipient information, the items being invoiced, and more.
+1. **Define the Data Structure**: Construct the details of the invoice, including the sender, recipient information, and the details of the items being invoiced.
 
    ```typescript
    import { ILetter } from '@design.estate/dees-document';
@@ -95,22 +96,22 @@ With the PDF service ready, you can proceed to generate documents. The following
    };
    ```
 
-   Here, `ILetter` interface details all components of an invoice including sender (`from`) and recipient (`to`) information, as well as the invoiced items.
+   The `ILetter` interface captures all the components of an invoice, including both the sender (`from`) and recipient (`to`) information, alongside the details of the invoiced items.
 
-2. **Generate the PDF**: Transform the invoice details into a PDF.
+2. **Generate the PDF**: Convert the invoice details into a PDF file.
 
    ```typescript
    async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
      const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
      console.log('Invoice PDF generated successfully.');
 
-     // Save the PDF, send it via email, etc.
+     // Here you could save the PDF to your filesystem, send it via email, etc.
    }
    ```
 
-   The function `createPdfFromLetterObject` returns a `Buffer` containing the generated PDF. From here, you can save this PDF to a file, send it to clients, or archive it.
+   The `createPdfFromLetterObject` function returns a `Buffer` that contains the generated PDF, enabling you to save it to a file, send it to clients, or store it for record-keeping.
 
-3. **Integrate It All**: Here's how everything ties together into a complete script for generating an invoice:
+3. **Integrate It All**: The following script ties together the PDF service and generates the invoice with the described data.
 
    ```typescript
    async function main() {
@@ -121,15 +122,15 @@ With the PDF service ready, you can proceed to generate documents. The following
    main().then(() => console.log('Invoice generation process completed.'));
    ```
 
-   This script initiates the PDF service and generates the invoice PDF with the provided information.
+   This example initiates the PDF service and utilizes it to generate a PDF invoice with specified parameters.
 
 ### Advanced Document Features
 
-The package is designed to create not only invoices but a wide range of document types. Leverage its modular architecture to build and customize documents to fit specific needs.
+The package is designed to create a broad range of documents, far beyond simple invoices. Utilize the modular architecture to customize documents to your specific business requirements.
 
 #### Advanced Scenarios
 
-1. **Custom Styling**: Customize the appearance of elements within your documents, such as headers, footers, and more.
+1. **Custom Styling**: Alter the visual styles of various elements within your documents, like headers, footers, and more through CSS or inline styles.
 
    ```typescript
    import { DeDocumentViewer } from '@design.estate/dees-element';
@@ -139,31 +140,33 @@ The package is designed to create not only invoices but a wide range of document
    document.body.appendChild(customStyledViewer);
    ```
 
-   Customize via CSS or dynamically through TypeScript where necessary.
+   Adjust styles either with standard CSS or via dynamic TypeScript changes.
 
-2. **Interactive Document Elements**: Incorporate UI components like buttons, input fields, or visualizations tailored for your document needs.
+2. **Interactive Document Elements**: Integrate interactive UI components, like buttons or input fields, fitting seamlessly into your documents.
 
-3. **Multi-page Document Generation**: Handle overflow of content and automatic page generation while maintaining headers and footers.
+3. **Multi-page Document Generation**: Handle content overflow elegantly through automatic page creation, keeping headers and footers intact.
 
    ```typescript
    pdfService.adjustDePageScaling();
    ```
 
-   Toggle between print and digital formats and handle scaling.
+   Adapt between print and digital formats, managing scaling effectively.
 
-4. **Embedding Images and Logos**: Add company logos, graphics, or auxiliary content to enhance document presentation.
+4. **Embedding Images and Logos**: Enhance your document's appearance with company logos, graphics, and other auxiliary content.
 
 ### Additional Capabilities
 
-Beyond these examples, delve deeper into advanced functionalities such as:
+Beyond basic functionality, this package offers a range of advanced features:
 
-- **Document Management**: Manage multiple document templates, manage versions, and add annotations or notes.
-- **Dynamic Rendering**: Use templating for dynamic content rendering based on variable inputs.
-- **Responsive Design for Digital Documents**: Ensure documents are displayed correctly across devices.
+- **Document Management**: Manage multiple document templates, maintain version control, and append annotations or notes.
+- **Dynamic Rendering**: Utilize templating engines to render dynamic content based on input variables.
+- **Responsive Design for Digital Documents**: Ensure your documents are consistently displayed across various devices.
 
 ### Concluding Remarks
 
-The `@design.estate/dees-document` package is an essential tool in the modern document generation ecosystem. Its expansive capabilities, from basic invoices to complex document templates, make it a versatile solution for businesses of all scales. Implementing this service broadly simplifies document management workflows and enhances document presentation precision and quality. For further depth, consult the package's documentation or explore the examples included in the module.
+The `@design.estate/dees-document` package presents a powerful solution within the modern document generation realm. From basic invoices to intricate templates, this package provides the essential tools for businesses to streamline their document workflows and enhance their presentation quality and accuracy. Explore further depth by consulting the package’s detailed documentation or by reviewing the examples included within the module.
+```
+
 
 ## License and Legal Information
 

package/ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.1.0',
-  description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
+  version: '1.3.0',
+  description: 'A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.'
 }

package/ts/interfaces/document.ts

@@ -1,5 +1,8 @@
+import * as shared from '../shared/index.js';
+
 export interface IDocumentSettings {
   enableTopDraftText?: boolean;
   enableDefaultHeader?: boolean;
   enableDefaultFooter?: boolean;
+  languageCode?: shared.translation.TLanguageCode;
 }

package/ts/interfaces/translation.ts

@@ -1,4 +1,19 @@
 export interface IDeDocumentTranslations {
-  "invoice": string;
-  "quantity": string;
+  address: string;
+  bankConnection: string;
+  contactInfo: string;
+  description: string;
+  invoice: string;
+  itemPos: string;
+  quantity: string;
+  registrationInfo: string;
+  reverseVatNote: string;
+  totalNetPrice: string;
+  unitNetPrice: string;
+  unitType: string;
+  yourCustomerId: string;
+  yourVatId: string;
+  continuesOnPage: string;
+  finalPageStatement: string;
+  page: string;
 }

package/{ts_web/elements → ts}/shared/demoletter.ts

@@ -1,4 +1,6 @@
 import * as tsclass from '@tsclass/tsclass';
+import * as interfaces from '../interfaces/index.js';
+
 const fromContact: tsclass.business.IContact = {
   name: 'Awesome From Company',
   type: 'company',
@@ -207,4 +209,11 @@ export const demoLetter: tsclass.business.ILetter = {
   logoUrl: null,
   pdfAttachments: null,
   subject: 'Invoice: LL-INV-48765',
-}
+}
+
+export const demoDocumentSettings: interfaces.IDocumentSettings = {
+  enableTopDraftText: true,
+  enableDefaultHeader: true,
+  enableDefaultFooter: true,
+  languageCode: 'DE',
+};

package/{ts_web/elements → ts}/shared/index.ts

@@ -6,4 +6,4 @@ export const leftMargin = 90;
 import * as translation from './translation.js';
 export { translation };
 
-export * from './demoletter.js';
+export * from './demoletter.js';

package/ts/shared/translation.ts

@@ -0,0 +1,82 @@
+import * as interfaces from '../interfaces/index.js';
+
+type TTranslationImplementation = {
+  [key in keyof interfaces.IDeDocumentTranslations]: string;
+}
+
+export const EN_translations: TTranslationImplementation = {
+  address: 'Address',
+  bankConnection: 'Bank Connection',
+  contactInfo: 'Contact Info',
+  description: 'Description',
+  invoice: 'Invoice',
+  itemPos: 'Item Pos.',
+  quantity: 'Quantity',
+  registrationInfo: 'Registration Info',
+  reverseVatNote: 'VAT arises on a reverse charge basis and is payable by the customer.',
+  totalNetPrice: 'Total Net Price',
+  unitNetPrice: 'Unit Net Price',
+  unitType: 'Unit Type',
+  yourCustomerId: 'Your Customer ID:',
+  yourVatId: 'Your vat id on file:',
+  continuesOnPage: 'Continues on page',
+  finalPageStatement: 'This is the final page of this document.',
+  page: 'Page',
+};
+
+export const DE_translations: TTranslationImplementation = {
+  address: 'Adresse',
+  bankConnection: 'Bankverbindung',
+  contactInfo: 'Kontaktinformationen',
+  description: 'Beschreibung',
+  invoice: 'Rechnung',
+  itemPos: 'Pos.',
+  quantity: 'Anzahl',
+  registrationInfo: 'HRA/HRB Info',
+  reverseVatNote: 'Umkehr der Umsatzsteuerpflicht: Der Rechnungsempfänger ist für die korrekte Abrechnung der Umsatzsteuer zuständig.',
+  totalNetPrice: 'Nettopreis Summe',
+  unitNetPrice: 'Nettopreis',
+  unitType: 'Einheit',
+  yourCustomerId: 'Ihre Kundennummer:',
+  yourVatId: 'Ihre Umsatzsteuer-ID:',
+  continuesOnPage: 'Fortsetzung auf Seite',
+  finalPageStatement: 'Diese ist die letzte Seite einer Dokumente.',
+  page: 'Seite',
+};
+
+export const ES_translations: TTranslationImplementation = {
+  address: 'Dirección',
+  bankConnection: 'Conexión bancaria',
+  contactInfo: 'Información de contacto',
+  description: 'Descripción',
+  invoice: 'Factura',
+  itemPos: 'Pos.',
+  quantity: 'Cantidad',
+  registrationInfo: 'Información de registro',
+  reverseVatNote: 'La declaración de IVA se aplica en base a la factura de venta, y se paga por el cliente.',
+  totalNetPrice: 'Precio total neto',
+  unitNetPrice: 'Precio unitario neto',
+  unitType: 'Tipo de unidad',
+  yourCustomerId: 'Su número de cliente:',
+  yourVatId: 'Su ID de IVA:',
+  continuesOnPage: 'Continues on page',
+  finalPageStatement: 'This is the final page of this document.',
+  page: 'Page',
+};
+
+export const languageCodeMap = {
+  'DE': DE_translations,
+  'EN': EN_translations,
+  'ES': ES_translations,
+};
+
+export type TLanguageCode = keyof typeof languageCodeMap;
+
+export const translate = (languageCode: TLanguageCode, key: string, defaultValue: string) => {
+  const translations = languageCodeMap[languageCode] || EN_translations;
+  if (translations && translations[key]) {
+    return translations[key];
+  } else {
+    return defaultValue;
+  }
+};

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.1.0',
-  description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
+  version: '1.3.0',
+  description: 'A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.'
 }

package/ts_web/elements/contentinvoice.ts

@@ -15,8 +15,8 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 import * as plugins from '../plugins.js';
-import * as shared from './shared/index.js';
-
+import * as shared from '../../ts/shared/index.js';
+import * as interfaces from '../../ts/interfaces/index.js';
 
 
 declare global {
@@ -45,6 +45,12 @@ export class DeContentInvoice extends DeesElement {
   })
   public letterData: plugins.tsclass.business.ILetter;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: interfaces.IDocumentSettings;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -275,12 +281,12 @@ export class DeContentInvoice extends DeesElement {
         </style>
         <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
         <div class="grid topLine dataHeader">
-          <div class="lineItem">Item Pos.</div>
-          <div class="lineItem">${shared.translation.translate('DE', 'description', 'Description')}</div>
-          <div class="lineItem">${shared.translation.translate('DE', 'quantity', 'Quantity')}</div>
-          <div class="lineItem">Unit Type</div>
-          <div class="lineItem">Unit Net Price</div>
-          <div class="lineItem">Total Net Price</div>
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
         </div>
         ${(() => {
           let counter = 1;
@@ -329,7 +335,7 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                VAT arises on a reverse charge basis and is payable by the customer.
+                ${shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
               </div>
             `
           : ``}

package/ts_web/elements/document.demo.ts

@@ -1,4 +1,4 @@
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import { html } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`

package/ts_web/elements/document.ts

@@ -24,7 +24,7 @@ export const defaultDocumentSettings: interfaces.IDocumentSettings = {
 import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import { demoFunc } from './document.demo.js';
 
 declare global {
@@ -146,6 +146,7 @@ export class DeDocument extends DeesElement {
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
     content.letterData = this.letterData;
+    content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
 
     await domtools.convenience.smartdelay.delayFor(0);
@@ -158,6 +159,7 @@ export class DeDocument extends DeesElement {
       const newPage = new DePage();
       newPage.printMode = this.printMode;
       newPage.letterData = this.letterData;
+      newPage.documentSettings = this.documentSettings;
       pages.push(newPage);
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);

package/ts_web/elements/index.ts

@@ -8,4 +8,4 @@ export * from './pagefooter.js';
 export * from './pageheader.js';
 export * from './viewer.js';
 
-export * from './shared/index.js';
+export * from '../../ts/shared/index.js';

package/ts_web/elements/letterheader.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
 
 declare global {

package/ts_web/elements/page.ts

@@ -15,7 +15,7 @@ import * as interfaces from '../../ts/interfaces/index.js';
 
 import { defaultDocumentSettings } from './document.js';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -127,6 +127,7 @@ export class DePage extends DeesElement {
                   ? html`
                       <dedocument-pageheader
                         .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                         .pageNumber="${this.pageNumber}"
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pageheader>
@@ -137,20 +138,23 @@ export class DePage extends DeesElement {
                       <dedocument-letterheader
                         .pageNumber="${this.pageNumber}"
                         .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-letterheader>
                     `
                   : html``}
                 <dedocument-pagecontent
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
                   .pageNumber="${this.pageNumber}"
                   .pageTotalNumber="${this.pageTotalNumber}"
-                  .letterData=${this.letterData}
                   ><slot></slot
                 ></dedocument-pagecontent>
                 ${this.documentSettings.enableDefaultFooter
                   ? html`
                       <dedocument-pagefooter
                         .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                         .pageNumber="${this.pageNumber}"
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pagefooter>

package/ts_web/elements/pagecontainer.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {

package/ts_web/elements/pagecontent.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
 
 declare global {

package/ts_web/elements/pagefooter.ts

@@ -7,10 +7,12 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as interfaces from '../../ts/interfaces/index.js';
+
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
 
 declare global {
@@ -30,6 +32,12 @@ export class DePageFooter extends DeesElement {
   })
   letterData: tsclass.business.ILetter;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  documentSettings: interfaces.IDocumentSettings;
+
   @property({
     type: Number
   })
@@ -96,26 +104,26 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>Address:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
           ${this.letterData.from.name}<br />
           ${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
           ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
           ${this.letterData.from.address.country}
         </div>
         <div>
-          <strong>Registration Info:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
           Amtsgericht Bremen<br />
           <i>reg-#:</i> HRB 35230 HB<br />
           <i>vat-id:</i> ${this.letterData.from.vatId}
         </div>
         <div>
-          <strong>Contact Info:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
           <i>email:</i> ${this.letterData.from.email}<br />
           <i>phone:</i> ${this.letterData.from.phone}<br />
           <i>fax:</i> ${this.letterData.from.fax}
         </div>
         <div>
-          <strong>Bank Connection:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
           <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
           <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
           <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />