feat: enhance translation and invoice layout

ts_web/elements/viewer.ts

@@ -1,15 +1,22 @@
-import * as plugins from '../plugins.js';
+import * as plugins from "../plugins.js";
 
-import { DeesElement, css, cssManager, customElement, html, property } from '@design.estate/dees-element';
-import { demoFunc } from './viewer.demo.js';
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+} from "@design.estate/dees-element";
+import { demoFunc } from "./viewer.demo.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dedocument-viewer': DeDocumentViewer;
+    "dedocument-viewer": DeDocumentViewer;
   }
 }
 
-@customElement('dedocument-viewer')
+@customElement("dedocument-viewer")
 export class DeDocumentViewer extends DeesElement {
   // DEMO
   public static demo = demoFunc;
@@ -34,7 +41,7 @@ export class DeDocumentViewer extends DeesElement {
         position: relative;
         height: 100%;
         width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+        background: ${cssManager.bdTheme("#eeeeeb", "#111")};
       }
       .controls {
         top: 0px;
@@ -43,7 +50,7 @@ export class DeDocumentViewer extends DeesElement {
         position: absolute;
         height: 32px;
         width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#111111ee')};
+        background: ${cssManager.bdTheme("#eeeeeb", "#111111ee")};
         box-shadow: 0px 2px 8px 0px #000000;
       }
       .controlsShadow {
@@ -77,7 +84,12 @@ export class DeDocumentViewer extends DeesElement {
       <div class="maincontainer">
         <div class="viewport">
           ${this.letterData
-            ? html` <dedocument-dedocument .letterData=${this.letterData} .documentSettings=${this.documentSettings}></dedocument-dedocument> `
+            ? html`
+                <dedocument-dedocument
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
+                ></dedocument-dedocument>
+              `
             : html``}
         </div>
         <div class="controls"></div>
@@ -85,9 +97,11 @@ export class DeDocumentViewer extends DeesElement {
     `;
   };
 
-  public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
+  public updated = (
+    changedProperties: Map<string | number | symbol, unknown>
+  ) => {
     super.updated(changedProperties);
-    if (changedProperties.has('letterData')) {
+    if (changedProperties.has("letterData")) {
     }
   };
 }