1.2.0

feat(core): Enhance document generation capabilities with improved modular structure and extended translation support.
1.1.0
2024-12-01 23:04:28 +01:00 · 2024-12-01 23:04:28 +01:00 · 2024-11-30 20:54:15 +01:00 · 2024-11-30 20:54:15 +01:00 · 2024-11-27 19:27:31 +01:00 · 2024-11-27 19:27:30 +01:00
27 changed files with 641 additions and 378 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,34 @@
 # Changelog

+## 2024-12-01 - 1.2.0 - feat(core)
+Enhance document generation capabilities with improved modular structure and extended translation support.
+
+- Enhanced document generation framework with a more modular structure.
+- Integrated support for translations using JSON-based language maps.
+- Optimized PDF generation process for dynamic document content.
+- Added properties in 'IDocumentSettings' for language code management.
+- Updated README documentation with more comprehensive examples and guidance.
+
+## 2024-11-30 - 1.1.0 - feat(core)
+Enhanced document generation features and added translation capabilities
+
+- Updated document rendering with advanced modular architecture.
+- Introduced translation mechanism for document content.
+- Improved PDF generation with dynamic settings support.
+- Enhanced test cases for PDF generation with complex document structures.
+
+## 2024-11-27 - 1.0.103 - fix(DeDocument)
+Fix rendering of documents by properly moving new pages back to the document container
+
+- Resolved an issue in the DeDocument component where new pages were wrongly managed, causing errors in the rendering of documents.
+- Added a documentBuildContainer for temporary storage during page setup, ensuring correct page ordering.
+
+## 2024-11-27 - 1.0.102 - fix(contentinvoice)
+Fixed currency display issues in invoice content rendering.
+
+- Corrected the usage of currency property to consistently pull from letterData content for invoice items.
+- Ensured currency is correctly displayed in the invoice PDF generation.
+
 ## 2024-11-27 - 1.0.101 - fix(shared)
 Fixed the demo letter item details by replacing `currency` with `position` to correctly define the item position.

--- a/npmextra.json
+++ b/npmextra.json
@ -5,28 +5,26 @@
      "githost": "code.foss.global",
      "gitscope": "designestate/private",
      "gitrepo": "dedocument-catalog",
-      "description": "A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.",
+      "description": "A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.",
      "npmPackagename": "@designestate_private/dedocument-catalog",
      "license": "MIT",
      "projectDomain": "design.estate",
      "shortDescription": "undefined variable",
      "keywords": [
        "document generation",
-        "invoices",
-        "PDF creation",
-        "typescript",
-        "web components",
-        "custom elements",
-        "QR code",
-        "smart contracts",
-        "templating",
+        "invoice automation",
+        "business documentation",
        "dynamic rendering",
+        "PDF creation",
+        "web components",
+        "Node.js",
+        "TypeScript",
+        "templating",
+        "modern web technologies",
        "responsive design",
-        "modular development",
-        "lightweight",
-        "efficient",
-        "finance",
-        "business"
+        "QR code",
+        "modular architecture",
+        "automated workflows"
      ]
    }
  },
--- a/package.json
+++ b/package.json
@ -1,8 +1,8 @@
 {
  "name": "@design.estate/dees-document",
-  "version": "1.0.101",
+  "version": "1.2.0",
  "private": false,
-  "description": "A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.",
+  "description": "A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
  "exports": {
@ -25,9 +25,10 @@
    "@push.rocks/smartfile": "^11.0.21",
    "@push.rocks/smartjson": "^5.0.20",
    "@push.rocks/smartpath": "^5.0.18",
-    "@push.rocks/smartpdf": "^3.1.7",
+    "@push.rocks/smartpdf": "^3.1.8",
    "@push.rocks/smarttime": "^4.0.8",
    "@tsclass/tsclass": "^4.1.2",
+    "@types/node": "^22.10.1",
    "@types/qrcode": "^1.5.5",
    "qrcode": "^1.5.4"
  },
@ -65,20 +66,18 @@
  "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
  "keywords": [
    "document generation",
-    "invoices",
-    "PDF creation",
-    "typescript",
-    "web components",
-    "custom elements",
-    "QR code",
-    "smart contracts",
-    "templating",
+    "invoice automation",
+    "business documentation",
    "dynamic rendering",
+    "PDF creation",
+    "web components",
+    "Node.js",
+    "TypeScript",
+    "templating",
+    "modern web technologies",
    "responsive design",
-    "modular development",
-    "lightweight",
-    "efficient",
-    "finance",
-    "business"
+    "QR code",
+    "modular architecture",
+    "automated workflows"
  ]
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -30,14 +30,17 @@ importers:
        specifier: ^5.0.18
        version: 5.0.18
      '@push.rocks/smartpdf':
-        specifier: ^3.1.7
-        version: 3.1.7
+        specifier: ^3.1.8
+        version: 3.1.8
      '@push.rocks/smarttime':
        specifier: ^4.0.8
        version: 4.0.8
      '@tsclass/tsclass':
        specifier: ^4.1.2
        version: 4.1.2
+      '@types/node':
+        specifier: ^22.10.1
+        version: 22.10.1
      '@types/qrcode':
        specifier: ^1.5.5
        version: 1.5.5
@ -268,8 +271,8 @@ packages:
    resolution: {integrity: sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==}
    engines: {node: '>=6.9.0'}

-  '@cloudflare/workers-types@4.20241112.0':
-    resolution: {integrity: sha512-Q4p9bAWZrX14bSCKY9to19xl0KMU7nsO5sJ2cTVspHoypsjPUMeQCsjHjmsO2C4Myo8/LPeDvmqFmkyNAPPYZw==}
+  '@cloudflare/workers-types@4.20241127.0':
+    resolution: {integrity: sha512-UqlvtqV8eI0CdPR7nxlbVlE52+lcjHvGdbYXEPwisy23+39RsFV7OOy0da0moJAhqnL2OhDmWTOaKdsVcPHiJQ==}

  '@colors/colors@1.6.0':
    resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
@ -611,8 +614,8 @@ packages:
  '@hapi/bourne@3.0.0':
    resolution: {integrity: sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==}

-  '@happy-dom/global-registrator@15.11.6':
-    resolution: {integrity: sha512-TGE7tUM3+0h47wfj2zS+madL53jVq3f2/YvJqrA/clwv3wz5Mm2jHhTpbLZSSydNvDwBc9l5uNt5qylWClj6uQ==}
+  '@happy-dom/global-registrator@15.11.7':
+    resolution: {integrity: sha512-mfOoUlIw8VBiJYPrl5RZfMzkXC/z7gbSpi2ecycrj/gRWLq2CMV+Q+0G+JPjeOmuNFgg0skEIzkVFzVYFP6URw==}
    engines: {node: '>=18.0.0'}

  '@isaacs/cliui@8.0.2':
@ -835,8 +838,8 @@ packages:
  '@push.rocks/smartpath@5.0.18':
    resolution: {integrity: sha512-kIyRTlOoeEth5b4Qp8KPUxNOGNdvhb2aD0hbHfF3oGTQ0xnDdgB1l03/4bIoapHG48OrTgh4uQ5tUorykgdOzw==}

-  '@push.rocks/smartpdf@3.1.7':
-    resolution: {integrity: sha512-Qtyz4CnrxEcNSe09r4wpOdTwfu1pihBLYiPFkb9iwF3SrOK0rkH4qKXnsnYAVCumOoGdQdr3NhNjwpe9vqjoIw==}
+  '@push.rocks/smartpdf@3.1.8':
+    resolution: {integrity: sha512-9fxshJAp6VCkrAFWXAFS7X7QzZLFSWM/JzDtllYW7gaWzRKxsMCdfaNy1vKsGq5uK5L91Lrd+A9Olp1mx4xs1w==}

  '@push.rocks/smartpromise@4.0.4':
    resolution: {integrity: sha512-Mbh+DnX4+rVPEZgYU7LtTJI/AYoNn7+h27AycEFpPJW41DCfjTiXiI0+ecNdyO1AfbcL0Q02RQjoEauEWx5FQg==}
@ -1409,8 +1412,8 @@ packages:
  '@types/node-forge@1.3.11':
    resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}

