feat: migrate to new tsclass schema

.gitea/workflows/default_nottags.yaml

@@ -6,8 +6,8 @@ on:
       - '**'
 
 env:
-  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
-  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
   NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
   NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
   NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
@@ -26,7 +26,7 @@ jobs:
       - name: Install pnpm and npmci
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
 
       - name: Run npm prepare
         run: npmci npm prepare

.gitea/workflows/default_tags.yaml

@@ -6,8 +6,8 @@ on:
       - '*'
 
 env:
-  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
-  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
   NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
   NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
   NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
@@ -26,7 +26,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Audit production dependencies
@@ -54,7 +54,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Test stable
@@ -82,7 +82,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Release
@@ -104,7 +104,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Code quality

.gitignore

@@ -3,7 +3,6 @@
 # artifacts
 coverage/
 public/
-pages/
 
 # installs
 node_modules/

.npmrc

@@ -1 +1 @@
-registry=https://verdaccio.nevermind.cloud/
+registry=https://registry.npmjs.org/

changelog.md

@@ -1,5 +1,104 @@
 # Changelog
 
+## 2025-01-01 - 1.6.11 - fix(license)
+Update copyright notice in license to reflect new ownership
+
+- Updated copyright from Lossless GmbH to Task Venture Capital GmbH.
+
+## 2024-12-08 - 1.6.10 - fix(core)
+Improve stability and performance of document generation
+
+
+## 2024-12-08 - 1.6.9 - fix(contentinvoice.ts)
+Improve invoice item layout and fix alignment issues.
+
+- Fixed missing border on last invoice item.
+- Added highlighted style for invoice lines.
+- Corrected alignment and display of invoice item details.
+- Included VAT percentage display adjustments.
+
+## 2024-12-07 - 1.6.8 - fix(rendering and logging)
+Removed debug logging from document rendering process.
+
+- Removed console logs from content invoice, document rendering, page scaling, and overflow checking.
+
+## 2024-12-07 - 1.6.7 - fix(document rendering)
+Fixed overflow issues in document and page elements
+
+- Ensured content overflow handling in document.ts
+- Adjusted page element overflow settings in page.ts
+
+## 2024-12-07 - 1.6.6 - fix(page-render)
+Fix layout scaling adjustment for page component
+
+- Ensure `font-family` is no longer explicitly set to inherit in `DePage` component.
+- Adjust scaling logic to properly set width and overflow based on calculated scale.
+
+## 2024-12-05 - 1.6.5 - fix(contentinvoice)
+Fix VAT group item number formatting and remove custom font style in invoice sums.
+
+- Removed custom font-family style from the invoice sums.
+- Corrected VAT group item numbers display by properly formatting and removing trailing comma.
+
+## 2024-12-05 - 1.6.4 - fix(styling)
+Consolidated shared styles for consistent font applied across various components.
+
+- Added a shared style file for consistent font family across components
+- Applied shared style to contentinvoice, letterheader, pagecontent, pagefooter, and pageheader components
+
+## 2024-12-05 - 1.6.3 - fix(ui)
+Corrects font family in contentinvoice element.
+
+- Updated the font-family for line items in contentinvoice.ts
+
+## 2024-12-05 - 1.6.2 - fix(translation)
+Corrected missing translation keys for VAT short form across multiple languages.
+
+- Fixed missing 'vatShort' translation for English, German, Spanish, French, and Italian in translation.ts file.
+
+## 2024-12-05 - 1.6.1 - fix(core)
+Ensure consistent project structure and code organization without additional changes.
+
+
+## 2024-12-05 - 1.6.0 - feat(documentSettings + translations + vat in itemLines)
+Updated dependencies in package.json
+
+- Updated @types/node to version ^22.10.1
+- Updated qrcode package to version ^1.5.4
+
+## 2024-12-02 - 1.5.3 - fix(elements)
+Update viewer attributes and fix font integration
+
+- Updated viewer.ts to add missing property decorators for letterData and documentSettings.
+- Fixed font loading by correcting URLs in index.html.
+- Set demoDocumentSettings default header and footer to false.
+
+## 2024-12-02 - 1.5.2 - fix(workflow)
+Corrected Docker image references and package scope in YAML workflows for compatibility.
+
+- Updated Docker image reference from GitLab to code.foss.global for npmci UI workflows.
+- Fixed npm package scope for `@shipzone/npmci` in YAML workflows.
+- Minor formatting corrections for better code readability.
+
+## 2024-12-02 - 1.5.1 - fix(package)
+Fix duplicate node export in package.json
+
+- Resolved a duplication issue with the './node' export in package.json exports field.
+
+## 2024-12-02 - 1.5.0 - feat(core)
+Refactor project structure for better modularity and code organization
+
+- Moved shared components to a dedicated 'dist_ts_shared' directory for better separation of concerns.
+- Updated import statements across the codebase to align with the new file structure.
+- Introduced translations directly under 'ts_shared' for language-specific string management.
+
+## 2024-12-02 - 1.4.0 - feat(translation)
+Add French and Italian translations for document interface
+
+- Expanded translation support by adding French and Italian language translations
+- Fixed duplicated text in German final page statement
+- Improved Spanish translation of reverse VAT note and final page statement
+
 ## 2024-12-02 - 1.3.2 - fix(core)
 Minor updates and optimizations in the output PDF formatting process.
 

html/index.html

@@ -1,6 +1,3 @@
-<!--gitzone element-->
-<!-- made by Task Venture Capital GmbH -->
-<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
 <html lang="en">
   <head>
     <!--Lets set some basic meta tags-->

license

@@ -1,4 +1,4 @@
-Copyright (c) 2022 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2022 Task Venture Capital GmbH (hello@task.vc)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -16,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package.json

@@ -1,13 +1,16 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.3.2",
+  "version": "1.6.11",
   "private": false,
   "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "exports": {
-    "./ts": "./dist_ts/index.js",
+    ".": "./dist_ts/index.js",
-    "./ts_web": "./dist_ts_web/index.js"
+    "./node": "./dist_ts/index.js",
+    "./web": "./dist_ts_web/index.js",
+    "./shared": "./dist_ts_shared/index.js",
+    "./interfaces": "./dist_ts_shared/interfaces/index.js"
   },
   "scripts": {
     "test": "npm run build && tstest test/",
@@ -18,27 +21,29 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.65",
+    "@design.estate/dees-catalog": "^1.4.1",
+    "@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.0.21",
+    "@push.rocks/smartfile": "^11.2.0",
     "@push.rocks/smartjson": "^5.0.20",
     "@push.rocks/smartpath": "^5.0.18",
-    "@push.rocks/smartpdf": "^3.1.8",
+    "@push.rocks/smartpdf": "^3.2.2",
-    "@push.rocks/smarttime": "^4.0.8",
+    "@push.rocks/smarttime": "^4.1.1",
-    "@tsclass/tsclass": "^4.1.2",
+    "@tsclass/tsclass": "^8.0.3",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.13.13",
     "@types/qrcode": "^1.5.5",
+    "puppeteer": "^24.4.0",
     "qrcode": "^1.5.4"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.2.0",
+    "@git.zone/tsbuild": "^2.3.2",
-    "@git.zone/tsbundle": "^2.1.0",
+    "@git.zone/tsbundle": "^2.2.5",
-    "@git.zone/tstest": "^1.0.90",
+    "@git.zone/tstest": "^1.0.96",
-    "@git.zone/tswatch": "^2.0.25",
+    "@git.zone/tswatch": "^2.1.0",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.5.3"
+    "@push.rocks/tapbundle": "^5.6.0"
   },
   "files": [
     "ts/**/*",
@@ -58,12 +63,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/designestate/private/dedocument-catalog.git"
+    "url": "git+https://code.foss.global/designestate/private/dedocument-catalog.git"
   },
   "bugs": {
-    "url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
+    "url": "https://code.foss.global/designestate/private/dedocument-catalog/issues"
   },
