1.0.102

changelog.md

@@ -0,0 +1,26 @@
+# Changelog
+
+## 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,40 @@
   "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 comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.",
       "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",
+        "custom elements",
+        "QR code",
+        "smart contracts",
+        "templating",
+        "dynamic rendering",
+        "responsive design",
+        "modular development",
+        "lightweight",
+        "efficient",
+        "finance",
+        "business"
+      ]
     }
   },
   "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.95",
+  "version": "1.0.102",
   "private": false,
-  "description": "a catalog for creating documents like invoices",
+  "description": "A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.",
   "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-element": "^2.0.23",
-    "@design.estate/dees-wcctools": "^1.0.76",
-    "@git.zone/tsrun": "^1.2.44",
-    "@push.rocks/smartfile": "^10.0.26",
-    "@push.rocks/smartjson": "^5.0.10",
-    "@push.rocks/smartpath": "^5.0.5",
-    "@push.rocks/smartpdf": "^3.0.16",
-    "@push.rocks/smarttime": "^4.0.1",
-    "@tsclass/tsclass": "^4.0.46",
-    "@types/qrcode": "^1.5.2",
-    "qrcode": "^1.5.3"
+    "@design.estate/dees-domtools": "^2.0.65",
+    "@design.estate/dees-element": "^2.0.39",
+    "@design.estate/dees-wcctools": "^1.0.90",
+    "@git.zone/tsrun": "^1.3.3",
+    "@push.rocks/smartfile": "^11.0.21",
+    "@push.rocks/smartjson": "^5.0.20",
+    "@push.rocks/smartpath": "^5.0.18",
+    "@push.rocks/smartpdf": "^3.1.7",
+    "@push.rocks/smarttime": "^4.0.8",
+    "@tsclass/tsclass": "^4.1.2",
+    "@types/qrcode": "^1.5.5",
+    "qrcode": "^1.5.4"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.66",
-    "@git.zone/tsbundle": "^2.0.8",
-    "@git.zone/tstest": "^1.0.77",
-    "@git.zone/tswatch": "^2.0.7",
-    "@push.rocks/projectinfo": "^5.0.1",
-    "@push.rocks/tapbundle": "^5.0.8"
+    "@git.zone/tsbuild": "^2.2.0",
+    "@git.zone/tsbundle": "^2.1.0",
+    "@git.zone/tstest": "^1.0.90",
+    "@git.zone/tswatch": "^2.0.25",
+    "@push.rocks/projectinfo": "^5.0.2",
+    "@push.rocks/tapbundle": "^5.5.3"
   },
   "files": [
     "ts/**/*",
@@ -62,5 +62,23 @@
   "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",
+    "custom elements",
+    "QR code",
+    "smart contracts",
+    "templating",
+    "dynamic rendering",
+    "responsive design",
+    "modular development",
+    "lightweight",
+    "efficient",
+    "finance",
+    "business"
+  ]
 }

readme.hints.md

@@ -0,0 +1 @@
+ 

readme.md

@@ -1,7 +1,144 @@
-# @design.estate/private/dedocument-catalog
+# @design.estate/dees-document
 a catalog for creating documents like invoices
 
-## Usage
+## Install
+To install `@design.estate/dees-document`, run the following command in your project directory:
+```shell
+npm install @design.estate/dees-document --save
+```
 