-  '@types/node@22.10.0':
-    resolution: {integrity: sha512-XC70cRZVElFHfIUB40FgZOBbgJYFKKMa5nb9lxcwYstFG/Mi+/Y0bGS+rs6Dmhmkpq4pnNiLiuZAbc02YCOnmA==}
+  '@types/node@22.10.1':
+    resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==}

  '@types/parse5@6.0.3':
    resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
@ -2356,8 +2359,9 @@ packages:
    resolution: {integrity: sha512-4kKdWXTtgQ4biIo7hZA396HT062nDVVHPjQcurNZ3o/voYN+o5FUC5kOwuORbpExp3XbTJ3SU7iRipiIhQtovw==}
    engines: {node: '>=14'}

-  gopd@1.0.1:
-    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+  gopd@1.1.0:
+    resolution: {integrity: sha512-FQoVQnqcdk4hVM4JN1eromaun4iuS34oStkdlLENLdpULsuQcTyXj8w7ayhuUfPwEYZ1ZOooOTT6fdA9Vmx/RA==}
+    engines: {node: '>= 0.4'}

  got@12.6.1:
    resolution: {integrity: sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==}
@ -2373,8 +2377,8 @@ packages:
    resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==}
    hasBin: true

-  happy-dom@15.11.6:
-    resolution: {integrity: sha512-elX7iUTu+5+3b2+NGQc0L3eWyq9jKhuJJ4GpOMxxT/c2pg9O3L5H3ty2VECX0XXZgRmmRqXyOK8brA2hDI6LsQ==}
+  happy-dom@15.11.7:
+    resolution: {integrity: sha512-KyrFvnl+J9US63TEzwoiJOQzZBJY7KgBushJA8X61DMbNsH+2ONkDuLDnCnwUiPTF42tLoEmrPyoqbenVA5zrg==}
    engines: {node: '>=18.0.0'}

  has-flag@3.0.0:
@ -3287,8 +3291,8 @@ packages:
  pdf-lib@1.17.1:
    resolution: {integrity: sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==}

-  pdf2json@3.0.5:
-    resolution: {integrity: sha512-Un1yLbSlk/zfwrltgguskExIioXZlFSFwsyXU0cnBorLywbTbcdzmJJEebh+U2cFCtR7y8nDs5lPHAe7ldxjZg==}
+  pdf2json@3.1.4:
+    resolution: {integrity: sha512-rS+VapXpXZr+5lUpHmRh3ugXdFXp24p1RyG24yP1DMpqP4t0mrYNGpLtpSbWD42PnQ59GIXofxF+yWb7M+3THg==}
    engines: {node: '>=18.12.1', npm: '>=8.19.2'}
    hasBin: true
    bundledDependencies:
@ -3442,8 +3446,8 @@ packages:
  regenerator-runtime@0.14.1:
    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}

-  registry-auth-token@5.0.2:
-    resolution: {integrity: sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==}
+  registry-auth-token@5.0.3:
+    resolution: {integrity: sha512-1bpc9IyC+e+CNFRaWyn77tk4xGG4PPUyfakSmA6F6cvUDjrm58dfyJ3II+9yb10EDkHoy1LaPSmHaWLOH3m6HA==}
    engines: {node: '>=14'}

  registry-url@6.0.1:
@ -4121,7 +4125,7 @@ snapshots:
      '@api.global/typedrequest': 3.1.10
      '@api.global/typedrequest-interfaces': 3.0.19
      '@api.global/typedsocket': 3.0.1
-      '@cloudflare/workers-types': 4.20241112.0
+      '@cloudflare/workers-types': 4.20241127.0
      '@design.estate/dees-comms': 1.0.27
      '@push.rocks/lik': 6.1.0
      '@push.rocks/smartchok': 1.0.34
@ -4776,7 +4780,7 @@ snapshots:
    dependencies:
      regenerator-runtime: 0.14.1

-  '@cloudflare/workers-types@4.20241112.0': {}
+  '@cloudflare/workers-types@4.20241127.0': {}

  '@colors/colors@1.6.0': {}

@ -5085,9 +5089,9 @@ snapshots:

  '@hapi/bourne@3.0.0': {}

-  '@happy-dom/global-registrator@15.11.6':
+  '@happy-dom/global-registrator@15.11.7':
    dependencies:
-      happy-dom: 15.11.6
+      happy-dom: 15.11.7

  '@isaacs/cliui@8.0.2':
    dependencies:
@ -5111,7 +5115,7 @@ snapshots:
      '@jest/schemas': 29.6.3
      '@types/istanbul-lib-coverage': 2.0.6
      '@types/istanbul-reports': 3.0.4
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      '@types/yargs': 17.0.33
      chalk: 4.1.2

@ -5300,7 +5304,7 @@ snapshots:
  '@push.rocks/smartbrowser@2.0.6':
    dependencies:
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartpdf': 3.1.7
+      '@push.rocks/smartpdf': 3.1.8
      '@push.rocks/smartpuppeteer': 2.0.2
      '@push.rocks/smartunique': 3.0.9
    transitivePeerDependencies:
@ -5568,7 +5572,7 @@ snapshots:
  '@push.rocks/smartntml@2.0.8':
    dependencies:
      '@design.estate/dees-element': 2.0.39
-      '@happy-dom/global-registrator': 15.11.6
+      '@happy-dom/global-registrator': 15.11.7
      '@push.rocks/smartpromise': 4.0.4
      fake-indexeddb: 6.0.0
    transitivePeerDependencies:
