changelog.md

@@ -1,61 +1,5 @@
 # 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.
 

license

@@ -1,4 +1,4 @@
-Copyright (c) 2022 Task Venture Capital GmbH (hello@task.vc)
+Copyright (c) 2022 Lossless GmbH (hello@lossless.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -16,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.6.11",
+  "version": "1.6.1",
   "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.11',
+  version: '1.6.1',
   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,7 +19,6 @@ 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
@@ -50,7 +49,6 @@ export const DE_translations: TTranslationImplementation = {
   continuesOnPage: 'Fortsetzung auf Seite',
   finalPageStatement: 'Dies ist die letzte Seite dieses Dokuments.',
   page: 'Seite',
-  vatShort: 'USt',
 };
 
 // Define Spanish translations
@@ -72,7 +70,6 @@ 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
@@ -95,7 +92,6 @@ 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
@@ -117,7 +113,6 @@ 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.11',
+  version: '1.6.1',
   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,7 +16,6 @@ import {
 } from '@design.estate/dees-element';
 import * as plugins from '../plugins.js';
 
-import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -57,10 +56,10 @@ export class DeContentInvoice extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
+        font-family: inherit;
       }
 
       .trimmedContent {
@@ -174,6 +173,7 @@ 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,33 +215,23 @@ 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 {
@@ -297,77 +287,33 @@ 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">
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-            ${plugins.shared.translation.translate(
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-              this.documentSettings.languageCode,
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-              'itemPos',
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-              'Item Pos.'
+          <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>
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'vatShort', 'VAT')}</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) => {
+          return this.letterData?.content.invoiceData?.items?.map(
-            const isHighlighted = false; // TODO: implement rest of highlight logic
+            (invoiceItem) => html`
-            return html`
+              <div class="grid invoiceLine needsDataHeader">
-              <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.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
+                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
                 </div>
                 <div class="lineItem rightAlign">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice}
+                  ${invoiceItem.vatPercentage}%
-                  ${this.letterData?.content.invoiceData.currency}
                 </div>
-                <div class="lineItem rightAlign">${invoiceItem.vatPercentage}%</div>
               </div>
-            `;
+            `
-          });
+          );
         })()}
         <div class="sums">
           <div class="sumline">
@@ -376,23 +322,17 @@ 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 += `${first ? '' : ', '}${itemIndex + 1}`;
+              itemNumbers += ` ${itemIndex + 1},`;
-              first = false;
             }
             return html`
               <div class="sumline">
                 <div class="label">
                   Vat ${vatGroupArg.vatPercentage}%
-                  ${this.documentSettings.vatGroupPositions
+                  ${this.documentSettings.vatGroupPositions ? html`
-                    ? html`
+                    <br /><span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
-                        <br /><span style="font-weight: normal"
+                  ` : html``}
-                          >(on item positions: ${itemNumbers})</span
-                        >
-                      `
-                    : html``}
                 </div>
                 <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>
@@ -407,11 +347,7 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                ${plugins.shared.translation.translate(
+                ${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
-                  this.documentSettings.languageCode,
-                  'reverseVatNote',
-                  'VAT arises on a reverse charge basis and is payable by the customer.'
-                )}
               </div>
             `
           : ``}
@@ -431,9 +367,7 @@ 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(
+                ${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
-                  this.letterData?.content.contractData.contractDate
-                ).format('MMMM D, YYYY')}.
               </div>
             `
           : html``}
@@ -460,6 +394,7 @@ ${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,35 +115,11 @@ export class DeDocument extends DeesElement {
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
-    domtools.plugins.smartdelay.delayFor(0).then(async () => {
+    domtools.plugins.smartdelay.delayFor(0).then(() => {
       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) {
@@ -161,7 +137,6 @@ 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() {
@@ -169,12 +144,11 @@ export class DeDocument extends DeesElement {
     this.latestDocumentSettings = this.documentSettings;
     this.latestRenderedLetterData = this.letterData;
 
-    const cleanUpStoreCurrentRender = [];
+    console.log(`rendering with settings:`);
-    const cleanUpStoreNextRender = [];
+    console.log(this.latestDocumentSettings);
 
     const domtools = await this.domtoolsPromise;
     const documentBuildContainer = document.createElement('div');
-    cleanUpStoreCurrentRender.push(documentBuildContainer);
     document.body.appendChild(documentBuildContainer);
 
     let pages: DePage[] = [];
@@ -183,7 +157,6 @@ 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);
@@ -195,7 +168,6 @@ 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;
@@ -204,9 +176,6 @@ 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;
@@ -223,24 +192,16 @@ export class DeDocument extends DeesElement {
       if (trimmed === 0) {
         complete = true;
       }
+      // complete = true;
+      console.log(currentContentOffset);
     }
-    
+    document.body.removeChild(content);
-    for (const cleanUp of this.cleanupStore) {
+    document.body.removeChild(documentBuildContainer);
-      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) => {
+      children.forEach((child) => documentContainer.removeChild(child));
-        documentContainer.removeChild(child);
-        child.remove();
-      });
     }
     for (const page of pages) {
       page.pageTotalNumber = pageCounter;
@@ -284,6 +245,7 @@ export class DeDocument extends DeesElement {
       }
       if (this.viewWidth) {
         page.viewWidth = this.viewWidth;
+        console.log('setting viewWidth: ', this.viewWidth);
       }
     });
   }

ts_web/elements/letterheader.ts

@@ -11,7 +11,6 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
-import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -50,7 +49,6 @@ 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;
-        overflow: hidden;
+        font-family: inherit;
       }
 
       #scaleWrapper {
@@ -196,6 +196,7 @@ export class DePage extends DeesElement {
   }
 
   private adjustScaling() {
+    console.log('page scale adjustment triggered.');
     const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
 
     if (!scaleWrapper) return;
@@ -206,11 +207,12 @@ 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 = `${plugins.shared.a4Width * scale}px`;
+    // this.style.width = `${shared.a4Width * scale}px`;
     this.style.height = `${plugins.shared.a4Height * scale}px`;
   }
 }

ts_web/elements/pagecontent.ts

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

ts_web/elements/pageheader.ts

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

ts_web/style.ts

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