@design.estate/dees-document 1.6.9 → 2.0.2

package/ts_web/elements/pagefooter.ts

@@ -5,46 +5,45 @@ 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({
     type: Object,
   })
-  letterData: plugins.tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.business.TLetter;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
-    type: Number
+    type: Number,
   })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;
 
   @property({
-    type: Number
+    type: Number,
   })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;
 
   constructor() {
     super();
@@ -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,113 @@ 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>
+        ${this.letterData.from.registrationDetails
+          ? html` <div>
+              <strong
+                >${plugins.shared.translation.translate(
+                  this.documentSettings.languageCode,
+                  "footer@@registration.label"
+                )}:</strong
+              ><br />
+              ${this.letterData.from.registrationDetails.registrationName}<br />
+              <i>reg-#:</i> ${this.letterData.from.registrationDetails
+                .registrationId}<br />
+              <i>vat-id:</i> ${this.letterData.from.registrationDetails.vatId}
+            </div>`
+          : null}
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
-          Amtsgericht Bremen<br />
-          <i>reg-#:</i> HRB 35230 HB<br />
-          <i>vat-id:</i> ${this.letterData.from.vatId}
+          <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, '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,
+              "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>
-          <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 />
+        <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>
     `;
   }

package/ts_web/elements/pageheader.ts

@@ -7,44 +7,44 @@ 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({
     type: Object,
   })
-  public letterData: plugins.tsclass.business.ILetter = null;
+  accessor letterData: plugins.tsclass.business.TLetter = null;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number,
   })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;
 
   @property({
     type: Number,
   })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;
 
   constructor() {
     super();
@@ -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>
     `;
   }
 }

package/ts_web/elements/paymentcode.ts

@@ -0,0 +1,95 @@
+import {
+  css,
+  customElement,
+  DeesElement,
+  html,
+  property,
+  query,
+  type TemplateResult,
+} from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dedocument-paymentcode": DedocumentPaymentCode;
+  }
+}
+
+@customElement("dedocument-paymentcode")
+export class DedocumentPaymentCode extends DeesElement {
+  public static styles = [
+    css`
+      :host {
+        text-align: center;
+        width: 100px;
+        height: 100px;
+      }
+
+      canvas {
+        width: inherit !important;
+        height: inherit !important;
+      }
+    `,
+  ];
+
+  @query("canvas")
+  accessor canvasEl!: HTMLCanvasElement;
+
+  @property()
+  accessor bic: string;
+
+  @property()
+  accessor name: string;
+
+  @property()
+  accessor iban: string;
+
+  @property()
+  accessor currency: string;
+
+  @property({ type: Number })
+  accessor totalGross: number;
+
+  @property()
+  accessor reference: string;
+
+  private updateQRCode(): void {
+    if (!this.canvasEl) return;
+
+    plugins.qrcode.toCanvas(
+      this.canvasEl,
+      `BCD
+001
+1
+SCT
+${this.bic}
+${this.name}
+${this.iban}
+${this.currency}${this.totalGross?.toFixed?.(2)}
+      
+${this.reference}`,
+      (error) => {
+        if (error) console.error(error);
+      }
+    );
+  }
+
+  public override update(
+    changedProperties: Parameters<DeesElement["update"]>[0]
+  ): void {
+    super.update(changedProperties);
+    this.updateQRCode();
+  }
+
+  public render(): TemplateResult {
+    const allDataAvailable =
+      typeof this.bic === "string" &&
+      typeof this.name === "string" &&
+      typeof this.iban === "string" &&
+      typeof this.currency === "string" &&
+      typeof this.totalGross === "number" &&
+      typeof this.reference === "string";
+
+    return allDataAvailable ? html`<canvas></canvas>` : null;
+  }
+}

package/ts_web/elements/viewer.demo.ts

@@ -1,6 +1,9 @@
-import { html } from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
+import { html } from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";
 
 export const demoFunc = () => html`
-  <dedocument-viewer .letterData=${plugins.shared.demoLetter} .documentSettings=${plugins.shared.demoDocumentSettings}></dedocument-viewer>
-`;
+  <dedocument-viewer
+    .letterData=${plugins.shared.demoLetter}
+    .documentSettings=${plugins.shared.demoDocumentSettings}
+  ></dedocument-viewer>
+`;

package/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;
@@ -19,13 +26,13 @@ export class DeDocumentViewer extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public letterData: plugins.tsclass.business.ILetter = null;
+  accessor letterData: plugins.tsclass.business.TLetter = null;
 
   @property({
     type: Object,
     reflect: true,
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   public static styles = [
     cssManager.defaultStyles,
@@ -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")) {
     }
   };
 }

package/ts_web/pages/page1.ts

@@ -1,5 +1,5 @@
-import * as plugins from '../plugins.js';
-import { html } from '@design.estate/dees-element';
+import * as plugins from "../plugins.js";
+import { html } from "@design.estate/dees-element";
 
 export const page1 = () => html`
   <style>
@@ -7,11 +7,15 @@ export const page1 = () => html`
       margin: 16px;
     }
   </style>
-  <dedocument-dedocument .printMode=${false} letterData=${plugins.smartjson.stringifyBase64({
+  <dedocument-dedocument
+    .printMode=${false}
+    letterData=${plugins.smartjson.stringifyBase64({
       ...plugins.shared.demoLetter,
       from: {
         ...plugins.shared.demoLetter.from,
-        description: 'a string set via stringified JSON'
-      }
-    } as plugins.tsclass.business.ILetter)}> </dedocument-dedocument>
+        description: "a string set via stringified JSON",
+      },
+    } as plugins.tsclass.finance.TInvoice)}
+  >
+  </dedocument-dedocument>
 `;

package/ts_web/style.ts

@@ -1,7 +1,38 @@
-import { css } from '@design.estate/dees-element';
+import { css } from "@design.estate/dees-element";
+import * as plugins from "./plugins.js";
 
 export const dedocumentSharedStyle = css`
   :host {
-    font-family: 'Exo 2';
+    /* Primitive colors */
+    --color-light: #ffffff;
+    --color-dark: #333333;
+    --color-grey: #dddddd;
+    --color-grey-100: #dddddd;
+    --color-red: #e4002b;
+
+    /* Semantic colors */
+    --color-primary-fg: var(--theme-color-primary-fg, var(--color-dark));
+    --color-primary-bg: var(--theme-color-primary-bg, var(--color-light));
+    --color-accent-fg: var(--theme-color-accent-fg, var(--color-light));
+    --color-accent-bg: var(--theme-color-accent-bg, var(--color-red));
+
+    /* Functional colors */
+    --text-fg-color: var(--color-primary-fg);
+    --text-bg-color: var(--color-primary-bg);
+    --label-fg: var(--color-dark);
+    --label-bg: var(--color-grey);
+    --footer-separator-bg-color: var(--color-accent-bg);
+    --footer-separator-fg-color: var(--color-light);
+
+    /* Functional variables */
+    --DPI-FACTOR: ${plugins.shared.cmToPx(1)}px;
+    --RIGHT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --LEFT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --text-font-family: var(--theme-text-font-family, "Exo 2");
+    --text-font-size: var(--theme-text-font-size, 12px);
+
+    color: var(--text-fg-color);
+    font-family: var(--text-font-family);
+    font-size: var(--text-font-size);
   }
-`;
+`;