@design.estate/dees-document 1.0.103 → 1.3.0

package/ts_web/elements/document.ts

@@ -11,13 +11,20 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 
+import * as interfaces from '../../ts/interfaces/index.js';
 import * as plugins from '../plugins.js';
 
+export const defaultDocumentSettings: interfaces.IDocumentSettings = {
+  enableTopDraftText: true,
+  enableDefaultHeader: true,
+  enableDefaultFooter: true,
+};
+
 
 import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import { demoFunc } from './document.demo.js';
 
 declare global {
@@ -68,9 +75,17 @@ export class DeDocument extends DeesElement {
   public letterData: plugins.tsclass.business.ILetter;
 
   @property({
-    type: String,
+    type: Object,
+    reflect: true,
+    converter: (valueArg) => {
+      if (typeof valueArg === 'string') {
+        return plugins.smartjson.parseBase64(valueArg)
+      } else {
+        return valueArg;
+      }
+    },
   })
-  public letterDataUrl: string;
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -112,11 +127,6 @@ export class DeDocument extends DeesElement {
     this.registerGarbageFunction(() => {
       resizeObserver.disconnect();
     })
-    
-    if (this.letterDataUrl) {
-      const response = await fetch(this.letterDataUrl);
-      this.letterData = await response.json();
-    }
   }
 
   public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
@@ -136,6 +146,7 @@ export class DeDocument extends DeesElement {
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
     content.letterData = this.letterData;
+    content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
 
     await domtools.convenience.smartdelay.delayFor(0);
@@ -148,6 +159,7 @@ export class DeDocument extends DeesElement {
       const newPage = new DePage();
       newPage.printMode = this.printMode;
       newPage.letterData = this.letterData;
+      newPage.documentSettings = this.documentSettings;
       pages.push(newPage);
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);

package/ts_web/elements/index.ts

@@ -8,4 +8,4 @@ export * from './pagefooter.js';
 export * from './pageheader.js';
 export * from './viewer.js';
 
-export * from './shared/index.js';
+export * from '../../ts/shared/index.js';

package/ts_web/elements/letterheader.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
 
 declare global {

package/ts_web/elements/page.ts

@@ -8,10 +8,14 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as interfaces from '../../ts/interfaces/index.js';
+
+import { defaultDocumentSettings } from './document.js';
+
+import * as shared from '../../ts/shared/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,10 +27,14 @@ declare global {
 export class DePage extends DeesElement {
   public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
 
-  @property()
+  @property({
+    type: Number,
+  })
   viewWidth: number = null;
 
-  @property()
+  @property({
+    type: Number,
+  })
   viewHeight: number = null;
 
   @property({
@@ -55,6 +63,12 @@ export class DePage extends DeesElement {
   })
   printMode = false;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -109,46 +123,61 @@ export class DePage extends DeesElement {
         <dedocument-pagecontainer .printMode=${this.printMode}>
           ${this.letterData
             ? html`
-                <dedocument-pageheader
-                  .letterData=${this.letterData}
-                  .pageNumber="${this.pageNumber}"
-                  .pageTotalNumber="${this.pageTotalNumber}"
-                ></dedocument-pageheader>
+                ${this.documentSettings.enableDefaultHeader
+                  ? html`
+                      <dedocument-pageheader
+                        .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
+                        .pageNumber="${this.pageNumber}"
+                        .pageTotalNumber="${this.pageTotalNumber}"
+                      ></dedocument-pageheader>
+                    `
+                  : ``}
                 ${this.pageNumber === 1
                   ? html`
                       <dedocument-letterheader
                         .pageNumber="${this.pageNumber}"
                         .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-letterheader>
                     `
                   : html``}
                 <dedocument-pagecontent
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
                   .pageNumber="${this.pageNumber}"
                   .pageTotalNumber="${this.pageTotalNumber}"
-                  .letterData=${this.letterData}
                   ><slot></slot
                 ></dedocument-pagecontent>
-                <dedocument-pagefooter
-                  .letterData=${this.letterData}
-                  .pageNumber="${this.pageNumber}"
-                  .pageTotalNumber="${this.pageTotalNumber}"
-                ></dedocument-pagefooter>
+                ${this.documentSettings.enableDefaultFooter
+                  ? html`
+                      <dedocument-pagefooter
+                        .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
+                        .pageNumber="${this.pageNumber}"
+                        .pageTotalNumber="${this.pageTotalNumber}"
+                      ></dedocument-pagefooter>
+                    `
+                  : ``}
                 <div class="versionOverlay">
                   ${this.letterData.versionInfo.type === 'draft'
                     ? html`
-                        <div class="topInfo">
-                          Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br />
-                          -> Revision/Document version: ${this.letterData.versionInfo.version}
-                        </div>
+                        ${this.documentSettings.enableTopDraftText
+                          ? html`
+                              <div class="topInfo">
+                                Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
+                                THIS.<br />
+                                -> Revision/Document version: ${this.letterData.versionInfo.version}
+                              </div>
+                            `
+                          : ``}
                         <div class="bigDraftText">DRAFT</div>
                       `
                     : html``}
                 </div>
               `
-            : html`
-              <slot></slot>
-            `}
+            : html` <slot></slot> `}
         </dedocument-pagecontainer>
       </div>
     `;

package/ts_web/elements/pagecontainer.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {

package/ts_web/elements/pagecontent.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
 
 declare global {

package/ts_web/elements/pagefooter.ts

@@ -7,10 +7,12 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as interfaces from '../../ts/interfaces/index.js';
+
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
 
 declare global {
@@ -30,6 +32,12 @@ export class DePageFooter extends DeesElement {
   })
   letterData: tsclass.business.ILetter;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  documentSettings: interfaces.IDocumentSettings;
+
   @property({
     type: Number
   })
@@ -96,26 +104,26 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>Address:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', '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.country}
         </div>
         <div>
-          <strong>Registration Info:</strong><br />
+          <strong>${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}
         </div>
         <div>
-          <strong>Contact Info:</strong><br />
+          <strong>${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}
         </div>
         <div>
-          <strong>Bank Connection:</strong><br />
+          <strong>${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 />

package/ts_web/elements/pageheader.ts

@@ -7,10 +7,12 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from './shared/index.js';
+import * as interfaces from '../../ts/interfaces/index.js';
+
+import * as shared from '../../ts/shared/index.js';
 import * as tsclass from '@tsclass/tsclass';
 
 declare global {
@@ -30,6 +32,12 @@ export class DePageHeader extends DeesElement {
   })
   public letterData: tsclass.business.ILetter = null;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  documentSettings: interfaces.IDocumentSettings;
+
   @property({
     type: Number,
   })
@@ -74,13 +82,17 @@ export class DePageHeader extends DeesElement {
         color: #333;
         font-size: 10px;
       }
-      .topstripe img {
-        filter: invert(1);
+      .topstripe .logo {
         position: absolute;
         bottom: 10px;
         height: 25px;
         left: auto;
         right: ${unsafeCSS(shared.rightMargin + 'px')};
+        font-family: 'Courier New', Courier, monospace;
+      }
+      .topstripe .logo img {
+        position: relative;
+        height: 25px;
       }
     `,
   ];
@@ -88,7 +100,9 @@ export class DePageHeader extends DeesElement {
   public render(): TemplateResult {
     return html`
       <div class="topstripe">
-        <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" />
+        <div class="logo">
+          No logo set!
+        </div>
       </div>
       <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
     `;

package/ts_web/elements/viewer.demo.ts

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

package/ts_web/elements/viewer.ts

@@ -1,4 +1,5 @@
 import * as plugins from '../plugins.js';
+import * as interfaces from '../../ts/interfaces/index.js';
 
 import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
 import { demoFunc } from './viewer.demo.js';
@@ -17,6 +18,8 @@ export class DeDocumentViewer extends DeesElement {
   // INSTANCE
   public letterData: plugins.tsclass.business.ILetter = null;
 
+  public documentSettings: interfaces.IDocumentSettings;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -67,7 +70,7 @@ export class DeDocumentViewer extends DeesElement {
       <div class="maincontainer">
         <div class="viewport">
           ${this.letterData
-            ? html` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
+            ? html` <dedocument-dedocument .letterData=${this.letterData} .documentSettings=${this.documentSettings}></dedocument-dedocument> `
             : html``}
         </div>
         <div class="controls"></div>

package/ts_web/pages/page1.ts

@@ -1,5 +1,5 @@
 import { html } from '@design.estate/dees-element';
-import { demoLetter } from '../elements/shared/index.js';
+import { demoLetter } from '../../ts/shared/index.js';
 import * as plugins from '../plugins.js';
 
 export const page1 = () => html`