@design.estate/dees-document 1.6.9 → 2.0.2

package/ts_web/elements/document.demo.ts

@@ -1,7 +1,10 @@
-import * as plugins from '../plugins.js';
+import * as plugins from "../plugins.js";
 
-import { html } from '@design.estate/dees-element';
+import { html } from "@design.estate/dees-element";
 
 export const demoFunc = () => html`
-<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
-`;
+  <dedocument-dedocument
+    .format="${"a4"}"
+    .letterData=${plugins.shared.demoLetter}
+  ></dedocument-dedocument>
+`;

package/ts_web/elements/document.ts

@@ -5,34 +5,34 @@ import {
   customElement,
   type TemplateResult,
   css,
-  state,
-  cssManager,
-  unsafeCSS,
   domtools,
-} 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,
-};
-
-
-import { DePage } from './page.js';
-import { DeContentInvoice } from './contentinvoice.js';
-
-import { demoFunc } from './document.demo.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,
+    enableFoldMarks: true,
+    enableInvoiceContractRefSection: true,
+    languageCode: "EN",
+    vatGroupPositions: true,
+    dateStyle: "short",
+  };
+
+import { DePage } from "./page.js";
+import { DeContentInvoice } from "./contentinvoice.js";
+
+import { demoFunc } from "./document.demo.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,51 +40,52 @@ export class DeDocument extends DeesElement {
     type: String,
     reflect: true,
   })
-  public format: 'a4' = 'a4';
+  accessor format: "a4" = "a4";
 
   @property({
     type: Number,
     reflect: true,
   })
-  public viewWidth: number = null;
+  accessor viewWidth: number = null;
 
   @property({
     type: Number,
     reflect: true,
   })
-  public viewHeight: number = null;
+  accessor viewHeight: number = null;
 
   @property({
     type: Boolean,
     reflect: true,
   })
-  printMode = false;
+  accessor printMode = false;
 
   @property({
     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 letterData: plugins.tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.business.TLetter;
 
   @property({
     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;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings =
+    defaultDocumentSettings;
 
   constructor() {
     super();
@@ -96,10 +97,6 @@ export class DeDocument extends DeesElement {
     css`
       :host {
         display: block;
-        color: #333;
-        padding: 0px;
-        position: relative;
-        font-family: 'Dees Sans', sans-serif;
       }
 
       .betweenPagesSpacer {
@@ -109,41 +106,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 +129,15 @@ export class DeDocument extends DeesElement {
     resizeObserver.observe(this);
     this.registerGarbageFunction(() => {
       resizeObserver.disconnect();
-    })
+    });
   }
 
-  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
-  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
+  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
+    null;
+  public latestRenderedLetterData: plugins.tsclass.business.TLetter = null;
   public cleanupStore: any[] = [];
 
-
   public async renderDocument() {
-
     this.latestDocumentSettings = this.documentSettings;
     this.latestRenderedLetterData = this.letterData;
 
@@ -173,7 +145,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);
 
@@ -184,7 +156,8 @@ export class DeDocument extends DeesElement {
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
     cleanUpStoreCurrentRender.push(content);
-    content.letterData = this.letterData;
+    content.letterData = this
+      .letterData as unknown as plugins.tsclass.finance.TInvoice;
     content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
 
@@ -208,7 +181,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 +197,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 +221,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 +261,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) => {

package/ts_web/elements/index.ts

@@ -1,9 +1,10 @@
-export * from './contentinvoice.js';
-export * from './document.js';
-export * from './letterheader.js';
-export * from './page.js';
-export * from './pagecontainer.js';
-export * from './pagecontent.js';
-export * from './pagefooter.js';
-export * from './pageheader.js';
-export * from './viewer.js';
+export * from "./contentinvoice.js";
+export * from "./document.js";
+export * from "./letterheader.js";
+export * from "./page.js";
+export * from "./pagecontainer.js";
+export * from "./pagecontent.js";
+export * from "./pagefooter.js";
+export * from "./pageheader.js";
+export * from "./viewer.js";
+export * from "./paymentcode.js";

package/ts_web/elements/letterheader.ts

@@ -5,43 +5,51 @@ import {
   customElement,
   type TemplateResult,
   css,
-  cssManager,
   unsafeCSS,
   domtools,
-} from '@design.estate/dees-element';
+} from "@design.estate/dees-element";
 
-import * as plugins from '../plugins.js';
-import { dedocumentSharedStyle } from '../style.js';
+import * as plugins from "../plugins.js";
+import { dedocumentSharedStyle } from "../style.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dedocument-letterheader': DeLetterHeader;
+    "dedocument-letterheader": DeLetterHeader;
   }
 }
 