@ -5585,7 +5589,7 @@ snapshots:

  '@push.rocks/smartpath@5.0.18': {}

-  '@push.rocks/smartpdf@3.1.7':
+  '@push.rocks/smartpdf@3.1.8':
    dependencies:
      '@push.rocks/smartbuffer': 3.0.4
      '@push.rocks/smartdelay': 3.0.5
@ -5596,10 +5600,10 @@ snapshots:
      '@push.rocks/smartpuppeteer': 2.0.2
      '@push.rocks/smartunique': 3.0.9
      '@tsclass/tsclass': 4.1.2
-      '@types/express': 4.17.21
+      '@types/express': 5.0.0
      express: 4.21.1
      pdf-lib: 1.17.1
-      pdf2json: 3.0.5
+      pdf2json: 3.1.4
      pdf2pic: 3.1.3
    transitivePeerDependencies:
      - bufferutil
@ -6393,14 +6397,14 @@ snapshots:

  '@types/accepts@1.3.7':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/babel__code-frame@7.0.6': {}

  '@types/body-parser@1.19.5':
    dependencies:
      '@types/connect': 3.4.38
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/buffer-json@2.0.3': {}

@ -6416,17 +6420,17 @@ snapshots:

  '@types/clean-css@4.2.11':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      source-map: 0.6.1

  '@types/co-body@6.1.3':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      '@types/qs': 6.9.17

  '@types/connect@3.4.38':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/content-disposition@0.5.8': {}

@ -6439,11 +6443,11 @@ snapshots:
      '@types/connect': 3.4.38
      '@types/express': 5.0.0
      '@types/keygrip': 1.0.6
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/cors@2.8.17':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/debounce@1.2.4': {}

@ -6457,14 +6461,14 @@ snapshots:

  '@types/express-serve-static-core@4.19.6':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      '@types/qs': 6.9.17
      '@types/range-parser': 1.2.7
      '@types/send': 0.17.4

  '@types/express-serve-static-core@5.0.2':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      '@types/qs': 6.9.17
      '@types/range-parser': 1.2.7
      '@types/send': 0.17.4
@ -6489,30 +6493,30 @@ snapshots:

  '@types/from2@2.3.5':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/fs-extra@11.0.4':
    dependencies:
      '@types/jsonfile': 6.1.4
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/fs-extra@9.0.13':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/glob@7.2.0':
    dependencies:
      '@types/minimatch': 5.1.2
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/glob@8.1.0':
    dependencies:
      '@types/minimatch': 5.1.2
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/gunzip-maybe@1.4.2':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/hast@3.0.4':
    dependencies:
@ -6546,7 +6550,7 @@ snapshots:

  '@types/jsonfile@6.1.4':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/keygrip@1.0.6': {}

@ -6563,7 +6567,7 @@ snapshots:
      '@types/http-errors': 2.0.4
      '@types/keygrip': 1.0.6
      '@types/koa-compose': 3.2.8
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/mdast@4.0.4':
    dependencies:
@ -6581,9 +6585,9 @@ snapshots:

  '@types/node-forge@1.3.11':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

-  '@types/node@22.10.0':
+  '@types/node@22.10.1':
    dependencies:
      undici-types: 6.20.0

@ -6593,7 +6597,7 @@ snapshots:

  '@types/qrcode@1.5.5':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/qs@6.9.17': {}

@ -6605,19 +6609,19 @@ snapshots:

  '@types/s3rver@3.7.4':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/semver@7.5.8': {}

  '@types/send@0.17.4':
    dependencies:
      '@types/mime': 1.3.5
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/serve-static@1.15.7':
    dependencies:
      '@types/http-errors': 2.0.4
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      '@types/send': 0.17.4

  '@types/sinon-chai@3.2.12':
@ -6637,11 +6641,11 @@ snapshots:

  '@types/tar-stream@2.2.3':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/through2@2.0.41':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/triple-beam@1.3.5': {}

@ -6665,7 +6669,7 @@ snapshots:

  '@types/whatwg-url@8.2.2':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      '@types/webidl-conversions': 7.0.3

  '@types/which@2.0.2': {}
@ -6674,11 +6678,11 @@ snapshots:

  '@types/ws@7.4.7':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/ws@8.5.13':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1

  '@types/yargs-parser@21.0.3': {}

@ -6688,7 +6692,7 @@ snapshots:

  '@types/yauzl@2.10.3':
    dependencies:
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
    optional: true

  '@ungap/structured-clone@1.2.0': {}
@ -7171,7 +7175,7 @@ snapshots:
    dependencies:
      es-define-property: 1.0.0
      es-errors: 1.3.0
-      gopd: 1.0.1
+      gopd: 1.1.0

  define-lazy-prop@2.0.0: {}

@ -7264,7 +7268,7 @@ snapshots:
    dependencies:
      '@types/cookie': 0.4.1
      '@types/cors': 2.8.17
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      accepts: 1.3.8
      base64id: 2.0.0
      cookie: 0.4.2
@ -7654,7 +7658,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  gopd@1.0.1:
+  gopd@1.1.0:
    dependencies:
      get-intrinsic: 1.2.4

@ -7685,7 +7689,7 @@ snapshots:
      pumpify: 1.5.1
      through2: 2.0.5

-  happy-dom@15.11.6:
+  happy-dom@15.11.7:
    dependencies:
      entities: 4.5.0
      webidl-conversions: 7.0.0
@ -7955,7 +7959,7 @@ snapshots:
  jest-util@29.7.0:
    dependencies:
      '@jest/types': 29.6.3
-      '@types/node': 22.10.0
+      '@types/node': 22.10.1
      chalk: 4.1.2
      ci-info: 3.9.0
      graceful-fs: 4.2.11
@ -8734,7 +8738,7 @@ snapshots:
  package-json@8.1.1:
    dependencies:
      got: 12.6.1
-      registry-auth-token: 5.0.2
+      registry-auth-token: 5.0.3
      registry-url: 6.0.1
      semver: 7.6.3

@ -8782,7 +8786,7 @@ snapshots:
      pako: 1.0.11
      tslib: 1.14.1

-  pdf2json@3.0.5: {}
+  pdf2json@3.1.4: {}

  pdf2pic@3.1.3:
    dependencies:
@ -8954,7 +8958,7 @@ snapshots:

  regenerator-runtime@0.14.1: {}

-  registry-auth-token@5.0.2:
+  registry-auth-token@5.0.3:
    dependencies:
      '@pnpm/npm-conf': 2.3.1

@ -9115,7 +9119,7 @@ snapshots:
      es-errors: 1.3.0
      function-bind: 1.1.2
      get-intrinsic: 1.2.4
-      gopd: 1.0.1
+      gopd: 1.1.0
      has-property-descriptors: 1.0.2

  setprototypeof@1.1.0: {}
