1.6.11

changelog.md

@@ -1,5 +1,65 @@
 # 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
+
+- Ensure `font-family` is no longer explicitly set to inherit in `DePage` component.
+- Adjust scaling logic to properly set width and overflow based on calculated scale.
+
+## 2024-12-05 - 1.6.5 - fix(contentinvoice)
+Fix VAT group item number formatting and remove custom font style in invoice sums.
+
+- Removed custom font-family style from the invoice sums.
+- Corrected VAT group item numbers display by properly formatting and removing trailing comma.
+
+## 2024-12-05 - 1.6.4 - fix(styling)
+Consolidated shared styles for consistent font applied across various components.
+
+- Added a shared style file for consistent font family across components
+- Applied shared style to contentinvoice, letterheader, pagecontent, pagefooter, and pageheader components
+
+## 2024-12-05 - 1.6.3 - fix(ui)
+Corrects font family in contentinvoice element.
+
+- Updated the font-family for line items in contentinvoice.ts
+
+## 2024-12-05 - 1.6.2 - fix(translation)
+Corrected missing translation keys for VAT short form across multiple languages.
+
+- Fixed missing 'vatShort' translation for English, German, Spanish, French, and Italian in translation.ts file.
+
+## 2024-12-05 - 1.6.1 - fix(core)
+Ensure consistent project structure and code organization without additional changes.
+
+
 ## 2024-12-05 - 1.6.0 - feat(documentSettings + translations + vat in itemLines)
 Updated dependencies in package.json
 

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.0",
+  "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.0',
+  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_shared/translation.ts

@@ -19,6 +19,7 @@ export const EN_translations = {
   continuesOnPage: 'Continues on page',
   finalPageStatement: 'This is the final page of this document.',
   page: 'Page',
+  vatShort: 'VAT',
 } as const;
 
 // Infer keys of EN_translations
@@ -49,6 +50,7 @@ export const DE_translations: TTranslationImplementation = {
   continuesOnPage: 'Fortsetzung auf Seite',
   finalPageStatement: 'Dies ist die letzte Seite dieses Dokuments.',
   page: 'Seite',
+  vatShort: 'USt',
 };
 
 // Define Spanish translations
@@ -70,6 +72,7 @@ export const ES_translations: TTranslationImplementation = {
   continuesOnPage: 'Continúa en la página',
   finalPageStatement: 'Esta es la última página de este documento.',
   page: 'Página',
+  vatShort: 'IVA',
 };
 
 // Define French translations
@@ -92,6 +95,7 @@ export const FR_translations: TTranslationImplementation = {
   continuesOnPage: 'Continue sur la page',
   finalPageStatement: 'Ceci est la dernière page de ce document.',
   page: 'Page',
+  vatShort: 'TVA',
 };
 
 // Define Italian translations
@@ -113,6 +117,7 @@ export const IT_translations: TTranslationImplementation = {
   continuesOnPage: 'Continua alla pagina',
   finalPageStatement: 'Questa è l\'ultima pagina di questo documento.',
   page: 'Pagina',
+  vatShort: 'IVA',
 };
 
 // Language Code Map

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.6.0',
+  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

@@ -16,6 +16,7 @@ import {
 } from '@design.estate/dees-element';
 import * as plugins from '../plugins.js';
 
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -56,10 +57,10 @@ export class DeContentInvoice extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
-        font-family: inherit;
       }
 
       .trimmedContent {
@@ -173,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
@@ -215,23 +215,33 @@ export class DeContentInvoice extends DeesElement {
           .lineItem {
             font-size: 12px;
             padding: 5px;
-            font-family: 'Dees Code', monospace;
             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;
             padding-left: 50%;
-            font-family: 'Dees Code', monospace;
           }
 
           .sums .sumline {
@@ -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 rightAlign">
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
+            ${plugins.shared.translation.translate(
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
+              this.documentSettings.languageCode,
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
+              'itemPos',
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
+              'Item Pos.'
-          <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>
+          <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(
+          return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => {
-            (invoiceItem) => html`
+            const isHighlighted = false; // TODO: implement rest of highlight logic
-              <div class="grid invoiceLine needsDataHeader">
+            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">
@@ -322,17 +376,23 @@ export class DeContentInvoice extends DeesElement {
           </div>
           ${this.getVatGroups().map((vatGroupArg) => {
             let itemNumbers = '';
+            let first = true;
             for (const item of vatGroupArg.items) {
               const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
-              itemNumbers += ` ${itemIndex + 1},`;
+              itemNumbers += `${first ? '' : ', '}${itemIndex + 1}`;
+              first = false;
             }
             return html`
               <div class="sumline">
                 <div class="label">
                   Vat ${vatGroupArg.vatPercentage}%
-                  ${this.documentSettings.vatGroupPositions ? html`
+                  ${this.documentSettings.vatGroupPositions
-                    <br /><span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
+                    ? html`
-                  ` : html``}
+                        <br /><span style="font-weight: normal"
+                          >(on item positions: ${itemNumbers})</span
+                        >
+                      `
+                    : html``}
                 </div>
                 <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>
@@ -347,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>
             `
           : ``}
@@ -367,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``}
@@ -394,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:`);
+    const cleanUpStoreCurrentRender = [];
-    console.log(this.latestDocumentSettings);
+    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/letterheader.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,6 +50,7 @@ export class DeLetterHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;

ts_web/elements/page.ts

@@ -77,7 +77,7 @@ export class DePage extends DeesElement {
     css`
       :host {
         display: block;
-        font-family: inherit;
+        overflow: hidden;
       }
 
       #scaleWrapper {
@@ -196,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;
@@ -207,12 +206,11 @@ 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.width = `${shared.a4Width * scale}px`;
+    this.style.width = `${plugins.shared.a4Width * scale}px`;
     this.style.height = `${plugins.shared.a4Height * scale}px`;
   }
 }

ts_web/elements/pagecontent.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -46,10 +47,10 @@ export class DePageContent extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
-        font-family: inherit;
       }
 
       .content {
@@ -137,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;
     }
   }

ts_web/elements/pagefooter.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,6 +53,7 @@ export class DePageFooter extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;

ts_web/elements/pageheader.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,6 +53,7 @@ export class DePageHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;

ts_web/style.ts

@@ -0,0 +1,7 @@
+import { css } from '@design.estate/dees-element';
+
+export const dedocumentSharedStyle = css`
+  :host {
+    font-family: 'Exo 2';
+  }
+`;