1.1.0

changelog.md

@@ -0,0 +1,40 @@
+# Changelog
+
+## 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.
+
+- Replaced incorrect 'currency' field with 'position' in demoletter.ts for item details.
+- Ensured item positions are correctly assigned in demoletter.ts.
+
+## 2024-11-27 - 1.0.100 - fix(core)
+Fix issues with PDF service, invoice item positioning, and update package dependencies.
+
+- Updated package dependencies to latest versions for improved stability and performance.
+- Fixed invoice item positioning in demo data.
+- Ensured PDF service handles rendering updates more efficiently.
+
+## 2024-04-20 to 2023-10-16 - 1.0.99 to 1.0.90 - Core Fixes and Documentation Update
+Routine updates and fixes with a focus on core improvements and documentation enhancements.
+
+- Regular core updates to enhance stability and performance
+- Updated project documentation for better clarity and user guidance

html/index.ts

@@ -1,6 +1,6 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesWccTools from '@design.estate/dees-wcctools';
-import * as deesDomTools from '@designestate/dees-domtools';
+import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
 import * as elements from '../ts_web/elements/index.js';

npmextra.json

@@ -2,19 +2,41 @@
   "gitzone": {
     "projectType": "wcc",
     "module": {
-      "githost": "gitlab.com",
+      "githost": "code.foss.global",
       "gitscope": "designestate/private",
       "gitrepo": "dedocument-catalog",
-      "description": "a catalog for creating documents like invoices",
+      "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
       "npmPackagename": "@designestate_private/dedocument-catalog",
       "license": "MIT",
       "projectDomain": "design.estate",
-      "shortDescription": "undefined variable"
+      "shortDescription": "undefined variable",
+      "keywords": [
+        "document generation",
+        "invoices",
+        "PDF creation",
+        "TypeScript",
+        "web components",
+        "templating",
+        "dynamic rendering",
+        "responsive design",
+        "business documentation",
+        "automated workflows",
+        "modular architecture",
+        "smart contracts",
+        "javascript",
+        "QR code",
+        "custom elements",
+        "nodejs",
+        "data-driven"
+      ]
     }
   },
   "npmci": {
     "npmGlobalTools": [],
     "npmAccessLevel": "private",
     "npmRegistryUrl": "verdaccio2.lossless.one"
+  },
+  "tsdoc": {
+    "legal": "\n## License and Legal Information\n\nThis 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. \n\n**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.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
   }
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.0.94",
+  "version": "1.1.0",
   "private": false,
-  "description": "a catalog for creating documents like invoices",
+  "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "exports": {
@@ -18,26 +18,26 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.34",
+    "@design.estate/dees-domtools": "^2.0.65",
-    "@design.estate/dees-element": "^2.0.23",
+    "@design.estate/dees-element": "^2.0.39",
-    "@design.estate/dees-wcctools": "^1.0.76",
+    "@design.estate/dees-wcctools": "^1.0.90",
-    "@git.zone/tsrun": "^1.2.44",
+    "@git.zone/tsrun": "^1.3.3",
-    "@push.rocks/smartfile": "^10.0.26",
+    "@push.rocks/smartfile": "^11.0.21",
-    "@push.rocks/smartjson": "^5.0.10",
+    "@push.rocks/smartjson": "^5.0.20",
-    "@push.rocks/smartpath": "^5.0.5",
+    "@push.rocks/smartpath": "^5.0.18",
-    "@push.rocks/smartpdf": "^3.0.16",
+    "@push.rocks/smartpdf": "^3.1.8",
-    "@push.rocks/smarttime": "^4.0.1",
+    "@push.rocks/smarttime": "^4.0.8",
-    "@tsclass/tsclass": "^4.0.46",
+    "@tsclass/tsclass": "^4.1.2",
-    "@types/qrcode": "^1.5.2",
+    "@types/qrcode": "^1.5.5",
-    "qrcode": "^1.5.3"
+    "qrcode": "^1.5.4"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.66",
+    "@git.zone/tsbuild": "^2.2.0",
-    "@git.zone/tsbundle": "^2.0.8",
+    "@git.zone/tsbundle": "^2.1.0",
-    "@git.zone/tstest": "^1.0.77",
+    "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.0.7",
+    "@git.zone/tswatch": "^2.0.25",
-    "@push.rocks/projectinfo": "^5.0.1",
+    "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.0.8"
+    "@push.rocks/tapbundle": "^5.5.3"
   },
   "files": [
     "ts/**/*",
@@ -62,5 +62,24 @@
   "bugs": {
     "url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
   },
-  "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme"
+  "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
+  "keywords": [
+    "document generation",
+    "invoices",
+    "PDF creation",
+    "TypeScript",
+    "web components",
+    "templating",
+    "dynamic rendering",
+    "responsive design",
+    "business documentation",
+    "automated workflows",
+    "modular architecture",
+    "smart contracts",
+    "javascript",
+    "QR code",
+    "custom elements",
+    "nodejs",
+    "data-driven"
+  ]
 }

