1.5.1

Reviewed-on: #1

changelog.md

@@ -0,0 +1,89 @@
+# Changelog
+
+## 2024-12-02 - 1.5.1 - fix(package)
+Fix duplicate node export in package.json
+
+- Resolved a duplication issue with the './node' export in package.json exports field.
+
+## 2024-12-02 - 1.5.0 - feat(core)
+Refactor project structure for better modularity and code organization
+
+- Moved shared components to a dedicated 'dist_ts_shared' directory for better separation of concerns.
+- Updated import statements across the codebase to align with the new file structure.
+- Introduced translations directly under 'ts_shared' for language-specific string management.
+
+## 2024-12-02 - 1.4.0 - feat(translation)
+Add French and Italian translations for document interface
+
+- Expanded translation support by adding French and Italian language translations
+- Fixed duplicated text in German final page statement
+- Improved Spanish translation of reverse VAT note and final page statement
+
+## 2024-12-02 - 1.3.2 - fix(core)
+Minor updates and optimizations in the output PDF formatting process.
+
+- Improved handling of page content overflow in PDF generation.
+- Refined default document settings for consistent rendering.
+
+## 2024-12-02 - 1.3.1 - fix(documentation)
+Updated project description and enhanced documentation in package.json and README
+
+- The package description in package.json was updated to include more features.
+- Added more details about setting up and using the PdfService.
+- Included comprehensive examples for initializing and generating PDFs.
+- Expanded sections covering advanced features, modular components, interactive documents, and localization support.
+
+## 2024-12-02 - 1.3.0 - feat(translation)
+Add multi-language support for document translations.
+
+- Implemented translation interface for document labels.
+- Added Spanish translations alongside existing English and German.
+- Updated content invoice, page header, and page footer elements to utilize language-specific translations.
+
+## 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.
+
+- 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

npmextra.json

@@ -2,19 +2,42 @@
   "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 sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
       "npmPackagename": "@designestate_private/dedocument-catalog",
       "license": "MIT",
       "projectDomain": "design.estate",
-      "shortDescription": "undefined variable"
+      "shortDescription": "undefined variable",
+      "keywords": [
+        "document generation",
+        "invoice automation",
+        "business documentation",
+        "dynamic rendering",
+        "PDF creation",
+        "web components",
+        "Node.js",
+        "TypeScript",
+        "templating",
+        "modern web technologies",
+        "responsive design",
+        "QR code",
+        "modular architecture",
+        "automated workflows",
+        "localization",
+        "digital signatures",
+        "security",
+        "interactive documents"
+      ]
     }
   },
   "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,42 +1,47 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.0.91",
+  "version": "1.5.1",
   "private": false,
-  "description": "a catalog for creating documents like invoices",
+  "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "exports": {
-    "./ts": "./dist_ts/index.js",
+    ".": "./dist_ts/index.js",
-    "./ts_web": "./dist_ts_web/index.js"
+    "./node": "./dist_ts/index.js",
+    "./web": "./dist_ts_web/index.js",
+    "./shared": "./dist_ts_shared/index.js",
+    "./interfaces": "./dist_ts_shared/interfaces/index.js"
   },
   "scripts": {
     "test": "npm run build && tstest test/",
-    "build": "tsbuild --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
-    "watch": "tswatch element"
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
   },
   "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/node": "^22.10.1",
-    "qrcode": "^1.5.3"
+    "@types/qrcode": "^1.5.5",
+    "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/**/*",
@@ -61,5 +66,25 @@
   "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",
+    "invoice automation",
+    "business documentation",
+    "dynamic rendering",
+    "PDF creation",
+    "web components",
+    "Node.js",
+    "TypeScript",
+    "templating",
+    "modern web technologies",
+    "responsive design",
+    "QR code",
+    "modular architecture",
+    "automated workflows",
+    "localization",
+    "digital signatures",
+    "security",
+    "interactive documents"
+  ]
 }

readme.hints.md

@@ -0,0 +1 @@
+ 

readme.md

@@ -1,7 +1,193 @@
-# @design.estate/private/dedocument-catalog
+# @design.estate/dees-document
-a catalog for creating documents like invoices
+
+A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.
+
+## Install
+
+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 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
 
