feat: enhance translation and invoice layout

ts_web/elements/pagefooter.ts

@@ -5,24 +5,23 @@ 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-pagefooter': DePageFooter;
+    "dedocument-pagefooter": DePageFooter;
   }
 }
 
-@customElement('dedocument-pagefooter')
+@customElement("dedocument-pagefooter")
 export class DePageFooter extends DeesElement {
   public static demo = () => html`
-    <dedocument-pagefooter .format="${'a4'}"></dedocument-pagefooter>
+    <dedocument-pagefooter .format="${"a4"}"></dedocument-pagefooter>
   `;
 
   @property({
@@ -37,12 +36,12 @@ export class DePageFooter extends DeesElement {
   documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
-    type: Number
+    type: Number,
   })
   public pageNumber: number = 1;
 
   @property({
-    type: Number
+    type: Number,
   })
   public pageTotalNumber: number = 1;
 
@@ -67,32 +66,36 @@ export class DePageFooter extends DeesElement {
         left: 0px;
         right: 0px;
         height: 130px;
-        content: '';
-        padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
-        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
+        content: "";
+        padding: 30px var(--RIGHT-MARGIN) 10px var(--LEFT-MARGIN);
+        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(
+            100% / 4
+          );
         grid-gap: 5px;
-        border-top: 2px solid #e4002b;
+        border-top: 2px solid var(--footer-separator-bg-color, #e4002b);
       }
 
       .bottomstripe .pageNumber {
         position: absolute;
         top: 0px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        background: #e4002b;
+        right: var(--RIGHT-MARGIN);
+        color: var(--footer-separator-fg-color, #ffffff);
+        background: var(--footer-separator-bg-color, #e4002b);
         padding: 3px;
         font-size: 9px;
         color: #fff;
         border-bottom-left-radius: 3px;
         border-bottom-right-radius: 3px;
       }
+
       .bottomstripe .documentTitle {
         position: absolute;
-        top: -18px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        background: #dddddd;
+        top: -19px;
+        right: var(--RIGHT-MARGIN);
+        color: var(--label-fg);
+        background: var(--label-bg);
         padding: 3px;
         font-size: 9px;
-        color: #333;
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;
       }
@@ -103,36 +106,110 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
+          <strong
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "footer@@address"
+            )}:</strong
+          ><br />
           ${this.letterData.from.name}<br />
-          ${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
-          ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
+          ${this.letterData.from.address.streetName}
+          ${this.letterData.from.address.houseNumber}<br />
+          ${this.letterData.from.address.postalCode}
+          ${this.letterData.from.address.city}<br />
           ${this.letterData.from.address.country}
         </div>
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
+          <strong
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "footer@@registration.label"
+            )}:</strong
+          ><br />
           Amtsgericht Bremen<br />
           <i>reg-#:</i> HRB 35230 HB<br />
           <i>vat-id:</i> ${this.letterData.from.vatId}
         </div>
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
-          <i>email:</i> ${this.letterData.from.email}<br />
-          <i>phone:</i> ${this.letterData.from.phone}<br />
-          <i>fax:</i> ${this.letterData.from.fax}
+          <strong
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@title"
+            )}:</strong
+          ><br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@mail"
+            )}:</i
+          >
+          ${this.letterData.from.email}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@phone"
+            )}:</i
+          >
+          ${this.letterData.from.phone}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@fax"
+            )}:</i
+          >
+          ${this.letterData.from.fax}
         </div>
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
-          <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
-          <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
-          <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />
-          <i>bic:</i> ${this.letterData?.from?.sepaConnection?.bic}<br />
+          <strong
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@title"
+            )}:</strong
+          ><br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.accountHolder"
+            )}:</i
+          >
+          ${this.letterData?.from?.name}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.institution"
+            )}:</i
+          >
+          ${this.letterData?.from?.sepaConnection?.institution}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.iban"
+            )}:</i
+          >
+          ${this.letterData?.from?.sepaConnection?.iban}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.bic"
+            )}:</i
+          >
+          ${this.letterData?.from?.sepaConnection?.bic}<br />
+        </div>
+        <div class="documentTitle">
+          <b>${this.letterData?.subject}</b>
+        </div>
+        <div class="pageNumber">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "footer@@page"
+          )}
+          ${this.pageNumber}
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "footer@@pageOf"
+          )}
+          ${this.pageTotalNumber}
         </div>
-        <div class="documentTitle">Subject: <b>${this.letterData?.subject}</b>${(() => {
-          const uidString = html`/ Document-UID: <b>${html`<a href="https://uid.signature.digital/">https://uid.signature.digital/</a>`}</b>`;
-          return ``;
-        })()}</div>
-        <div class="pageNumber">page ${this.pageNumber} of ${this.pageTotalNumber}</div>
       </div>
     `;
   }