readme.hints.md

@@ -0,0 +1 @@
+ 

readme.md

@@ -1,7 +1,185 @@
-# @design.estate/private/dedocument-catalog
+# @design.estate/dees-document
-a catalog for creating documents like invoices
+
+A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.
+
+## Install
+
+To add `@design.estate/dees-document` to your project, run the following command in your terminal:
+
+```shell
+npm install @design.estate/dees-document --save
+```
+
+This will install the package and add it to your project's dependencies, ensuring all required modules are available in your `node_modules` directory.
 
 ## Usage
 
-Use TypeScript for best in class intellisense
+The `@design.estate/dees-document` package provides a robust framework for creating documents including invoices, contracts, and various other business-related documents. It is built on modern web technologies including TypeScript and ES modules to ensure a type-safe and easy-to-integrate experience. Below, we will guide you through the comprehensive usage of this package, from setting up your environment to generating PDF documents. 
-For further information read the linked docs at the top of this readme.
+
+### Getting Started
+
+Before creating documents, initialize the document service which is central to this package. This is typically done at the beginning of your application.
+
+```typescript
+import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
+
+async function setupPdfService() {
+  const options: IPdfServiceConstructorOptions = {
+    // Add necessary configuration here
+  };
+  
+  const pdfService = await PdfService.createAndStart(options);
+  console.log('PDF Service started successfully.');
+  return pdfService;
+}
+```
+
+This script initializes `PdfService`. Modify the options to tailor the service to your needs.
+
+### Creating Documents
+
+With the PDF service ready, you can proceed to generate documents. The following section provides a detailed example of creating an invoice. This example is applicable to various document types with necessary adjustments.
+
+#### Step-by-Step: Create an Invoice
+
+1. **Define the Data Structure**: Describe the invoice details. This includes sender and recipient information, the items being invoiced, and more.
+
+   ```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"
+     },
+   };
+   ```
+
+   Here, `ILetter` interface details all components of an invoice including sender (`from`) and recipient (`to`) information, as well as the invoiced items.
+
+2. **Generate the PDF**: Transform the invoice details into a PDF.
+
+   ```typescript
+   async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
+     const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
+     console.log('Invoice PDF generated successfully.');
+
+     // Save the PDF, send it via email, etc.
+   }
+   ```
+
+   The function `createPdfFromLetterObject` returns a `Buffer` containing the generated PDF. From here, you can save this PDF to a file, send it to clients, or archive it.
+
+3. **Integrate It All**: Here's how everything ties together into a complete script for generating an invoice:
+
+   ```typescript
+   async function main() {
+     const pdfService = await setupPdfService();
+     await generateInvoice(pdfService, invoiceData);
+   }
+
+   main().then(() => console.log('Invoice generation process completed.'));
+   ```
+
+   This script initiates the PDF service and generates the invoice PDF with the provided information.
+
+### Advanced Document Features
+
+The package is designed to create not only invoices but a wide range of document types. Leverage its modular architecture to build and customize documents to fit specific needs.
+
+#### Advanced Scenarios
+
+1. **Custom Styling**: Customize the appearance of elements within your documents, such as headers, footers, and more.
+
+   ```typescript
+   import { DeDocumentViewer } from '@design.estate/dees-element';
+
+   const customStyledViewer = new DeDocumentViewer();
+   customStyledViewer.style.setProperty('--main-bg-color', 'lightblue');
+   document.body.appendChild(customStyledViewer);
+   ```
+
+   Customize via CSS or dynamically through TypeScript where necessary.
+
+2. **Interactive Document Elements**: Incorporate UI components like buttons, input fields, or visualizations tailored for your document needs.
+
+3. **Multi-page Document Generation**: Handle overflow of content and automatic page generation while maintaining headers and footers.
+
+   ```typescript
+   pdfService.adjustDePageScaling();
+   ```
+
+   Toggle between print and digital formats and handle scaling.
+
+4. **Embedding Images and Logos**: Add company logos, graphics, or auxiliary content to enhance document presentation.
+
+### Additional Capabilities
+
+Beyond these examples, delve deeper into advanced functionalities such as:
+
+- **Document Management**: Manage multiple document templates, manage versions, and add annotations or notes.
+- **Dynamic Rendering**: Use templating for dynamic content rendering based on variable inputs.
+- **Responsive Design for Digital Documents**: Ensure documents are displayed correctly across devices.
+
+### Concluding Remarks
+
+The `@design.estate/dees-document` package is an essential tool in the modern document generation ecosystem. Its expansive capabilities, from basic invoices to complex document templates, make it a versatile solution for businesses of all scales. Implementing this service broadly simplifies document management workflows and enhances document presentation precision and quality. For further depth, consult the package's documentation or explore the examples included in the module.
+
+## 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. 
+
+**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.
+
+### Trademarks
+
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
+
+### Company Information
+
+Task Venture Capital GmbH  
+Registered at District court Bremen HRB 35230 HB, Germany
+
+For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
+
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

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,
@@ -43,7 +47,7 @@ const testLetterData: plugins.tsclass.business.ILetter = {
           unitNetPrice: 1200,
           unitType: 'item',
           vatPercentage: 0,
-          currency: 'EUR',
+          position: 1,
         },
       ],
     },