-Use TypeScript for best in class intellisense
-For further information read the linked docs at the top of this readme.
+This will add `@design.estate/dees-document` to your project's dependencies and ensure it's installed into your `node_modules` folder.
+
+## Usage
+The `@design.estate/dees-document` package is a comprehensive toolkit for creating various types of documents, such as invoices, with ease. It leverages modern ECMAScript (ES) modules and TypeScript for a type-safe, developer-friendly experience. Below, you'll find detailed examples covering how to utilize the package to its full potential.
+
+### Setting Up the Document Service
+Before diving into creating documents, you first need to set up the document service. This involves importing the necessary modules and initializing the service instance.
+
+```typescript
+import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
+
+async function setupPdfService() {
+  const options: IPdfServiceConstructorOptions = {
+    // Configuration options here
+  };
+  
+  const pdfService = await PdfService.createAndStart(options);
+  console.log('PDF Service started successfully.');
+  return pdfService;
+}
+```
+
+In the example above, we import `PdfService` from the package and use its `createAndStart` method to initialize it with optional configuration settings. Replace `// Configuration options here` with any specific options your project may require.
+
+### Creating a Simple Invoice
+After setting up the document service, you can proceed to create documents such as invoices. Here, we'll demonstrate how to create a basic invoice.
+
+#### Define the Invoice Data Structure
+First, define the basic structure of your invoice. This involves specifying details like the sender, recipient, items, 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"
+  },
+};
+```
+
+In this structure, `invoiceData` outlines essential details for an invoice document, using the `ILetter` interface. It includes information about both the sender (`from`) and the recipient (`to`), as well as the invoiced items under `content.invoiceData.items`.
+
+#### Generate the Invoice PDF
+With the invoice data ready, you can now generate the PDF using the `PdfService` instance.
+
+```typescript
+async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
+  const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
+  console.log('Invoice PDF generated successfully.');
+
+  // Here, you can save the PDF to a file, send it over a network, etc.
+}
+```
+
+The method `createPdfFromLetterObject` receives the invoice data and returns a `Buffer` containing the PDF. You can then save this PDF to the filesystem, send it over email, or perform any other required actions.
+
+#### Complete Example Integration
+Combining everything, your complete script to set up the service, define invoice data, and generate a PDF invoice might look something like this:
+
+```typescript
+async function main() {
+  const pdfService = await setupPdfService();
+  await generateInvoice(pdfService, invoiceData);
+}
+
+main().then(() => console.log('Invoice generation process completed.'));
+```
+
+### Beyond Invoices
+The `@design.estate/dees-document` package is not limited to invoices alone. It's designed to handle a wide range of document types. The modular architecture allows for the customizable construction of documents, enabling you to tailor the output to meet precise requirements.
+
+For instance, you can create contracts, reports, and other document types using a similar approach—by defining the content structure and utilizing the PDF service to generate the document. The package's flexibility and extensibility make it an invaluable tool in any document generation workflow.
+
+### Advanced Usage
+For more advanced scenarios, such as custom styling, embedding images, and handling more complex document structures, refer to the package's documentation. It provides comprehensive details and examples to help you fully leverage the capabilities of `@design.estate/dees-document`.
+
+## License and Legal Information
+
+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

@@ -43,7 +43,7 @@ const testLetterData: plugins.tsclass.business.ILetter = {
           unitNetPrice: 1200,
           unitType: 'item',
           vatPercentage: 0,
-          currency: 'EUR',
+          position: 1,
         },
       ],
     },

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.95',
-  description: 'a catalog for creating documents like invoices'
+  version: '1.0.102',
+  description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
 }

ts/classes.pdfservice.ts

@@ -10,6 +10,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;
 

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.95',
-  description: 'a catalog for creating documents like invoices'
+  version: '1.0.102',
+  description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
 }

ts_web/elements/contentinvoice.ts

@@ -292,9 +292,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 +343,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

@@ -18,6 +18,7 @@ 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,27 +28,29 @@ declare global {
 
 @customElement('dedocument-dedocument')
 export class DeDocument extends DeesElement {
-  public static demo = () => html`
-    <dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
-  `;
+  public static demo = demoFunc;
 
   @property({
     type: String,
+    reflect: true,
   })
   public format: 'a4' = 'a4';
 
   @property({
     type: Number,
+    reflect: true,
   })
   public viewWidth: number = null;
 
   @property({
     type: Number,
+    reflect: true,
   })
   public viewHeight: number = null;
 
   @property({
     type: Boolean,
+    reflect: true,
   })
   printMode = false;
 
@@ -61,7 +64,6 @@ export class DeDocument extends DeesElement {
         return valueArg;
       }
     },
-
   })
   public letterData: plugins.tsclass.business.ILetter;
 
@@ -86,7 +88,7 @@ export class DeDocument extends DeesElement {
       }
 
       .betweenPagesSpacer {
-        height: 20px;
+        height: 16px;
       }
     `,
   ];
