1.6.11

changelog.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 2025-01-01 - 1.6.11 - fix(license)
+Update copyright notice in license to reflect new ownership
+
+- Updated copyright from Lossless GmbH to Task Venture Capital GmbH.
+
+## 2024-12-08 - 1.6.10 - fix(core)
+Improve stability and performance of document generation
+
+
+## 2024-12-08 - 1.6.9 - fix(contentinvoice.ts)
+Improve invoice item layout and fix alignment issues.
+
+- Fixed missing border on last invoice item.
+- Added highlighted style for invoice lines.
+- Corrected alignment and display of invoice item details.
+- Included VAT percentage display adjustments.
+
+## 2024-12-07 - 1.6.8 - fix(rendering and logging)
+Removed debug logging from document rendering process.
+
+- Removed console logs from content invoice, document rendering, page scaling, and overflow checking.
+
+## 2024-12-07 - 1.6.7 - fix(document rendering)
+Fixed overflow issues in document and page elements
+
+- Ensured content overflow handling in document.ts
+- Adjusted page element overflow settings in page.ts
+
 ## 2024-12-07 - 1.6.6 - fix(page-render)
 Fix layout scaling adjustment for page component
 

license

@@ -1,4 +1,4 @@
-Copyright (c) 2022 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2022 Task Venture Capital GmbH (hello@task.vc)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.6.6",
+  "version": "1.6.11",
   "private": false,
   "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
   "main": "dist_ts_web/index.js",

ts/00_commitinfo_data.ts

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/contentinvoice.ts

@@ -18,7 +18,6 @@ import * as plugins from '../plugins.js';
 
 import { dedocumentSharedStyle } from '../style.js';
 
-
 declare global {
   interface HTMLElementTagNameMap {
     'dedocument-contentinvoice': DeContentInvoice;
@@ -175,7 +174,6 @@ export class DeContentInvoice extends DeesElement {
       (await this.getContentNodes()).trimmedContent.append(
         (await this.getContentNodes()).currentContent.children.item(0)
       );
-      console.log('hey' + this.shadowRoot.children.length);
     }
     if (
       (await this.getContentNodes()).currentContent.children
@@ -220,14 +218,26 @@ export class DeContentInvoice extends DeesElement {
             border-right: 1px dashed #ccc;
           }
 
+          .lineItem:last-child {
+            border-right: none;
+          }
+
           .lineItem.rightAlign {
             text-align: right;
           }
 
           .invoiceLine {
+            background: #ffffff00;
             border-bottom: 1px dotted #ccc;
           }
 
+          .invoiceLine.highlighted {
+            transition: background 0.2s;
+            background: #ffc18f;
+            border: 1px solid #ff9d4d;
+            box-sizing: content-box;
+          }
+
           .sums {
             margin-top: 5px;
             font-size: 12px;
@@ -287,33 +297,77 @@ 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 rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'vatShort', 'VAT')}</div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'itemPos',
+              'Item Pos.'
+            )}
+          </div>
+          <div class="lineItem">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'description',
+              'Description'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'quantity',
+              'Quantity'
+            )}
+          </div>
+          <div class="lineItem">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'unitType',
+              'Unit Type'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'unitNetPrice',
+              'Unit Net Price'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'totalNetPrice',
+              'Total Net Price'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'vatShort',
+              'VAT'
+            )}
+          </div>
         </div>
         ${(() => {
           let counter = 1;
-          return this.letterData?.content.invoiceData?.items?.map(
-            (invoiceItem) => html`
-              <div class="grid invoiceLine needsDataHeader">
+          return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => {
+            const isHighlighted = false; // TODO: implement rest of highlight logic
+            return html`
+              <div class="grid invoiceLine needsDataHeader ${isHighlighted ? 'highlighted' : ''}">
                 <div class="lineItem rightAlign">${counter++}</div>
                 <div class="lineItem">${invoiceItem.name}</div>
                 <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
                 <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem rightAlign">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
                 <div class="lineItem rightAlign">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
+                  ${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
                 </div>
                 <div class="lineItem rightAlign">
-                  ${invoiceItem.vatPercentage}%
+                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice}
+                  ${this.letterData?.content.invoiceData.currency}
                 </div>
+                <div class="lineItem rightAlign">${invoiceItem.vatPercentage}%</div>
               </div>
-            `
-          );
+            `;
+          });
         })()}
         <div class="sums">
           <div class="sumline">
