feat: enhance translation and invoice layout

ts_web/elements/document.ts

@@ -5,34 +5,35 @@ import {
   customElement,
   type TemplateResult,
   css,
-  state,
-  cssManager,
-  unsafeCSS,
   domtools,
-} from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
+} from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";
 
-export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings = {
-  enableTopDraftText: true,
-  enableDefaultHeader: true,
-  enableDefaultFooter: true,
-  languageCode: 'EN',
-  vatGroupPositions: true,
-};
+export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
+  {
+    enableTopDraftText: true,
+    enableDefaultHeader: true,
+    enableDefaultFooter: true,
+    enableFoldMarks: true,
+    enableInvoiceContractRefSection: true,
+    languageCode: "EN",
+    vatGroupPositions: true,
+    dateStyle: "short",
+  };
 
+import { DePage } from "./page.js";
+import { DeContentInvoice } from "./contentinvoice.js";
 
-import { DePage } from './page.js';
-import { DeContentInvoice } from './contentinvoice.js';
-
-import { demoFunc } from './document.demo.js';
+import { demoFunc } from "./document.demo.js";
+import { dedocumentSharedStyle } from "../style.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dedocument-dedocument': DeDocument;
+    "dedocument-dedocument": DeDocument;
   }
 }
 
-@customElement('dedocument-dedocument')
+@customElement("dedocument-dedocument")
 export class DeDocument extends DeesElement {
   public static demo = demoFunc;
 
@@ -40,7 +41,7 @@ export class DeDocument extends DeesElement {
     type: String,
     reflect: true,
   })
-  public format: 'a4' = 'a4';
+  public format: "a4" = "a4";
 
   @property({
     type: Number,
@@ -64,8 +65,8 @@ export class DeDocument extends DeesElement {
     type: Object,
     reflect: true,
     converter: (valueArg) => {
-      if (typeof valueArg === 'string') {
-        return plugins.smartjson.parseBase64(valueArg)
+      if (typeof valueArg === "string") {
+        return plugins.smartjson.parseBase64(valueArg);
       } else {
         return valueArg;
       }
@@ -77,14 +78,15 @@ export class DeDocument extends DeesElement {
     type: Object,
     reflect: true,
     converter: (valueArg) => {
-      if (typeof valueArg === 'string') {
-        return plugins.smartjson.parseBase64(valueArg)
+      if (typeof valueArg === "string") {
+        return plugins.smartjson.parseBase64(valueArg);
       } else {
         return valueArg;
       }
     },
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings =
+    defaultDocumentSettings;
 
   constructor() {
     super();
@@ -93,13 +95,10 @@ export class DeDocument extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         display: block;
-        color: #333;
-        padding: 0px;
-        position: relative;
-        font-family: 'Dees Sans', sans-serif;
       }
 
       .betweenPagesSpacer {
@@ -109,41 +108,17 @@ export class DeDocument extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html`
-      <div class="documentContainer"></div>
-    `;
+    return html` <div class="documentContainer"></div> `;
   }
 
-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ) {
     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) {
@@ -156,16 +131,15 @@ export class DeDocument extends DeesElement {
     resizeObserver.observe(this);
     this.registerGarbageFunction(() => {
       resizeObserver.disconnect();
-    })
+    });
   }
 
-  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
+  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
+    null;
   public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
   public cleanupStore: any[] = [];
 
-
   public async renderDocument() {
-
     this.latestDocumentSettings = this.documentSettings;
     this.latestRenderedLetterData = this.letterData;
 
@@ -173,7 +147,7 @@ export class DeDocument extends DeesElement {
     const cleanUpStoreNextRender = [];
 
     const domtools = await this.domtoolsPromise;
-    const documentBuildContainer = document.createElement('div');
+    const documentBuildContainer = document.createElement("div");
     cleanUpStoreCurrentRender.push(documentBuildContainer);
     document.body.appendChild(documentBuildContainer);
 
@@ -208,7 +182,7 @@ export class DeDocument extends DeesElement {
       // store current page
       cleanUpStoreNextRender.push(newPage);
       documentBuildContainer.append(newPage);
-      
+
       await currentContent.elementDomReady;
       await currentContent.trimStartToOffset(overallContentOffset);
       let newPageOverflows = await newPage.checkOverflow();
@@ -224,17 +198,18 @@ export class DeDocument extends DeesElement {
         complete = true;
       }
     }
-    
+
     for (const cleanUp of this.cleanupStore) {
       cleanUp.remove();
     }
-    this.cleanupStore = cleanUpStoreNextRender
+    this.cleanupStore = cleanUpStoreNextRender;
 
     cleanUpStoreCurrentRender.forEach((cleanUp) => {
       cleanUp.remove();
     });
 
-    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    const documentContainer =
+      this.shadowRoot.querySelector(".documentContainer");
     if (documentContainer) {
       const children = Array.from(documentContainer.children);
       children.forEach((child) => {
@@ -247,24 +222,36 @@ export class DeDocument extends DeesElement {
       documentContainer.append(page);
       // betweenPagesSpacer
       if (!this.printMode) {
-        const betweenPagesSpacerDiv = document.createElement('div');
-        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
+        const betweenPagesSpacerDiv = document.createElement("div");
+        betweenPagesSpacerDiv.classList.add("betweenPagesSpacer");
         documentContainer.appendChild(betweenPagesSpacerDiv);
       }
     }
     this.adjustDePageScaling();
   }
 
-  async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+  async updated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
     super.updated(changedProperties);
     const domtools = await this.domtoolsPromise;
-    let renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData)
-     && domtools.convenience.smartjson.deepEqualObjects(this.documentSettings, this.latestDocumentSettings);
+    let renderedDocIsUpToDate =
+      domtools.convenience.smartjson.deepEqualObjects(
+        this.letterData,
+        this.latestRenderedLetterData
+      ) &&
+      domtools.convenience.smartjson.deepEqualObjects(
+        this.documentSettings,
+        this.latestDocumentSettings
+      );
     if (!renderedDocIsUpToDate) {
       this.renderDocument();
     }
 
-    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+    if (
+      changedProperties.has("viewHeight") ||
+      changedProperties.has("viewWidth")
+    ) {
       this.adjustDePageScaling();
     }
   }
@@ -275,7 +262,7 @@ export class DeDocument extends DeesElement {
     }
     this.viewWidth = this.clientWidth;
     // Find all DePage instances within this DeDocument
-    const pages = this.shadowRoot.querySelectorAll('dedocument-page');
+    const pages = this.shadowRoot.querySelectorAll("dedocument-page");
 
     // Update each DePage instance's viewHeight and viewWidth
     pages.forEach((page: DePage) => {