feat: enhance translation and invoice layout

ts_web/elements/pageheader.ts

@@ -7,22 +7,22 @@ import {
   css,
   cssManager,
   unsafeCSS,
-  domtools
-} from '@design.estate/dees-element';
+  domtools,
+} 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-pageheader': DePageHeader;
+    "dedocument-pageheader": DePageHeader;
   }
 }
 
-@customElement('dedocument-pageheader')
+@customElement("dedocument-pageheader")
 export class DePageHeader extends DeesElement {
   public static demo = () => html`
-    <dedocument-pageheader .format="${'a4'}"></dedocument-pageheader>
+    <dedocument-pageheader .format="${"a4"}"></dedocument-pageheader>
   `;
 
   @property({
@@ -75,7 +75,7 @@ export class DePageHeader extends DeesElement {
         overflow: hidden;
         top: 130px;
         left: auto;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
         height: 20px;
         line-height: 20px;
         color: #333;
@@ -86,8 +86,8 @@ export class DePageHeader extends DeesElement {
         bottom: 10px;
         height: 25px;
         left: auto;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        font-family: 'Courier New', Courier, monospace;
+        right: var(--RIGHT-MARGIN);
+        font-family: "Courier New", Courier, monospace;
       }
       .topstripe .logo img {
         position: relative;
@@ -100,10 +100,16 @@ export class DePageHeader extends DeesElement {
     return html`
       <div class="topstripe">
         <div class="logo">
-          No logo set!
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "empty.logo"
+          )}
         </div>
       </div>
-      <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
+      <div class="topstripe2">
+        ${this.letterData?.from?.description ||
+        "[no letterData.from.description set]"}
+      </div>
     `;
   }
 }