feat: enhance translation and invoice layout

ts_web/elements/pagecontainer.ts

@@ -7,27 +7,27 @@ import {
   css,
   cssManager,
   unsafeCSS,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+} from "@design.estate/dees-element";
+import * as domtools from "@design.estate/dees-domtools";
 
-import * as plugins from '../plugins.js';
+import * as plugins from "../plugins.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dedocument-pagecontainer': DePageContainer;
+    "dedocument-pagecontainer": DePageContainer;
   }
 }
 
-@customElement('dedocument-pagecontainer')
+@customElement("dedocument-pagecontainer")
 export class DePageContainer extends DeesElement {
   public static demo = () => html`
-    <dedocument-pagecontainer .format="${'a4'}"></dedocument-pagecontainer>
+    <dedocument-pagecontainer .format="${"a4"}"></dedocument-pagecontainer>
   `;
 
   @property({
     type: String,
   })
-  public format: 'a4' = 'a4';
+  public format: "a4" = "a4";
 
   @property({
     type: Boolean,
@@ -44,11 +44,9 @@ export class DePageContainer extends DeesElement {
     css`
       :host {
         display: block;
-        background: white;
-        color: #333;
         padding: 0px;
-        width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
-        height: ${unsafeCSS(plugins.shared.a4Height + 'px')};
+        width: ${unsafeCSS(plugins.shared.A4_WIDTH + "px")};
+        height: ${unsafeCSS(plugins.shared.A4_HEIGHT + "px")};
         position: relative;
         border-radius: 3px;
         overflow: hidden;
@@ -60,7 +58,9 @@ export class DePageContainer extends DeesElement {
     return html`
       <style>
         :host {
-          box-shadow: ${this.printMode ? `none` : `0px 0px 10px rgba(0,0,0,0.3)`};
+          box-shadow: ${this.printMode
+            ? `none`
+            : `0px 0px 10px rgba(0,0,0,0.3)`};
         }
       </style>
       <slot></slot>