-  "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
+  "homepage": "https://code.foss.global/designestate/private/dedocument-catalog#readme",
   "keywords": [
     "document generation",
     "invoice automation",

readme.md

@@ -16,7 +16,7 @@ This command will install the package and add it to your project's dependencies,
 
 The `@design.estate/dees-document` package serves as a robust framework to facilitate the generation of business documents, such as invoices, contracts, and reports. Leveraging modern web technologies, this package integrates seamlessly with TypeScript and ES modules, offering a type-safe environment conducive to efficient, dynamic document creation.
 
-Below, we provide a detailed guide for utilizing this package, from initializing your environment to generating complete PDF documents. 
+Below, we provide a detailed guide for utilizing this package, from initializing your environment to generating complete PDF documents.
 
 ### Setting Up the Environment
 
@@ -47,48 +47,48 @@ import { ILetter } from '@design.estate/dees-document';
 
 const invoiceTemplate: ILetter = {
   from: {
-    name: "Your Company Name",
+    name: 'Your Company Name',
     address: {
-      streetName: "Your Street",
+      streetName: 'Your Street',
-      houseNumber: "123",
+      houseNumber: '123',
-      city: "Your City",
+      city: 'Your City',
-      country: "Your Country",
+      country: 'Your Country',
-      postalCode: "12345",
+      postalCode: '12345',
     },
-    email: "your-email@example.com",
+    email: 'your-email@example.com',
-    phone: "123-456-7890",
+    phone: '123-456-7890',
   },
   to: {
-    name: "Recipient Company Name",
+    name: 'Recipient Company Name',
     address: {
-      streetName: "Recipient Street",
+      streetName: 'Recipient Street',
-      houseNumber: "456",
+      houseNumber: '456',
-      city: "Recipient City",
+      city: 'Recipient City',
-      country: "Recipient Country",
+      country: 'Recipient Country',
-      postalCode: "67890",
+      postalCode: '67890',
     },
-    email: "recipient-email@example.com",
+    email: 'recipient-email@example.com',
-    phone: "098-765-4321",
+    phone: '098-765-4321',
   },
   content: {
     invoiceData: {
       items: [
         {
-          name: "Service or Product Name",
+          name: 'Service or Product Name',
           unitQuantity: 2,
-          unitNetPrice: 100.00,
+          unitNetPrice: 100.0,
           unitType: 'service',
           vatPercentage: 19,
           currency: 'EUR',
-        }
+        },
-      ]
+      ],
-    }
+    },
   },
-  subject: "Invoice for Services Rendered",
+  subject: 'Invoice for Services Rendered',
   date: new Date().getTime(),
   versionInfo: {
-    type: "final",
+    type: 'final',
-    version: "1.0.0"
+    version: '1.0.0',
   },
 };
 ```
@@ -133,22 +133,28 @@ This script encompasses initializing services and generating a PDF in a streamli
 `@design.estate/dees-document` provides several advanced functionalities, enabling rich document creation:
 
 1. **Custom Templates & Styling**
+
    - Customize the styling through CSS or using inline styles in TypeScript.
    - Templates can be adjusted to present different document types (e.g., contracts, reports).
 
 2. **Modular Components and Reuse**
+
    - Utilize modular components to create reusable parts across different documents, enhancing maintainability and reducing redundancy.
 
 3. **Interactive Documents**
+
    - Integrate interactivities like forms, buttons, and interactive charts within your documents.
 
 4. **Localization Support**
+
    - Documents can be localized to support multiple languages, enhancing accessibility and usability.
 
 5. **Responsive and Adaptive Designs**
+
    - Create documents that adjust layout dynamically depending on print or digital medium, maintaining consistency across platforms.
 
 6. **Security Features**
+
    - Apply digital signatures and encrypt sensitive documents to ensure secure and authentic document distribution.
 
 7. **Complex Business Logic**
@@ -175,7 +181,7 @@ From custom templates to localization and advanced security features, this modul
 
 ## License and Legal Information
 
-This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. 
+This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 

test/plugins.ts

@@ -2,8 +2,4 @@ import * as tsclass from '@tsclass/tsclass';
 import * as smartfile from '@push.rocks/smartfile';
 import * as path from 'path';
 
-export {
+export { tsclass, smartfile, path };
-  tsclass,
-  smartfile,
-  path,
-}

test/test.ts

@@ -1,116 +1,104 @@
-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/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.business.ILetter = {
+const testLetterData: plugins.tsclass.finance.TInvoice = {
-  accentColor: null,
+  type: "invoice",
-  type: 'invoice',
+  invoiceType: "debitnote",
   date: null,
-  needsCoverSheet: true,
   objectActions: [],
   pdf: null,
-  content: {
+  id: "XX-CLIENT-48765",
-    invoiceData: {
+  invoiceId: "XX-CLIENT-48765",
-      id: 'XX-CLIENT-48765',
+  reverseCharge: true,
-      reverseCharge: true,
+  dueInDays: 30,
-      dueInDays: 30,
+  currency: "EUR",
-      currency: 'EUR',
+  notes: [],
-      notes: [],
+  status: null,
-      type: 'debitnote',
+  deliveryDate: new Date().getTime(),
-      billedBy: {
+  periodOfPerformance: null,
-        address: null,
+  printResult: null,
-        description: null,
+  items: [
-        name: 'Some Service GmbH',
+    {
-        type: null,
+      name: "Website Creation",
-        customerNumber: null,
+      unitQuantity: 1,
-        email: null,
+      unitNetPrice: 1200,
-        facebookUrl: null,
+      unitType: "item",
-        fax: null,
+      vatPercentage: 0,
-        legalEntity: null,
+      position: 1,
-        sepaConnection: {
-          bic: 'BPOTBEB1',
-          iban: 'BE72000000001616',
-        },
-      },
-      billedTo: null,
-      status: null,
-      deliveryDate: new Date().getTime(),
-      periodOfPerformance: null,
-      printResult: null,
-      items: [
-        {
-          name: 'Website Creation',
-          unitQuantity: 1,
-          unitNetPrice: 1200,
-          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",
-    description: 'doing pdf stuff',
+    status: "active",
+    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",
-    description: 'a company that does stuff',
+    status: "active",
+    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.business.ILetter;
+    letterData: plugins.tsclass.finance.TInvoice;
     documentSettings: interfaces.IDocumentSettings;
   }) => {
-    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(optionsArg);
+    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(
+      optionsArg
+    );
     await plugins.smartfile.memory.toFs(
       Buffer.from(pdfResult.buffer),
       plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)
@@ -124,106 +112,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.content.invoiceData.items = [
+  (testLetterData.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,
     },
@@ -234,7 +222,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/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.3.2',
+  version: '1.6.11',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts/classes.pdfservice.ts

@@ -1,10 +1,7 @@
 import * as plugins from './plugins.js';
 import * as helpers from './helpers.js';
-import type { IDocumentSettings} from '../ts/interfaces/index.js';
 
-export interface IPdfServiceConstructorOptions {
+export interface IPdfServiceConstructorOptions {}
-
-}
 
 /**
  * a pdf service for generating pdfs
@@ -45,8 +42,8 @@ export class PdfService {
    * creates an letter
    */
   public async createPdfFromLetterObject(optionsArg: {
-    letterData: plugins.tsclass.business.ILetter,
+    letterData: plugins.tsclass.business.ILetter;
-    documentSettings: IDocumentSettings
+    documentSettings: plugins.shared.interfaces.IDocumentSettings;
   }) {
     const html = `
       <script type="module">

ts/helpers.ts

@@ -3,4 +3,4 @@ import * as paths from './paths.js';
 
 export const getBundleAsString = async () => {
   return plugins.smartfile.fs.toStringSync(paths.bundleFile);
-}
+};

