feat(translation): Add multi-language support for document translations.

ts_web/00_commitinfo_data.ts

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

ts_web/elements/contentinvoice.ts

@@ -16,7 +16,7 @@ import {
 } from '@design.estate/dees-element';
 import * as plugins from '../plugins.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>
             `
           : ``}

ts_web/elements/document.ts

@@ -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);

ts_web/elements/page.ts

@@ -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>

ts_web/elements/pagefooter.ts

@@ -7,8 +7,10 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+
+import * as interfaces from '../../ts/interfaces/index.js';
 
 import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
@@ -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 />

ts_web/elements/pageheader.ts

@@ -7,8 +7,10 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+
+import * as interfaces from '../../ts/interfaces/index.js';
 
 import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
@@ -30,6 +32,12 @@ export class DePageHeader extends DeesElement {
   })
   public letterData: tsclass.business.ILetter = null;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  documentSettings: interfaces.IDocumentSettings;
+
   @property({
     type: Number,
   })

ts_web/elements/viewer.ts

@@ -3,7 +3,6 @@ import * as interfaces from '../../ts/interfaces/index.js';
 
 import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
 import { demoFunc } from './viewer.demo.js';
-import { defaultDocumentSettings } from './document.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,7 +18,7 @@ export class DeDocumentViewer extends DeesElement {
   // INSTANCE
   public letterData: plugins.tsclass.business.ILetter = null;
 
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: interfaces.IDocumentSettings;
 
   public static styles = [
     cssManager.defaultStyles,