--- a/readme.md
+++ b/readme.md
@ -1,26 +1,32 @@
+```markdown
 # @design.estate/dees-document
-a catalog for creating documents like invoices
+
+A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.

 ## Install
-To install `@design.estate/dees-document`, run the following command in your project directory:
+
+To incorporate `@design.estate/dees-document` into your project, execute the following command in your terminal:
+
 ```shell
 npm install @design.estate/dees-document --save
 ```

-This will add `@design.estate/dees-document` to your project's dependencies and ensure it's installed into your `node_modules` folder.
+This command will install the package and add it to your project's dependencies, thus making all the necessary modules available within your `node_modules` directory.

 ## Usage
-The `@design.estate/dees-document` package is a comprehensive toolkit for creating various types of documents, such as invoices, with ease. It leverages modern ECMAScript (ES) modules and TypeScript for a type-safe, developer-friendly experience. Below, you'll find detailed examples covering how to utilize the package to its full potential.

-### Setting Up the Document Service
-Before diving into creating documents, you first need to set up the document service. This involves importing the necessary modules and initializing the service instance.
+The `@design.estate/dees-document` package serves as a robust framework to facilitate the generation of business documents, such as invoices and contracts. Leveraging modern web technologies, this package integrates seamlessly with TypeScript and ES modules, offering a type-safe environment conducive to efficient, dynamic document creation. Presented here is a comprehensive guide to utilizing this package, ranging from initializing your environment to generating complete PDF documents.
+
+### Getting Started
+
+To embark on a document creation journey, initiate the document service. This service constitutes the core of this package and is typically started at the application's outset.

 ```typescript
 import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';

 async function setupPdfService() {
  const options: IPdfServiceConstructorOptions = {
-    // Configuration options here
+    // configure your options here
  };
  
  const pdfService = await PdfService.createAndStart(options);
@ -29,100 +35,138 @@ async function setupPdfService() {
 }
 ```

-In the example above, we import `PdfService` from the package and use its `createAndStart` method to initialize it with optional configuration settings. Replace `// Configuration options here` with any specific options your project may require.
+The above code initializes the `PdfService`. Tailor the configuration options to suit your specific requirements.

-### Creating a Simple Invoice
-After setting up the document service, you can proceed to create documents such as invoices. Here, we'll demonstrate how to create a basic invoice.
+### Creating Documents

-#### Define the Invoice Data Structure
-First, define the basic structure of your invoice. This involves specifying details like the sender, recipient, items, and more.
+With the PDF service initialized, you can now proceed to generate your documents. In the following section, you will find a detailed walkthrough for creating an invoice. This method can be adapted to other document types with necessary modifications.

-```typescript
-import { ILetter } from '@design.estate/dees-document';
+#### Step-by-Step: Create an Invoice

-const invoiceData: ILetter = {
-  from: {
-    name: "Your Company Name",
-    address: {
-      streetName: "Your Street",
-      houseNumber: "123",
-      city: "Your City",
-      country: "Your Country",
-      postalCode: "12345",
-    },
-    email: "your-email@example.com",
-    phone: "123-456-7890",
-  },
-  to: {
-    name: "Recipient Company Name",
-    address: {
-      streetName: "Recipient Street",
-      houseNumber: "456",
-      city: "Recipient City",
-      country: "Recipient Country",
-      postalCode: "67890",
-    },
-    email: "recipient-email@example.com",
-    phone: "098-765-4321",
-  },
-  content: {
-    invoiceData: {
-      items: [
-        {
-          name: "Service or Product Name",
-          unitQuantity: 2,
-          unitNetPrice: 100.00,
-          unitType: 'service',
-          vatPercentage: 19,
-          currency: 'EUR',
-        }
-      ]
-    }
-  },
-  subject: "Invoice for Services Rendered",
-  date: new Date().getTime(),
-  versionInfo: {
-    type: "final",
-    version: "1.0.0"
-  },
-};
+1. **Define the Data Structure**: Construct the details of the invoice, including the sender, recipient information, and the details of the items being invoiced.
+
+   ```typescript
+   import { ILetter } from '@design.estate/dees-document';
+
+   const invoiceData: ILetter = {
+     from: {
+       name: "Your Company Name",
+       address: {
+         streetName: "Your Street",
+         houseNumber: "123",
+         city: "Your City",
+         country: "Your Country",
+         postalCode: "12345",
+       },
+       email: "your-email@example.com",
+       phone: "123-456-7890",
+     },
+     to: {
+       name: "Recipient Company Name",
+       address: {
+         streetName: "Recipient Street",
+         houseNumber: "456",
+         city: "Recipient City",
+         country: "Recipient Country",
+         postalCode: "67890",
+       },
+       email: "recipient-email@example.com",
+       phone: "098-765-4321",
+     },
+     content: {
+       invoiceData: {
+         items: [
+           {
+             name: "Service or Product Name",
+             unitQuantity: 2,
+             unitNetPrice: 100.00,
+             unitType: 'service',
+             vatPercentage: 19,
+             currency: 'EUR',
+           }
+         ]
+       }
+     },
+     subject: "Invoice for Services Rendered",
+     date: new Date().getTime(),
+     versionInfo: {
+       type: "final",
+       version: "1.0.0"
+     },
+   };
+   ```
+
+   The `ILetter` interface captures all the components of an invoice, including both the sender (`from`) and recipient (`to`) information, alongside the details of the invoiced items.
+
+2. **Generate the PDF**: Convert the invoice details into a PDF file.
+
+   ```typescript
+   async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
+     const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
+     console.log('Invoice PDF generated successfully.');
+
+     // Here you could save the PDF to your filesystem, send it via email, etc.
+   }
+   ```
+
+   The `createPdfFromLetterObject` function returns a `Buffer` that contains the generated PDF, enabling you to save it to a file, send it to clients, or store it for record-keeping.
+
+3. **Integrate It All**: The following script ties together the PDF service and generates the invoice with the described data.
+
+   ```typescript
+   async function main() {
+     const pdfService = await setupPdfService();
+     await generateInvoice(pdfService, invoiceData);
+   }
+
+   main().then(() => console.log('Invoice generation process completed.'));
+   ```
+
+   This example initiates the PDF service and utilizes it to generate a PDF invoice with specified parameters.
+
+### Advanced Document Features
+
+The package is designed to create a broad range of documents, far beyond simple invoices. Utilize the modular architecture to customize documents to your specific business requirements.
+
+#### Advanced Scenarios
+
+1. **Custom Styling**: Alter the visual styles of various elements within your documents, like headers, footers, and more through CSS or inline styles.
+
+   ```typescript
+   import { DeDocumentViewer } from '@design.estate/dees-element';
+
+   const customStyledViewer = new DeDocumentViewer();
+   customStyledViewer.style.setProperty('--main-bg-color', 'lightblue');
+   document.body.appendChild(customStyledViewer);
+   ```
+
+   Adjust styles either with standard CSS or via dynamic TypeScript changes.
+
+2. **Interactive Document Elements**: Integrate interactive UI components, like buttons or input fields, fitting seamlessly into your documents.
+
+3. **Multi-page Document Generation**: Handle content overflow elegantly through automatic page creation, keeping headers and footers intact.
+
+   ```typescript
+   pdfService.adjustDePageScaling();
+   ```
+
+   Adapt between print and digital formats, managing scaling effectively.
+
+4. **Embedding Images and Logos**: Enhance your document's appearance with company logos, graphics, and other auxiliary content.
+
+### Additional Capabilities
+
+Beyond basic functionality, this package offers a range of advanced features:
+
+- **Document Management**: Manage multiple document templates, maintain version control, and append annotations or notes.
+- **Dynamic Rendering**: Utilize templating engines to render dynamic content based on input variables.
+- **Responsive Design for Digital Documents**: Ensure your documents are consistently displayed across various devices.
+
+### Concluding Remarks
+
+The `@design.estate/dees-document` package presents a powerful solution within the modern document generation realm. From basic invoices to intricate templates, this package provides the essential tools for businesses to streamline their document workflows and enhance their presentation quality and accuracy. Explore further depth by consulting the package’s detailed documentation or by reviewing the examples included within the module.
 ```