-Use TypeScript for best in class intellisense
+The `@design.estate/dees-document` package serves as a robust framework to facilitate the generation of business documents, such as invoices, contracts, and reports. Leveraging modern web technologies, this package integrates seamlessly with TypeScript and ES modules, offering a type-safe environment conducive to efficient, dynamic document creation.
-For further information read the linked docs at the top of this readme.
+
+Below, we provide a detailed guide for utilizing this package, from initializing your environment to generating complete PDF documents. 
+
+### Setting Up the Environment
+
+Before diving into document creation, ensure your environment is properly configured. Make sure to import necessary dependencies and setup configurations:
+
+```typescript
+import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
+
+async function setupPdfService() {
+  const options: IPdfServiceConstructorOptions = {
+    // Configure your options here
+  };
+
+  const pdfService = await PdfService.createAndStart(options);
+  console.log('PDF Service started successfully.');
+  return pdfService;
+}
+```
+
+In this setup snippet, you set up the `PdfService` which is the core component for PDF generation. The configuration options should be adjusted to fit your needs, especially considering options such as file paths, languages, and template directories.
+
+### Creating a Document Template
+
+To create documents, particularly invoices, you'll first need to define a template. This template describes the structure of your document:
+
+```typescript
+import { ILetter } from '@design.estate/dees-document';
+
+const invoiceTemplate: 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 `invoiceTemplate` object utilizes the `ILetter` interface which specifies the structure for invoice data, including sender and recipient details, itemization, and pricing.
+
+### Generating the Document
+
+Once a template is established, the next step is generating a PDF:
+
+```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.
+}
+```
+
+In this function, the `createPdfFromLetterObject` method converts your invoice data into a `Buffer` containing the PDF. This `Buffer` can subsequently be saved as a file or sent over HTTP.
+
+### Comprehensive Example
+
+Below is an example integrating all previous steps into a single coherent script:
+
+```typescript
+async function main() {
+  const pdfService = await setupPdfService();
+  const invoiceData: ILetter = {
+    // Populate your invoice object
+  };
+  await generateInvoice(pdfService, invoiceData);
+}
+
+main().then(() => console.log('Invoice generation process completed.'));
+```
+
+This script encompasses initializing services and generating a PDF in a streamlined, efficient workflow.
+
+### Advanced Features
+
+`@design.estate/dees-document` provides several advanced functionalities, enabling rich document creation:
+
+1. **Custom Templates & Styling**
+   - Customize the styling through CSS or using inline styles in TypeScript.
+   - Templates can be adjusted to present different document types (e.g., contracts, reports).
+
+2. **Modular Components and Reuse**
+   - Utilize modular components to create reusable parts across different documents, enhancing maintainability and reducing redundancy.
+
+3. **Interactive Documents**
+   - Integrate interactivities like forms, buttons, and interactive charts within your documents.
+
+4. **Localization Support**
+   - Documents can be localized to support multiple languages, enhancing accessibility and usability.
+
+5. **Responsive and Adaptive Designs**
+   - Create documents that adjust layout dynamically depending on print or digital medium, maintaining consistency across platforms.
+
+6. **Security Features**
+   - Apply digital signatures and encrypt sensitive documents to ensure secure and authentic document distribution.
+
+7. **Complex Business Logic**
+   - Implement complex logic for feature-rich documents such as inventory systems, automatic tax calculations, or real-time pricing adjustments.
+
+### Utilize Translation for Localization
+
+The package offers a translation mechanism to adapt your documents for international clients:
+
+```typescript
+import { translate } from '@design.estate/dees-document/shared';
+
+const languageCode: 'DE' | 'EN' | 'ES' = 'EN'; // Set required language code
+console.log(translate(languageCode, 'invoice', 'Invoice')); // Translated output
+```
+
+Different language settings can be applied, enabling the seamless presentation of document contents tailored to regional and linguistic preferences.
+
+### Conclusion
+
+The `@design.estate/dees-document` package is a versatile and powerful solution for businesses seeking to automate and streamline their document generation processes using modern web technologies. By integrating seamlessly with TypeScript, it offers robust capabilities for creating complex, customizable, and interactive documents that can meet a variety of business needs.
+
+From custom templates to localization and advanced security features, this module provides the flexibility and power to create polished and professional documents efficiently. Whether you're generating invoices, contracts, or detailed reports, `@design.estate/dees-document` has the tools to support your enterprise workflows with ease and precision.
+
+## 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_shared/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,12 +153,85 @@ 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,
+      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({
-    ...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.91',
+  version: '1.5.1',
-  description: 'a catalog for creating documents like invoices'
+  description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts/classes.pdfservice.ts

@@ -1,5 +1,4 @@
 import * as plugins from './plugins.js';
-import * as paths from './paths.js';
 import * as helpers from './helpers.js';
 
 export interface IPdfServiceConstructorOptions {
@@ -10,6 +9,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 +43,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: plugins.shared.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/plugins.ts

@@ -5,6 +5,11 @@ export {
   path
 }
 
+// dees-document scope
+import * as shared from '../dist_ts_shared/index.js';
+
+export { shared };
+
 // @push.rocks/scope
 import * as smartfile from '@push.rocks/smartfile';
 import * as smartjson from '@push.rocks/smartjson';

ts/tspublish.json

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

ts_shared/demoletter.ts

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

ts_shared/index.ts

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

ts_shared/interfaces/document.ts

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

ts_shared/interfaces/index.ts

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

ts_shared/interfaces/translation.ts

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

ts_shared/plugins.ts

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

ts_shared/translation.ts

@@ -0,0 +1,124 @@
+import * as interfaces from './interfaces/index.js';
+
+type TTranslationImplementation = {
+  [key in keyof interfaces.IDeDocumentTranslations]: string;
+}
+
+export const EN_translations: TTranslationImplementation = {
+  address: 'Address',
+  bankConnection: 'Bank Connection',
+  contactInfo: 'Contact Info',
+  description: 'Description',
+  invoice: 'Invoice',
+  itemPos: 'Item Pos.',
+  quantity: 'Quantity',
+  registrationInfo: 'Registration Info',
+  reverseVatNote: 'VAT arises on a reverse charge basis and is payable by the customer.',
+  totalNetPrice: 'Total Net Price',
+  unitNetPrice: 'Unit Net Price',
+  unitType: 'Unit Type',
+  yourCustomerId: 'Your Customer ID:',
+  yourVatId: 'Your vat id on file:',
+  continuesOnPage: 'Continues on page',
+  finalPageStatement: 'This is the final page of this document.',
+  page: 'Page',
+};
+
+export const DE_translations: TTranslationImplementation = {
+  address: 'Adresse',
+  bankConnection: 'Bankverbindung',
+  contactInfo: 'Kontaktinformationen',
+  description: 'Beschreibung',
+  invoice: 'Rechnung',
+  itemPos: 'Pos.',
+  quantity: 'Anzahl',
+  registrationInfo: 'HRA/HRB Info',
+  reverseVatNote: 'Umkehr der Umsatzsteuerpflicht: Der Rechnungsempfänger ist für die korrekte Abrechnung der Umsatzsteuer zuständig.',
+  totalNetPrice: 'Nettopreis Summe',
+  unitNetPrice: 'Nettopreis',
+  unitType: 'Einheit',
+  yourCustomerId: 'Ihre Kundennummer:',
+  yourVatId: 'Ihre Umsatzsteuer-ID:',
+  continuesOnPage: 'Fortsetzung auf Seite',
+  finalPageStatement: 'Dies ist die letzte Seite dieses Dokuments.',
+  page: 'Seite',
+};
+
+export const ES_translations: TTranslationImplementation = {
+  address: 'Dirección',
+  bankConnection: 'Conexión bancaria',
+  contactInfo: 'Información de contacto',
+  description: 'Descripción',
+  invoice: 'Factura',
+  itemPos: 'Pos.',
+  quantity: 'Cantidad',
+  registrationInfo: 'Información de registro',
+  reverseVatNote: 'El IVA se aplica por inversión del sujeto pasivo y debe ser pagado por el cliente.',
+  totalNetPrice: 'Precio total neto',
+  unitNetPrice: 'Precio unitario neto',
+  unitType: 'Tipo de unidad',
+  yourCustomerId: 'Su número de cliente:',
+  yourVatId: 'Su ID de IVA:',
+  continuesOnPage: 'Continúa en la página',
+  finalPageStatement: 'Esta es la última página de este documento.',
+  page: 'Página',
+};
+
+export const FR_translations: TTranslationImplementation = {
+  address: 'Adresse',
+  bankConnection: 'Coordonnées bancaires',
+  contactInfo: 'Informations de contact',
+  description: 'Description',
+  invoice: 'Facture',
+  itemPos: 'Position',
+  quantity: 'Quantité',
+  registrationInfo: 'Informations d\'enregistrement',
+  reverseVatNote: 'La TVA s\'applique selon le mécanisme d\'autoliquidation et est à payer par le client.',
+  totalNetPrice: 'Prix net total',
+  unitNetPrice: 'Prix unitaire net',
+  unitType: 'Type d\'unité',
+  yourCustomerId: 'Votre numéro de client :',
+  yourVatId: 'Votre numéro de TVA :',
+  continuesOnPage: 'Continue sur la page',
+  finalPageStatement: 'Ceci est la dernière page de ce document.',
+  page: 'Page',
+};
+
+export const IT_translations: TTranslationImplementation = {
+  address: 'Indirizzo',
+  bankConnection: 'Coordinate bancarie',
+  contactInfo: 'Informazioni di contatto',
+  description: 'Descrizione',
+  invoice: 'Fattura',
+  itemPos: 'Pos.',
+  quantity: 'Quantità',
+  registrationInfo: 'Informazioni di registrazione',
+  reverseVatNote: 'L\'IVA è applicata con inversione contabile ed è a carico del cliente.',
+  totalNetPrice: 'Prezzo netto totale',
+  unitNetPrice: 'Prezzo netto unitario',
+  unitType: 'Tipo di unità',
+  yourCustomerId: 'Il tuo numero cliente:',
+  yourVatId: 'Il tuo numero di partita IVA:',
+  continuesOnPage: 'Continua alla pagina',
+  finalPageStatement: 'Questa è l\'ultima pagina di questo documento.',
+  page: 'Pagina',
+};
+
+export const languageCodeMap = {
+  'DE': DE_translations,
+  'EN': EN_translations,
+  'ES': ES_translations,
+  'FR': FR_translations,
+  'IT': IT_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_shared/tspublish.json

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

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.91',
+  version: '1.5.1',
-  description: 'a catalog for creating documents like invoices'
+  description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_web/elements/contentinvoice.ts

@@ -12,13 +12,10 @@ 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 {
@@ -46,6 +43,12 @@ export class DeContentInvoice extends DeesElement {
   })
   public letterData: plugins.tsclass.business.ILetter;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -276,12 +279,12 @@ export class DeContentInvoice extends DeesElement {
         </style>
         <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
         <div class="grid topLine dataHeader">
-          <div class="lineItem">Item Pos.</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-          <div class="lineItem">Description</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-          <div class="lineItem">Quantity</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-          <div class="lineItem">Unit Type</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-          <div class="lineItem">Unit Net Price</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
-          <div class="lineItem">Total Net Price</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
         </div>
         ${(() => {
           let counter = 1;
@@ -292,9 +295,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>
             `