@@ -107,6 +109,10 @@ export class DeDocument extends DeesElement {
       }
     });
     resizeObserver.observe(this);
+    this.registerGarbageFunction(() => {
+      resizeObserver.disconnect();
+    })
+    
     if (this.letterDataUrl) {
       const response = await fetch(this.letterDataUrl);
       this.letterData = await response.json();
@@ -114,17 +120,21 @@ export class DeDocument extends DeesElement {
     this.renderDocument();
   }
 
+  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
+
+
   public async renderDocument() {
     const domtools = await this.domtoolsPromise;
     const documentContainer = this.shadowRoot.querySelector('.documentContainer');
     let pages: DePage[] = [];
     let pageCounter = 0;
     let complete = false;
-    const content: DeContentInvoice = document.createElement(
-      'dedocument-contentinvoice'
-    ) as DeContentInvoice;
+    
+    // lets append the content
+    const content: DeContentInvoice = new DeContentInvoice();
     content.letterData = this.letterData;
     document.body.appendChild(content);
+
     await domtools.convenience.smartdelay.delayFor(0);
     let overallContentOffset: number = 0;
     let currentContentOffset: number;
@@ -169,10 +179,16 @@ export class DeDocument extends DeesElement {
       page.pageTotalNumber = pageCounter;
     }
     this.adjustDePageScaling();
+    this.latestRenderedLetterData = this.letterData;
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+  async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
+    const domtools = await this.domtoolsPromise;
+    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
+    if (!renderedDocIsUpToDate) {
+      this.renderDocument();
+    }
 
     if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
       this.adjustDePageScaling();

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

@@ -47,7 +47,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,
@@ -64,6 +64,7 @@ export class DePage extends DeesElement {
     domtools.elementBasic.staticStyles,
     css`
       :host {
+        display: block;
       }
 
       #scaleWrapper {
@@ -106,6 +107,8 @@ export class DePage extends DeesElement {
     return html`
       <div id="scaleWrapper">
         <dedocument-pagecontainer .printMode=${this.printMode}>
+          ${this.letterData
+            ? html`
                 <dedocument-pageheader
                   .letterData=${this.letterData}
                   .pageNumber="${this.pageNumber}"
@@ -142,6 +145,10 @@ export class DePage extends DeesElement {
                       `
                     : html``}
                 </div>
+              `
+            : html`
+              <slot></slot>
+            `}
         </dedocument-pagecontainer>
       </div>
     `;
@@ -155,14 +162,14 @@ export class DePage extends DeesElement {
 
   updated(changedProperties: Map<string | number | symbol, unknown>): void {
     super.updated(changedProperties);
-    if (changedProperties.has("viewHeight") || changedProperties.has("viewWidth")) {
+    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
       this.adjustScaling();
     }
   }
 
   private adjustScaling() {
-    console.log('page scale adjustment triggered.')
-    const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector("#scaleWrapper");
+    console.log('page scale adjustment triggered.');
+    const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
 
     if (!scaleWrapper) return;
 
@@ -177,7 +184,7 @@ export class DePage extends DeesElement {
 
     // Adjust the outer dimensions so they match the scaled content
 
-    scaleWrapper.style.width = `${shared.a4Width * scale}px`;
-    scaleWrapper.style.height = `${shared.a4Height * scale}px`;
+    // this.style.width = `${shared.a4Width * scale}px`;
+    this.style.height = `${shared.a4Height * scale}px`;
   }
 }

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/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')) {
+    }
+  };
+}