package.json

@@ -21,29 +21,27 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-catalog": "^1.4.1",
+    "@design.estate/dees-domtools": "^2.0.65",
-    "@design.estate/dees-domtools": "^2.3.2",
     "@design.estate/dees-element": "^2.0.39",
     "@design.estate/dees-wcctools": "^1.0.90",
     "@git.zone/tsrun": "^1.3.3",
-    "@push.rocks/smartfile": "^11.2.0",
+    "@push.rocks/smartfile": "^11.0.21",
     "@push.rocks/smartjson": "^5.0.20",
     "@push.rocks/smartpath": "^5.0.18",
-    "@push.rocks/smartpdf": "^3.2.2",
+    "@push.rocks/smartpdf": "^3.1.8",
-    "@push.rocks/smarttime": "^4.1.1",
+    "@push.rocks/smarttime": "^4.0.8",
-    "@tsclass/tsclass": "^8.0.3",
+    "@tsclass/tsclass": "^4.1.2",
-    "@types/node": "^22.13.13",
+    "@types/node": "^22.10.1",
     "@types/qrcode": "^1.5.5",
-    "puppeteer": "^24.4.0",
     "qrcode": "^1.5.4"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.3.2",
+    "@git.zone/tsbuild": "^2.2.0",
-    "@git.zone/tsbundle": "^2.2.5",
+    "@git.zone/tsbundle": "^2.1.0",
-    "@git.zone/tstest": "^1.0.96",
+    "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.1.0",
+    "@git.zone/tswatch": "^2.0.34",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.6.0"
+    "@push.rocks/tapbundle": "^5.5.3"
   },
   "files": [
     "ts/**/*",

test/test.ts

@@ -1,107 +1,119 @@
-import * as plugins from "./plugins.js";
+import * as plugins from './plugins.js';
-import * as paths from "./paths.js";
+import * as paths from './paths.js';
-import * as interfaces from "../ts_shared/interfaces/index.js";
+import * as interfaces from '../ts_shared/interfaces/index.js';
-import { expect, tap } from "@push.rocks/tapbundle";
+import { expect, tap } from '@push.rocks/tapbundle';
-import * as deesDocumentServer from "../ts/index.js";
+import * as deesDocumentServer from '../ts/index.js';
 
 let testPdfServiceInstance: deesDocumentServer.PdfService;
-const testLetterData: plugins.tsclass.finance.TInvoice = {
+const testLetterData: plugins.tsclass.business.ILetter = {
-  type: "invoice",
+  accentColor: null,
-  invoiceType: "debitnote",
+  type: 'invoice',
   date: null,
+  needsCoverSheet: true,
   objectActions: [],
   pdf: null,
-  id: "XX-CLIENT-48765",
+  content: {
-  invoiceId: "XX-CLIENT-48765",
+    invoiceData: {
+      id: 'XX-CLIENT-48765',
       reverseCharge: true,
       dueInDays: 30,
-  currency: "EUR",
+      currency: 'EUR',
       notes: [],
+      type: 'debitnote',
+      billedBy: {
+        address: null,
+        description: null,
+        name: 'Some Service GmbH',
+        type: null,
+        customerNumber: null,
+        email: null,
+        facebookUrl: null,
+        fax: null,
+        legalEntity: null,
+        sepaConnection: {
+          bic: 'BPOTBEB1',
+          iban: 'BE72000000001616',
+        },
+      },
+      billedTo: null,
       status: null,
       deliveryDate: new Date().getTime(),
       periodOfPerformance: null,
       printResult: null,
       items: [
         {
-      name: "Website Creation",
+          name: 'Website Creation',
           unitQuantity: 1,
           unitNetPrice: 1200,
-      unitType: "item",
+          unitType: 'item',
           vatPercentage: 0,
           position: 1,
         },
       ],
+    },
+    contractData: {
+      contractDate: Date.now(),
+      id: 'LL-CONTRACT-48765',
+    },
+    textData: [],
+    timesheetData: '',
+  },
   from: {
-    name: "PdfService Test Company",
+    name: 'PdfService Test Company',
-    type: "company",
+    type: 'company',
-    status: "active",
+    description: 'doing pdf stuff',
-    foundedDate: { day: 1, month: 1, year: 2025 },
-    description: "doing pdf stuff",
     address: {
-      streetName: "Awesome Street",
+      streetName: 'Awesome Street',
-      houseNumber: "5",
+      houseNumber: '5',
-      city: "Bremen",
+      city: 'Bremen',
-      country: "Germany",
+      country: 'Germany',
-      postalCode: "28359",
+      postalCode: '28359',
     },
     sepaConnection: {
-      bic: "BPOTBEB1",
+      bic: 'BPOTBEB1',
-      iban: "BE72000000001616",
+      iban: 'BE72000000001616',
-    },
-    registrationDetails: {
-      vatId: "",
-      registrationName: "",
-      registrationId: "",
     },
   },
   to: {
-    name: "Awesome To Company",
+    name: 'Awesome To Company',
-    type: "company",
+    type: 'company',
-    status: "active",
+    description: 'a company that does stuff',
-    foundedDate: { day: 1, month: 1, year: 2025 },
-    description: "a company that does stuff",
     address: {
-      streetName: "Awesome Street",
+      streetName: 'Awesome Street',
-      houseNumber: "5",
+      houseNumber: '5',
-      city: "Bremen",
+      city: 'Bremen',
-      country: "Germany",
+      country: 'Germany',
-      postalCode: "28359",
+      postalCode: '28359',
-    },
-    registrationDetails: {
-      vatId: "",
-      registrationName: "",
-      registrationId: "",
     },
   },
   incidenceId: null,
   language: null,
   legalContact: null,
+  logoUrl: null,
   pdfAttachments: null,
-  subject: "Invoice XX-CLIENT-48765",
+  subject: 'Invoice XX-CLIENT-48765',
   versionInfo: {
-    type: "final",
+    type: 'final',
-    version: "1.0.0",
+    version: '1.0.0',
   },
 };
 
-tap.test("should create a document from an invoice", async () => {
+tap.test('should create a document from an invoice', async () => {
   testPdfServiceInstance = new deesDocumentServer.PdfService({});
   await testPdfServiceInstance.start();
   expect(testPdfServiceInstance).toBeInstanceOf(deesDocumentServer.PdfService);
 });
 
-tap.test("should create an invoice", async () => {
+tap.test('should create an invoice', async () => {
   let counter = 0;
   const saveResult = async (optionsArg: {
-    letterData: plugins.tsclass.finance.TInvoice;
+    letterData: plugins.tsclass.business.ILetter;
     documentSettings: interfaces.IDocumentSettings;
   }) => {
-    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(
+    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(optionsArg);
-      optionsArg
-    );
     await plugins.smartfile.memory.toFs(
       Buffer.from(pdfResult.buffer),
-      plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)
+      plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`),
     );
   };
   await saveResult({
@@ -112,106 +124,106 @@ tap.test("should create an invoice", async () => {
     letterData: {
       ...testLetterData,
       versionInfo: {
-        type: "draft",
+        type: 'draft',
-        version: "1.0.0",
+        version: '1.0.0',
       },
     },
     documentSettings: {},
   });
-  (testLetterData.items = [
+  (testLetterData.content.invoiceData.items = [
     {
-      name: "Website Creation",
+      name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 0,
       position: 1,
     },
     {
-      name: "Hosting",
+      name: 'Hosting',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 19,
       position: 2,
     },
     {
-      name: "Overnight Shipping",
+      name: 'Overnight Shipping',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 24,
       position: 3,
     },
     {
-      name: "Website Creation",
+      name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 0,
       position: 4,
     },
     {
-      name: "Hosting",
+      name: 'Hosting',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 19,
       position: 5,
     },
     {
-      name: "Overnight Shipping",
+      name: 'Overnight Shipping',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 24,
       position: 6,
     },
     {
-      name: "Website Creation",
+      name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 0,
       position: 7,
     },
     {
-      name: "Hosting",
+      name: 'Hosting',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 19,
       position: 8,
     },
     {
-      name: "Overnight Shipping",
+      name: 'Overnight Shipping',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 24,
       position: 9,
     },
     {
-      name: "Website Creation",
+      name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 0,
       position: 10,
     },
     {
-      name: "Hosting",
+      name: 'Hosting',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 19,
       position: 11,
     },
     {
-      name: "Overnight Shipping",
+      name: 'Overnight Shipping',
       unitQuantity: 1,
       unitNetPrice: 1200,
-      unitType: "item",
+      unitType: 'item',
       vatPercentage: 24,
       position: 12,
     },
@@ -222,7 +234,7 @@ tap.test("should create an invoice", async () => {
     });
 });
 
-tap.test("should stop the service", async () => {
+tap.test('should stop the service', async () => {
   await testPdfServiceInstance.stop();
 });
 

ts_shared/demoletter.ts

@@ -1,247 +1,219 @@
-import * as plugins from "./plugins.js";
+import * as plugins from './plugins.js';
-import * as interfaces from "./interfaces/index.js";
+import * as interfaces from './interfaces/index.js';
 
-const fromContact: plugins.tsclass.business.TContact = {
+const fromContact: plugins.tsclass.business.IContact = {
-  name: "Awesome From Company",
+  name: 'Awesome From Company',
-  type: "company",
+  type: 'company',
-  status: "active",
+  description: 'a company that does stuff',
-  foundedDate: { day: 1, month: 1, year: 2025 },
-  description: "a company that does stuff",
   address: {
-    streetName: "Awesome Street",
+    streetName: 'Awesome Street',
-    houseNumber: "5",
+    houseNumber: '5',
-    city: "Bremen",
+    city: 'Bremen',
-    country: "Germany",
+    country: 'Germany',
-    postalCode: "28359",
+    postalCode: '28359',
   },
+  vatId: 'DE12345678',
   sepaConnection: {
-    bic: "BPOTBEB1",
+    bic: 'BPOTBEB1',
-    iban: "BE01234567891616",
+    iban: 'BE01234567891616'
-  },
-  email: "hello@awesome.company",
-  phone: "+49 421 1234567",
-  fax: "+49 421 1234568",
-  registrationDetails: {
-    registrationId: "HRB 35230 HB",
-    registrationName: "Amtsgericht Bremen",
-    vatId: "DE12345678",
   },
+  email: 'hello@awesome.company',
+  phone: '+49 421 1234567',
+  fax: '+49 421 1234568',
+
 };
 
-const toContact: plugins.tsclass.business.TContact = {
+const toContact: plugins.tsclass.business.IContact = {
-  name: "Awesome To GmbH",
+  name: 'Awesome To GmbH',
-  type: "company",
+  type: 'company',
-  status: "active",
+  customerNumber: 'LL-CLIENT-123',
-  foundedDate: { day: 1, month: 1, year: 2025 },
+  description: 'a company that does stuff',
-  customerNumber: "LL-CLIENT-123",
-  description: "a company that does stuff",
   address: {
-    streetName: "Awesome Street",
+    streetName: 'Awesome Street',
-    houseNumber: "5",
+    houseNumber: '5',
-    city: "Bremen",
+    city: 'Bremen',
-    country: "Germany",
+    country: 'Germany',
-    postalCode: "28359",
+    postalCode: '28359'
   },
-  registrationDetails: {
+  vatId: 'BE12345678',
-    registrationId: "HRB 35230 HB",
+}
-    registrationName: "Amtsgericht Bremen",
-    vatId: "DE12345678",
-  },
-};
 
-export const demoLetter: plugins.tsclass.finance.TInvoice = {
+export const demoLetter: plugins.tsclass.business.ILetter = {
-  type: "invoice",
-  id: "LL-INV-48765",
   versionInfo: {
-    version: "1.0.0",
+    type: 'draft',
-    type: "draft",
+    version: '1.0.0',
   },
-  language: "de",
+  accentColor: null,
-  date: Date.now(),
+  content: {
-  incidenceId: "LL-INV-48765",
+    textData: null,
-  invoiceId: "LL-INV-48765",
+    timesheetData: null,
-  subject: "LL-INV-48765",
+    contractData: {
+      contractDate: Date.now(),
+      id: 'someid'
+    },
+    invoiceData: {
+      id: 'LL-INV-48765',
       reverseCharge: true,
       dueInDays: 30,
-  from: fromContact,
+      billedBy: fromContact,
-  to: toContact,
+      billedTo: toContact,
       status: null,
       deliveryDate: new Date().getTime(),
-  periodOfPerformance: {
+      periodOfPerformance: null,
-    from: +new Date().setDate(new Date().getDate() - 7),
-    to: +new Date(),
-  },
       printResult: null,
-  currency: "EUR",
+      currency: 'EUR',
       notes: [],
-  invoiceType: "debitnote",
+      type: 'debitnote',
       items: [
         {
-      name: "Item with 19% VAT",
+          name: 'Item with 19% VAT',
           unitQuantity: 2,
           unitNetPrice: 100,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 19,
           position: 0,
         },
         {
-      name: "Item with 7% VAT",
+          name: 'Item with 7% VAT',
           unitQuantity: 4,
           unitNetPrice: 100,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 7,
           position: 1,
         },
         {
-      name: "Item with 7% VAT",
+          name: 'Item with 7% VAT',
           unitQuantity: 3,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 7,
           position: 2,
         },
         {
-      name: "Item with 21% VAT",
+          name: 'Item with 21% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 21,
           position: 3,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 6,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
           position: 4,
-    },
+        },{
-    {
+          name: 'Item with 19% VAT',
-      name: "Item with 19% VAT",
           unitQuantity: 8,
           unitNetPrice: 100,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 19,
           position: 5,
         },
         {
-      name: "Item with 7% VAT",
+          name: 'Item with 7% VAT',
           unitQuantity: 9,
           unitNetPrice: 100,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 7,
           position: 6,
         },
         {
-      name: "Item with 7% VAT",
+          name: 'Item with 7% VAT',
           unitQuantity: 4,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 7,
           position: 8,
         },
         {
-      name: "Item with 21% VAT",
+          name: 'Item with 21% VAT',
           unitQuantity: 3,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 21,
           position: 9,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
           position: 10,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
-      position: 11,
+          position: 10,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
-      position: 12,
+          position: 10,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
-      position: 13,
+          position: 10,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
-      position: 14,
+          position: 10,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
-      position: 15,
+          position: 10,
         },
         {
-      name: "Item with 0% VAT",
+          name: 'Item with 0% VAT',
           unitQuantity: 1,
           unitNetPrice: 230,
-      unitType: "hours",
+          unitType: 'hours',
           vatPercentage: 0,
-      position: 16,
+          position: 10,
-    },
-    {
-      name: "Item with 0% VAT",
-      unitQuantity: 1,
-      unitNetPrice: 230,
-      unitType: "hours",
-      vatPercentage: 0,
-      position: 17,
-    },
-    {
-      name: "Item with 0% VAT",
-      unitQuantity: 1,
-      unitNetPrice: 230,
-      unitType: "hours",
-      vatPercentage: 0,
-      position: 18,
-    },
-    {
-      name: "Item with 0% VAT",
-      unitQuantity: 1,
-      unitNetPrice: 230,
-      unitType: "hours",
-      vatPercentage: 0,
-      position: 19,
-    },
-    {
-      name: "Item with 0% VAT",
-      unitQuantity: 1,
-      unitNetPrice: 230,
-      unitType: "hours",
-      vatPercentage: 0,
-      position: 20,
         },
       ],
-};
+    }
+  },
+  
+  date: Date.now(),
+  type: 'invoice',
+  needsCoverSheet: false,
+  objectActions: [],
+  pdf: null,
+  from: fromContact,
+  to: toContact,
+  incidenceId: null,
+  language: null,
+  legalContact: null,
+  logoUrl: null,
+  pdfAttachments: null,
+  subject: 'Invoice: LL-INV-48765',
+}
 
 export const demoDocumentSettings: interfaces.IDocumentSettings = {
   enableTopDraftText: true,
   enableDefaultHeader: true,
   enableDefaultFooter: true,
-  languageCode: "DE",
+  languageCode: 'DE',
 };

ts_shared/index.ts

@@ -1,15 +1,12 @@
-const DPI = 96 / 2.54; // <PX> / <INCH>
+export const a4Height = 1122;
-export const A4_HEIGHT = cmToPx(29.7); // DPI * 29.7cm
+export const a4Width = 794;
-export const A4_WIDTH = cmToPx(21); // DPI * 21cm
+export const rightMargin = 70;
+export const leftMargin = 90;
 
-export function cmToPx(value: number): number {
+import * as interfaces from './interfaces/index.js';
-  return DPI * value;
-}
-
-import * as interfaces from "./interfaces/index.js";
 export { interfaces };
 
-import * as translation from "./translation.js";
+import * as translation from './translation.js';
 export { translation };
 
-export * from "./demoletter.js";
+export * from './demoletter.js';

ts_shared/interfaces/document.ts

@@ -1,23 +1,9 @@
-import * as translation from "../translation.js";
+import * as translation from '../translation.js';
-
-export interface IDocumentTheme {
-  colorPrimaryForeground?: string;
-  colorPrimaryBackground?: string;
-  colorAccentForeground?: string;
-  colorAccentBackground?: string;
-  fontFamily?: string;
-  pageBackground?: string;
-  coverPageBackground?: string;
-}
 
 export interface IDocumentSettings {
   enableTopDraftText?: boolean;
   enableDefaultHeader?: boolean;
   enableDefaultFooter?: boolean;
-  enableFoldMarks?: boolean;
+  languageCode?: translation.TLanguageCode;
-  enableInvoiceContractRefSection?: boolean;
-  languageCode?: translation.LanguageCode;
-  dateStyle?: Intl.DateTimeFormatOptions["dateStyle"];
   vatGroupPositions?: boolean;
-  theme?: IDocumentTheme;
 }

ts_shared/translation.ts

@@ -1,272 +1,143 @@
+import * as interfaces from './interfaces/index.js';
+
 // Define English translations without enforcing TTranslationImplementation yet
 export const EN_translations = {
-  address: "Address",
+  address: 'Address',
-  "bank.accountHolder": "beneficiary",
+  bankConnection: 'Bank Connection',
-  "bank.bic": "bic",
+  contactInfo: 'Contact Info',
-  "bank.iban": "iban",
+  description: 'Description',
-  "bank.institution": "institution",
+  invoice: 'Invoice',
-  "bankConnection@@title": "Bank Connection",
+  itemPos: 'Item Pos.',
-  "contact@@title": "Contact Info",
+  quantity: 'Quantity',
-  "customer.number": "Your Customer ID",
+  registrationInfo: 'Registration Info',
-  description: "Description",
+  reverseVatNote: 'VAT arises on a reverse charge basis and is payable by the customer.',
-  "empty.logo": "no logo provided",
+  totalNetPrice: 'Total Net Price',
-  "empty.number.customer": "not registered",
+  unitNetPrice: 'Unit Net Price',
-  empty: "not provided",
+  unitType: 'Unit Type',
-  fax: "Fax",
+  yourCustomerId: 'Your Customer ID:',
-  introStatement: "We hereby invoice the following products and services",
+  yourVatId: 'Your vat id on file:',
-  "invoice.number": "Invoice number",
+  continuesOnPage: 'Continues on page',
-  invoice: "Invoice",
+  finalPageStatement: 'This is the final page of this document.',
-  "item.position": "Pos.",
+  page: 'Page',
-  mail: "Mail",
+  vatShort: 'VAT',
-  "overlay@@draft": "Draft",
+} as const;
-  "page.continueNext": "Continues on page",
-  "page.final": "This is the final page of this document.",
-  page: "Page",
-  pageOf: "of",
-  "payment.qr": "Pay via QR code",
-  "payment.qr.description": "Scan the QR code with you banking app",
-  "payment.terms": "Payment Terms",
-  "payment.terms.direct": "Without deduction until",
-  "periodOfPerformance.day": "Delivery Date",
-  "periodOfPerformance.range": "Delivery Period",
-  phone: "Phone",
-  "price.total.net": "Total Net Price",
-  "price.unit.net": "Unit Net Price",
-  price: "Price",
-  quantity: "Quantity",
-  referencedContract: "Referenced contract",
-  "referencedContract.text":
-    "This invoice is adhering to agreements made by contract between the parties on",
-  "registration.label": "Registration Info",
-  subject: "Subject",
-  sum: "Sum",
-  totalGross: "Total gross",
-  "unit.type": "Unit Type",
-  "vat.position": "on item positions",
-  "vat.reverseCharge.note":
-    "VAT arises on a reverse charge basis and is payable by the customer.",
-  "vat.short": "VAT",
-  "vat.yourId": "Your vat id on file",
-  vat: "Valued Added Tax",
-};
 
 // Infer keys of EN_translations
-
+export type TTranslationKey = keyof typeof EN_translations;
-/**
- * For example:
- *   - price
- */
-type RawTranslationKeys = keyof typeof EN_translations;
-
-/**
- * For example:
- *   - price.item
- *   - price.sum
- *   - price.unit
- *   - vat.yourId
- */
-type NestedTranslationKeys =
-  | RawTranslationKeys
-  | `${RawTranslationKeys}.${string}`
-  | `${RawTranslationKeys}.${string}.${string}`
-  | `${RawTranslationKeys}.${string}.${string}.${string}`
-  | `${RawTranslationKeys}.${string}.${string}.${string}.${string}`;
-
-/**
- * For example:
- *   - contact@@mail
- *   - vat = 'VAT'
- *   - vat.yourId = 'your vat id'
- *   - footer@@vat.yourId = 'your vat id'
- *   - header@@vat.yourId = 'THIS IS YOUR VAT'
- */
-type LocationBasedTranslationKeys = `${string}@@${NestedTranslationKeys}`;
-
-/**
- * Mix of everything
- */
-export type TranslationKey =
-  | NestedTranslationKeys
-  | LocationBasedTranslationKeys;
 
 // Define the type for all translations based on EN_translations keys
-export type Dictionary = {
+export type TTranslationImplementation = {
-  [key in TranslationKey]: string;
+  [key in TTranslationKey]: string;
 };
 
 // Define German translations
-export const DE_translations: Dictionary = {
+export const DE_translations: TTranslationImplementation = {
-  address: "Adresse",
+  address: 'Adresse',
-  "bank.accountHolder": "Kontoinhaber",
+  bankConnection: 'Bankverbindung',
-  "bank.bic": "BIC",
+  contactInfo: 'Kontaktinformationen',
-  "bank.iban": "IBAN",
+  description: 'Beschreibung',
-  "bank.institution": "Bankinstitut",
+  invoice: 'Rechnung',
-  "bankConnection@@title": "Bankverbindung",
+  itemPos: 'Pos.',
-  "contact@@title": "Kontaktinformationen",
+  quantity: 'Anzahl',
-  "customer.number": "Ihre Kundennummer",
+  registrationInfo: 'HRA/HRB Info',
-  description: "Beschreibung",
+  reverseVatNote:
-  "empty.logo": "Kein Logo gesetzt",
+    'Umkehr der Umsatzsteuerpflicht: Der Rechnungsempfänger ist für die korrekte Abrechnung der Umsatzsteuer zuständig.',
-  "empty.number.customer": "nicht registriert",
+  totalNetPrice: 'Summe netto',
-  empty: "nicht angegeben",
+  unitNetPrice: 'Einheit netto',
-  fax: "Fax",
+  unitType: 'Einheit',
-  introStatement:
+  yourCustomerId: 'Ihre Kundennummer:',
-    "Wir stellen Ihnen hiermit folgende Produkte und Dienstleistungen in Rechnung",
+  yourVatId: 'Ihre Umsatzsteuer-ID:',
-  "invoice.number": "Rechnungsnr.",
+  continuesOnPage: 'Fortsetzung auf Seite',
-  invoice: "Rechnung",
+  finalPageStatement: 'Dies ist die letzte Seite dieses Dokuments.',
-  "item.position": "Pos.",
+  page: 'Seite',
-  mail: "E-Mail",
+  vatShort: 'USt',
-  "overlay@@draft": "Entwurf",
-  "page.continueNext": "Fortsetzung auf Seite",
-  "page.final": "Dies ist die letzte Seite dieses Dokuments.",
-  page: "Seite",
-  pageOf: "von",
-  "payment.qr": "Überweisen per QR-Code",
-  "payment.qr.description":
-    "Den QR-Code einfach mit der Banking-App einscannen",
-  "payment.terms": "Zahlungsbedingungen",
-  "payment.terms.direct": "Ohne Abzug bis zum",
-  "periodOfPerformance.day": "Lieferdatum",
-  "periodOfPerformance.range": "Lieferzeitraum",
-  phone: "Telefon",
-  "price.total.net": "Gesamtpreis",
-  "price.unit.net": "Stückpreis",
-  price: "Preis",
-  quantity: "Menge",
-  referencedContract: "Referenzierter Vertrag",
-  "referencedContract.text":
-    "Diese Rechnung bezieht sich auf die getroffenen Vertragsvereinbarungen vom",
-  "registration.label": "Registrierungsinfo",
-  subject: "Betreff",
-  sum: "Summe",
-  totalGross: "Gesamtbetrag brutto",
-  "unit.type": "Einheit",
-  "vat.position": "auf Positionen",
-  "vat.reverseCharge.note":
-    "Die Umsatzsteuer entsteht im Reverse-Charge-Verfahren und ist vom Kunden zu zahlen.",
-  "vat.short": "MwSt.",
-  "vat.yourId": "Ihre hinterlegte USt-Id",
-  vat: "Umsatzsteuer",
 };
 
 // Define Spanish translations
-// export const ES_translations: TTranslationImplementation = {
+export const ES_translations: TTranslationImplementation = {
-//   address: "Dirección",
+  address: 'Dirección',
-//   bankConnection: "Conexión bancaria",
+  bankConnection: 'Conexión bancaria',
-//   contactInfo: "Información de contacto",
+  contactInfo: 'Información de contacto',
-//   description: "Descripción",
+  description: 'Descripción',
-//   invoice: "Factura",
+  invoice: 'Factura',
-//   itemPos: "Pos.",
+  itemPos: 'Pos.',
-//   quantity: "Cantidad",
+  quantity: 'Cantidad',
-//   registrationInfo: "Información de registro",
+  registrationInfo: 'Información de registro',
-//   reverseVatNote:
+  reverseVatNote: 'El IVA se aplica por inversión del sujeto pasivo y debe ser pagado por el cliente.',
-//     "El IVA se aplica por inversión del sujeto pasivo y debe ser pagado por el cliente.",
+  totalNetPrice: 'Precio total neto',
-//   totalNetPrice: "Precio total neto",
+  unitNetPrice: 'Precio unitario neto',
-//   unitNetPrice: "Precio unitario neto",
+  unitType: 'Tipo de unidad',
-//   unitType: "Tipo de unidad",
+  yourCustomerId: 'Su número de cliente:',
-//   yourCustomerId: "Su número de cliente:",
+  yourVatId: 'Su ID de IVA:',
-//   yourVatId: "Su ID de IVA:",
+  continuesOnPage: 'Continúa en la página',
-//   continuesOnPage: "Continúa en la página",
+  finalPageStatement: 'Esta es la última página de este documento.',
-//   finalPageStatement: "Esta es la última página de este documento.",
+  page: 'Página',
-//   page: "Página",
+  vatShort: 'IVA',
-//   vatShort: "IVA",
+};
-// };
 
 // Define French translations
-// export const FR_translations: TTranslationImplementation = {
+export const FR_translations: TTranslationImplementation = {
-//   address: "Adresse",
+  address: 'Adresse',
-//   bankConnection: "Coordonnées bancaires",
+  bankConnection: 'Coordonnées bancaires',
-//   contactInfo: "Informations de contact",
+  contactInfo: 'Informations de contact',
-//   description: "Description",
+  description: 'Description',
-//   invoice: "Facture",
+  invoice: 'Facture',
-//   itemPos: "Position",
+  itemPos: 'Position',
-//   quantity: "Quantité",
+  quantity: 'Quantité',
-//   registrationInfo: "Informations d'enregistrement",
+  registrationInfo: "Informations d'enregistrement",
-//   reverseVatNote:
+  reverseVatNote:
-//     "La TVA s'applique selon le mécanisme d'autoliquidation et est à payer par le client.",
+    "La TVA s'applique selon le mécanisme d'autoliquidation et est à payer par le client.",
-//   totalNetPrice: "Prix net total",
+  totalNetPrice: 'Prix net total',
-//   unitNetPrice: "Prix unitaire net",
+  unitNetPrice: 'Prix unitaire net',
-//   unitType: "Type d'unité",
+  unitType: "Type d'unité",
-//   yourCustomerId: "Votre numéro de client :",
+  yourCustomerId: 'Votre numéro de client :',
-//   yourVatId: "Votre numéro de TVA :",
+  yourVatId: 'Votre numéro de TVA :',
-//   continuesOnPage: "Continue sur la page",
+  continuesOnPage: 'Continue sur la page',
-//   finalPageStatement: "Ceci est la dernière page de ce document.",
+  finalPageStatement: 'Ceci est la dernière page de ce document.',
-//   page: "Page",
+  page: 'Page',
-//   vatShort: "TVA",
+  vatShort: 'TVA',
-// };
+};
 
 // Define Italian translations
-// export const IT_translations: TTranslationImplementation = {
+export const IT_translations: TTranslationImplementation = {
-//   address: "Indirizzo",
+  address: 'Indirizzo',
-//   bankConnection: "Coordinate bancarie",
+  bankConnection: 'Coordinate bancarie',
-//   contactInfo: "Informazioni di contatto",
+  contactInfo: 'Informazioni di contatto',
-//   description: "Descrizione",
+  description: 'Descrizione',
-//   invoice: "Fattura",
+  invoice: 'Fattura',
-//   itemPos: "Pos.",
+  itemPos: 'Pos.',
-//   quantity: "Quantità",
+  quantity: 'Quantità',
-//   registrationInfo: "Informazioni di registrazione",
+  registrationInfo: 'Informazioni di registrazione',
-//   reverseVatNote:
+  reverseVatNote: "L'IVA è applicata con inversione contabile ed è a carico del cliente.",
-//     "L'IVA è applicata con inversione contabile ed è a carico del cliente.",
+  totalNetPrice: 'Prezzo netto totale',
-//   totalNetPrice: "Prezzo netto totale",
+  unitNetPrice: 'Prezzo netto unitario',
-//   unitNetPrice: "Prezzo netto unitario",
+  unitType: 'Tipo di unità',
-//   unitType: "Tipo di unità",
+  yourCustomerId: 'Il tuo numero cliente:',
-//   yourCustomerId: "Il tuo numero cliente:",
+  yourVatId: 'Il tuo numero di partita IVA:',
-//   yourVatId: "Il tuo numero di partita IVA:",
+  continuesOnPage: 'Continua alla pagina',
-//   continuesOnPage: "Continua alla pagina",
+  finalPageStatement: 'Questa è l\'ultima pagina di questo documento.',
-//   finalPageStatement: "Questa è l'ultima pagina di questo documento.",
+  page: 'Pagina',
-//   page: "Pagina",
+  vatShort: 'IVA',
-//   vatShort: "IVA",
+};
-// };
 
 // Language Code Map
-export const languageCodeMap: Record<string, Dictionary> = {
+export const languageCodeMap: Record<string, TTranslationImplementation> = {
   EN: EN_translations,
   DE: DE_translations,
-  // ES: ES_translations,
+  ES: ES_translations,
-  // FR: FR_translations,
+  FR: FR_translations,
-  // IT: IT_translations,
+  IT: IT_translations,
 };
 
 // Language Code Type
-export type LanguageCode = keyof typeof languageCodeMap;
+export type TLanguageCode = keyof typeof languageCodeMap;
-
-function* getTranslationKeyHierarchy(
-  key: TranslationKey
-): Generator<TranslationKey, TranslationKey> {
-  yield key;
-
-  const areaSplit = key.split("@@") as [TranslationKey, TranslationKey];
-  let rest = areaSplit[1];
-
-  if (rest) {
-    yield rest;
-  } else {
-    rest = areaSplit[0];
-  }
-
-  if (!rest.includes(".")) return;
-
-  const parts = rest.split(".");
-  for (let i = parts.length - 1; i > 0; i--) {
-    yield parts.slice(0, i).join(".") as TranslationKey;
-  }
-}
 
 // Translate Function
 export const translate = (
-  languageCode: LanguageCode,
+  languageCode: TLanguageCode,
-  key: TranslationKey
+  key: TTranslationKey,
+  defaultValue: string
 ): string => {
-  const dictionary = languageCodeMap[languageCode] || EN_translations;
+  const translations = languageCodeMap[languageCode] || EN_translations;
-  const lookupHierarchy = getTranslationKeyHierarchy(key);
+  return translations[key] || defaultValue;
-
-  let found: string;
-
-  for (let keyOption of lookupHierarchy) {
-    found = dictionary[keyOption] || EN_translations[keyOption];
-
-    if (found) {
-      break;
-    }
-  }
-  return found;
 };

ts_web/elements/contentinvoice.ts

@@ -9,21 +9,22 @@ import {
   customElement,
   type TemplateResult,
   css,
+  cssManager,
+  unsafeCSS,
   render,
   domtools,
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
 
-import { dedocumentSharedStyle } from "../style.js";
+import { dedocumentSharedStyle } from '../style.js';
-import type { TranslationKey } from "ts_shared/translation.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-contentinvoice": DeContentInvoice;
+    'dedocument-contentinvoice': DeContentInvoice;
   }
 }
 
-@customElement("dedocument-contentinvoice")
+@customElement('dedocument-contentinvoice')
 export class DeContentInvoice extends DeesElement {
   public static demo = () => html`
     <style>
@@ -41,7 +42,7 @@ export class DeContentInvoice extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public letterData: plugins.tsclass.finance.TInvoice;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Object,
@@ -58,33 +59,169 @@ export class DeContentInvoice extends DeesElement {
     domtools.elementBasic.staticStyles,
     dedocumentSharedStyle,
     css`
+      :host {
+        color: #333;
+      }
+
       .trimmedContent {
         display: none;
       }
 
-      .grid {
+      .repeatedContent {
-        display: grid;
+      }
-        grid-template-columns: 40px auto 50px 50px 100px 50px 100px;
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="trimmedContent"></div>
+      <div class="repeatedContent"></div>
+      <div class="currentContent"></div>
+    `;
   }
 
+  public getTotalNet = (): number => {
+    let totalNet = 0;
+
+    if (!this.letterData) {
+      return totalNet;
+    }
+
+    for (const item of this.letterData.content.invoiceData.items) {
+      totalNet += item.unitNetPrice * item.unitQuantity;
+    }
+    return totalNet;
+  };
+
+  public getTotalGross = (): number => {
+    let totalVat = 0;
+
+    if (!this.letterData) {
+      return totalVat;
+    }
+
+    for (const taxgroup of this.getVatGroups()) {
+      totalVat += taxgroup.vatAmountSum;
+    }
+    return this.getTotalNet() + totalVat;
+  };
+
+  public getVatGroups = () => {
+    const vatGroups: {
+      vatPercentage: number;
+      items: plugins.tsclass.finance.IInvoice['items'];
+      vatAmountSum: number;
+    }[] = [];
+
+    if (!this.letterData) {
+      return vatGroups;
+    }
+
+    const taxAmounts: number[] = [];
+    for (const item of this.letterData.content.invoiceData.items) {
+      taxAmounts.includes(item.vatPercentage) ? null : taxAmounts.push(item.vatPercentage);
+    }
+
+    for (const taxAmount of taxAmounts) {
+      const matchingItems = this.letterData.content.invoiceData.items.filter(
+        (itemArg) => itemArg.vatPercentage === taxAmount
+      );
+      let sum = 0;
+      for (const matchingItem of matchingItems) {
+        sum += matchingItem.unitNetPrice * matchingItem.unitQuantity * (taxAmount / 100);
+      }
+      vatGroups.push({
+        items: matchingItems,
+        vatPercentage: taxAmount,
+        vatAmountSum: Math.round(sum * 100) / 100,
+      });
+    }
+    return vatGroups;
+  };
+
+  public async getContentNodes() {
+    await this.elementDomReady;
+    return {
+      currentContent: this.shadowRoot.querySelector('.currentContent') as HTMLElement,
+      trimmedContent: this.shadowRoot.querySelector('.trimmedContent') as HTMLElement,
+      repeatedContent: this.shadowRoot.querySelector('.repeatedContent') as HTMLElement,
+    };
+  }
+
+  public async getContentLength() {
+    await this.elementDomReady;
+    return (await this.getContentNodes()).currentContent.children.length;
+  }
+
+  public async trimEndByOne() {
+    await this.elementDomReady;
+    this.shadowRoot
+      .querySelector('.trimmedContent')
+      .append(
+        (await this.getContentNodes()).currentContent.children.item(
+          (await this.getContentNodes()).currentContent.children.length - 1
+        )
+      );
+  }
+
+  public async trimStartToOffset(contentOffsetArg: number) {
+    await this.elementDomReady;
+    const beginningLength = (await this.getContentNodes()).currentContent.children.length;
+    while (
+      (await this.getContentNodes()).currentContent.children.length !==
+      beginningLength - contentOffsetArg
+    ) {
+      (await this.getContentNodes()).trimmedContent.append(
+        (await this.getContentNodes()).currentContent.children.item(0)
+      );
+    }
+    if (
+      (await this.getContentNodes()).currentContent.children
+        .item(0)
+        .classList.contains('needsDataHeader')
+    ) {
+      const trimmedContent = (await this.getContentNodes()).trimmedContent;
+      let startPoint = trimmedContent.children.length;
+      while (startPoint > 0) {
+        const element = trimmedContent.children.item(startPoint - 1);
+        if (element.classList.contains('dataHeader')) {
+          (await this.getContentNodes()).repeatedContent.append(element);
+          break;
+        }
+        startPoint--;
+      }
+    }
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(_changedProperties);
+    this.attachInvoiceDom();
+  }
+
+  public async attachInvoiceDom() {
+    const contentNodes = await this.getContentNodes();
+    render(
+      html`
+        <style>
+          .grid {
+            display: grid;
+            grid-template-columns: 40px auto 60px 60px 84px 84px 46px;
+          }
           .topLine {
             margin-top: 5px;
             background: #e7e7e7;
             font-weight: bold;
           }
-
           .lineItem {
             font-size: 12px;
             padding: 5px;
             border-right: 1px dashed #ccc;
-        white-space: nowrap;
           }
 
           .lineItem:last-child {
             border-right: none;
           }
 
-      .value.rightAlign,
           .lineItem.rightAlign {
             text-align: right;
           }
@@ -110,7 +247,7 @@ export class DeContentInvoice extends DeesElement {
           .sums .sumline {
             margin-top: 3px;
             display: grid;
-        grid-template-columns: auto 100px;
+            grid-template-columns: auto 90px;
           }
 
           .sums .sumline .label {
@@ -122,9 +259,6 @@ export class DeContentInvoice extends DeesElement {
 
           .sums .sumline .value {
             padding: 2px 5px;
-      }
-
-      .sums .sumline .value--total {
             font-weight: bold;
           }
 
@@ -141,349 +275,193 @@ export class DeContentInvoice extends DeesElement {
           }
 
           .infoBox {
-        margin-top: 22px;
+            border-radius: 7px;
+            border: 1px solid #ddd;
+            border-left: 3px solid #c5e1a5;
+            padding: 8px;
+            margin-top: 16px;
             line-height: 1.4em;
+            font-size: 16px;
           }
 
           .infoBox .label {
             padding-bottom: 2px;
+            font-size: 12px;
             font-weight: bold;
           }
-    `,
-  ];
 
-  public render(): TemplateResult {
+          .paymentCode {
-    return html`
+            text-align: center;
-      <div class="trimmedContent"></div>
+            border-left: 2px solid #666;
-      <div class="repeatedContent"></div>
-      <div class="currentContent"></div>
-    `;
           }
-
+        </style>
-  protected formatPrice(
+        <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
-    value: number,
-    currency = "EUR",
-    lang = "de-DE"
-  ): string {
-    return new Intl.NumberFormat(lang, {
-      style: "currency",
-      currency,
-    }).format(value);
-  }
-
-  public getTotalNet = (): number => {
-    let totalNet = 0;
-
-    if (!this.letterData) {
-      return totalNet;
-    }
-
-    for (const item of this.letterData.items) {
-      totalNet += item.unitNetPrice * item.unitQuantity;
-    }
-    return totalNet;
-  };
-
-  public getTotalGross = (): number => {
-    let totalVat = 0;
-
-    if (!this.letterData) {
-      return totalVat;
-    }
-
-    for (const taxgroup of this.getVatGroups()) {
-      totalVat += taxgroup.vatAmountSum;
-    }
-    return this.getTotalNet() + totalVat;
-  };
-
-  public getVatGroups = () => {
-    const vatGroups: {
-      vatPercentage: number;
-      items: plugins.tsclass.finance.TInvoice["items"];
-      vatAmountSum: number;
-    }[] = [];
-
-    if (!this.letterData) {
-      return vatGroups;
-    }
-
-    const taxAmounts: number[] = [];
-    for (const item of this.letterData.items) {
-      taxAmounts.includes(item.vatPercentage)
-        ? null
-        : taxAmounts.push(item.vatPercentage);
-    }
-
-    for (const taxAmount of taxAmounts) {
-      const matchingItems = this.letterData.items.filter(
-        (itemArg) => itemArg.vatPercentage === taxAmount
-      );
-      let sum = 0;
-      for (const matchingItem of matchingItems) {
-        sum +=
-          matchingItem.unitNetPrice *
-          matchingItem.unitQuantity *
-          (taxAmount / 100);
-      }
-      vatGroups.push({
-        items: matchingItems,
-        vatPercentage: taxAmount,
-        vatAmountSum: Math.round(sum * 100) / 100,
-      });
-    }
-    return vatGroups.sort((a, b) => b.vatPercentage - a.vatPercentage);
-  };
-
-  public async getContentNodes() {
-    await this.elementDomReady;
-    return {
-      currentContent: this.shadowRoot.querySelector(
-        ".currentContent"
-      ) as HTMLElement,
-      trimmedContent: this.shadowRoot.querySelector(
-        ".trimmedContent"
-      ) as HTMLElement,
-      repeatedContent: this.shadowRoot.querySelector(
-        ".repeatedContent"
-      ) as HTMLElement,
-    };
-  }
-
-  public async getContentLength() {
-    await this.elementDomReady;
-    return (await this.getContentNodes()).currentContent.children.length;
-  }
-
-  public async trimEndByOne() {
-    await this.elementDomReady;
-    this.shadowRoot
-      .querySelector(".trimmedContent")
-      .append(
-        (await this.getContentNodes()).currentContent.children.item(
-          (await this.getContentNodes()).currentContent.children.length - 1
-        )
-      );
-  }
-
-  public async trimStartToOffset(contentOffsetArg: number) {
-    await this.elementDomReady;
-    const beginningLength = (await this.getContentNodes()).currentContent
-      .children.length;
-    while (
-      (await this.getContentNodes()).currentContent.children.length !==
-      beginningLength - contentOffsetArg
-    ) {
-      (await this.getContentNodes()).trimmedContent.append(
-        (await this.getContentNodes()).currentContent.children.item(0)
-      );
-    }
-    if (
-      (await this.getContentNodes()).currentContent.children
-        .item(0)
-        .classList.contains("needsDataHeader")
-    ) {
-      const trimmedContent = (await this.getContentNodes()).trimmedContent;
-      let startPoint = trimmedContent.children.length;
-      while (startPoint > 0) {
-        const element = trimmedContent.children.item(startPoint - 1);
-        if (element.classList.contains("dataHeader")) {
-          (await this.getContentNodes()).repeatedContent.append(element);
-          break;
-        }
-        startPoint--;
-      }
-    }
-  }
-
-  public translateKey(key: TranslationKey): string {
-    return plugins.shared.translation.translate(
-      this.documentSettings.languageCode,
-      key
-    );
-  }
-
-  public async firstUpdated(
-    _changedProperties: Map<string | number | symbol, unknown>
-  ) {
-    super.firstUpdated(_changedProperties);
-    this.attachInvoiceDom();
-  }
-
-  private renderPaymentTerms(): TemplateResult {
-    return html`<div class="infoBox">
-      <div>
-        <div>
-          <div class="label">
-            ${this.translateKey("invoice@@payment.terms")}
-          </div>
-          <span>
-            ${this.translateKey("invoice@@payment.terms.direct")}
-            ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
-              dateStyle: this.documentSettings.dateStyle,
-            }).format(
-              new Date(this.letterData.date).setDate(
-                new Date(this.letterData.date).getDate() +
-                  this.letterData?.dueInDays
-              )
-            )}
-          </span>
-        </div>
-      </div>
-    </div>`;
-  }
-
-  private renderPaymentInfo(): TemplateResult {
-    const bic = this.letterData?.from.sepaConnection.bic;
-    const name = this.letterData?.from.name;
-    const iban = this.letterData?.from.sepaConnection.iban;
-    const currency = this.letterData?.currency;
-    const totalGross = this.getTotalGross();
-    const reference = this.letterData?.id;
-
-    return html`<div class="infoBox">
-      <div>
-        <div>
-          <div class="label">${this.translateKey("invoice@@payment.qr")}</div>
-          <span> ${this.translateKey("invoice@@payment.qr.description")} </span>
-        </div>
-        <dedocument-paymentcode
-          bic="${bic}"
-          name="${name}"
-          iban="${iban}"
-          currency="${currency}"
-          totalGross="${totalGross}"
-          reference="${reference}"
-        />
-      </div>
-    </div>`;
-  }
-
-  private renderReferencedContract(): TemplateResult {
-    return null;
-    // return this.documentSettings.enableInvoiceContractRefSection &&
-    //   this.invoiceData?.content?.contractData?.contractDate
-    //   ? html`
-    //       <div class="infoBox">
-    //         <div class="label">
-    //           ${this.translateKey("invoice@@referencedContract")}
-    //         </div>
-    //         ${this.translateKey("invoice@@referencedContract.text")}
-    //         ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
-    //           dateStyle: this.documentSettings.dateStyle,
-    //         }).format(
-    //           new Date(this.invoiceData?.content.contractData.contractDate)
-    //         )}.
-    //       </div>
-    //     `
-    //   : null;
-  }
-
-  public async attachInvoiceDom() {
-    const contentNodes = await this.getContentNodes();
-    render(
-      html`
-        <div>${this.translateKey("invoice@@introStatement")}</div>
         <div class="grid topLine dataHeader">
           <div class="lineItem rightAlign">
-            ${this.translateKey("invoice@@item.position")}
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'itemPos',
+              'Item Pos.'
+            )}
           </div>
           <div class="lineItem">
-            ${this.translateKey("invoice@@description")}
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'description',
+              'Description'
+            )}
           </div>
           <div class="lineItem rightAlign">
-            ${this.translateKey("invoice@@quantity")}
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'quantity',
+              'Quantity'
+            )}
           </div>
-          <div class="lineItem">${this.translateKey("invoice@@unit.type")}</div>
+          <div class="lineItem">
-          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
-            ${this.translateKey("invoice@@price.unit.net")}
+              this.documentSettings.languageCode,
+              'unitType',
+              'Unit Type'
+            )}
           </div>
           <div class="lineItem rightAlign">
-            ${this.translateKey("invoice@@vat.short")}
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'unitNetPrice',
+              'Unit Net Price'
+            )}
           </div>
           <div class="lineItem rightAlign">
-            ${this.translateKey("invoice@@price.total.net")}
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'totalNetPrice',
+              'Total Net Price'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'vatShort',
+              'VAT'
+            )}
           </div>
         </div>
-        ${this.letterData?.items?.map(
+        ${(() => {
-          (invoiceItem, index) => html`
+          let counter = 1;
-            <div class="grid needsDataHeader">
+          return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => {
-              <div class="lineItem rightAlign">${index + 1}</div>
+            const isHighlighted = false; // TODO: implement rest of highlight logic
+            return html`
+              <div class="grid invoiceLine needsDataHeader ${isHighlighted ? 'highlighted' : ''}">
+                <div class="lineItem rightAlign">${counter++}</div>
                 <div class="lineItem">${invoiceItem.name}</div>
                 <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
                 <div class="lineItem">${invoiceItem.unitType}</div>
                 <div class="lineItem rightAlign">
-                ${this.formatPrice(invoiceItem.unitNetPrice)}
+                  ${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
                 </div>
                 <div class="lineItem rightAlign">
-                ${invoiceItem.vatPercentage}%
+                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice}
+                  ${this.letterData?.content.invoiceData.currency}
                 </div>
-              <div class="lineItem rightAlign">
+                <div class="lineItem rightAlign">${invoiceItem.vatPercentage}%</div>
-                ${this.formatPrice(
-                  invoiceItem.unitQuantity * invoiceItem.unitNetPrice
-                )}
               </div>
-            </div>
+            `;
-          `
+          });
-        )}
+        })()}
         <div class="sums">
           <div class="sumline">
-            <div class="label">
+            <div class="label">Total net</div>
-              ${this.translateKey("invoice@@sum.total.net")}
+            <div class="value">${this.getTotalNet()} EUR</div>
-            </div>
-            <div class="value value--total rightAlign">
-              ${this.formatPrice(this.getTotalNet())}
-            </div>
           </div>
           ${this.getVatGroups().map((vatGroupArg) => {
-            let itemNumbers = vatGroupArg.items
+            let itemNumbers = '';
-              .map((item) => this.letterData.items.indexOf(item) + 1)
+            let first = true;
-              .join(", ");
+            for (const item of vatGroupArg.items) {
+              const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
+              itemNumbers += `${first ? '' : ', '}${itemIndex + 1}`;
+              first = false;
+            }
             return html`
               <div class="sumline">
                 <div class="label">
-                  ${this.translateKey("vat.short")}
+                  Vat ${vatGroupArg.vatPercentage}%
-                  ${vatGroupArg.vatPercentage}%
                   ${this.documentSettings.vatGroupPositions
                     ? html`
                         <br /><span style="font-weight: normal"
-                          >(${this.translateKey("invoice@@vat.position")}:
+                          >(on item positions: ${itemNumbers})</span
-                          ${itemNumbers})</span
                         >
                       `
                     : html``}
                 </div>
-                <div class="value rightAlign">
+                <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
-                  ${this.formatPrice(vatGroupArg.vatAmountSum)}
-                </div>
               </div>
             `;
           })}
           <div class="sumline">
-            <div class="label">${this.translateKey("invoice@@totalGross")}</div>
+            <div class="label">Total gross</div>
-            <div class="value value--total rightAlign">
+            <div class="value">${this.getTotalGross()} EUR</div>
-              ${this.formatPrice(this.getTotalGross())}
-            </div>
           </div>
         </div>
         <div class="divider"></div>
-
+        ${this.letterData?.content.invoiceData.reverseCharge
-        ${this.letterData?.reverseCharge
+          ? html`
-          ? html`<div class="taxNote">
+              <div class="taxNote">
-              ${this.translateKey("invoice@@vat.reverseCharge.note")}
+                ${plugins.shared.translation.translate(
-            </div>`
+                  this.documentSettings.languageCode,
+                  'reverseVatNote',
+                  'VAT arises on a reverse charge basis and is payable by the customer.'
+                )}
+              </div>
+            `
           : ``}
-
+        <div class="infoBox">
-        <!-- REFERENCED CONTRACT -->
+          <div class="label">Payment Terms:</div>
-        ${this.renderReferencedContract()}
+          Payment is due within 30 days starting from the reception of this invoice. Please use the
-
+          following SEPA details:
-        <!-- PAYMENT TERMS -->
+          <br /><br />
-        ${this.renderPaymentTerms()}
+          Beneficiary: ${this.letterData?.from.name}<br />
-
+          IBAN: ${this.letterData?.from?.sepaConnection?.iban}<br />
-        <!-- PAYMENT INFO -->
+          BIC: ${this.letterData?.from?.sepaConnection?.bic}<br />
-        ${this.renderPaymentInfo()}
+          Description: ${this.letterData?.content.invoiceData?.id}<br />
+          Amount: ${this.getTotalGross()} ${this.letterData?.content.invoiceData.currency}
+        </div>
+        ${this.letterData?.content?.contractData?.contractDate
+          ? html`
+              <div class="infoBox">
+                <div class="label">Referenced contract:</div>
+                This invoice is adhering to agreements made by contract between the parties on
+                ${plugins.smarttime.ExtendedDate.fromMillis(
+                  this.letterData?.content.contractData.contractDate
+                ).format('MMMM D, YYYY')}.
+              </div>
+            `
+          : html``}
+        <div class="infoBox paymentCode">
+          <div class="label">Sepa Payment Code:</div>
+        </div>
       `,
       contentNodes.currentContent
     );
+    const canvas = document.createElement('canvas');
+    plugins.qrcode.toCanvas(
+      canvas,
+      `BCD
+001
+1
+SCT
+${this.letterData.content.invoiceData.billedBy.sepaConnection.bic}
+${this.letterData.content.invoiceData.billedBy.name}
+${this.letterData.content.invoiceData.billedBy.sepaConnection.iban}
+EUR${this.getTotalGross()}
+CHAR
+${this.letterData.content.invoiceData.id}
+${this.letterData.content.invoiceData.id}
+EPC QR Code`,
+      (error) => {
+        if (error) console.error(error);
+      }
+    );
+    contentNodes.currentContent.querySelector('.paymentCode').append(canvas);
   }
 }

ts_web/elements/document.demo.ts

@@ -1,10 +1,7 @@
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
 
-import { html } from "@design.estate/dees-element";
+import { html } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
-  <dedocument-dedocument
+<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
-    .format="${"a4"}"
-    .letterData=${plugins.shared.demoLetter}
-  ></dedocument-dedocument>
 `;

ts_web/elements/document.ts

@@ -5,36 +5,34 @@ import {
   customElement,
   type TemplateResult,
   css,
+  state,
+  cssManager,
+  unsafeCSS,
   domtools,
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
 
-export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
+export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings = {
-  {
   enableTopDraftText: true,
   enableDefaultHeader: true,
   enableDefaultFooter: true,
-    enableFoldMarks: true,
+  languageCode: 'EN',
-    enableInvoiceContractRefSection: true,
-    languageCode: "EN",
   vatGroupPositions: true,
-    dateStyle: "short",
+};
-  };
 
-import { DePage } from "./page.js";
-import { DeContentInvoice } from "./contentinvoice.js";
 
-import { demoFunc } from "./document.demo.js";
+import { DePage } from './page.js';
-import { dedocumentSharedStyle } from "../style.js";
+import { DeContentInvoice } from './contentinvoice.js';
-import type { TInvoice } from "@tsclass/tsclass/dist_ts/finance/invoice.js";
+
+import { demoFunc } from './document.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-dedocument": DeDocument;
+    'dedocument-dedocument': DeDocument;
   }
 }
 
-@customElement("dedocument-dedocument")
+@customElement('dedocument-dedocument')
 export class DeDocument extends DeesElement {
   public static demo = demoFunc;
 
@@ -42,7 +40,7 @@ export class DeDocument extends DeesElement {
     type: String,
     reflect: true,
   })
-  public format: "a4" = "a4";
+  public format: 'a4' = 'a4';
 
   @property({
     type: Number,
@@ -66,28 +64,27 @@ export class DeDocument extends DeesElement {
     type: Object,
     reflect: true,
     converter: (valueArg) => {
-      if (typeof valueArg === "string") {
+      if (typeof valueArg === 'string') {
-        return plugins.smartjson.parseBase64(valueArg);
+        return plugins.smartjson.parseBase64(valueArg)
       } else {
         return valueArg;
       }
     },
   })
-  public letterData: plugins.tsclass.business.TLetter;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Object,
     reflect: true,
     converter: (valueArg) => {
-      if (typeof valueArg === "string") {
+      if (typeof valueArg === 'string') {
-        return plugins.smartjson.parseBase64(valueArg);
+        return plugins.smartjson.parseBase64(valueArg)
       } else {
         return valueArg;
       }
     },
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings =
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
-    defaultDocumentSettings;
 
   constructor() {
     super();
@@ -96,10 +93,13 @@ export class DeDocument extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         display: block;
+        color: #333;
+        padding: 0px;
+        position: relative;
+        font-family: 'Dees Sans', sans-serif;
       }
 
       .betweenPagesSpacer {
@@ -109,17 +109,41 @@ export class DeDocument extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html` <div class="documentContainer"></div> `;
+    return html`
+      <div class="documentContainer"></div>
+    `;
   }
 
-  public async firstUpdated(
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
-    _changedProperties: Map<string | number | symbol, unknown>
-  ) {
     domtools.plugins.smartdelay.delayFor(0).then(async () => {
       this.documentSettings = {
         ...defaultDocumentSettings,
         ...this.documentSettings,
-      };
+      }
+
+      while (false) {
+        await domtools.plugins.smartdelay.delayFor(1000);
+        this.letterData = {
+          ...this.letterData,
+          content: {
+            ...this.letterData.content,
+            invoiceData: {
+              ...this.letterData.content.invoiceData,
+              items: [
+                ...this.letterData.content.invoiceData.items,
+                {
+                  name: 'Test Item',
+                  unitQuantity: 1,
+                  unitNetPrice: 100,
+                  unitType: 'hours',
+                  vatPercentage: 19,
+                  position: 1,
+                },
+              ],
+            },
+          }
+        }
+      }
     });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -132,15 +156,16 @@ export class DeDocument extends DeesElement {
     resizeObserver.observe(this);
     this.registerGarbageFunction(() => {
       resizeObserver.disconnect();
-    });
+    })
   }
 
-  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
+  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
-    null;
+  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
-  public latestRenderedLetterData: plugins.tsclass.business.TLetter = null;
   public cleanupStore: any[] = [];
 
+
   public async renderDocument() {
+
     this.latestDocumentSettings = this.documentSettings;
     this.latestRenderedLetterData = this.letterData;
 
@@ -148,7 +173,7 @@ export class DeDocument extends DeesElement {
     const cleanUpStoreNextRender = [];
 
     const domtools = await this.domtoolsPromise;
-    const documentBuildContainer = document.createElement("div");
+    const documentBuildContainer = document.createElement('div');
     cleanUpStoreCurrentRender.push(documentBuildContainer);
     document.body.appendChild(documentBuildContainer);
 
@@ -159,7 +184,7 @@ export class DeDocument extends DeesElement {
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
     cleanUpStoreCurrentRender.push(content);
-    content.letterData = this.letterData as unknown as TInvoice;
+    content.letterData = this.letterData;
     content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
 
@@ -203,14 +228,13 @@ export class DeDocument extends DeesElement {
     for (const cleanUp of this.cleanupStore) {
       cleanUp.remove();
     }
-    this.cleanupStore = cleanUpStoreNextRender;
+    this.cleanupStore = cleanUpStoreNextRender
 
     cleanUpStoreCurrentRender.forEach((cleanUp) => {
       cleanUp.remove();
     });
 
-    const documentContainer =
+    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
-      this.shadowRoot.querySelector(".documentContainer");
     if (documentContainer) {
       const children = Array.from(documentContainer.children);
       children.forEach((child) => {
@@ -223,36 +247,24 @@ export class DeDocument extends DeesElement {
       documentContainer.append(page);
       // betweenPagesSpacer
       if (!this.printMode) {
-        const betweenPagesSpacerDiv = document.createElement("div");
+        const betweenPagesSpacerDiv = document.createElement('div');
-        betweenPagesSpacerDiv.classList.add("betweenPagesSpacer");
+        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
         documentContainer.appendChild(betweenPagesSpacerDiv);
       }
     }
     this.adjustDePageScaling();
   }
 
-  async updated(
+  async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
-    changedProperties: Map<string | number | symbol, unknown>
-  ): Promise<void> {
     super.updated(changedProperties);
     const domtools = await this.domtoolsPromise;
-    let renderedDocIsUpToDate =
+    let renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData)
-      domtools.convenience.smartjson.deepEqualObjects(
+     && domtools.convenience.smartjson.deepEqualObjects(this.documentSettings, this.latestDocumentSettings);
-        this.letterData,
-        this.latestRenderedLetterData
-      ) &&
-      domtools.convenience.smartjson.deepEqualObjects(
-        this.documentSettings,
-        this.latestDocumentSettings
-      );
     if (!renderedDocIsUpToDate) {
       this.renderDocument();
     }
 
-    if (
+    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
-      changedProperties.has("viewHeight") ||
-      changedProperties.has("viewWidth")
-    ) {
       this.adjustDePageScaling();
     }
   }
@@ -263,7 +275,7 @@ export class DeDocument extends DeesElement {
     }
     this.viewWidth = this.clientWidth;
     // Find all DePage instances within this DeDocument
-    const pages = this.shadowRoot.querySelectorAll("dedocument-page");
+    const pages = this.shadowRoot.querySelectorAll('dedocument-page');
 
     // Update each DePage instance's viewHeight and viewWidth
     pages.forEach((page: DePage) => {

ts_web/elements/index.ts

@@ -1,10 +1,9 @@
-export * from "./contentinvoice.js";
+export * from './contentinvoice.js';
-export * from "./document.js";
+export * from './document.js';
-export * from "./letterheader.js";
+export * from './letterheader.js';
-export * from "./page.js";
+export * from './page.js';
-export * from "./pagecontainer.js";
+export * from './pagecontainer.js';
-export * from "./pagecontent.js";
+export * from './pagecontent.js';
-export * from "./pagefooter.js";
+export * from './pagefooter.js';
-export * from "./pageheader.js";
+export * from './pageheader.js';
-export * from "./viewer.js";
+export * from './viewer.js';
-export * from "./paymentcode.js";

ts_web/elements/letterheader.ts

@@ -5,33 +5,31 @@ import {
   customElement,
   type TemplateResult,
   css,
+  cssManager,
   unsafeCSS,
   domtools,
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
 
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
-import { dedocumentSharedStyle } from "../style.js";
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-letterheader": DeLetterHeader;
+    'dedocument-letterheader': DeLetterHeader;
   }
 }
 
-@customElement("dedocument-letterheader")
+@customElement('dedocument-letterheader')
 export class DeLetterHeader extends DeesElement {
   public static demo = () => html`
-    <dedocument-letterheader
+    <dedocument-letterheader .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-letterheader>
-      .format="${"a4"}"
-      .letterData=${plugins.shared.demoLetter}
-    ></dedocument-letterheader>
   `;
 
   @property({
     type: Object,
-    reflect: true,
+    reflect: true
   })
-  public letterData: plugins.tsclass.finance.TInvoice;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -45,12 +43,6 @@ export class DeLetterHeader extends DeesElement {
   })
   public pageTotalNumber: number = 1;
 
-  @property({
-    type: Object,
-    reflect: true,
-  })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
-
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -60,29 +52,19 @@ export class DeLetterHeader extends DeesElement {
     domtools.elementBasic.staticStyles,
     dedocumentSharedStyle,
     css`
-      .address {
+      :host {
-        position: absolute;
+        color: #333;
-        top: calc(var(--DPI-FACTOR) * 4.5);
-        left: var(--LEFT-MARGIN);
-      }
-
-      .date {
-        position: absolute;
-        top: calc(var(--DPI-FACTOR) * 4.5);
-        right: var(--RIGHT-MARGIN);
-        text-align: right;
       }
 
       .recepientInfo {
         position: absolute;
         display: block;
         overflow: hidden;
-        top: calc(var(--DPI-FACTOR) * 5.5);
+        top: 200px;
-        right: var(--RIGHT-MARGIN);
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         width: 200px;
         text-align: right;
       }
-
       .recepientInfo .label {
         margin-top: 10px;
         margin-bottom: 3px;
@@ -90,6 +72,19 @@ export class DeLetterHeader extends DeesElement {
         font-weight: bold;
       }
 
+      .date {
+        position: absolute;
+        top: 180px;
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        text-align: right;
+      }
+
+      .address {
+        position: absolute;
+        top: 180px;
+        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
+      }
+
       .address .from {
         font-size: 10px;
       }
@@ -100,93 +95,31 @@ export class DeLetterHeader extends DeesElement {
     `,
   ];
 
-  private renderDeliveryDate(from: Date, to: Date): TemplateResult {
-    if (this.letterData.type !== "invoice") return null;
-    const dateFormat = new Intl.DateTimeFormat(
-      this.documentSettings.languageCode,
-      { dateStyle: this.documentSettings.dateStyle }
-    );
-
-    let formattedFrom = from ? dateFormat.format(from) : null;
-    let formattedTo = to ? dateFormat.format(to) : null;
-
-    const isSameDay = formattedFrom === formattedTo;
-
-    if (isSameDay) {
-      return html`<div class="label">
-          ${plugins.shared.translation.translate(
-            this.documentSettings.languageCode,
-            "letterhead@@periodOfPerformance.day"
-          )}
-        </div>
-        <span> ${formattedFrom} </span>`;
-    } else {
-      return html`<div class="label">
-          ${plugins.shared.translation.translate(
-            this.documentSettings.languageCode,
-            "letterhead@@periodOfPerformance.range"
-          )}
-        </div>
-        <span> ${formattedFrom} - ${formattedTo}</span>`;
-    }
-  }
-
   public render(): TemplateResult {
     return html`
       <div class="date">
-        ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+        ${new Date(this.letterData.date).getDate()}. ${new Date(this.letterData.date).toLocaleString('default', { month: 'long' })}
-          dateStyle: "long",
+        ${new Date(this.letterData.date).getFullYear()}
-        }).format(new Date(this.letterData.date))}
       </div>
       <div class="address">
         <div class="from">
-          ${this.letterData.from.name},
+          ${this.letterData.from.name}, ${this.letterData.from.address.streetName}
-          ${this.letterData.from.address.streetName}
+          ${this.letterData.from.address.houseNumber}, ${this.letterData.from.address.postalCode}
-          ${this.letterData.from.address.houseNumber},
+          ${this.letterData.from.address.city}, ${this.letterData.from.address.country}
-          ${this.letterData.from.address.postalCode}
-          ${this.letterData.from.address.city},
-          ${this.letterData.from.address.country}
         </div>
         <div class="to">
           ${this.letterData.to.name}<br />
-          ${this.letterData.to.address.streetName}
+          ${this.letterData.to.address.streetName} ${this.letterData.to.address.houseNumber}<br />
-          ${this.letterData.to.address.houseNumber}<br />
+          ${this.letterData.to.address.postalCode} ${this.letterData.to.address.city}<br />
-          ${this.letterData.to.address.postalCode}
-          ${this.letterData.to.address.city}<br />
           ${this.letterData.from.address.country}
         </div>
       </div>
       <div class="recepientInfo">
-        <div class="label">
+        <div class="label">your customer id:</div>
-          ${plugins.shared.translation.translate(
+        ${this.letterData.to.customerNumber || 'not registered'}
-            this.documentSettings.languageCode,
-            "letterhead@@customer.number"
-          )}
-        </div>
-        ${this.letterData.to.customerNumber || "not registered"}
 
-        <div class="label">
+        <div class="label">your vat id on file:</div>
-          ${plugins.shared.translation.translate(
+        ${this.letterData.to.vatId || 'not provided'}
-            this.documentSettings.languageCode,
-            "letterhead@@vat.yourId"
-          )}
-        </div>
-        ${this.letterData.to.registrationDetails.vatId || "not provided"}
-
-        <!-- TODO: Make use of components -->
-        ${this.letterData.type === "invoice"
-          ? html` <div class="label">
-                ${plugins.shared.translation.translate(
-                  this.documentSettings.languageCode,
-                  "letterhead@@invoice.number"
-                )}
-              </div>
-              ${this.letterData.id || "not registered"}`
-          : null}
-        ${this.renderDeliveryDate(
-          new Date(this.letterData.periodOfPerformance?.from),
-          new Date(this.letterData.periodOfPerformance?.to)
-        )}
       </div>
     `;
   }

ts_web/elements/page.ts

@@ -1,4 +1,4 @@
-import * as tsclass from "@tsclass/tsclass";
+import * as tsclass from '@tsclass/tsclass';
 import {
   DeesElement,
   property,
@@ -6,24 +6,24 @@ import {
   customElement,
   type TemplateResult,
   css,
+  cssManager,
+  unsafeCSS,
   domtools,
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
 
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
 
-import { defaultDocumentSettings } from "./document.js";
+import { defaultDocumentSettings } from './document.js';
-import { dedocumentSharedStyle } from "../style.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-page": DePage;
+    'dedocument-page': DePage;
   }
 }
 
-@customElement("dedocument-page")
+@customElement('dedocument-page')
 export class DePage extends DeesElement {
-  public static demo = () =>
+  public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
-    html` <dedocument-page .format="${"a4"}"></dedocument-page> `;
 
   @property({
     type: Number,
@@ -38,7 +38,7 @@ export class DePage extends DeesElement {
   @property({
     type: String,
   })
-  public format: "a4" = "a4";
+  public format: 'a4' = 'a4';
 
   @property({
     type: Number,
@@ -53,7 +53,7 @@ export class DePage extends DeesElement {
   @property({
     type: Object,
   })
-  public letterData: tsclass.business.TLetter = null;
+  public letterData: tsclass.business.ILetter = null;
 
   @property({
     type: Boolean,
@@ -65,8 +65,7 @@ export class DePage extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings =
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
-    defaultDocumentSettings;
 
   constructor() {
     super();
@@ -75,7 +74,6 @@ export class DePage extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         display: block;
@@ -102,75 +100,26 @@ export class DePage extends DeesElement {
         align-items: center;
       }
 
+      .topInfo {
+        position: absolute;
+        top: 60px;
+        left: 40px;
+        color: red;
+        transform: rotate(-5deg);
+      }
+
       .bigDraftText {
         transform: rotate(-45deg);
         font-size: 200px;
         opacity: 0.05;
       }
-
-      .foldMark__wrapper {
-        z-index: 0;
-      }
-
-      .foldMark {
-        position: absolute;
-        border-top: 1px solid #d3d3d3;
-        width: 10px;
-        left: 15px;
-      }
-
-      .foldMark--start {
-        top: calc(var(--DPI-FACTOR) * 8.7);
-      }
-
-      .foldMark--center {
-        top: calc(var(--DPI-FACTOR) * 14.85);
-      }
-
-      .foldMark--end {
-        top: calc(var(--DPI-FACTOR) * 19.2);
-      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style>
-        :host {
-          --theme-color-primary-fg: ${this.documentSettings.theme
-            ?.colorPrimaryForeground};
-          --theme-color-primary-bg: ${this.documentSettings.theme
-            ?.colorPrimaryBackground};
-          --theme-color-accent-fg: ${this.documentSettings.theme
-            ?.colorAccentForeground};
-          --theme-color-accent-bg: ${this.documentSettings.theme
-            ?.colorAccentBackground};
-        }
-
-        .page {
-          background-size: contain;
-          height: 100%;
-        }
-
-        .page:not(.page--first) {
-          background-image: ${this.documentSettings.theme?.pageBackground ??
-          "none"};
-        }
-
-        .page.page--first {
-          background-image: ${this.documentSettings.theme
-            ?.coverPageBackground ??
-          this.documentSettings.theme?.pageBackground ??
-          "none"};
-        }
-      </style>
       <div id="scaleWrapper">
         <dedocument-pagecontainer .printMode=${this.printMode}>
-          <div
-            class="page page__background ${this.pageNumber === 1
-              ? "page--first"
-              : ""}"
-          ></div>
           ${this.letterData
             ? html`
                 ${this.documentSettings.enableDefaultHeader
@@ -182,18 +131,7 @@ export class DePage extends DeesElement {
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pageheader>
                     `
-                  : null}
+                  : ``}
-
-                <!-- FOLD MARKS -->
-                ${this.documentSettings.enableFoldMarks === true
-                  ? html` <div class="foldMark__wrapper">
-                      <span class="foldMark foldMark--start"></span>
-                      <span class="foldMark foldMark--center"></span>
-                      <span class="foldMark foldMark--end"></span>
-                    </div>`
-                  : null}
-
-                <!-- LETTER HEADER -->
                 ${this.pageNumber === 1
                   ? html`
                       <dedocument-letterheader
@@ -203,9 +141,7 @@ export class DePage extends DeesElement {
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-letterheader>
                     `
-                  : null}
+                  : html``}
-
-                <!-- PAGE CONTENT -->
                 <dedocument-pagecontent
                   .letterData=${this.letterData}
                   .documentSettings=${this.documentSettings}
@@ -213,9 +149,7 @@ export class DePage extends DeesElement {
                   .pageTotalNumber="${this.pageTotalNumber}"
                   ><slot></slot
                 ></dedocument-pagecontent>
-
+                ${this.documentSettings.enableDefaultFooter
-                <!-- DEFAULT FOOTER -->
-                ${this.documentSettings.enableDefaultFooter === true
                   ? html`
                       <dedocument-pagefooter
                         .letterData=${this.letterData}
@@ -224,19 +158,22 @@ export class DePage extends DeesElement {
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pagefooter>
                     `
-                  : null}
+                  : ``}
-
                 <div class="versionOverlay">
-                  ${this.letterData.versionInfo.type === "draft"
+                  ${this.letterData.versionInfo.type === 'draft'
                     ? html`
-                        <div class="bigDraftText">
+                        ${this.documentSettings.enableTopDraftText
-                          ${plugins.shared.translation.translate(
+                          ? html`
-                            this.documentSettings.languageCode,
+                              <div class="topInfo">
-                            "overlay@@draft"
+                                Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
-                          )}
+                                THIS.<br />
+                                -> Revision/Document version: ${this.letterData.versionInfo.version}
                               </div>
                             `
-                    : null}
+                          : ``}
+                        <div class="bigDraftText">DRAFT</div>
+                      `
+                    : html``}
                 </div>
               `
             : html` <slot></slot> `}
@@ -247,37 +184,33 @@ export class DePage extends DeesElement {
 
   public async checkOverflow() {
     await this.elementDomReady;
-    const pageContent = this.shadowRoot.querySelector("dedocument-pagecontent");
+    const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
     return pageContent.checkOverflow();
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>): void {
     super.updated(changedProperties);
-    if (
+    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
-      changedProperties.has("viewHeight") ||
-      changedProperties.has("viewWidth")
-    ) {
       this.adjustScaling();
     }
   }
 
   private adjustScaling() {
-    const scaleWrapper: HTMLDivElement =
+    const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
-      this.shadowRoot.querySelector("#scaleWrapper");
 
     if (!scaleWrapper) return;
 
     let scale = 1;
     if (this.viewHeight) {
-      scale = this.viewHeight / plugins.shared.A4_HEIGHT;
+      scale = this.viewHeight / plugins.shared.a4Height;
     } else if (this.viewWidth) {
-      scale = this.viewWidth / plugins.shared.A4_WIDTH;
+      scale = this.viewWidth / plugins.shared.a4Width;
     }
     scaleWrapper.style.transform = `scale(${scale})`;
 
     // Adjust the outer dimensions so they match the scaled content
 
-    this.style.width = `${plugins.shared.A4_WIDTH * scale}px`;
+    this.style.width = `${plugins.shared.a4Width * scale}px`;
-    this.style.height = `${plugins.shared.A4_HEIGHT * scale}px`;
+    this.style.height = `${plugins.shared.a4Height * scale}px`;
   }
 }

ts_web/elements/pagecontainer.ts

@@ -7,27 +7,27 @@ import {
   css,
   cssManager,
   unsafeCSS,
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
-import * as domtools from "@design.estate/dees-domtools";
+import * as domtools from '@design.estate/dees-domtools';
 
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-pagecontainer": DePageContainer;
+    'dedocument-pagecontainer': DePageContainer;
   }
 }
 
-@customElement("dedocument-pagecontainer")
+@customElement('dedocument-pagecontainer')
 export class DePageContainer extends DeesElement {
   public static demo = () => html`
-    <dedocument-pagecontainer .format="${"a4"}"></dedocument-pagecontainer>
+    <dedocument-pagecontainer .format="${'a4'}"></dedocument-pagecontainer>
   `;
 
   @property({
     type: String,
   })
-  public format: "a4" = "a4";
+  public format: 'a4' = 'a4';
 
   @property({
     type: Boolean,
@@ -44,9 +44,11 @@ export class DePageContainer extends DeesElement {
     css`
       :host {
         display: block;
+        background: white;
+        color: #333;
         padding: 0px;
-        width: ${unsafeCSS(plugins.shared.A4_WIDTH + "px")};
+        width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
-        height: ${unsafeCSS(plugins.shared.A4_HEIGHT + "px")};
+        height: ${unsafeCSS(plugins.shared.a4Height + 'px')};
         position: relative;
         border-radius: 3px;
         overflow: hidden;
@@ -58,9 +60,7 @@ export class DePageContainer extends DeesElement {
     return html`
       <style>
         :host {
-          box-shadow: ${this.printMode
+          box-shadow: ${this.printMode ? `none` : `0px 0px 10px rgba(0,0,0,0.3)`};
-            ? `none`
-            : `0px 0px 10px rgba(0,0,0,0.3)`};
         }
       </style>
       <slot></slot>

ts_web/elements/pagecontent.ts

@@ -8,27 +8,27 @@ import {
   cssManager,
   unsafeCSS,
   domtools,
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
 
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
-import { dedocumentSharedStyle } from "../style.js";
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-pagecontent": DePageContent;
+    'dedocument-pagecontent': DePageContent;
   }
 }
 
-@customElement("dedocument-pagecontent")
+@customElement('dedocument-pagecontent')
 export class DePageContent extends DeesElement {
   public static demo = () => html`
-    <dedocument-pagecontent .format="${"a4"}"></dedocument-pagecontent>
+    <dedocument-pagecontent .format="${'a4'}"></dedocument-pagecontent>
   `;
 
   @property({
     type: Number,
   })
-  public letterData: plugins.tsclass.business.TLetter;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -40,12 +40,6 @@ export class DePageContent extends DeesElement {
   })
   public pageTotalNumber: number = 1;
 
-  @property({
-    type: Object,
-    reflect: true,
-  })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
-
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -55,23 +49,19 @@ export class DePageContent extends DeesElement {
     domtools.elementBasic.staticStyles,
     dedocumentSharedStyle,
     css`
+      :host {
+        color: #333;
+      }
+
       .content {
         position: absolute;
 
-        left: var(--LEFT-MARGIN);
+        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
-        right: var(--RIGHT-MARGIN);
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        bottom: calc(var(--DPI-FACTOR) * 4);
+        bottom: 170px;
         overflow: visible;
       }
 
-      .content.page--first {
-        top: calc(var(--DPI-FACTOR) * 9.85);
-      }
-
-      .content.page--notFirst {
-        top: calc(var(--DPI-FACTOR) * 4.5);
-      }
-
       .content .subject {
         font-size: 18px;
         font-weight: bold;
@@ -93,31 +83,60 @@ export class DePageContent extends DeesElement {
         margin-bottom: 10px;
         font-size: 10px;
       }
+
+      .continuesOnNextPage {
+        display: inline-block;
+        background: #eeeeee;
+        color: #999;
+        border-radius: 50px;
+        padding: 5px 10px;
+        margin-top: 8px;
+        font-size: 10px;
+      }
+
+      .finalPage {
+        display: inline-block;
+        background: #29b000;
+        color: #fff;
+        border-radius: 50px;
+        padding: 5px 10px;
+        margin-top: 8px;
+        font-size: 10px;
+      }
     `,
   ];
 
   public render(): TemplateResult {
-    const firstPage = this.pageNumber === 1;
     return html`
-      <div class="content ${firstPage ? "page--first" : "page--notFirst"}">
+      <style>
-        ${firstPage
+        .content {
+          top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
+        }
+      </style>
+      <div class="content">
+        ${this.pageNumber === 1
           ? html`<div class="subject">${this.letterData.subject}</div>`
-          : null}
+          : html`
+              <div class="subjectRepeated">
+                ${this.letterData.subject} (Page ${this.pageNumber})
+              </div>
+            `}
         <slot></slot>
+        ${this.pageTotalNumber !== this.pageNumber
+          ? html`<div class="continuesOnNextPage">Continues on page ${this.pageNumber + 1}</div>`
+          : html`<div class="finalPage">This is the final page of this document.</div>`}
       </div>
     `;
   }
 
-  public firstUpdated(
+  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
-    _changedProperties: Map<string | number | symbol, unknown>
-  ): void {
     super.firstUpdated(_changedProperties);
     this.checkOverflow();
   }
 
   public async checkOverflow() {
     await this.elementDomReady;
-    const contentContainer = this.shadowRoot.querySelector(".content");
+    const contentContainer = this.shadowRoot.querySelector('.content');
     if (contentContainer.scrollHeight > contentContainer.clientHeight) {
       return true;
     } else {

ts_web/elements/pagefooter.ts

@@ -5,29 +5,30 @@ import {
   customElement,
   type TemplateResult,
   css,
+  cssManager,
   unsafeCSS,
   domtools,
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
 
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
-import { dedocumentSharedStyle } from "../style.js";
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-pagefooter": DePageFooter;
+    'dedocument-pagefooter': DePageFooter;
   }
 }
 
-@customElement("dedocument-pagefooter")
+@customElement('dedocument-pagefooter')
 export class DePageFooter extends DeesElement {
   public static demo = () => html`
-    <dedocument-pagefooter .format="${"a4"}"></dedocument-pagefooter>
+    <dedocument-pagefooter .format="${'a4'}"></dedocument-pagefooter>
   `;
 
   @property({
     type: Object,
   })
-  letterData: plugins.tsclass.business.TLetter;
+  letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Object,
@@ -36,12 +37,12 @@ export class DePageFooter extends DeesElement {
   documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
-    type: Number,
+    type: Number
   })
   public pageNumber: number = 1;
 
   @property({
-    type: Number,
+    type: Number
   })
   public pageTotalNumber: number = 1;
 
@@ -66,36 +67,32 @@ export class DePageFooter extends DeesElement {
         left: 0px;
         right: 0px;
         height: 130px;
-        content: "";
+        content: '';
-        padding: 30px var(--RIGHT-MARGIN) 10px var(--LEFT-MARGIN);
+        padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
-        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(
+        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
-            100% / 4
-          );
         grid-gap: 5px;
-        border-top: 2px solid var(--footer-separator-bg-color, #e4002b);
+        border-top: 2px solid #e4002b;
       }
 
       .bottomstripe .pageNumber {
         position: absolute;
         top: 0px;
-        right: var(--RIGHT-MARGIN);
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        color: var(--footer-separator-fg-color, #ffffff);
+        background: #e4002b;
-        background: var(--footer-separator-bg-color, #e4002b);
         padding: 3px;
         font-size: 9px;
         color: #fff;
         border-bottom-left-radius: 3px;
         border-bottom-right-radius: 3px;
       }
-
       .bottomstripe .documentTitle {
         position: absolute;
-        top: -19px;
+        top: -18px;
-        right: var(--RIGHT-MARGIN);
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        color: var(--label-fg);
+        background: #dddddd;
-        background: var(--label-bg);
         padding: 3px;
         font-size: 9px;
+        color: #333;
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;
       }
@@ -106,113 +103,36 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "footer@@address"
-            )}:</strong
-          ><br />
           ${this.letterData.from.name}<br />
-          ${this.letterData.from.address.streetName}
+          ${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
-          ${this.letterData.from.address.houseNumber}<br />
+          ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
-          ${this.letterData.from.address.postalCode}
-          ${this.letterData.from.address.city}<br />
           ${this.letterData.from.address.country}
         </div>
-        ${this.letterData.from.registrationDetails
-          ? html` <div>
-              <strong
-                >${plugins.shared.translation.translate(
-                  this.documentSettings.languageCode,
-                  "footer@@registration.label"
-                )}:</strong
-              ><br />
-              ${this.letterData.from.registrationDetails.registrationName}<br />
-              <i>reg-#:</i> ${this.letterData.from.registrationDetails
-                .registrationId}<br />
-              <i>vat-id:</i> ${this.letterData.from.registrationDetails.vatId}
-            </div>`
-          : null}
         <div>
-          <strong
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
-            >${plugins.shared.translation.translate(
+          Amtsgericht Bremen<br />
-              this.documentSettings.languageCode,
+          <i>reg-#:</i> HRB 35230 HB<br />
-              "contact@@title"
+          <i>vat-id:</i> ${this.letterData.from.vatId}
-            )}:</strong
-          ><br />
-          <i
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "contact@@mail"
-            )}:</i
-          >
-          ${this.letterData.from.email}<br />
-          <i
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "contact@@phone"
-            )}:</i
-          >
-          ${this.letterData.from.phone}<br />
-          <i
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "contact@@fax"
-            )}:</i
-          >
-          ${this.letterData.from.fax}
         </div>
         <div>
-          <strong
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
-            >${plugins.shared.translation.translate(
+          <i>email:</i> ${this.letterData.from.email}<br />
-              this.documentSettings.languageCode,
+          <i>phone:</i> ${this.letterData.from.phone}<br />
-              "bankConnection@@title"
+          <i>fax:</i> ${this.letterData.from.fax}
-            )}:</strong
-          ><br />
-          <i
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "bankConnection@@bank.accountHolder"
-            )}:</i
-          >
-          ${this.letterData?.from?.name}<br />
-          <i
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "bankConnection@@bank.institution"
-            )}:</i
-          >
-          ${this.letterData?.from?.sepaConnection?.institution}<br />
-          <i
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "bankConnection@@bank.iban"
-            )}:</i
-          >
-          ${this.letterData?.from?.sepaConnection?.iban}<br />
-          <i
-            >${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              "bankConnection@@bank.bic"
-            )}:</i
-          >
-          ${this.letterData?.from?.sepaConnection?.bic}<br />
         </div>
-        <div class="documentTitle">
+        <div>
-          <b>${this.letterData?.subject}</b>
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
-        </div>
+          <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
-        <div class="pageNumber">
+          <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
-          ${plugins.shared.translation.translate(
+          <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />
-            this.documentSettings.languageCode,
+          <i>bic:</i> ${this.letterData?.from?.sepaConnection?.bic}<br />
-            "footer@@page"
-          )}
-          ${this.pageNumber}
-          ${plugins.shared.translation.translate(
-            this.documentSettings.languageCode,
-            "footer@@pageOf"
-          )}
-          ${this.pageTotalNumber}
         </div>
+        <div class="documentTitle">Subject: <b>${this.letterData?.subject}</b>${(() => {
+          const uidString = html`/ Document-UID: <b>${html`<a href="https://uid.signature.digital/">https://uid.signature.digital/</a>`}</b>`;
+          return ``;
+        })()}</div>
+        <div class="pageNumber">page ${this.pageNumber} of ${this.pageTotalNumber}</div>
       </div>
     `;
   }

ts_web/elements/pageheader.ts

@@ -7,28 +7,28 @@ import {
   css,
   cssManager,
   unsafeCSS,
-  domtools,
+  domtools
-} from "@design.estate/dees-element";
+} from '@design.estate/dees-element';
 
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
-import { dedocumentSharedStyle } from "../style.js";
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-pageheader": DePageHeader;
+    'dedocument-pageheader': DePageHeader;
   }
 }
 
-@customElement("dedocument-pageheader")
+@customElement('dedocument-pageheader')
 export class DePageHeader extends DeesElement {
   public static demo = () => html`
-    <dedocument-pageheader .format="${"a4"}"></dedocument-pageheader>
+    <dedocument-pageheader .format="${'a4'}"></dedocument-pageheader>
   `;
 
   @property({
     type: Object,
   })
-  public letterData: plugins.tsclass.business.TLetter = null;
+  public letterData: plugins.tsclass.business.ILetter = null;
 
   @property({
     type: Object,
@@ -75,7 +75,7 @@ export class DePageHeader extends DeesElement {
         overflow: hidden;
         top: 130px;
         left: auto;
-        right: var(--RIGHT-MARGIN);
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         height: 20px;
         line-height: 20px;
         color: #333;
@@ -86,8 +86,8 @@ export class DePageHeader extends DeesElement {
         bottom: 10px;
         height: 25px;
         left: auto;
-        right: var(--RIGHT-MARGIN);
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        font-family: "Courier New", Courier, monospace;
+        font-family: 'Courier New', Courier, monospace;
       }
       .topstripe .logo img {
         position: relative;
@@ -100,16 +100,10 @@ export class DePageHeader extends DeesElement {
     return html`
       <div class="topstripe">
         <div class="logo">
-          ${plugins.shared.translation.translate(
+          No logo set!
-            this.documentSettings.languageCode,
-            "empty.logo"
-          )}
         </div>
       </div>
-      <div class="topstripe2">
+      <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
-        ${this.letterData?.from?.description ||
-        "[no letterData.from.description set]"}
-      </div>
     `;
   }
 }

ts_web/elements/paymentcode.ts

@@ -1,95 +0,0 @@
-import {
-  css,
-  customElement,
-  DeesElement,
-  html,
-  property,
-  query,
-  type TemplateResult,
-} from "@design.estate/dees-element";
-import * as plugins from "../plugins.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dedocument-paymentcode": DedocumentPaymentCode;
-  }
-}
-
-@customElement("dedocument-paymentcode")
-export class DedocumentPaymentCode extends DeesElement {
-  public static styles = [
-    css`
-      :host {
-        text-align: center;
-        width: 100px;
-        height: 100px;
-      }
-
-      canvas {
-        width: inherit !important;
-        height: inherit !important;
-      }
-    `,
-  ];
-
-  @query("canvas")
-  private canvasEl!: HTMLCanvasElement;
-
-  @property()
-  public bic: string;
-
-  @property()
-  public name: string;
-
-  @property()
-  public iban: string;
-
-  @property()
-  public currency: string;
-
-  @property({ type: Number })
-  public totalGross: number;
-
-  @property()
-  public reference: string;
-
-  private updateQRCode(): void {
-    if (!this.canvasEl) return;
-
-    plugins.qrcode.toCanvas(
-      this.canvasEl,
-      `BCD
-001
-1
-SCT
-${this.bic}
-${this.name}
-${this.iban}
-${this.currency}${this.totalGross?.toFixed?.(2)}
-      
-${this.reference}`,
-      (error) => {
-        if (error) console.error(error);
-      }
-    );
-  }
-
-  public override update(
-    changedProperties: Parameters<DeesElement["update"]>[0]
-  ): void {
-    super.update(changedProperties);
-    this.updateQRCode();
-  }
-
-  public render(): TemplateResult {
-    const allDataAvailable =
-      typeof this.bic === "string" &&
-      typeof this.name === "string" &&
-      typeof this.iban === "string" &&
-      typeof this.currency === "string" &&
-      typeof this.totalGross === "number" &&
-      typeof this.reference === "string";
-
-    return allDataAvailable ? html`<canvas></canvas>` : null;
-  }
-}

ts_web/elements/viewer.demo.ts

@@ -1,9 +1,6 @@
-import { html } from "@design.estate/dees-element";
+import { html } from '@design.estate/dees-element';
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
 
 export const demoFunc = () => html`
-  <dedocument-viewer
+  <dedocument-viewer .letterData=${plugins.shared.demoLetter} .documentSettings=${plugins.shared.demoDocumentSettings}></dedocument-viewer>
-    .letterData=${plugins.shared.demoLetter}
-    .documentSettings=${plugins.shared.demoDocumentSettings}
-  ></dedocument-viewer>
 `;

ts_web/elements/viewer.ts

@@ -1,22 +1,15 @@
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
 
-import {
+import { DeesElement, css, cssManager, customElement, html, property } from '@design.estate/dees-element';
-  DeesElement,
+import { demoFunc } from './viewer.demo.js';
-  css,
-  cssManager,
-  customElement,
-  html,
-  property,
-} from "@design.estate/dees-element";
-import { demoFunc } from "./viewer.demo.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dedocument-viewer": DeDocumentViewer;
+    'dedocument-viewer': DeDocumentViewer;
   }
 }
 
-@customElement("dedocument-viewer")
+@customElement('dedocument-viewer')
 export class DeDocumentViewer extends DeesElement {
   // DEMO
   public static demo = demoFunc;
@@ -26,7 +19,7 @@ export class DeDocumentViewer extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public letterData: plugins.tsclass.business.TLetter = null;
+  public letterData: plugins.tsclass.business.ILetter = null;
 
   @property({
     type: Object,
@@ -41,7 +34,7 @@ export class DeDocumentViewer extends DeesElement {
         position: relative;
         height: 100%;
         width: 100%;
-        background: ${cssManager.bdTheme("#eeeeeb", "#111")};
+        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
       }
       .controls {
         top: 0px;
@@ -50,7 +43,7 @@ export class DeDocumentViewer extends DeesElement {
         position: absolute;
         height: 32px;
         width: 100%;
-        background: ${cssManager.bdTheme("#eeeeeb", "#111111ee")};
+        background: ${cssManager.bdTheme('#eeeeeb', '#111111ee')};
         box-shadow: 0px 2px 8px 0px #000000;
       }
       .controlsShadow {
@@ -84,12 +77,7 @@ export class DeDocumentViewer extends DeesElement {
       <div class="maincontainer">
         <div class="viewport">
           ${this.letterData
-            ? html`
+            ? html` <dedocument-dedocument .letterData=${this.letterData} .documentSettings=${this.documentSettings}></dedocument-dedocument> `
-                <dedocument-dedocument
-                  .letterData=${this.letterData}
-                  .documentSettings=${this.documentSettings}
-                ></dedocument-dedocument>
-              `
             : html``}
         </div>
         <div class="controls"></div>
@@ -97,11 +85,9 @@ export class DeDocumentViewer extends DeesElement {
     `;
   };
 
-  public updated = (
+  public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
-    changedProperties: Map<string | number | symbol, unknown>
-  ) => {
     super.updated(changedProperties);
-    if (changedProperties.has("letterData")) {
+    if (changedProperties.has('letterData')) {
     }
   };
 }

ts_web/pages/page1.ts

@@ -1,5 +1,5 @@
-import * as plugins from "../plugins.js";
+import * as plugins from '../plugins.js';
-import { html } from "@design.estate/dees-element";
+import { html } from '@design.estate/dees-element';
 
 export const page1 = () => html`
   <style>
@@ -7,15 +7,11 @@ export const page1 = () => html`
       margin: 16px;
     }
   </style>
-  <dedocument-dedocument
+  <dedocument-dedocument .printMode=${false} letterData=${plugins.smartjson.stringifyBase64({
-    .printMode=${false}
-    letterData=${plugins.smartjson.stringifyBase64({
       ...plugins.shared.demoLetter,
       from: {
         ...plugins.shared.demoLetter.from,
-        description: "a string set via stringified JSON",
+        description: 'a string set via stringified JSON'
-      },
+      }
-    } as plugins.tsclass.finance.TInvoice)}
+    } as plugins.tsclass.business.ILetter)}> </dedocument-dedocument>
-  >
-  </dedocument-dedocument>
 `;

ts_web/style.ts

@@ -1,39 +1,7 @@
-import { css } from "@design.estate/dees-element";
+import { css } from '@design.estate/dees-element';
-import * as plugins from "./plugins.js";
 
 export const dedocumentSharedStyle = css`
   :host {
-    /* Primitive colors */
+    font-family: 'Exo 2';
-    --color-light: #ffffff;
-    --color-dark: #333333;
-    --color-grey: #dddddd;
-    --color-grey-100: #dddddd;
-    --color-red: #e4002b;
-
-    /* Semantic colors */
-    --color-primary-fg: var(--theme-color-primary-fg, var(--color-dark));
-    --color-primary-bg: var(--theme-color-primary-bg, var(--color-light));
-    --color-accent-fg: var(--theme-color-accent-fg, var(--color-light));
-    --color-accent-bg: var(--theme-color-accent-bg, var(--color-red));
-
-    /* Functional colors */
-    --text-fg-color: var(--color-primary-fg);
-    --text-bg-color: var(--color-primary-bg);
-    --label-fg: var(--color-dark);
-    --label-bg: var(--color-grey);
-    --footer-separator-bg-color: var(--color-accent);
-    --footer-separator-fg-color: var(--color-light);
-
-    /* Functional variables */
-    --DPI-FACTOR: ${plugins.shared.cmToPx(1)}px;
-    --RIGHT-MARGIN: ${plugins.shared.cmToPx(2)}px;
-    --LEFT-MARGIN: ${plugins.shared.cmToPx(2)}px;
-    --text-font-family: var(--theme-text-font-family, "Exo 2");
-    --text-font-size: var(--theme-text-font-size, 12px);
-
-    color: var(--text-fg-color);
-    background: var(--text-bg-color);
-    font-family: var(--text-font-family);
-    font-size: var(--text-font-size);
   }
 `;