ts/interfaces/document.ts

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

ts/interfaces/index.ts

@@ -1,2 +0,0 @@
-export * from './document.js';
-export * from './translation.js';

ts/interfaces/translation.ts

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

ts/paths.ts

@@ -1,6 +1,9 @@
 import * as plugins from './plugins.js';
 
-export const packageDir = plugins.path.join(plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url), '../');
+export const packageDir = plugins.path.join(
+  plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
+  '../',
+);
 
 export const nogitDir = plugins.path.join(packageDir, '.nogit/');
 plugins.smartfile.fs.ensureDirSync(nogitDir);

ts/plugins.ts

@@ -1,9 +1,12 @@
 // node native
 import * as path from 'path';
 
-export {
+export { path };
-  path
+
-}
+// dees-document scope
+import * as shared from '../dist_ts_shared/index.js';
+
+export { shared };
 
 // @push.rocks/scope
 import * as smartfile from '@push.rocks/smartfile';
@@ -11,16 +14,9 @@ import * as smartjson from '@push.rocks/smartjson';
 import * as smartpath from '@push.rocks/smartpath';
 import * as smartpdf from '@push.rocks/smartpdf';
 
-export {
+export { smartfile, smartpath, smartjson, smartpdf };
-  smartfile,
-  smartpath,
-  smartjson,
-  smartpdf,
-}
 
 // @tsclass scope
 import * as tsclass from '@tsclass/tsclass';
 
-export {
+export { tsclass };
-  tsclass,
-}

ts/shared/demoletter.ts

@@ -1,219 +0,0 @@
-import * as tsclass from '@tsclass/tsclass';
-import * as interfaces from '../interfaces/index.js';
-
-const fromContact: tsclass.business.IContact = {
-  name: 'Awesome From Company',
-  type: 'company',
-  description: 'a company that does stuff',
-  address: {
-    streetName: 'Awesome Street',
-    houseNumber: '5',
-    city: 'Bremen',
-    country: 'Germany',
-    postalCode: '28359',
-  },
-  vatId: 'DE12345678',
-  sepaConnection: {
-    bic: 'BPOTBEB1',
-    iban: 'BE01234567891616'
-  },
-  email: 'hello@awesome.company',
-  phone: '+49 421 1234567',
-  fax: '+49 421 1234568',
-
-};
-
-const toContact: tsclass.business.IContact = {
-  name: 'Awesome To GmbH',
-  type: 'company',
-  customerNumber: 'LL-CLIENT-123',
-  description: 'a company that does stuff',
-  address: {
-    streetName: 'Awesome Street',
-    houseNumber: '5',
-    city: 'Bremen',
-    country: 'Germany',
-    postalCode: '28359'
-  },
-  vatId: 'BE12345678',
-}
-
-export const demoLetter: tsclass.business.ILetter = {
-  versionInfo: {
-    type: 'draft',
-    version: '1.0.0',
-  },
-  accentColor: null,
-  content: {
-    textData: null,
-    timesheetData: null,
-    contractData: {
-      contractDate: Date.now(),
-      id: 'someid'
-    },
-    invoiceData: {
-      id: 'LL-INV-48765',
-      reverseCharge: true,
-      dueInDays: 30,
-      billedBy: fromContact,
-      billedTo: toContact,
-      status: null,
-      deliveryDate: new Date().getTime(),
-      periodOfPerformance: null,
-      printResult: null,
-      currency: 'EUR',
-      notes: [],
-      type: 'debitnote',
-      items: [
-        {
-          name: 'Item with 19% VAT',
-          unitQuantity: 2,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 19,
-          position: 0,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 4,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 1,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 3,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 2,
-        },
-        {
-          name: 'Item with 21% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 21,
-          position: 3,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 6,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 4,
-        },{
-          name: 'Item with 19% VAT',
-          unitQuantity: 8,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 19,
-          position: 5,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 9,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 6,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 4,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 8,
-        },
-        {
-          name: 'Item with 21% VAT',
-          unitQuantity: 3,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 21,
-          position: 9,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-      ],
-    }
-  },
-  
-  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',
-};

ts/shared/index.ts

@@ -1,9 +0,0 @@
-export const a4Height = 1122;
-export const a4Width = 794;
-export const rightMargin = 70;
-export const leftMargin = 90;
-
-import * as translation from './translation.js';
-export { translation };
-
-export * from './demoletter.js';

ts/shared/translation.ts

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

ts/tspublish.json

@@ -0,0 +1,3 @@
+{
+  "order": 2
+}

ts_shared/demoletter.ts

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

ts_shared/index.ts

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

ts_shared/interfaces/document.ts

@@ -0,0 +1,23 @@
+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;
+  enableInvoiceContractRefSection?: boolean;
+  languageCode?: translation.LanguageCode;
+  dateStyle?: Intl.DateTimeFormatOptions["dateStyle"];
+  vatGroupPositions?: boolean;
+  theme?: IDocumentTheme;
+}

ts_shared/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './document.js';

ts_shared/plugins.ts

@@ -0,0 +1,4 @@
+// tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+
+export { tsclass };

ts_shared/translation.ts