-In this structure, `invoiceData` outlines essential details for an invoice document, using the `ILetter` interface. It includes information about both the sender (`from`) and the recipient (`to`), as well as the invoiced items under `content.invoiceData.items`.
-
-#### Generate the Invoice PDF
-With the invoice data ready, you can now generate the PDF using the `PdfService` instance.
-
-```typescript
-async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
-  const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
-  console.log('Invoice PDF generated successfully.');
-
-  // Here, you can save the PDF to a file, send it over a network, etc.
-}
-```
-
-The method `createPdfFromLetterObject` receives the invoice data and returns a `Buffer` containing the PDF. You can then save this PDF to the filesystem, send it over email, or perform any other required actions.
-
-#### Complete Example Integration
-Combining everything, your complete script to set up the service, define invoice data, and generate a PDF invoice might look something like this:
-
-```typescript
-async function main() {
-  const pdfService = await setupPdfService();
-  await generateInvoice(pdfService, invoiceData);
-}
-
-main().then(() => console.log('Invoice generation process completed.'));
-```
-
-### Beyond Invoices
-The `@design.estate/dees-document` package is not limited to invoices alone. It's designed to handle a wide range of document types. The modular architecture allows for the customizable construction of documents, enabling you to tailor the output to meet precise requirements.
-
-For instance, you can create contracts, reports, and other document types using a similar approach—by defining the content structure and utilizing the PDF service to generate the document. The package's flexibility and extensibility make it an invaluable tool in any document generation workflow.
-
-### Advanced Usage
-For more advanced scenarios, such as custom styling, embedding images, and handling more complex document structures, refer to the package's documentation. It provides comprehensive details and examples to help you fully leverage the capabilities of `@design.estate/dees-document`.

 ## License and Legal Information

--- a/test/test.ts
+++ b/test/test.ts
@ -1,5 +1,6 @@
 import * as plugins from './plugins.js';
 import * as paths from './paths.js';
+import * as interfaces from '../ts/interfaces/index.js';
 import { expect, tap } from '@push.rocks/tapbundle';
 import * as deesDocumentServer from '../ts/index.js';