@@ -330,7 +333,7 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                VAT arises on a reverse charge basis and is payable by the customer.
+                ${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
               </div>
             `
           : ``}
@@ -343,7 +346,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,7 @@
+import * as plugins from '../plugins.js';
+
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
+`;

ts_web/elements/document.ts

@@ -10,14 +10,19 @@ import {
   unsafeCSS,
   domtools,
 } from '@design.estate/dees-element';
-
 import * as plugins from '../plugins.js';
 
+export const defaultDocumentSettings: plugins.shared.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 +32,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 +68,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: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -81,46 +100,52 @@ 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;
+    content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
+
     await domtools.convenience.smartdelay.delayFor(0);
     let overallContentOffset: number = 0;
     let currentContentOffset: number;
@@ -131,17 +156,13 @@ export class DeDocument extends DeesElement {
       const newPage = new DePage();
       newPage.printMode = this.printMode;
       newPage.letterData = this.letterData;
+      newPage.documentSettings = this.documentSettings;
       pages.push(newPage);
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);
       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 +181,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,3 +6,4 @@ export * from './pagecontainer.js';
 export * from './pagecontent.js';
 export * from './pagefooter.js';
 export * from './pageheader.js';
+export * from './viewer.js';

ts_web/elements/letterheader.ts

@@ -7,11 +7,10 @@ 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 plugins from '../plugins.js';
-import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -22,14 +21,14 @@ declare global {
 @customElement('dedocument-letterheader')
 export class DeLetterHeader extends DeesElement {
   public static demo = () => html`
-    <dedocument-letterheader .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-letterheader>
+    <dedocument-letterheader .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-letterheader>
   `;
 
   @property({
     type: Object,
     reflect: true
   })
-  public letterData: tsclass.business.ILetter;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -60,7 +59,7 @@ export class DeLetterHeader extends DeesElement {
         display: block;
         overflow: hidden;
         top: 200px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         width: 200px;
         text-align: right;
       }
@@ -74,14 +73,14 @@ export class DeLetterHeader extends DeesElement {
       .date {
         position: absolute;
         top: 180px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         text-align: right;
       }
 
       .address {
         position: absolute;
         top: 180px;
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
+        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
       }
 
       .address .from {

ts_web/elements/page.ts

@@ -8,10 +8,12 @@ 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 plugins from '../plugins.js';
+
+import { defaultDocumentSettings } from './document.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,6 +25,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 +53,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 +61,12 @@ export class DePage extends DeesElement {
   })
   printMode = false;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -58,7 +76,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,44 +117,67 @@ 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}
+                        .documentSettings=${this.documentSettings}
                         .pageNumber="${this.pageNumber}"
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pageheader>
+                    `
+                  : ``}
                 ${this.pageNumber === 1
                   ? html`
                       <dedocument-letterheader
                         .pageNumber="${this.pageNumber}"
                         .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-letterheader>
                     `
                   : html``}
                 <dedocument-pagecontent
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
                   .pageNumber="${this.pageNumber}"
                   .pageTotalNumber="${this.pageTotalNumber}"
-          .letterData=${this.letterData}
                   ><slot></slot
                 ></dedocument-pagecontent>
+                ${this.documentSettings.enableDefaultFooter
+                  ? html`
                       <dedocument-pagefooter
                         .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                         .pageNumber="${this.pageNumber}"
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pagefooter>
+                    `
+                  : ``}
                 <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 +186,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 / plugins.shared.a4Height;
+    } else if (this.viewWidth) {
+      scale = this.viewWidth / plugins.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 = `${plugins.shared.a4Height * scale}px`;
+  }
 }

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 plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -47,8 +47,8 @@ export class DePageContainer extends DeesElement {
         background: white;
         color: #333;
         padding: 0px;
-        width: ${unsafeCSS(shared.a4Width + 'px')};
+        width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
-        height: ${unsafeCSS(shared.a4Height + 'px')};
+        height: ${unsafeCSS(plugins.shared.a4Height + 'px')};
         position: relative;
         border-radius: 3px;
         overflow: hidden;

ts_web/elements/pagecontent.ts

@@ -7,11 +7,10 @@ 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 plugins from '../plugins.js';
-import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,7 +27,7 @@ export class DePageContent extends DeesElement {
   @property({
     type: Number,
   })
-  public letterData: tsclass.business.ILetter;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -55,8 +54,8 @@ export class DePageContent extends DeesElement {
       .content {
         position: absolute;
 
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
+        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         bottom: 170px;
         overflow: visible;
       }

ts_web/elements/pagefooter.ts

@@ -7,11 +7,10 @@ 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 plugins from '../plugins.js';
-import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,7 +27,13 @@ export class DePageFooter extends DeesElement {
   @property({
     type: Object,
   })
-  letterData: tsclass.business.ILetter;
+  letterData: plugins.tsclass.business.ILetter;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number
@@ -61,7 +66,7 @@ export class DePageFooter extends DeesElement {
         right: 0px;
         height: 130px;
         content: '';
-        padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
+        padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
         grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
         grid-gap: 5px;
         border-top: 2px solid #e4002b;
@@ -70,7 +75,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .pageNumber {
         position: absolute;
         top: 0px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         background: #e4002b;
         padding: 3px;
         font-size: 9px;
@@ -81,7 +86,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .documentTitle {
         position: absolute;
         top: -18px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         background: #dddddd;
         padding: 3px;
         font-size: 9px;
@@ -96,26 +101,26 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>Address:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
           ${this.letterData.from.name}<br />
           ${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
           ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
           ${this.letterData.from.address.country}
         </div>
         <div>
-          <strong>Registration Info:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
           Amtsgericht Bremen<br />
           <i>reg-#:</i> HRB 35230 HB<br />
           <i>vat-id:</i> ${this.letterData.from.vatId}
         </div>
         <div>
-          <strong>Contact Info:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
           <i>email:</i> ${this.letterData.from.email}<br />
           <i>phone:</i> ${this.letterData.from.phone}<br />
           <i>fax:</i> ${this.letterData.from.fax}
         </div>
         <div>
-          <strong>Bank Connection:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
           <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
           <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
           <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />

ts_web/elements/pageheader.ts

@@ -7,11 +7,10 @@ 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 plugins from '../plugins.js';
-import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,7 +27,13 @@ export class DePageHeader extends DeesElement {
   @property({
     type: Object,
   })
-  public letterData: tsclass.business.ILetter = null;
+  public letterData: plugins.tsclass.business.ILetter = null;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number,
@@ -68,19 +73,23 @@ export class DePageHeader extends DeesElement {
         overflow: hidden;
         top: 130px;
         left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         height: 20px;
         line-height: 20px;
         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')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        font-family: 'Courier New', Courier, monospace;
+      }
+      .topstripe .logo img {
+        position: relative;
+        height: 25px;
       }
     `,
   ];
@@ -88,7 +97,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

@@ -1,121 +0,0 @@
-import * as tsclass from '@tsclass/tsclass';
-const fromContact: tsclass.business.IContact = {
-  name: 'Awesome From Company',
-  type: 'company',
-  description: 'a company that does stuff',
-  address: {
-    streetName: 'Awesome Street',
-    houseNumber: '5',
-    city: 'Bremen',
-    country: 'Germany',
-    postalCode: '28359',
-  },
-  vatId: 'DE12345678',
-  sepaConnection: {
-    bic: 'BPOTBEB1',
-    iban: 'BE01234567891616'
-  },
-  email: 'hello@awesome.company',
-  phone: '+49 421 1234567',
-  fax: '+49 421 1234568',
-
-};
-
-const toContact: tsclass.business.IContact = {
-  name: 'Awesome To GmbH',
-  type: 'company',
-  customerNumber: 'LL-CLIENT-123',
-  description: 'a company that does stuff',
-  address: {
-    streetName: 'Awesome Street',
-    houseNumber: '5',
-    city: 'Bremen',
-    country: 'Germany',
-    postalCode: '28359'
-  },
-  vatId: 'BE12345678',
-}
-
-export const demoLetter: tsclass.business.ILetter = {
-  versionInfo: {
-    type: 'draft',
-    version: '1.0.0',
-  },
-  accentColor: null,
-  content: {
-    textData: null,
-    timesheetData: null,
-    contractData: {
-      contractDate: Date.now(),
-      id: 'someid'
-    },
-    invoiceData: {
-      id: 'LL-INV-48765',
-      reverseCharge: true,
-      dueInDays: 30,
-      billedBy: fromContact,
-      billedTo: toContact,
-      status: null,
-      deliveryDate: new Date().getTime(),
-      periodOfPerformance: null,
-      printResult: null,
-      
-      items: [
-        {
-          name: 'Item with 19% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 19,
-          currency: 'EUR',
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 7,
-          currency: 'EUR',
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 7,
-          currency: 'EUR',
-        },
-        {
-          name: 'Item with 21% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 21,
-          currency: 'EUR',
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          currency: 'EUR',
-        },
-      ],
-    }
-  },
-  
-  date: Date.now(),
-  type: 'invoice',
-  needsCoverSheet: false,
-  objectActions: [],
-  pdf: null,
-  from: fromContact,
-  to: toContact,
-  incidenceId: null,
-  language: null,
-  legalContact: null,
-  logoUrl: null,
-  pdfAttachments: null,
-  subject: 'Invoice: LL-INV-48765',
-}

ts_web/elements/shared/index.ts

@@ -1,6 +0,0 @@
-export const a4Height = 1122;
-export const a4Width = 794;
-export const rightMargin = 70;
-export const leftMargin = 90;
-
-export * from './demoletter.js';

ts_web/elements/viewer.demo.ts

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

ts_web/elements/viewer.ts

@@ -0,0 +1,85 @@
+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 documentSettings: plugins.shared.interfaces.IDocumentSettings;
+
+  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} .documentSettings=${this.documentSettings}></dedocument-dedocument> `
+            : html``}
+        </div>
+        <div class="controls"></div>
+      </div>
+    `;
+  };
+
+  public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
+    super.updated(changedProperties);
+    if (changedProperties.has('letterData')) {
+    }
+  };
+}

ts_web/plugins.ts

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

ts_web/tspublish.json

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