feat: enhance translation and invoice layout

ts_web/elements/pagecontent.ts

@@ -8,21 +8,21 @@ import {
   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-pagecontent': DePageContent;
+    "dedocument-pagecontent": DePageContent;
   }
 }
 
-@customElement('dedocument-pagecontent')
+@customElement("dedocument-pagecontent")
 export class DePageContent extends DeesElement {
   public static demo = () => html`
-    <dedocument-pagecontent .format="${'a4'}"></dedocument-pagecontent>
+    <dedocument-pagecontent .format="${"a4"}"></dedocument-pagecontent>
   `;
 
   @property({
@@ -40,6 +40,12 @@ export class DePageContent extends DeesElement {
   })
   public pageTotalNumber: number = 1;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -49,19 +55,23 @@ export class DePageContent extends DeesElement {
     domtools.elementBasic.staticStyles,
     dedocumentSharedStyle,
     css`
-      :host {
-        color: #333;
-      }
-
       .content {
         position: absolute;
 
-        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        bottom: 170px;
+        left: var(--LEFT-MARGIN);
+        right: var(--RIGHT-MARGIN);
+        bottom: calc(var(--DPI-FACTOR) * 4);
         overflow: visible;
       }
 
+      .content.page--first {
+        top: calc(var(--DPI-FACTOR) * 9.85);
+      }
+
+      .content.page--notFirst {
+        top: calc(var(--DPI-FACTOR) * 4.5);
+      }
+
       .content .subject {
         font-size: 18px;
         font-weight: bold;
@@ -83,60 +93,31 @@ export class DePageContent extends DeesElement {
         margin-bottom: 10px;
         font-size: 10px;
       }
-
-      .continuesOnNextPage {
-        display: inline-block;
-        background: #eeeeee;
-        color: #999;
-        border-radius: 50px;
-        padding: 5px 10px;
-        margin-top: 8px;
-        font-size: 10px;
-      }
-
-      .finalPage {
-        display: inline-block;
-        background: #29b000;
-        color: #fff;
-        border-radius: 50px;
-        padding: 5px 10px;
-        margin-top: 8px;
-        font-size: 10px;
-      }
     `,
   ];
 
   public render(): TemplateResult {
+    const firstPage = this.pageNumber === 1;
     return html`
-      <style>
-        .content {
-          top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
-        }
-      </style>
-      <div class="content">
-        ${this.pageNumber === 1
+      <div class="content ${firstPage ? "page--first" : "page--notFirst"}">
+        ${firstPage
           ? html`<div class="subject">${this.letterData.subject}</div>`
-          : html`
-              <div class="subjectRepeated">
-                ${this.letterData.subject} (Page ${this.pageNumber})
-              </div>
-            `}
+          : null}
         <slot></slot>
-        ${this.pageTotalNumber !== this.pageNumber
-          ? html`<div class="continuesOnNextPage">Continues on page ${this.pageNumber + 1}</div>`
-          : html`<div class="finalPage">This is the final page of this document.</div>`}
       </div>
     `;
   }
 
-  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
+  public firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): void {
     super.firstUpdated(_changedProperties);
     this.checkOverflow();
   }
 
   public async checkOverflow() {
     await this.elementDomReady;
-    const contentContainer = this.shadowRoot.querySelector('.content');
+    const contentContainer = this.shadowRoot.querySelector(".content");
     if (contentContainer.scrollHeight > contentContainer.clientHeight) {
       return true;
     } else {