@@ -332,9 +386,13 @@ export class DeContentInvoice extends DeesElement {
               <div class="sumline">
                 <div class="label">
                   Vat ${vatGroupArg.vatPercentage}%
-                  ${this.documentSettings.vatGroupPositions ? html`
-                    <br /><span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
-                  ` : html``}
+                  ${this.documentSettings.vatGroupPositions
+                    ? html`
+                        <br /><span style="font-weight: normal"
+                          >(on item positions: ${itemNumbers})</span
+                        >
+                      `
+                    : html``}
                 </div>
                 <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>
@@ -349,7 +407,11 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                ${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', '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>
             `
           : ``}
@@ -369,7 +431,9 @@ export class DeContentInvoice extends DeesElement {
               <div class="infoBox">
                 <div class="label">Referenced contract:</div>
                 This invoice is adhering to agreements made by contract between the parties on
-                ${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
+                ${plugins.smarttime.ExtendedDate.fromMillis(
+                  this.letterData?.content.contractData.contractDate
+                ).format('MMMM D, YYYY')}.
               </div>
             `
           : html``}
@@ -396,7 +460,6 @@ ${this.letterData.content.invoiceData.id}
 EPC QR Code`,
       (error) => {
         if (error) console.error(error);
-        console.log('success!');
       }
     );
     contentNodes.currentContent.querySelector('.paymentCode').append(canvas);

ts_web/elements/document.ts

@@ -115,11 +115,35 @@ export class DeDocument extends DeesElement {
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
-    domtools.plugins.smartdelay.delayFor(0).then(() => {
+    domtools.plugins.smartdelay.delayFor(0).then(async () => {
       this.documentSettings = {
         ...defaultDocumentSettings,
         ...this.documentSettings,
       }
+
+      while (false) {
+        await domtools.plugins.smartdelay.delayFor(1000);
+        this.letterData = {
+          ...this.letterData,
+          content: {
+            ...this.letterData.content,
+            invoiceData: {
+              ...this.letterData.content.invoiceData,
+              items: [
+                ...this.letterData.content.invoiceData.items,
+                {
+                  name: 'Test Item',
+                  unitQuantity: 1,
+                  unitNetPrice: 100,
+                  unitType: 'hours',
+                  vatPercentage: 19,
+                  position: 1,
+                },
+              ],
+            },
+          }
+        }
+      }
     });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -137,6 +161,7 @@ export class DeDocument extends DeesElement {
 
   public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
   public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
+  public cleanupStore: any[] = [];
 
 
   public async renderDocument() {
@@ -144,11 +169,12 @@ export class DeDocument extends DeesElement {
     this.latestDocumentSettings = this.documentSettings;
     this.latestRenderedLetterData = this.letterData;
 
-    console.log(`rendering with settings:`);
-    console.log(this.latestDocumentSettings);
+    const cleanUpStoreCurrentRender = [];
+    const cleanUpStoreNextRender = [];
 
     const domtools = await this.domtoolsPromise;
     const documentBuildContainer = document.createElement('div');
+    cleanUpStoreCurrentRender.push(documentBuildContainer);
     document.body.appendChild(documentBuildContainer);
 
     let pages: DePage[] = [];
@@ -157,6 +183,7 @@ export class DeDocument extends DeesElement {
 
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
+    cleanUpStoreCurrentRender.push(content);
     content.letterData = this.letterData;
     content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
@@ -168,6 +195,7 @@ export class DeDocument extends DeesElement {
     while (!complete) {
       pageCounter++;
       const currentContent = content.cloneNode(true) as DeContentInvoice;
+      cleanUpStoreNextRender.push(currentContent);
       const newPage = new DePage();
       newPage.printMode = this.printMode;
       newPage.letterData = this.letterData;
@@ -176,6 +204,9 @@ export class DeDocument extends DeesElement {
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);
       newPage.pageTotalNumber = pageCounter;
+
+      // store current page
+      cleanUpStoreNextRender.push(newPage);
       documentBuildContainer.append(newPage);
       
       await currentContent.elementDomReady;
@@ -192,16 +223,24 @@ export class DeDocument extends DeesElement {
       if (trimmed === 0) {
         complete = true;
       }
-      // complete = true;
-      console.log(currentContentOffset);
     }
-    document.body.removeChild(content);
-    document.body.removeChild(documentBuildContainer);
+    
+    for (const cleanUp of this.cleanupStore) {
+      cleanUp.remove();
+    }
+    this.cleanupStore = cleanUpStoreNextRender
+
+    cleanUpStoreCurrentRender.forEach((cleanUp) => {
+      cleanUp.remove();
+    });
 
     const documentContainer = this.shadowRoot.querySelector('.documentContainer');
     if (documentContainer) {
       const children = Array.from(documentContainer.children);
-      children.forEach((child) => documentContainer.removeChild(child));
+      children.forEach((child) => {
+        documentContainer.removeChild(child);
+        child.remove();
+      });
     }
     for (const page of pages) {
       page.pageTotalNumber = pageCounter;
@@ -245,7 +284,6 @@ export class DeDocument extends DeesElement {
       }
       if (this.viewWidth) {
         page.viewWidth = this.viewWidth;
-        console.log('setting viewWidth: ', this.viewWidth);
       }
     });
   }

ts_web/elements/page.ts

@@ -77,6 +77,7 @@ export class DePage extends DeesElement {
     css`
       :host {
         display: block;
+        overflow: hidden;
       }
 
       #scaleWrapper {
@@ -195,7 +196,6 @@ export class DePage extends DeesElement {
   }
 
   private adjustScaling() {
-    console.log('page scale adjustment triggered.');
     const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
 
     if (!scaleWrapper) return;
@@ -206,12 +206,10 @@ export class DePage extends DeesElement {
     } 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.overflow = 'hidden';
     this.style.width = `${plugins.shared.a4Width * scale}px`;
     this.style.height = `${plugins.shared.a4Height * scale}px`;
   }

ts_web/elements/pagecontent.ts

@@ -138,10 +138,8 @@ export class DePageContent extends DeesElement {
     await this.elementDomReady;
     const contentContainer = this.shadowRoot.querySelector('.content');
     if (contentContainer.scrollHeight > contentContainer.clientHeight) {
-      console.log('overflows');
       return true;
     } else {
-      console.log('does not overflow!');
       return false;
     }
   }