@@ -102,26 +106,38 @@ 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 saveResult = async (optionsArg: {
-    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(letterDataArg);
+    letterData: plugins.tsclass.business.ILetter;
-    await plugins.smartfile.memory.toFs(Buffer.from(pdfResult.buffer), plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`));
+    documentSettings: interfaces.IDocumentSettings;
-  }
+  }) => {
-  await saveResult(testLetterData);
+    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({
+    letterData: testLetterData,
+    documentSettings: {},
+  });
+  await saveResult({
+    letterData: {
       ...testLetterData,
       versionInfo: {
         type: 'draft',
         version: '1.0.0',
-    }
+      },
+    },
+    documentSettings: {},
   });
-  testLetterData.content.invoiceData.items = [
+  (testLetterData.content.invoiceData.items = [
     {
       name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 0,
-      currency: 'EUR',
+      position: 1,
     },
     {
       name: 'Hosting',
@@ -129,7 +145,7 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 19,
-      currency: 'EUR',
+      position: 2,
     },
     {
       name: 'Overnight Shipping',
@@ -137,14 +153,15 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 24,
-      currency: 'EUR',
+      position: 3,
-    },{
+    },
+    {
       name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 0,
-      currency: 'EUR',
+      position: 4,
     },
     {
       name: 'Hosting',
@@ -152,7 +169,7 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 19,
-      currency: 'EUR',
+      position: 5,
     },
     {
       name: 'Overnight Shipping',
@@ -160,14 +177,15 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 24,
-      currency: 'EUR',
+      position: 6,
-    },{
+    },
+    {
       name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 0,
-      currency: 'EUR',
+      position: 7,
     },
     {
       name: 'Hosting',
@@ -175,7 +193,7 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 19,
-      currency: 'EUR',
+      position: 8,
     },
     {
       name: 'Overnight Shipping',
@@ -183,14 +201,15 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 24,
-      currency: 'EUR',
+      position: 9,
-    },{
+    },
+    {
       name: 'Website Creation',
       unitQuantity: 1,
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 0,
-      currency: 'EUR',
+      position: 10,
     },
     {
       name: 'Hosting',
@@ -198,7 +217,7 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 19,
-      currency: 'EUR',
+      position: 11,
     },
     {
       name: 'Overnight Shipping',
@@ -206,12 +225,13 @@ tap.test('should create an invoice', async () => {
       unitNetPrice: 1200,
       unitType: 'item',
       vatPercentage: 24,
-      currency: 'EUR',
+      position: 12,
     },
-  ],
+  ]),
     await saveResult({
-    ...testLetterData,
+      letterData: testLetterData,
-  })
+      documentSettings: {},
+    });
 });
 
 tap.test('should stop the service', async () => {

ts/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.0.94',
+  version: '1.1.0',
-  description: 'a catalog for creating documents like invoices'
+  description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
 }

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 {
 
@@ -10,6 +11,13 @@ export interface IPdfServiceConstructorOptions {
  * a pdf service for generating pdfs
  */
 export class PdfService {
+  // STATIC
+  public static async createAndStart(optionsArg: IPdfServiceConstructorOptions) {
+    const pdfService = new PdfService(optionsArg);
+    await pdfService.start();
+    return pdfService;
+  }
+
   // INSTANCE
   options: IPdfServiceConstructorOptions;
 
@@ -37,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);

ts/interfaces/document.ts

@@ -0,0 +1,5 @@
+export interface IDocumentSettings {
+  enableTopDraftText?: boolean;
+  enableDefaultHeader?: boolean;
+  enableDefaultFooter?: boolean;
+}

ts/interfaces/index.ts

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

ts/interfaces/translation.ts

@@ -0,0 +1,4 @@
+export interface IDeDocumentTranslations {
+  "invoice": string;
+  "quantity": string;
+}

ts_web/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.0.94',
+  version: '1.1.0',
-  description: 'a catalog for creating documents like invoices'
+  description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
 }

ts_web/elements/contentinvoice.ts

@@ -12,14 +12,13 @@ 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 './shared/index.js';
 
 
+
 declare global {
   interface HTMLElementTagNameMap {
     'dedocument-contentinvoice': DeContentInvoice;
@@ -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">${shared.translation.translate('DE', 'description', 'Description')}</div>
-          <div class="lineItem">Quantity</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`

ts_web/elements/document.demo.ts

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

ts_web/elements/document.ts

@@ -11,13 +11,21 @@ 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 { demoFunc } from './document.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,22 +35,29 @@ declare global {
 
 @customElement('dedocument-dedocument')
 export class DeDocument extends DeesElement {
-  public static demo = () => html`
+  public static demo = demoFunc;
-    <dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
-  `;
 
   @property({
     type: String,
+    reflect: true,
   })
   public format: 'a4' = 'a4';
 
   @property({
     type: Number,
+    reflect: true,
   })
-  public viewWidth: number = shared.a4Width;
+  public viewWidth: number = null;
+
+  @property({
+    type: Number,
+    reflect: true,
+  })
+  public viewHeight: number = null;
 
   @property({
     type: Boolean,
+    reflect: true,
   })
   printMode = false;
 
@@ -56,14 +71,21 @@ export class DeDocument extends DeesElement {
         return valueArg;
       }
     },
-
   })
   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();
@@ -81,46 +103,51 @@ export class DeDocument extends DeesElement {
       }
 
       .betweenPagesSpacer {
-        height: 20px;
+        height: 16px;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style>
+      <div class="documentContainer"></div>
-        :host {
-          transform-origin: top left;
-          transform: ${this.viewWidth
-            ? unsafeCSS(
-                `scale(${this.viewWidth / shared.a4Width}, ${this.viewWidth / shared.a4Width})`
-              )
-            : unsafeCSS('')};
-        }
-      </style>
-      <div class="scaleport"></div>
     `;
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
-    if (this.letterDataUrl) {
+    const resizeObserver = new ResizeObserver((entries) => {
-      const response = await fetch(this.letterDataUrl);
+      for (const entry of entries) {
-      this.letterData = await response.json();
+        const width = entry.contentRect.width;
+        const height = entry.contentRect.height;
+        // Handle the new dimensions here
+        this.adjustDePageScaling();
       }
-    this.renderDocument();
+    });
+    resizeObserver.observe(this);
+    this.registerGarbageFunction(() => {
+      resizeObserver.disconnect();
+    })
   }
 
+  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
+
+
   public async renderDocument() {
     const domtools = await this.domtoolsPromise;
-    const scaleport = this.shadowRoot.querySelector('.scaleport');
+    
+
+    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'
+    // lets append the content
-    ) as DeContentInvoice;
+    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;
@@ -135,13 +162,8 @@ export class DeDocument extends DeesElement {
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);
       newPage.pageTotalNumber = pageCounter;
-      scaleport.append(newPage);
+      documentBuildContainer.append(newPage);
-      // betweenPagesSpacer
+      
-      if (!this.printMode) {
-        const betweenPagesSpacerDiv = document.createElement('div');
-        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
-        scaleport.append(betweenPagesSpacerDiv);
-      }
       await currentContent.elementDomReady;
       await currentContent.trimStartToOffset(overallContentOffset);
       let newPageOverflows = await newPage.checkOverflow();
@@ -160,9 +182,57 @@ 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>): Promise<void> {
+    super.updated(changedProperties);
+    const domtools = await this.domtoolsPromise;
+    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
+    if (!renderedDocIsUpToDate) {
+      this.renderDocument();
+    }
+
+    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+      this.adjustDePageScaling();
+    }
+  }
+
+  private adjustDePageScaling() {
+    if (this.printMode) {
+      return;
+    }
+    this.viewWidth = this.clientWidth;
+    // Find all DePage instances within this DeDocument
+    const pages = this.shadowRoot.querySelectorAll('dedocument-page');
+
+    // Update each DePage instance's viewHeight and viewWidth
+    pages.forEach((page: DePage) => {
+      if (this.viewHeight) {
+        page.viewHeight = this.viewHeight;
+      }
+      if (this.viewWidth) {
+        page.viewWidth = this.viewWidth;
+        console.log('setting viewWidth: ', this.viewWidth);
+      }
+    });
+  }
 }

ts_web/elements/index.ts

@@ -6,5 +6,6 @@ export * from './pagecontainer.js';
 export * from './pagecontent.js';
 export * from './pagefooter.js';
 export * from './pageheader.js';
+export * from './viewer.js';
 
 export * from './shared/index.js';

ts_web/elements/page.ts

@@ -8,8 +8,12 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+
+import * as interfaces from '../../ts/interfaces/index.js';
+
+import { defaultDocumentSettings } from './document.js';
 
 import * as shared from './shared/index.js';
 
@@ -23,6 +27,16 @@ declare global {
 export class DePage extends DeesElement {
   public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
 
+  @property({
+    type: Number,
+  })
+  viewWidth: number = null;
+
+  @property({
+    type: Number,
+  })
+  viewHeight: number = null;
+
   @property({
     type: String,
   })
@@ -41,7 +55,7 @@ export class DePage extends DeesElement {
   @property({
     type: Object,
   })
-  public letterData: tsclass.business.ILetter = shared.demoLetter;
+  public letterData: tsclass.business.ILetter = null;
 
   @property({
     type: Boolean,
@@ -49,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();
@@ -58,7 +78,13 @@ export class DePage extends DeesElement {
     domtools.elementBasic.staticStyles,
     css`
       :host {
+        display: block;
       }
+
+      #scaleWrapper {
+        transform-origin: top left;
+      }
+
       .versionOverlay {
         pointer-events: none;
         position: absolute;
@@ -93,12 +119,19 @@ export class DePage extends DeesElement {
 
   public render(): TemplateResult {
     return html`
+      <div id="scaleWrapper">
         <dedocument-pagecontainer .printMode=${this.printMode}>
+          ${this.letterData
+            ? html`
+                ${this.documentSettings.enableDefaultHeader
+                  ? html`
                       <dedocument-pageheader
                         .letterData=${this.letterData}
                         .pageNumber="${this.pageNumber}"
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pageheader>
+                    `
+                  : ``}
                 ${this.pageNumber === 1
                   ? html`
                       <dedocument-letterheader
@@ -114,23 +147,35 @@ export class DePage extends DeesElement {
                   .letterData=${this.letterData}
                   ><slot></slot
                 ></dedocument-pagecontent>
+                ${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`
+                        ${this.documentSettings.enableTopDraftText
                           ? html`
                               <div class="topInfo">
-                  Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br>
+                                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> `}
         </dedocument-pagecontainer>
+      </div>
     `;
   }
 
@@ -139,4 +184,32 @@ export class DePage extends DeesElement {
     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')) {
+      this.adjustScaling();
+    }
+  }
+
+  private adjustScaling() {
+    console.log('page scale adjustment triggered.');
+    const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
+
+    if (!scaleWrapper) return;
+
+    let scale = 1;
+    if (this.viewHeight) {
+      scale = this.viewHeight / shared.a4Height;
+    } else if (this.viewWidth) {
+      scale = this.viewWidth / shared.a4Width;
+    }
+    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.height = `${shared.a4Height * scale}px`;
+  }
 }

ts_web/elements/pageheader.ts

@@ -74,13 +74,17 @@ export class DePageHeader extends DeesElement {
         color: #333;
         font-size: 10px;
       }
-      .topstripe img {
+      .topstripe .logo {
-        filter: invert(1);
         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>
     `;

ts_web/elements/shared/demoletter.ts

@@ -59,31 +59,33 @@ 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,
-          currency: 'EUR',
+          position: 0,
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 4,
           unitNetPrice: 100,
           unitType: 'hours',
           vatPercentage: 7,
-          currency: 'EUR',
+          position: 1,
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 3,
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 7,
-          currency: 'EUR',
+          position: 2,
         },
         {
           name: 'Item with 21% VAT',
@@ -91,7 +93,46 @@ export const demoLetter: tsclass.business.ILetter = {
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 21,
-          currency: 'EUR',
+          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',
@@ -99,7 +140,55 @@ export const demoLetter: tsclass.business.ILetter = {
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 0,
-          currency: 'EUR',
+          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,
         },
       ],
     }

ts_web/elements/shared/index.ts

@@ -3,4 +3,7 @@ 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_web/elements/shared/translation.ts

@@ -0,0 +1,31 @@
+import * as interfaces from '../../../ts/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;
+  }
+};

ts_web/elements/viewer.demo.ts

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

ts_web/elements/viewer.ts

@@ -0,0 +1,83 @@
+import * as plugins from '../plugins.js';
+
+import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
+import { demoFunc } from './viewer.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-viewer': DeDocumentViewer;
+  }
+}
+
+@customElement('dedocument-viewer')
+export class DeDocumentViewer extends DeesElement {
+  // DEMO
+  public static demo = demoFunc;
+
+  // INSTANCE
+  public letterData: plugins.tsclass.business.ILetter = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .maincontainer {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+      }
+      .controls {
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        position: absolute;
+        height: 32px;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111111ee')};
+        box-shadow: 0px 2px 8px 0px #000000;
+      }
+      .controlsShadow {
+        position: absolute;
+        top: 32px;
+        right: 0px;
+        left: 0px;
+        height: 16px;
+        width: 100%;
+        position: absolute;
+        background: linear-gradient(to bottom, #111111cc 0%, #11111100 100%);
+      }
+
+      .viewport {
+        position: absolute;
+        padding: 16px;
+        padding-top: 48px;
+        padding-bottom: 0px;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        overflow-y: scroll;
+        overscroll-behavior: contain;
+      }
+    `,
+  ];
+
+  public render = () => {
+    return html`
+      <div class="maincontainer">
+        <div class="viewport">
+          ${this.letterData
+            ? html` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
+            : html``}
+        </div>
+        <div class="controls"></div>
+      </div>
+    `;
+  };
+
+  public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
+    super.updated(changedProperties);
+    if (changedProperties.has('letterData')) {
+    }
+  };
+}