-@customElement('dedocument-letterheader')
+@customElement("dedocument-letterheader")
 export class DeLetterHeader extends DeesElement {
   public static demo = () => html`
-    <dedocument-letterheader .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-letterheader>
+    <dedocument-letterheader
+      .format="${"a4"}"
+      .letterData=${plugins.shared.demoLetter}
+    ></dedocument-letterheader>
   `;
 
   @property({
     type: Object,
-    reflect: true
+    reflect: true,
   })
-  public letterData: plugins.tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.finance.TInvoice;
 
   @property({
     type: Number,
     reflect: true,
   })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;
 
   @property({
     type: Number,
     reflect: true,
   })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   constructor() {
     super();
@@ -52,19 +60,29 @@ export class DeLetterHeader extends DeesElement {
     domtools.elementBasic.staticStyles,
     dedocumentSharedStyle,
     css`
-      :host {
-        color: #333;
+      .address {
+        position: absolute;
+        top: calc(var(--DPI-FACTOR) * 4.5);
+        left: var(--LEFT-MARGIN);
+      }
+
+      .date {
+        position: absolute;
+        top: calc(var(--DPI-FACTOR) * 4.5);
+        right: var(--RIGHT-MARGIN);
+        text-align: right;
       }
 
       .recepientInfo {
         position: absolute;
         display: block;
         overflow: hidden;
-        top: 200px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        top: calc(var(--DPI-FACTOR) * 5.5);
+        right: var(--RIGHT-MARGIN);
         width: 200px;
         text-align: right;
       }
+
       .recepientInfo .label {
         margin-top: 10px;
         margin-bottom: 3px;
@@ -72,19 +90,6 @@ export class DeLetterHeader extends DeesElement {
         font-weight: bold;
       }
 
-      .date {
-        position: absolute;
-        top: 180px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        text-align: right;
-      }
-
-      .address {
-        position: absolute;
-        top: 180px;
-        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
-      }
-
       .address .from {
         font-size: 10px;
       }
@@ -95,31 +100,93 @@ export class DeLetterHeader extends DeesElement {
     `,
   ];
 
+  private renderDeliveryDate(from: Date, to: Date): TemplateResult {
+    if (this.letterData.accountingDocType !== "invoice") return null;
+    const dateFormat = new Intl.DateTimeFormat(
+      this.documentSettings.languageCode,
+      { dateStyle: this.documentSettings.dateStyle }
+    );
+
+    let formattedFrom = from ? dateFormat.format(from) : null;
+    let formattedTo = to ? dateFormat.format(to) : null;
+
+    const isSameDay = formattedFrom === formattedTo;
+
+    if (isSameDay) {
+      return html`<div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@periodOfPerformance.day"
+          )}
+        </div>
+        <span> ${formattedFrom} </span>`;
+    } else {
+      return html`<div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@periodOfPerformance.range"
+          )}
+        </div>
+        <span> ${formattedFrom} - ${formattedTo}</span>`;
+    }
+  }
+
   public render(): TemplateResult {
     return html`
       <div class="date">
-        ${new Date(this.letterData.date).getDate()}. ${new Date(this.letterData.date).toLocaleString('default', { month: 'long' })}
-        ${new Date(this.letterData.date).getFullYear()}
+        ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+          dateStyle: "long",
+        }).format(new Date(this.letterData.date))}
       </div>
       <div class="address">
         <div class="from">
-          ${this.letterData.from.name}, ${this.letterData.from.address.streetName}
-          ${this.letterData.from.address.houseNumber}, ${this.letterData.from.address.postalCode}
-          ${this.letterData.from.address.city}, ${this.letterData.from.address.country}
+          ${this.letterData.from.name},
+          ${this.letterData.from.address.streetName}
+          ${this.letterData.from.address.houseNumber},
+          ${this.letterData.from.address.postalCode}
+          ${this.letterData.from.address.city},
+          ${this.letterData.from.address.country}
         </div>
         <div class="to">
           ${this.letterData.to.name}<br />
-          ${this.letterData.to.address.streetName} ${this.letterData.to.address.houseNumber}<br />
-          ${this.letterData.to.address.postalCode} ${this.letterData.to.address.city}<br />
+          ${this.letterData.to.address.streetName}
+          ${this.letterData.to.address.houseNumber}<br />
+          ${this.letterData.to.address.postalCode}
+          ${this.letterData.to.address.city}<br />
           ${this.letterData.from.address.country}
         </div>
       </div>
       <div class="recepientInfo">
-        <div class="label">your customer id:</div>
-        ${this.letterData.to.customerNumber || 'not registered'}
+        <div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@customer.number"
+          )}
+        </div>
+        ${this.letterData.to.customerNumber || "not registered"}
+
+        <div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@vat.yourId"
+          )}
+        </div>
+        ${this.letterData.to.registrationDetails.vatId || "not provided"}
 
-        <div class="label">your vat id on file:</div>
-        ${this.letterData.to.vatId || 'not provided'}
+        <!-- TODO: Make use of components -->
+        ${this.letterData.accountingDocType === "invoice"
+          ? html` <div class="label">
+                ${plugins.shared.translation.translate(
+                  this.documentSettings.languageCode,
+                  "letterhead@@invoice.number"
+                )}
+              </div>
+              ${this.letterData.id || "not registered"}`
+          : null}
+        ${this.renderDeliveryDate(
+          new Date(this.letterData.periodOfPerformance?.from),
+          new Date(this.letterData.periodOfPerformance?.to)
+        )}
       </div>
     `;
   }