@@ -0,0 +1,272 @@
+// Define English translations without enforcing TTranslationImplementation yet
+export const EN_translations = {
+  address: "Address",
+  "bank.accountHolder": "beneficiary",
+  "bank.bic": "bic",
+  "bank.iban": "iban",
+  "bank.institution": "institution",
+  "bankConnection@@title": "Bank Connection",
+  "contact@@title": "Contact Info",
+  "customer.number": "Your Customer ID",
+  description: "Description",
+  "empty.logo": "no logo provided",
+  "empty.number.customer": "not registered",
+  empty: "not provided",
+  fax: "Fax",
+  introStatement: "We hereby invoice the following products and services",
+  "invoice.number": "Invoice number",
+  invoice: "Invoice",
+  "item.position": "Pos.",
+  mail: "Mail",
+  "overlay@@draft": "Draft",
+  "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
+
+/**
+ * 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 = {
+  [key in TranslationKey]: string;
+};
+
+// Define German translations
+export const DE_translations: Dictionary = {
+  address: "Adresse",
+  "bank.accountHolder": "Kontoinhaber",
+  "bank.bic": "BIC",
+  "bank.iban": "IBAN",
+  "bank.institution": "Bankinstitut",
+  "bankConnection@@title": "Bankverbindung",
+  "contact@@title": "Kontaktinformationen",
+  "customer.number": "Ihre Kundennummer",
+  description: "Beschreibung",
+  "empty.logo": "Kein Logo gesetzt",
+  "empty.number.customer": "nicht registriert",
+  empty: "nicht angegeben",
+  fax: "Fax",
+  introStatement:
+    "Wir stellen Ihnen hiermit folgende Produkte und Dienstleistungen in Rechnung",
+  "invoice.number": "Rechnungsnr.",
+  invoice: "Rechnung",
+  "item.position": "Pos.",
+  mail: "E-Mail",
+  "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 = {
+//   address: "Dirección",
+//   bankConnection: "Conexión bancaria",
+//   contactInfo: "Información de contacto",
+//   description: "Descripción",
+//   invoice: "Factura",
+//   itemPos: "Pos.",
+//   quantity: "Cantidad",
+//   registrationInfo: "Información de registro",
+//   reverseVatNote:
+//     "El IVA se aplica por inversión del sujeto pasivo y debe ser pagado por el cliente.",
+//   totalNetPrice: "Precio total neto",
+//   unitNetPrice: "Precio unitario neto",
+//   unitType: "Tipo de unidad",
+//   yourCustomerId: "Su número de cliente:",
+//   yourVatId: "Su ID de IVA:",
+//   continuesOnPage: "Continúa en la página",
+//   finalPageStatement: "Esta es la última página de este documento.",
+//   page: "Página",
+//   vatShort: "IVA",
+// };
+
+// Define French translations
+// export const FR_translations: TTranslationImplementation = {
+//   address: "Adresse",
+//   bankConnection: "Coordonnées bancaires",
+//   contactInfo: "Informations de contact",
+//   description: "Description",
+//   invoice: "Facture",
+//   itemPos: "Position",
+//   quantity: "Quantité",
+//   registrationInfo: "Informations d'enregistrement",
+//   reverseVatNote:
+//     "La TVA s'applique selon le mécanisme d'autoliquidation et est à payer par le client.",
+//   totalNetPrice: "Prix net total",
+//   unitNetPrice: "Prix unitaire net",
+//   unitType: "Type d'unité",
+//   yourCustomerId: "Votre numéro de client :",
+//   yourVatId: "Votre numéro de TVA :",
+//   continuesOnPage: "Continue sur la page",
+//   finalPageStatement: "Ceci est la dernière page de ce document.",
+//   page: "Page",
+//   vatShort: "TVA",
+// };
+
+// Define Italian translations
+// export const IT_translations: TTranslationImplementation = {
+//   address: "Indirizzo",
+//   bankConnection: "Coordinate bancarie",
+//   contactInfo: "Informazioni di contatto",
+//   description: "Descrizione",
+//   invoice: "Fattura",
+//   itemPos: "Pos.",
+//   quantity: "Quantità",
+//   registrationInfo: "Informazioni di registrazione",
+//   reverseVatNote:
+//     "L'IVA è applicata con inversione contabile ed è a carico del cliente.",
+//   totalNetPrice: "Prezzo netto totale",
+//   unitNetPrice: "Prezzo netto unitario",
+//   unitType: "Tipo di unità",
+//   yourCustomerId: "Il tuo numero cliente:",
+//   yourVatId: "Il tuo numero di partita IVA:",
+//   continuesOnPage: "Continua alla pagina",
+//   finalPageStatement: "Questa è l'ultima pagina di questo documento.",
+//   page: "Pagina",
+//   vatShort: "IVA",
+// };
+
+// Language Code Map
+export const languageCodeMap: Record<string, Dictionary> = {
+  EN: EN_translations,
+  DE: DE_translations,
+  // ES: ES_translations,
+  // FR: FR_translations,
+  // IT: IT_translations,
+};
+
+// Language Code Type
+export type LanguageCode = 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,
+  key: TranslationKey
+): string => {
+  const dictionary = languageCodeMap[languageCode] || EN_translations;
+  const lookupHierarchy = getTranslationKeyHierarchy(key);
+
+  let found: string;
+
+  for (let keyOption of lookupHierarchy) {
+    found = dictionary[keyOption] || EN_translations[keyOption];
+
+    if (found) {
+      break;
+    }
+  }
+  return found;
+};

ts_shared/tspublish.json

@@ -0,0 +1,3 @@
+{
+  "order": 1
+}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.3.2',
+  version: '1.6.11',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_web/elements/contentinvoice.ts

@@ -9,23 +9,21 @@ 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 * as shared from '../../ts/shared/index.js';
-import * as interfaces from '../../ts/interfaces/index.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>
@@ -43,13 +41,13 @@ export class DeContentInvoice extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public letterData: plugins.tsclass.business.ILetter;
+  public letterData: plugins.tsclass.finance.TInvoice;
 
   @property({
     type: Object,
     reflect: true,
   })
-  public documentSettings: interfaces.IDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   constructor() {
     super();
@@ -58,16 +56,98 @@ export class DeContentInvoice extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
-      :host {
-        color: #333;
-      }
-
       .trimmedContent {
         display: none;
       }
 
-      .repeatedContent {
+      .grid {
+        display: grid;
+        grid-template-columns: 40px auto 50px 50px 100px 50px 100px;
+      }
+
+      .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;
+      }
+
+      .invoiceLine {
+        background: #ffffff00;
+        border-bottom: 1px dotted #ccc;
+      }
+
+      .invoiceLine.highlighted {
+        transition: background 0.2s;
+        background: #ffc18f;
+        border: 1px solid #ff9d4d;
+        box-sizing: content-box;
+      }
+
+      .sums {
+        margin-top: 5px;
+        font-size: 12px;
+        padding-left: 50%;
+      }
+
+      .sums .sumline {
+        margin-top: 3px;
+        display: grid;
+        grid-template-columns: auto 100px;
+      }
+
+      .sums .sumline .label {
+        padding: 2px 5px;
+        border-right: 1px solid #ccc;
+        text-align: right;
+        font-weight: bold;
+      }
+
+      .sums .sumline .value {
+        padding: 2px 5px;
+      }
+
+      .sums .sumline .value--total {
+        font-weight: bold;
+      }
+
+      .divider {
+        margin-top: 8px;
+        border-top: 1px dotted #ccc;
+      }
+
+      .taxNote {
+        font-size: 12px;
+        padding: 4px;
+        background: #eeeeeb;
+        text-align: center;
+      }
+
+      .infoBox {
+        margin-top: 22px;
+        line-height: 1.4em;
+      }
+
+      .infoBox .label {
+        padding-bottom: 2px;
+        font-weight: bold;
       }
     `,
   ];
@@ -80,6 +160,17 @@ export class DeContentInvoice extends DeesElement {
     `;
   }
 
+  protected formatPrice(
+    value: number,
+    currency = "EUR",
+    lang = "de-DE"
+  ): string {
+    return new Intl.NumberFormat(lang, {
+      style: "currency",
+      currency,
+    }).format(value);
+  }
+
   public getTotalNet = (): number => {
     let totalNet = 0;
 
@@ -87,7 +178,7 @@ export class DeContentInvoice extends DeesElement {
       return totalNet;
     }
 
-    for (const item of this.letterData.content.invoiceData.items) {
+    for (const item of this.letterData.items) {
       totalNet += item.unitNetPrice * item.unitQuantity;
     }
     return totalNet;
@@ -109,7 +200,7 @@ export class DeContentInvoice extends DeesElement {
   public getVatGroups = () => {
     const vatGroups: {
       vatPercentage: number;
-      items: plugins.tsclass.finance.IInvoice['items'];
+      items: plugins.tsclass.finance.TInvoice["items"];
       vatAmountSum: number;
     }[] = [];
 
@@ -118,17 +209,22 @@ export class DeContentInvoice extends DeesElement {
     }
 
     const taxAmounts: number[] = [];
-    for (const item of this.letterData.content.invoiceData.items) {
+    for (const item of this.letterData.items) {
-      taxAmounts.includes(item.vatPercentage) ? null : taxAmounts.push(item.vatPercentage);
+      taxAmounts.includes(item.vatPercentage)
+        ? null
+        : taxAmounts.push(item.vatPercentage);
     }
 
     for (const taxAmount of taxAmounts) {
-      const matchingItems = this.letterData.content.invoiceData.items.filter(
+      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);
+        sum +=
+          matchingItem.unitNetPrice *
+          matchingItem.unitQuantity *
+          (taxAmount / 100);
       }
       vatGroups.push({
         items: matchingItems,
@@ -136,15 +232,21 @@ export class DeContentInvoice extends DeesElement {
         vatAmountSum: Math.round(sum * 100) / 100,
       });
     }
-    return vatGroups;
+    return vatGroups.sort((a, b) => b.vatPercentage - a.vatPercentage);
   };
 
   public async getContentNodes() {
     await this.elementDomReady;
     return {
-      currentContent: this.shadowRoot.querySelector('.currentContent') as HTMLElement,
+      currentContent: this.shadowRoot.querySelector(
-      trimmedContent: this.shadowRoot.querySelector('.trimmedContent') as HTMLElement,
+        ".currentContent"
-      repeatedContent: this.shadowRoot.querySelector('.repeatedContent') as HTMLElement,
+      ) as HTMLElement,
+      trimmedContent: this.shadowRoot.querySelector(
+        ".trimmedContent"
+      ) as HTMLElement,
+      repeatedContent: this.shadowRoot.querySelector(
+        ".repeatedContent"
+      ) as HTMLElement,
     };
   }
 
@@ -156,7 +258,7 @@ export class DeContentInvoice extends DeesElement {
   public async trimEndByOne() {
     await this.elementDomReady;
     this.shadowRoot
-      .querySelector('.trimmedContent')
+      .querySelector(".trimmedContent")
       .append(
         (await this.getContentNodes()).currentContent.children.item(
           (await this.getContentNodes()).currentContent.children.length - 1
@@ -166,7 +268,8 @@ export class DeContentInvoice extends DeesElement {
 
   public async trimStartToOffset(contentOffsetArg: number) {
     await this.elementDomReady;
-    const beginningLength = (await this.getContentNodes()).currentContent.children.length;
+    const beginningLength = (await this.getContentNodes()).currentContent
+      .children.length;
     while (
       (await this.getContentNodes()).currentContent.children.length !==
       beginningLength - contentOffsetArg
@@ -174,18 +277,17 @@ export class DeContentInvoice extends DeesElement {
       (await this.getContentNodes()).trimmedContent.append(
         (await this.getContentNodes()).currentContent.children.item(0)
       );
-      console.log('hey' + this.shadowRoot.children.length);
     }
     if (
       (await this.getContentNodes()).currentContent.children
         .item(0)
-        .classList.contains('needsDataHeader')
+        .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')) {
+        if (element.classList.contains("dataHeader")) {
           (await this.getContentNodes()).repeatedContent.append(element);
           break;
         }
@@ -194,197 +296,194 @@ export class DeContentInvoice extends DeesElement {
     }
   }
 
-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+  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`
-        <style>
+        <div>${this.translateKey("invoice@@introStatement")}</div>
-          .grid {
-            display: grid;
-            grid-template-columns: 40px auto 80px 80px 90px 90px;
-          }
-          .topLine {
-            margin-top: 5px;
-            background: #e7e7e7;
-            font-weight: bold;
-          }
-          .lineItem {
-            font-size: 12px;
-            padding: 5px;
-          }
-
-          .invoiceLine {
-            border-bottom: 1px dotted #ccc;
-          }
-
-          .sums {
-            margin-top: 5px;
-            font-size: 12px;
-            padding-left: 50%;
-          }
-
-          .sums .sumline {
-            margin-top: 3px;
-            display: grid;
-            grid-template-columns: auto 90px;
-          }
-
-          .sums .sumline .label {
-            padding: 2px 5px;
-            border-right: 1px solid #ccc;
-            text-align: right;
-            font-weight: bold;
-          }
-
-          .sums .sumline .value {
-            padding: 2px 5px;
-            font-weight: bold;
-          }
-
-          .divider {
-            margin-top: 8px;
-            border-top: 1px dotted #ccc;
-          }
-
-          .taxNote {
-            font-size: 12px;
-            padding: 4px;
-            background: #eeeeeb;
-            text-align: center;
-          }
-
-          .infoBox {
-            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;
-          }
-
-          .paymentCode {
-            text-align: center;
-            border-left: 2px solid #666;
-          }
-        </style>
-        <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
         <div class="grid topLine dataHeader">
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
+          <div class="lineItem rightAlign">
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
+            ${this.translateKey("invoice@@item.position")}
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
+          </div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
+          <div class="lineItem">
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
+            ${this.translateKey("invoice@@description")}
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@quantity")}
+          </div>
+          <div class="lineItem">${this.translateKey("invoice@@unit.type")}</div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@price.unit.net")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@vat.short")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@price.total.net")}
+          </div>
         </div>
-        ${(() => {
+        ${this.letterData?.items?.map(
-          let counter = 1;
+          (invoiceItem, index) => html`
-          return this.letterData?.content.invoiceData?.items?.map(
+            <div class="grid needsDataHeader">
-            (invoiceItem) => html`
+              <div class="lineItem rightAlign">${index + 1}</div>
-              <div class="grid invoiceLine needsDataHeader">
+              <div class="lineItem">${invoiceItem.name}</div>
-                <div class="lineItem">${counter++}</div>
+              <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
-                <div class="lineItem">${invoiceItem.name}</div>
+              <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem">${invoiceItem.unitQuantity}</div>
+              <div class="lineItem rightAlign">
-                <div class="lineItem">${invoiceItem.unitType}</div>
+                ${this.formatPrice(invoiceItem.unitNetPrice)}
-                <div class="lineItem">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
-                <div class="lineItem">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
-                </div>
               </div>
-            `
+              <div class="lineItem rightAlign">
-          );
+                ${invoiceItem.vatPercentage}%
-        })()}
+              </div>
+              <div class="lineItem rightAlign">
+                ${this.formatPrice(
+                  invoiceItem.unitQuantity * invoiceItem.unitNetPrice
+                )}
+              </div>
+            </div>
+          `
+        )}
         <div class="sums">
           <div class="sumline">
-            <div class="label">Total net</div>
+            <div class="label">
-            <div class="value">${this.getTotalNet()} EUR</div>
+              ${this.translateKey("invoice@@sum.total.net")}
+            </div>
+            <div class="value value--total rightAlign">
+              ${this.formatPrice(this.getTotalNet())}
+            </div>
           </div>
           ${this.getVatGroups().map((vatGroupArg) => {
-            let itemNumbers = '';
+            let itemNumbers = vatGroupArg.items
-            for (const item of vatGroupArg.items) {
+              .map((item) => this.letterData.items.indexOf(item) + 1)
-              const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
+              .join(", ");
-              itemNumbers += ` ${itemIndex + 1},`;
-            }
             return html`
               <div class="sumline">
                 <div class="label">
-                  Vat ${vatGroupArg.vatPercentage}%<br />
+                  ${this.translateKey("vat.short")}
-                  <span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
+                  ${vatGroupArg.vatPercentage}%
+                  ${this.documentSettings.vatGroupPositions
+                    ? html`
+                        <br /><span style="font-weight: normal"
+                          >(${this.translateKey("invoice@@vat.position")}:
+                          ${itemNumbers})</span
+                        >
+                      `
+                    : html``}
+                </div>
+                <div class="value rightAlign">
+                  ${this.formatPrice(vatGroupArg.vatAmountSum)}
                 </div>
-                <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>
             `;
           })}
           <div class="sumline">
-            <div class="label">Total gross</div>
+            <div class="label">${this.translateKey("invoice@@totalGross")}</div>
-            <div class="value">${this.getTotalGross()} EUR</div>
+            <div class="value value--total rightAlign">
+              ${this.formatPrice(this.getTotalGross())}
+            </div>
           </div>
         </div>
         <div class="divider"></div>
-        ${this.letterData?.content.invoiceData.reverseCharge
+
-          ? html`
+        ${this.letterData?.reverseCharge
-              <div class="taxNote">
+          ? html`<div class="taxNote">
-                ${shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
+              ${this.translateKey("invoice@@vat.reverseCharge.note")}
-              </div>
+            </div>`
-            `
           : ``}
-        <div class="infoBox">
+
-          <div class="label">Payment Terms:</div>
+        <!-- REFERENCED CONTRACT -->
-          Payment is due within 30 days starting from the reception of this invoice. Please use the
+        ${this.renderReferencedContract()}
-          following SEPA details:
+
-          <br /><br />
+        <!-- PAYMENT TERMS -->
-          Beneficiary: ${this.letterData?.from.name}<br />
+        ${this.renderPaymentTerms()}
-          IBAN: ${this.letterData?.from?.sepaConnection?.iban}<br />
+
-          BIC: ${this.letterData?.from?.sepaConnection?.bic}<br />
+        <!-- PAYMENT INFO -->
-          Description: ${this.letterData?.content.invoiceData?.id}<br />
+        ${this.renderPaymentInfo()}
-          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);
-        console.log('success!');
-      }
-    );
-    contentNodes.currentContent.querySelector('.paymentCode').append(canvas);
   }
 }

ts_web/elements/document.demo.ts

@@ -1,6 +1,10 @@
-import * as shared from '../../ts/shared/index.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 .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
+  <dedocument-dedocument
-`;
+    .format="${"a4"}"
+    .letterData=${plugins.shared.demoLetter}
+  ></dedocument-dedocument>
+`;

ts_web/elements/document.ts

@@ -5,35 +5,36 @@ 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 interfaces from '../../ts/interfaces/index.js';
+export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
-import * as plugins from '../plugins.js';
+  {
+    enableTopDraftText: true,
+    enableDefaultHeader: true,
+    enableDefaultFooter: true,
+    enableFoldMarks: true,
+    enableInvoiceContractRefSection: true,
+    languageCode: "EN",
+    vatGroupPositions: true,
+    dateStyle: "short",
+  };
 
-export const defaultDocumentSettings: interfaces.IDocumentSettings = {
+import { DePage } from "./page.js";
-  enableTopDraftText: true,
+import { DeContentInvoice } from "./contentinvoice.js";
-  enableDefaultHeader: true,
-  enableDefaultFooter: true,
-};
 
-
+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 * as shared from '../../ts/shared/index.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;
 
@@ -41,7 +42,7 @@ export class DeDocument extends DeesElement {
     type: String,
     reflect: true,
   })
-  public format: 'a4' = 'a4';
+  public format: "a4" = "a4";
 
   @property({
     type: Number,
@@ -65,27 +66,28 @@ 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.ILetter;
+  public letterData: plugins.tsclass.business.TLetter;
 
   @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: interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings =
+    defaultDocumentSettings;
 
   constructor() {
     super();
@@ -94,12 +96,10 @@ export class DeDocument extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         display: block;
-        color: #333;
-        padding: 0px;
-        position: relative;
       }
 
       .betweenPagesSpacer {
@@ -109,12 +109,18 @@ export class DeDocument extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html`
+    return html` <div class="documentContainer"></div> `;
-      <div class="documentContainer"></div>
-    `;
   }
 
-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ) {
+    domtools.plugins.smartdelay.delayFor(0).then(async () => {
+      this.documentSettings = {
+        ...defaultDocumentSettings,
+        ...this.documentSettings,
+      };
+    });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const width = entry.contentRect.width;
@@ -126,17 +132,24 @@ export class DeDocument extends DeesElement {
     resizeObserver.observe(this);
     this.registerGarbageFunction(() => {
       resizeObserver.disconnect();
-    })
+    });
   }
 
-  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
+  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
-
+    null;
+  public latestRenderedLetterData: plugins.tsclass.business.TLetter = null;
+  public cleanupStore: any[] = [];
 
   public async renderDocument() {
-    const domtools = await this.domtoolsPromise;
+    this.latestDocumentSettings = this.documentSettings;
-    
+    this.latestRenderedLetterData = this.letterData;
 
-    const documentBuildContainer = document.createElement('div');
+    const cleanUpStoreCurrentRender = [];
+    const cleanUpStoreNextRender = [];
+
+    const domtools = await this.domtoolsPromise;
+    const documentBuildContainer = document.createElement("div");
+    cleanUpStoreCurrentRender.push(documentBuildContainer);
     document.body.appendChild(documentBuildContainer);
 
     let pages: DePage[] = [];
@@ -145,7 +158,8 @@ export class DeDocument extends DeesElement {
 
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
-    content.letterData = this.letterData;
+    cleanUpStoreCurrentRender.push(content);
+    content.letterData = this.letterData as unknown as TInvoice;
     content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
 
@@ -156,6 +170,7 @@ export class DeDocument extends DeesElement {
     while (!complete) {
       pageCounter++;
       const currentContent = content.cloneNode(true) as DeContentInvoice;
+      cleanUpStoreNextRender.push(currentContent);
       const newPage = new DePage();
       newPage.printMode = this.printMode;
       newPage.letterData = this.letterData;
@@ -164,8 +179,11 @@ export class DeDocument extends DeesElement {
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);
       newPage.pageTotalNumber = pageCounter;
+
+      // store current page
+      cleanUpStoreNextRender.push(newPage);
       documentBuildContainer.append(newPage);
-      
+
       await currentContent.elementDomReady;
       await currentContent.trimStartToOffset(overallContentOffset);
       let newPageOverflows = await newPage.checkOverflow();
@@ -180,40 +198,61 @@ export class DeDocument extends DeesElement {
       if (trimmed === 0) {
         complete = true;
       }
-      // complete = true;
-      console.log(currentContentOffset);
     }
-    document.body.removeChild(content);
-    document.body.removeChild(documentBuildContainer);
 
-    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    for (const cleanUp of this.cleanupStore) {
+      cleanUp.remove();
+    }
+    this.cleanupStore = cleanUpStoreNextRender;
+
+    cleanUpStoreCurrentRender.forEach((cleanUp) => {
+      cleanUp.remove();
+    });
+
+    const documentContainer =
+      this.shadowRoot.querySelector(".documentContainer");
     if (documentContainer) {
       const children = Array.from(documentContainer.children);
-      children.forEach((child) => documentContainer.removeChild(child));
+      children.forEach((child) => {
+        documentContainer.removeChild(child);
+        child.remove();
+      });
     }
     for (const page of pages) {
       page.pageTotalNumber = pageCounter;
       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();
-    this.latestRenderedLetterData = this.letterData;
   }
 
-  async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+  async updated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
     super.updated(changedProperties);
     const domtools = await this.domtoolsPromise;
-    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
+    let renderedDocIsUpToDate =
+      domtools.convenience.smartjson.deepEqualObjects(
+        this.letterData,
+        this.latestRenderedLetterData
+      ) &&
+      domtools.convenience.smartjson.deepEqualObjects(
+        this.documentSettings,
+        this.latestDocumentSettings
+      );
     if (!renderedDocIsUpToDate) {
       this.renderDocument();
     }
 
-    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+    if (
+      changedProperties.has("viewHeight") ||
+      changedProperties.has("viewWidth")
+    ) {
       this.adjustDePageScaling();
     }
   }
@@ -224,7 +263,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) => {
@@ -233,7 +272,6 @@ export class DeDocument extends DeesElement {
       }
       if (this.viewWidth) {
         page.viewWidth = this.viewWidth;
-        console.log('setting viewWidth: ', this.viewWidth);
       }
     });
   }

ts_web/elements/index.ts

@@ -1,11 +1,10 @@
-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";
-export * from '../../ts/shared/index.js';

ts_web/elements/letterheader.ts

@@ -5,31 +5,33 @@ import {
   customElement,
   type TemplateResult,
   css,
-  cssManager,
   unsafeCSS,
-} from '@design.estate/dees-element';
+  domtools,
-import * as domtools from '@design.estate/dees-domtools';
+} from "@design.estate/dees-element";
 
-import * as shared from '../../ts/shared/index.js';
+import * as plugins from "../plugins.js";
-import * as tsclass from '@tsclass/tsclass';
+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 .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-letterheader>
+    <dedocument-letterheader
+      .format="${"a4"}"
+      .letterData=${plugins.shared.demoLetter}
+    ></dedocument-letterheader>
   `;
 
   @property({
     type: Object,
-    reflect: true
+    reflect: true,
   })
-  public letterData: tsclass.business.ILetter;
+  public letterData: plugins.tsclass.finance.TInvoice;
 
   @property({
     type: Number,
@@ -43,6 +45,12 @@ 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();
@@ -50,20 +58,31 @@ export class DeLetterHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
-      :host {
+      .address {
-        color: #333;
+        position: absolute;
+        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: 200px;
+        top: calc(var(--DPI-FACTOR) * 5.5);
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
         width: 200px;
         text-align: right;
       }
+
       .recepientInfo .label {
         margin-top: 10px;
         margin-bottom: 3px;
@@ -71,19 +90,6 @@ export class DeLetterHeader extends DeesElement {
         font-weight: bold;
       }
 
-      .date {
-        position: absolute;
-        top: 180px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
-        text-align: right;
-      }
-
-      .address {
-        position: absolute;
-        top: 180px;
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
-      }
-
       .address .from {
         font-size: 10px;
       }
@@ -94,31 +100,93 @@ 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 Date(this.letterData.date).getDate()}. ${new Date(this.letterData.date).toLocaleString('default', { month: 'long' })}
+        ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
-        ${new Date(this.letterData.date).getFullYear()}
+          dateStyle: "long",
+        }).format(new Date(this.letterData.date))}
       </div>
       <div class="address">
         <div class="from">
-          ${this.letterData.from.name}, ${this.letterData.from.address.streetName}
+          ${this.letterData.from.name},
-          ${this.letterData.from.address.houseNumber}, ${this.letterData.from.address.postalCode}
+          ${this.letterData.from.address.streetName}
-          ${this.letterData.from.address.city}, ${this.letterData.from.address.country}
+          ${this.letterData.from.address.houseNumber},
+          ${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.houseNumber}<br />
+          ${this.letterData.to.address.streetName}
-          ${this.letterData.to.address.postalCode} ${this.letterData.to.address.city}<br />
+          ${this.letterData.to.address.houseNumber}<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">your customer id:</div>
+        <div class="label">
-        ${this.letterData.to.customerNumber || 'not registered'}
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@customer.number"
+          )}
+        </div>
+        ${this.letterData.to.customerNumber || "not registered"}
 
-        <div class="label">your vat id on file:</div>
+        <div class="label">
-        ${this.letterData.to.vatId || 'not provided'}
+          ${plugins.shared.translation.translate(
+            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,26 +6,24 @@ import {
   customElement,
   type TemplateResult,
   css,
-  cssManager,
-  unsafeCSS,
   domtools,
-} from '@design.estate/dees-element';
+} from "@design.estate/dees-element";
 
-import * as interfaces from '../../ts/interfaces/index.js';
+import * as plugins from "../plugins.js";
 
-import { defaultDocumentSettings } from './document.js';
+import { defaultDocumentSettings } from "./document.js";
-
+import { dedocumentSharedStyle } from "../style.js";
-import * as shared from '../../ts/shared/index.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 = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
+  public static demo = () =>
+    html` <dedocument-page .format="${"a4"}"></dedocument-page> `;
 
   @property({
     type: Number,
@@ -40,7 +38,7 @@ export class DePage extends DeesElement {
   @property({
     type: String,
   })
-  public format: 'a4' = 'a4';
+  public format: "a4" = "a4";
 
   @property({
     type: Number,
@@ -55,7 +53,7 @@ export class DePage extends DeesElement {
   @property({
     type: Object,
   })
-  public letterData: tsclass.business.ILetter = null;
+  public letterData: tsclass.business.TLetter = null;
 
   @property({
     type: Boolean,
@@ -67,7 +65,8 @@ export class DePage extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings =
+    defaultDocumentSettings;
 
   constructor() {
     super();
@@ -76,9 +75,11 @@ export class DePage extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         display: block;
+        overflow: hidden;
       }
 
       #scaleWrapper {
@@ -101,26 +102,75 @@ 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
@@ -132,7 +182,18 @@ 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
@@ -142,7 +203,9 @@ export class DePage extends DeesElement {
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-letterheader>
                     `
-                  : html``}
+                  : null}
+
+                <!-- PAGE CONTENT -->
                 <dedocument-pagecontent
                   .letterData=${this.letterData}
                   .documentSettings=${this.documentSettings}
@@ -150,7 +213,9 @@ 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}
@@ -159,22 +224,19 @@ 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`
-                        ${this.documentSettings.enableTopDraftText
+                        <div class="bigDraftText">
-                          ? html`
+                          ${plugins.shared.translation.translate(
-                              <div class="topInfo">
+                            this.documentSettings.languageCode,
-                                Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
+                            "overlay@@draft"
-                                THIS.<br />
+                          )}
-                                -> Revision/Document version: ${this.letterData.versionInfo.version}
+                        </div>
-                              </div>
-                            `
-                          : ``}
-                        <div class="bigDraftText">DRAFT</div>
                       `
-                    : html``}
+                    : null}
                 </div>
               `
             : html` <slot></slot> `}
@@ -185,35 +247,37 @@ 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 (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+    if (
+      changedProperties.has("viewHeight") ||
+      changedProperties.has("viewWidth")
+    ) {
       this.adjustScaling();
     }
   }
 
   private adjustScaling() {
-    console.log('page scale adjustment triggered.');
+    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 / shared.a4Height;
+      scale = this.viewHeight / plugins.shared.A4_HEIGHT;
     } else if (this.viewWidth) {
-      scale = this.viewWidth / shared.a4Width;
+      scale = this.viewWidth / plugins.shared.A4_WIDTH;
     }
-    console.log(`new scale is ${scale}`);
     scaleWrapper.style.transform = `scale(${scale})`;
 
     // Adjust the outer dimensions so they match the scaled content
 
-    // this.style.width = `${shared.a4Width * scale}px`;
+    this.style.width = `${plugins.shared.A4_WIDTH * scale}px`;
-    this.style.height = `${shared.a4Height * scale}px`;
+    this.style.height = `${plugins.shared.A4_HEIGHT * 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 shared from '../../ts/shared/index.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,11 +44,9 @@ export class DePageContainer extends DeesElement {
     css`
       :host {
         display: block;
-        background: white;
-        color: #333;
         padding: 0px;
-        width: ${unsafeCSS(shared.a4Width + 'px')};
+        width: ${unsafeCSS(plugins.shared.A4_WIDTH + "px")};
-        height: ${unsafeCSS(shared.a4Height + 'px')};
+        height: ${unsafeCSS(plugins.shared.A4_HEIGHT + "px")};
         position: relative;
         border-radius: 3px;
         overflow: hidden;
@@ -60,7 +58,9 @@ export class DePageContainer extends DeesElement {
     return html`
       <style>
         :host {
-          box-shadow: ${this.printMode ? `none` : `0px 0px 10px rgba(0,0,0,0.3)`};
+          box-shadow: ${this.printMode
+            ? `none`
+            : `0px 0px 10px rgba(0,0,0,0.3)`};
         }
       </style>
       <slot></slot>

ts_web/elements/pagecontent.ts

@@ -7,28 +7,28 @@ import {
   css,
   cssManager,
   unsafeCSS,
-} from '@design.estate/dees-element';
+  domtools,
-import * as domtools from '@design.estate/dees-domtools';
+} from "@design.estate/dees-element";
 
-import * as shared from '../../ts/shared/index.js';
+import * as plugins from "../plugins.js";
-import * as tsclass from '@tsclass/tsclass';
+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: tsclass.business.ILetter;
+  public letterData: plugins.tsclass.business.TLetter;
 
   @property({
     type: Number,
@@ -40,6 +40,12 @@ 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();
@@ -47,20 +53,25 @@ export class DePageContent extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
-      :host {
-        color: #333;
-      }
-
       .content {
         position: absolute;
 
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
+        left: var(--LEFT-MARGIN);
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
-        bottom: 170px;
+        bottom: calc(var(--DPI-FACTOR) * 4);
         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;
@@ -82,65 +93,34 @@ 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`
-      <style>
+      <div class="content ${firstPage ? "page--first" : "page--notFirst"}">
-        .content {
+        ${firstPage
-          top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
-        }
-      </style>
-      <div class="content">
-        ${this.pageNumber === 1
           ? html`<div class="subject">${this.letterData.subject}</div>`
-          : html`
+          : null}
-              <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(_changedProperties: Map<string | number | symbol, unknown>): void {
+  public firstUpdated(
+    _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) {
-      console.log('overflows');
       return true;
     } else {
-      console.log('does not overflow!');
       return false;
     }
   }

ts_web/elements/pagefooter.ts

@@ -5,46 +5,43 @@ import {
   customElement,
   type TemplateResult,
   css,
-  cssManager,
   unsafeCSS,
   domtools,
-} from '@design.estate/dees-element';
+} from "@design.estate/dees-element";
 
-import * as interfaces from '../../ts/interfaces/index.js';
+import * as plugins from "../plugins.js";
-
+import { dedocumentSharedStyle } from "../style.js";
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
 
 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: tsclass.business.ILetter;
+  letterData: plugins.tsclass.business.TLetter;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: interfaces.IDocumentSettings;
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
-    type: Number
+    type: Number,
   })
   public pageNumber: number = 1;
 
   @property({
-    type: Number
+    type: Number,
   })
   public pageTotalNumber: number = 1;
 
@@ -55,6 +52,7 @@ export class DePageFooter extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -68,32 +66,36 @@ export class DePageFooter extends DeesElement {
         left: 0px;
         right: 0px;
         height: 130px;
-        content: '';
+        content: "";
-        padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
+        padding: 30px var(--RIGHT-MARGIN) 10px var(--LEFT-MARGIN);
-        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
+        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(
+            100% / 4
+          );
         grid-gap: 5px;
-        border-top: 2px solid #e4002b;
+        border-top: 2px solid var(--footer-separator-bg-color, #e4002b);
       }
 
       .bottomstripe .pageNumber {
         position: absolute;
         top: 0px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
-        background: #e4002b;
+        color: var(--footer-separator-fg-color, #ffffff);
+        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: -18px;
+        top: -19px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
-        background: #dddddd;
+        color: var(--label-fg);
+        background: var(--label-bg);
         padding: 3px;
         font-size: 9px;
-        color: #333;
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;
       }
@@ -104,36 +106,113 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
+          <strong
+            >${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.houseNumber}<br />
+          ${this.letterData.from.address.streetName}
-          ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
+          ${this.letterData.from.address.houseNumber}<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>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
+          <strong
-          Amtsgericht Bremen<br />
+            >${plugins.shared.translation.translate(
-          <i>reg-#:</i> HRB 35230 HB<br />
+              this.documentSettings.languageCode,
-          <i>vat-id:</i> ${this.letterData.from.vatId}
+              "contact@@title"
+            )}:</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>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
+          <strong
-          <i>email:</i> ${this.letterData.from.email}<br />
+            >${plugins.shared.translation.translate(
-          <i>phone:</i> ${this.letterData.from.phone}<br />
+              this.documentSettings.languageCode,
-          <i>fax:</i> ${this.letterData.from.fax}
+              "bankConnection@@title"
+            )}:</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>
+        <div class="documentTitle">
-          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
+          <b>${this.letterData?.subject}</b>
-          <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
+        </div>
-          <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
+        <div class="pageNumber">
-          <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />
+          ${plugins.shared.translation.translate(
-          <i>bic:</i> ${this.letterData?.from?.sepaConnection?.bic}<br />
+            this.documentSettings.languageCode,
+            "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,36 +7,34 @@ import {
   css,
   cssManager,
   unsafeCSS,
-  domtools
+  domtools,
-} from '@design.estate/dees-element';
+} from "@design.estate/dees-element";
 
-import * as interfaces from '../../ts/interfaces/index.js';
+import * as plugins from "../plugins.js";
-
+import { dedocumentSharedStyle } from "../style.js";
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
 
 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: tsclass.business.ILetter = null;
+  public letterData: plugins.tsclass.business.TLetter = null;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: interfaces.IDocumentSettings;
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number,
@@ -55,6 +53,7 @@ export class DePageHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -76,7 +75,7 @@ export class DePageHeader extends DeesElement {
         overflow: hidden;
         top: 130px;
         left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
         height: 20px;
         line-height: 20px;
         color: #333;
@@ -87,8 +86,8 @@ export class DePageHeader extends DeesElement {
         bottom: 10px;
         height: 25px;
         left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
-        font-family: 'Courier New', Courier, monospace;
+        font-family: "Courier New", Courier, monospace;
       }
       .topstripe .logo img {
         position: relative;
@@ -101,10 +100,16 @@ export class DePageHeader extends DeesElement {
     return html`
       <div class="topstripe">
         <div class="logo">
-          No logo set!
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "empty.logo"
+          )}
         </div>
       </div>
-      <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
+      <div class="topstripe2">
+        ${this.letterData?.from?.description ||
+        "[no letterData.from.description set]"}
+      </div>
     `;
   }
 }

ts_web/elements/paymentcode.ts

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

ts_web/elements/viewer.ts

@@ -1,24 +1,38 @@
-import * as plugins from '../plugins.js';
+import * as plugins from "../plugins.js";
-import * as interfaces from '../../ts/interfaces/index.js';
 
-import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
+import {
-import { demoFunc } from './viewer.demo.js';
+  DeesElement,
+  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;
 
   // INSTANCE
-  public letterData: plugins.tsclass.business.ILetter = null;
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public letterData: plugins.tsclass.business.TLetter = null;
 
-  public documentSettings: interfaces.IDocumentSettings;
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   public static styles = [
     cssManager.defaultStyles,
@@ -27,7 +41,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;
@@ -36,7 +50,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 {
@@ -70,7 +84,12 @@ export class DeDocumentViewer extends DeesElement {
       <div class="maincontainer">
         <div class="viewport">
           ${this.letterData
-            ? html` <dedocument-dedocument .letterData=${this.letterData} .documentSettings=${this.documentSettings}></dedocument-dedocument> `
+            ? html`
+                <dedocument-dedocument
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
+                ></dedocument-dedocument>
+              `
             : html``}
         </div>
         <div class="controls"></div>
@@ -78,9 +97,11 @@ export class DeDocumentViewer extends DeesElement {
     `;
   };
 
-  public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
+  public updated = (
+    changedProperties: Map<string | number | symbol, unknown>
+  ) => {
     super.updated(changedProperties);
-    if (changedProperties.has('letterData')) {
+    if (changedProperties.has("letterData")) {
     }
   };
 }

ts_web/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './page1.js';
+export * from './page2.js';

ts_web/pages/page1.ts

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

ts_web/pages/page2.ts

@@ -0,0 +1,18 @@
+import { html } from "@design.estate/dees-element";
+
+export const page2 = () => html`
+  <style>
+    .demoPort {
+      margin: auto;
+      width: 400px;
+    }
+    dedocument-page {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  </style>
+  <div class="demoPort">
+    <dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
+    <dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
+  </div>
+`;

ts_web/plugins.ts

@@ -1,3 +1,8 @@
+// dees-document scope
+import * as shared from '../dist_ts_shared/index.js';
+
+export { shared };
+
 // tsclass scope
 import * as tsclass from '@tsclass/tsclass';
 

ts_web/style.ts

@@ -0,0 +1,39 @@
+import { css } from "@design.estate/dees-element";
+import * as plugins from "./plugins.js";
+
+export const dedocumentSharedStyle = css`
+  :host {
+    /* Primitive colors */
+    --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);
+  }
+`;

ts_web/tspublish.json

@@ -0,0 +1,3 @@
+{
+  "order": 3
+}

tsconfig.json

@@ -6,9 +6,15 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "baseUrl": ".",
+    "paths": {
+      "undefined": [
+        "./ts_web/index.js"
+      ]
+    }
   },
   "exclude": [
     "dist_*/**/*.d.ts"
   ]
-}
+}