@ -16,6 +17,9 @@ const testLetterData: plugins.tsclass.business.ILetter = {
      id: 'XX-CLIENT-48765',
      reverseCharge: true,
      dueInDays: 30,
+      currency: 'EUR',
+      notes: [],
+      type: 'debitnote',
      billedBy: {
        address: null,
        description: null,
@ -102,116 +106,132 @@ tap.test('should create a document from an invoice', async () => {

 tap.test('should create an invoice', async () => {
  let counter = 0;
-  const saveResult = async (letterDataArg: plugins.tsclass.business.ILetter) => {
-    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(letterDataArg);
-    await plugins.smartfile.memory.toFs(Buffer.from(pdfResult.buffer), plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`));
-  }
-  await saveResult(testLetterData);
+  const saveResult = async (optionsArg: {
+    letterData: plugins.tsclass.business.ILetter;
+    documentSettings: interfaces.IDocumentSettings;
+  }) => {
+    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(optionsArg);
+    await plugins.smartfile.memory.toFs(
+      Buffer.from(pdfResult.buffer),
+      plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)
+    );
+  };
  await saveResult({
-    ...testLetterData,
-    versionInfo: {
-      type: 'draft',
-      version: '1.0.0',
-    }
+    letterData: testLetterData,
+    documentSettings: {},
  });
-  testLetterData.content.invoiceData.items = [
-    {
-      name: 'Website Creation',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 0,
-      currency: 'EUR',
-    },
-    {
-      name: 'Hosting',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 19,
-      currency: 'EUR',
-    },
-    {
-      name: 'Overnight Shipping',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 24,
-      currency: 'EUR',
-    },{
-      name: 'Website Creation',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 0,
-      currency: 'EUR',
-    },
-    {
-      name: 'Hosting',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 19,
-      currency: 'EUR',
-    },
-    {
-      name: 'Overnight Shipping',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 24,
-      currency: 'EUR',
-    },{
-      name: 'Website Creation',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 0,
-      currency: 'EUR',
-    },
-    {
-      name: 'Hosting',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 19,
-      currency: 'EUR',
-    },
-    {
-      name: 'Overnight Shipping',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 24,
-      currency: 'EUR',
-    },{
-      name: 'Website Creation',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 0,
-      currency: 'EUR',
-    },
-    {
-      name: 'Hosting',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 19,
-      currency: 'EUR',
-    },
-    {
-      name: 'Overnight Shipping',
-      unitQuantity: 1,
-      unitNetPrice: 1200,
-      unitType: 'item',
-      vatPercentage: 24,
-      currency: 'EUR',
-    },
-  ],
  await saveResult({
-    ...testLetterData,
-  })
+    letterData: {
+      ...testLetterData,
+      versionInfo: {
+        type: 'draft',
+        version: '1.0.0',
+      },
+    },
+    documentSettings: {},
+  });
+  (testLetterData.content.invoiceData.items = [
+    {
+      name: 'Website Creation',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 0,
+      position: 1,
+    },
+    {
+      name: 'Hosting',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 19,
+      position: 2,
+    },
+    {
+      name: 'Overnight Shipping',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 24,
+      position: 3,
+    },
+    {
+      name: 'Website Creation',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 0,
+      position: 4,
+    },
+    {
+      name: 'Hosting',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 19,
+      position: 5,
+    },
+    {
+      name: 'Overnight Shipping',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 24,
+      position: 6,
+    },
+    {
+      name: 'Website Creation',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 0,
+      position: 7,
+    },
+    {
+      name: 'Hosting',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 19,
+      position: 8,
+    },
+    {
+      name: 'Overnight Shipping',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 24,
+      position: 9,
+    },
+    {
+      name: 'Website Creation',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 0,
+      position: 10,
+    },
+    {
+      name: 'Hosting',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 19,
+      position: 11,
+    },
+    {
+      name: 'Overnight Shipping',
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: 'item',
+      vatPercentage: 24,
+      position: 12,
+    },
+  ]),
+    await saveResult({
+      letterData: testLetterData,
+      documentSettings: {},
+    });
 });

 tap.test('should stop the service', async () => {
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-document',
-  version: '1.0.101',
-  description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
+  version: '1.2.0',
+  description: 'A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.'
 }
--- a/ts/classes.pdfservice.ts
+++ b/ts/classes.pdfservice.ts
@ -1,6 +1,7 @@
 import * as plugins from './plugins.js';
 import * as paths from './paths.js';
 import * as helpers from './helpers.js';
+import * as interfaces from '../ts/interfaces/index.js';

 export interface IPdfServiceConstructorOptions {

@ -44,12 +45,15 @@ export class PdfService {
  /**
   * creates an letter
   */
-  public async createPdfFromLetterObject(letterDataArg: plugins.tsclass.business.ILetter) {
+  public async createPdfFromLetterObject(optionsArg: {
+    letterData: plugins.tsclass.business.ILetter,
+    documentSettings: interfaces.IDocumentSettings
+  }) {
    const html = `
      <script type="module">
        ${await helpers.getBundleAsString()}
      </script>
-      <dedocument-dedocument printMode letterData="${plugins.smartjson.stringifyBase64(letterDataArg)}"></dedocument-dedocument>
+      <dedocument-dedocument printMode documentSettings="${plugins.smartjson.stringifyBase64(optionsArg.documentSettings)}" letterData="${plugins.smartjson.stringifyBase64(optionsArg.letterData)}"></dedocument-dedocument>
    `;
    // console.log(html);
    const pdfResult = await this.smartpdfInstance.getA4PdfResultForHtmlString(html);
--- a/ts/interfaces/document.ts
+++ b/ts/interfaces/document.ts
@ -0,0 +1,8 @@
+import * as shared from '../shared/index.js';
+
+export interface IDocumentSettings {
+  enableTopDraftText?: boolean;
+  enableDefaultHeader?: boolean;
+  enableDefaultFooter?: boolean;
+  languageCode?: shared.translation.TLanguageCode;
+}
--- a/ts/interfaces/index.ts
+++ b/ts/interfaces/index.ts
@ -0,0 +1,2 @@
+export * from './document.js';
+export * from './translation.js';
--- a/ts/interfaces/translation.ts
+++ b/ts/interfaces/translation.ts
@ -0,0 +1,4 @@
+export interface IDeDocumentTranslations {
+  "invoice": string;
+  "quantity": string;
+}
--- a/ts_web/elements/shared/demoletter.ts
+++ b/ts_web/elements/shared/demoletter.ts
@ -1,4 +1,6 @@
 import * as tsclass from '@tsclass/tsclass';
+import * as interfaces from '../interfaces/index.js';
+
 const fromContact: tsclass.business.IContact = {
  name: 'Awesome From Company',
  type: 'company',
@ -59,11 +61,13 @@ export const demoLetter: tsclass.business.ILetter = {
      deliveryDate: new Date().getTime(),
      periodOfPerformance: null,
      printResult: null,
-      
+      currency: 'EUR',
+      notes: [],
+      type: 'debitnote',
      items: [
        {
          name: 'Item with 19% VAT',
-          unitQuantity: 1,
+          unitQuantity: 2,
          unitNetPrice: 100,
          unitType: 'hours',
          vatPercentage: 19,
@ -71,7 +75,7 @@ export const demoLetter: tsclass.business.ILetter = {
        },
        {
          name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 4,
          unitNetPrice: 100,
          unitType: 'hours',
          vatPercentage: 7,
@ -79,7 +83,7 @@ export const demoLetter: tsclass.business.ILetter = {
        },
        {
          name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 3,
          unitNetPrice: 230,
          unitType: 'hours',
          vatPercentage: 7,
@ -95,14 +99,14 @@ export const demoLetter: tsclass.business.ILetter = {
        },
        {
          name: 'Item with 0% VAT',
-          unitQuantity: 1,
+          unitQuantity: 6,
          unitNetPrice: 230,
          unitType: 'hours',
          vatPercentage: 0,
          position: 4,
        },{
          name: 'Item with 19% VAT',
-          unitQuantity: 1,
+          unitQuantity: 8,
          unitNetPrice: 100,
          unitType: 'hours',
          vatPercentage: 19,
@ -110,7 +114,7 @@ export const demoLetter: tsclass.business.ILetter = {
        },
        {
          name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 9,
          unitNetPrice: 100,
          unitType: 'hours',
          vatPercentage: 7,
@ -118,7 +122,7 @@ export const demoLetter: tsclass.business.ILetter = {
        },
        {
          name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 4,
          unitNetPrice: 230,
          unitType: 'hours',
          vatPercentage: 7,
@ -126,7 +130,7 @@ export const demoLetter: tsclass.business.ILetter = {
        },
        {
          name: 'Item with 21% VAT',
-          unitQuantity: 1,
+          unitQuantity: 3,
          unitNetPrice: 230,
          unitType: 'hours',
          vatPercentage: 21,
@ -140,6 +144,54 @@ export const demoLetter: tsclass.business.ILetter = {
          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,
+        },
      ],
    }
  },
@ -157,4 +209,11 @@ export const demoLetter: tsclass.business.ILetter = {
  logoUrl: null,
  pdfAttachments: null,
  subject: 'Invoice: LL-INV-48765',
-}
+}
+
+export const demoDocumentSettings: interfaces.IDocumentSettings = {
+  enableTopDraftText: true,
+  enableDefaultHeader: true,
+  enableDefaultFooter: true,
+  languageCode: 'DE',
+};
--- a/ts_web/elements/shared/index.ts
+++ b/ts_web/elements/shared/index.ts
@ -3,4 +3,7 @@ export const a4Width = 794;
 export const rightMargin = 70;
 export const leftMargin = 90;

-export * from './demoletter.js';
+import * as translation from './translation.js';
+export { translation };
+
+export * from './demoletter.js';
--- a/ts/shared/translation.ts
+++ b/ts/shared/translation.ts
@ -0,0 +1,31 @@
+import * as interfaces from '../interfaces/index.js';
+
+type TTranslationImplementation = {
+  [key in keyof interfaces.IDeDocumentTranslations]: string;
+}
+
+export const EN_translations: TTranslationImplementation = {
+  invoice: 'Invoice',
+  quantity: 'Quantity',
+};
+
+export const DE_translations: TTranslationImplementation = {
+  invoice: 'Rechnung',
+  quantity: 'Anzahl',
+};
+
+export const languageCodeMap = {
+  'DE': DE_translations,
+  'EN': EN_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;
+  }
+};
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-document',
-  version: '1.0.101',
-  description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
+  version: '1.2.0',
+  description: 'A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.'
 }
--- a/ts_web/elements/contentinvoice.ts
+++ b/ts_web/elements/contentinvoice.ts
@ -12,12 +12,11 @@ import {
  cssManager,
  unsafeCSS,
  render,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
-
 import * as plugins from '../plugins.js';
+import * as shared from '../../ts/shared/index.js';

-import * as shared from './shared/index.js';


 declare global {
@ -277,8 +276,8 @@ export class DeContentInvoice extends DeesElement {
        <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
        <div class="grid topLine dataHeader">
          <div class="lineItem">Item Pos.</div>
-          <div class="lineItem">Description</div>
-          <div class="lineItem">Quantity</div>
+          <div class="lineItem">${shared.translation.translate('DE', 'description', 'Description')}</div>
+          <div class="lineItem">${shared.translation.translate('DE', 'quantity', 'Quantity')}</div>
          <div class="lineItem">Unit Type</div>
          <div class="lineItem">Unit Net Price</div>
          <div class="lineItem">Total Net Price</div>
@ -292,9 +291,9 @@ export class DeContentInvoice extends DeesElement {
                <div class="lineItem">${invoiceItem.name}</div>
                <div class="lineItem">${invoiceItem.unitQuantity}</div>
                <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem">${invoiceItem.unitNetPrice} ${invoiceItem.currency}</div>
+                <div class="lineItem">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
                <div class="lineItem">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${invoiceItem.currency}
+                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
                </div>
              </div>
            `
@ -343,7 +342,7 @@ export class DeContentInvoice extends DeesElement {
          IBAN: ${this.letterData?.from?.sepaConnection?.iban}<br />
          BIC: ${this.letterData?.from?.sepaConnection?.bic}<br />
          Description: ${this.letterData?.content.invoiceData?.id}<br />
-          Amount: ${this.getTotalGross()} ${this.letterData?.content.invoiceData.items[0].currency}
+          Amount: ${this.getTotalGross()} ${this.letterData?.content.invoiceData.currency}
        </div>
        ${this.letterData?.content?.contractData?.contractDate
          ? html`
--- a/ts_web/elements/document.demo.ts
+++ b/ts_web/elements/document.demo.ts
@ -1,4 +1,4 @@
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import { html } from '@design.estate/dees-element';

 export const demoFunc = () => html`
--- a/ts_web/elements/document.ts
+++ b/ts_web/elements/document.ts
@ -11,13 +11,20 @@ import {
  domtools,
 } from '@design.estate/dees-element';

+import * as interfaces from '../../ts/interfaces/index.js';
 import * as plugins from '../plugins.js';

+export const defaultDocumentSettings: interfaces.IDocumentSettings = {
+  enableTopDraftText: true,
+  enableDefaultHeader: true,
+  enableDefaultFooter: true,
+};
+

 import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';

-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import { demoFunc } from './document.demo.js';

 declare global {
@ -68,9 +75,17 @@ export class DeDocument extends DeesElement {
  public letterData: plugins.tsclass.business.ILetter;

  @property({
-    type: String,
+    type: Object,
+    reflect: true,
+    converter: (valueArg) => {
+      if (typeof valueArg === 'string') {
+        return plugins.smartjson.parseBase64(valueArg)
+      } else {
+        return valueArg;
+      }
+    },
  })
-  public letterDataUrl: string;
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;

  constructor() {
    super();
@ -112,26 +127,27 @@ export class DeDocument extends DeesElement {
    this.registerGarbageFunction(() => {
      resizeObserver.disconnect();
    })
-    
-    if (this.letterDataUrl) {
-      const response = await fetch(this.letterDataUrl);
-      this.letterData = await response.json();
-    }
-    this.renderDocument();
  }

  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
+
+
  public async renderDocument() {
    const domtools = await this.domtoolsPromise;
-    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    
+
+    const documentBuildContainer = document.createElement('div');
+    document.body.appendChild(documentBuildContainer);
+
    let pages: DePage[] = [];
    let pageCounter = 0;
    let complete = false;
-    const content: DeContentInvoice = document.createElement(
-      'dedocument-contentinvoice'
-    ) as DeContentInvoice;
+
+    // lets append the content
+    const content: DeContentInvoice = new DeContentInvoice();
    content.letterData = this.letterData;
    document.body.appendChild(content);
+
    await domtools.convenience.smartdelay.delayFor(0);
    let overallContentOffset: number = 0;
    let currentContentOffset: number;
@ -146,13 +162,8 @@ export class DeDocument extends DeesElement {
      newPage.pageNumber = pageCounter;
      newPage.append(currentContent);
      newPage.pageTotalNumber = pageCounter;
-      documentContainer.append(newPage);
-      // betweenPagesSpacer
-      if (!this.printMode) {
-        const betweenPagesSpacerDiv = document.createElement('div');
-        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
-        documentContainer.append(betweenPagesSpacerDiv);
-      }
+      documentBuildContainer.append(newPage);
+      
      await currentContent.elementDomReady;
      await currentContent.trimStartToOffset(overallContentOffset);
      let newPageOverflows = await newPage.checkOverflow();
@ -171,15 +182,28 @@ export class DeDocument extends DeesElement {
      console.log(currentContentOffset);
    }
    document.body.removeChild(content);
+    document.body.removeChild(documentBuildContainer);

+    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    if (documentContainer) {
+      const children = Array.from(documentContainer.children);
+      children.forEach((child) => documentContainer.removeChild(child));
+    }
    for (const page of pages) {
      page.pageTotalNumber = pageCounter;
+      documentContainer.append(page);
+      // betweenPagesSpacer
+      if (!this.printMode) {
+        const betweenPagesSpacerDiv = document.createElement('div');
+        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
+        documentContainer.appendChild(betweenPagesSpacerDiv);
+      }
    }
    this.adjustDePageScaling();
    this.latestRenderedLetterData = this.letterData;
  }

-  async updated(changedProperties: Map<string | number | symbol, unknown>): 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);
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@ -8,4 +8,4 @@ export * from './pagefooter.js';
 export * from './pageheader.js';
 export * from './viewer.js';

-export * from './shared/index.js';
+export * from '../../ts/shared/index.js';
--- a/ts_web/elements/letterheader.ts
+++ b/ts_web/elements/letterheader.ts
@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';

-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';

 declare global {
--- a/ts_web/elements/page.ts
+++ b/ts_web/elements/page.ts
@ -8,10 +8,14 @@ import {
  css,
  cssManager,
  unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';

-import * as shared from './shared/index.js';
+import * as interfaces from '../../ts/interfaces/index.js';
+
+import { defaultDocumentSettings } from './document.js';
+
+import * as shared from '../../ts/shared/index.js';

 declare global {
  interface HTMLElementTagNameMap {
@ -23,10 +27,14 @@ declare global {
 export class DePage extends DeesElement {
  public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;

-  @property()
+  @property({
+    type: Number,
+  })
  viewWidth: number = null;

-  @property()
+  @property({
+    type: Number,
+  })
  viewHeight: number = null;

  @property({
@ -55,6 +63,12 @@ export class DePage extends DeesElement {
  })
  printMode = false;

+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+
  constructor() {
    super();
    domtools.DomTools.setupDomTools();
@ -109,11 +123,15 @@ export class DePage extends DeesElement {
        <dedocument-pagecontainer .printMode=${this.printMode}>
          ${this.letterData
            ? html`
-                <dedocument-pageheader
-                  .letterData=${this.letterData}
-                  .pageNumber="${this.pageNumber}"
-                  .pageTotalNumber="${this.pageTotalNumber}"
-                ></dedocument-pageheader>
+                ${this.documentSettings.enableDefaultHeader
+                  ? html`
+                      <dedocument-pageheader
+                        .letterData=${this.letterData}
+                        .pageNumber="${this.pageNumber}"
+                        .pageTotalNumber="${this.pageTotalNumber}"
+                      ></dedocument-pageheader>
+                    `
+                  : ``}
                ${this.pageNumber === 1
                  ? html`
                      <dedocument-letterheader
@ -129,26 +147,33 @@ export class DePage extends DeesElement {
                  .letterData=${this.letterData}
                  ><slot></slot
                ></dedocument-pagecontent>
-                <dedocument-pagefooter
-                  .letterData=${this.letterData}
-                  .pageNumber="${this.pageNumber}"
-                  .pageTotalNumber="${this.pageTotalNumber}"
-                ></dedocument-pagefooter>
+                ${this.documentSettings.enableDefaultFooter
+                  ? html`
+                      <dedocument-pagefooter
+                        .letterData=${this.letterData}
+                        .pageNumber="${this.pageNumber}"
+                        .pageTotalNumber="${this.pageTotalNumber}"
+                      ></dedocument-pagefooter>
+                    `
+                  : ``}
                <div class="versionOverlay">
                  ${this.letterData.versionInfo.type === 'draft'
                    ? html`
-                        <div class="topInfo">
-                          Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br />
-                          -> Revision/Document version: ${this.letterData.versionInfo.version}
-                        </div>
+                        ${this.documentSettings.enableTopDraftText
+                          ? html`
+                              <div class="topInfo">
+                                Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
+                                THIS.<br />
+                                -> Revision/Document version: ${this.letterData.versionInfo.version}
+                              </div>
+                            `
+                          : ``}
                        <div class="bigDraftText">DRAFT</div>
                      `
                    : html``}
                </div>
              `
-            : html`
-              <slot></slot>
-            `}
+            : html` <slot></slot> `}
        </dedocument-pagecontainer>
      </div>
    `;
--- a/ts_web/elements/pagecontainer.ts
+++ b/ts_web/elements/pagecontainer.ts
@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';

-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';

 declare global {
  interface HTMLElementTagNameMap {
--- a/ts_web/elements/pagecontent.ts
+++ b/ts_web/elements/pagecontent.ts
@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';

-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';

 declare global {
--- a/ts_web/elements/pagefooter.ts
+++ b/ts_web/elements/pagefooter.ts
@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';

-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';

 declare global {
--- a/ts_web/elements/pageheader.ts
+++ b/ts_web/elements/pageheader.ts
@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';

-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';

 declare global {
@ -74,13 +74,17 @@ export class DePageHeader extends DeesElement {
        color: #333;
        font-size: 10px;
      }
-      .topstripe img {
-        filter: invert(1);
+      .topstripe .logo {
        position: absolute;
        bottom: 10px;
        height: 25px;
        left: auto;
        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        font-family: 'Courier New', Courier, monospace;
+      }
+      .topstripe .logo img {
+        position: relative;
+        height: 25px;
      }
    `,
  ];
@ -88,7 +92,9 @@ export class DePageHeader extends DeesElement {
  public render(): TemplateResult {
    return html`
      <div class="topstripe">
-        <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" />
+        <div class="logo">
+          No logo set!
+        </div>
      </div>
      <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
    `;
--- a/ts_web/elements/viewer.demo.ts
+++ b/ts_web/elements/viewer.demo.ts
@ -1,6 +1,6 @@
 import { html } from '@design.estate/dees-element';
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';

 export const demoFunc = () => html`
-  <dedocument-viewer .letterData=${shared.demoLetter}></dedocument-viewer>
+  <dedocument-viewer .letterData=${shared.demoLetter} .documentSettings=${shared.demoDocumentSettings}></dedocument-viewer>
 `;
--- a/ts_web/elements/viewer.ts
+++ b/ts_web/elements/viewer.ts
@ -1,7 +1,9 @@
 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 { demoFunc } from './viewer.demo.js';
+import { defaultDocumentSettings } from './document.js';

 declare global {
  interface HTMLElementTagNameMap {
@ -17,6 +19,8 @@ export class DeDocumentViewer extends DeesElement {
  // INSTANCE
  public letterData: plugins.tsclass.business.ILetter = null;

+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+
  public static styles = [
    cssManager.defaultStyles,
    css`
@ -67,7 +71,7 @@ export class DeDocumentViewer extends DeesElement {
      <div class="maincontainer">
        <div class="viewport">
          ${this.letterData
-            ? html` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
+            ? html` <dedocument-dedocument .letterData=${this.letterData} .documentSettings=${this.documentSettings}></dedocument-dedocument> `
            : html``}
        </div>
        <div class="controls"></div>
Author	SHA1	Message	Date
Philipp Kunz	c8b102e798	1.2.0	2024-12-01 23:04:28 +01:00
Philipp Kunz	4c9b2671a9	feat(core): Enhance document generation capabilities with improved modular structure and extended translation support.	2024-12-01 23:04:28 +01:00
Philipp Kunz	ab2c1e21f2	1.1.0	2024-11-30 20:54:15 +01:00
Philipp Kunz	af77fcbe0e	feat(core): Enhanced document generation features and added translation capabilities	2024-11-30 20:54:15 +01:00
Philipp Kunz	e6cd135920	1.0.103	2024-11-27 19:27:31 +01:00
Philipp Kunz	7dd585553c	fix(DeDocument): Fix rendering of documents by properly moving new pages back to the document container	2024-11-27 19:27:30 +01:00
Philipp Kunz	561b391f03	1.0.102	2024-11-27 19:15:30 +01:00
Philipp Kunz	a5ff39d306	fix(contentinvoice): Fixed currency display issues in invoice content rendering.	2024-11-27 19:15:29 +01:00