@design.estate/dees-document 1.6.9 → 2.0.2

package/ts_web/elements/page.ts

@@ -1,4 +1,4 @@
-import * as tsclass from '@tsclass/tsclass';
+import * as tsclass from "@tsclass/tsclass";
 import {
   DeesElement,
   property,
@@ -6,66 +6,66 @@ 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 * as plugins from "../plugins.js";
 
-import { defaultDocumentSettings } from './document.js';
+import { defaultDocumentSettings } from "./document.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dedocument-page': DePage;
+    "dedocument-page": DePage;
   }
 }
 
-@customElement('dedocument-page')
+@customElement("dedocument-page")
 export class DePage extends DeesElement {
-  public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
+  public static demo = () =>
+    html` <dedocument-page .format="${"a4"}"></dedocument-page> `;
 
   @property({
     type: Number,
   })
-  viewWidth: number = null;
+  accessor viewWidth: number = null;
 
   @property({
     type: Number,
   })
-  viewHeight: number = null;
+  accessor viewHeight: number = null;
 
   @property({
     type: String,
   })
-  public format: 'a4' = 'a4';
+  accessor format: "a4" = "a4";
 
   @property({
     type: Number,
   })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;
 
   @property({
     type: Number,
   })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;
 
   @property({
     type: Object,
   })
-  public letterData: tsclass.business.ILetter = null;
+  accessor letterData: tsclass.business.TLetter = null;
 
   @property({
     type: Boolean,
     reflect: true,
   })
-  printMode = false;
+  accessor printMode = false;
 
   @property({
     type: Object,
     reflect: true,
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings =
+    defaultDocumentSettings;
 
   constructor() {
     super();
@@ -100,26 +100,68 @@ export class DePage extends DeesElement {
         align-items: center;
       }
 
-      .topInfo {
-        position: absolute;
-        top: 60px;
-        left: 40px;
-        color: red;
-        transform: rotate(-5deg);
-      }
-
       .bigDraftText {
         transform: rotate(-45deg);
         font-size: 200px;
         opacity: 0.05;
       }
+
+      .foldMark__wrapper {
+        z-index: 0;
+      }
+
+      .foldMark {
+        position: absolute;
+        border-top: 1px solid #d3d3d3;
+        width: 10px;
+        left: 15px;
+      }
+
+      .foldMark--start {
+        top: calc(var(--DPI-FACTOR) * 8.7);
+      }
+
+      .foldMark--center {
+        top: calc(var(--DPI-FACTOR) * 14.85);
+      }
+
+      .foldMark--end {
+        top: calc(var(--DPI-FACTOR) * 19.2);
+      }
     `,
   ];
 
   public render(): TemplateResult {
+    const theme = this.documentSettings.theme;
     return html`
+      <style>
+        :host {
+          ${theme?.colorPrimaryForeground ? `--theme-color-primary-fg: ${theme.colorPrimaryForeground};` : ''}
+          ${theme?.colorPrimaryBackground ? `--theme-color-primary-bg: ${theme.colorPrimaryBackground};` : ''}
+          ${theme?.colorAccentForeground ? `--theme-color-accent-fg: ${theme.colorAccentForeground};` : ''}
+          ${theme?.colorAccentBackground ? `--theme-color-accent-bg: ${theme.colorAccentBackground};` : ''}
+        }
+
+        .page {
+          background-size: contain;
+          height: 100%;
+        }
+
+        .page:not(.page--first) {
+          background-image: ${theme?.pageBackground ?? "none"};
+        }
+
+        .page.page--first {
+          background-image: ${theme?.coverPageBackground ?? theme?.pageBackground ?? "none"};
+        }
+      </style>
       <div id="scaleWrapper">
         <dedocument-pagecontainer .printMode=${this.printMode}>
+          <div
+            class="page ${this.pageNumber === 1
+              ? "page--first"
+              : ""}"
+          ></div>
           ${this.letterData
             ? html`
                 ${this.documentSettings.enableDefaultHeader
@@ -131,7 +173,18 @@ export class DePage extends DeesElement {
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pageheader>
                     `
-                  : ``}
+                  : null}
+
+                <!-- FOLD MARKS -->
+                ${this.documentSettings.enableFoldMarks === true
+                  ? html` <div class="foldMark__wrapper">
+                      <span class="foldMark foldMark--start"></span>
+                      <span class="foldMark foldMark--center"></span>
+                      <span class="foldMark foldMark--end"></span>
+                    </div>`
+                  : null}
+
+                <!-- LETTER HEADER -->
                 ${this.pageNumber === 1
                   ? html`
                       <dedocument-letterheader
@@ -141,7 +194,9 @@ export class DePage extends DeesElement {
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-letterheader>
                     `
-                  : html``}
+                  : null}
+
+                <!-- PAGE CONTENT -->
                 <dedocument-pagecontent
                   .letterData=${this.letterData}
                   .documentSettings=${this.documentSettings}
@@ -149,7 +204,9 @@ export class DePage extends DeesElement {
                   .pageTotalNumber="${this.pageTotalNumber}"
                   ><slot></slot
                 ></dedocument-pagecontent>
-                ${this.documentSettings.enableDefaultFooter
+
+                <!-- DEFAULT FOOTER -->
+                ${this.documentSettings.enableDefaultFooter === true
                   ? html`
                       <dedocument-pagefooter
                         .letterData=${this.letterData}
@@ -158,22 +215,19 @@ export class DePage extends DeesElement {
                         .pageTotalNumber="${this.pageTotalNumber}"
                       ></dedocument-pagefooter>
                     `
-                  : ``}
+                  : null}
+
                 <div class="versionOverlay">
-                  ${this.letterData.versionInfo.type === 'draft'
+                  ${this.letterData.versionInfo.type === "draft"
                     ? html`
-                        ${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>
+                        <div class="bigDraftText">
+                          ${plugins.shared.translation.translate(
+                            this.documentSettings.languageCode,
+                            "overlay@@draft"
+                          )}
+                        </div>
                       `
-                    : html``}
+                    : null}
                 </div>
               `
             : html` <slot></slot> `}
@@ -184,33 +238,37 @@ export class DePage extends DeesElement {
 
   public async checkOverflow() {
     await this.elementDomReady;
-    const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
+    const pageContent = this.shadowRoot.querySelector("dedocument-pagecontent");
     return pageContent.checkOverflow();
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>): void {
     super.updated(changedProperties);
-    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+    if (
+      changedProperties.has("viewHeight") ||
+      changedProperties.has("viewWidth")
+    ) {
       this.adjustScaling();
     }
   }
 
   private adjustScaling() {
-    const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
+    const scaleWrapper: HTMLDivElement =
+      this.shadowRoot.querySelector("#scaleWrapper");
 
     if (!scaleWrapper) return;
 
     let scale = 1;
     if (this.viewHeight) {
-      scale = this.viewHeight / plugins.shared.a4Height;
+      scale = this.viewHeight / plugins.shared.A4_HEIGHT;
     } else if (this.viewWidth) {
-      scale = this.viewWidth / plugins.shared.a4Width;
+      scale = this.viewWidth / plugins.shared.A4_WIDTH;
     }
     scaleWrapper.style.transform = `scale(${scale})`;
 
     // Adjust the outer dimensions so they match the scaled content
 
-    this.style.width = `${plugins.shared.a4Width * scale}px`;
-    this.style.height = `${plugins.shared.a4Height * scale}px`;
+    this.style.width = `${plugins.shared.A4_WIDTH * scale}px`;
+    this.style.height = `${plugins.shared.A4_HEIGHT * scale}px`;
   }
 }

package/ts_web/elements/pagecontainer.ts

@@ -7,32 +7,32 @@ 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';
+  accessor format: "a4" = "a4";
 
   @property({
     type: Boolean,
   })
-  public printMode = false;
+  accessor printMode = false;
 
   constructor() {
     super();
@@ -44,14 +44,13 @@ 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;
+        background: var(--text-bg-color, #ffffff);
       }
     `,
   ];
@@ -60,7 +59,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>

package/ts_web/elements/pagecontent.ts

@@ -8,37 +8,43 @@ import {
   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-pagecontent': DePageContent;
+    "dedocument-pagecontent": DePageContent;
   }
 }
 
-@customElement('dedocument-pagecontent')
+@customElement("dedocument-pagecontent")
 export class DePageContent extends DeesElement {
   public static demo = () => html`
-    <dedocument-pagecontent .format="${'a4'}"></dedocument-pagecontent>
+    <dedocument-pagecontent .format="${"a4"}"></dedocument-pagecontent>
   `;
 
   @property({
     type: Number,
   })
-  public letterData: plugins.tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.business.TLetter;
 
   @property({
     type: Number,
   })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;
 
   @property({
     type: Number,
   })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   constructor() {
     super();
@@ -49,19 +55,23 @@ export class DePageContent extends DeesElement {
     domtools.elementBasic.staticStyles,
     dedocumentSharedStyle,
     css`
-      :host {
-        color: #333;
-      }
-
       .content {
         position: absolute;
 
-        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
-        bottom: 170px;
+        left: var(--LEFT-MARGIN);
+        right: var(--RIGHT-MARGIN);
+        bottom: calc(var(--DPI-FACTOR) * 4);
         overflow: visible;
       }
 
+      .content.page--first {
+        top: calc(var(--DPI-FACTOR) * 9.85);
+      }
+
+      .content.page--notFirst {
+        top: calc(var(--DPI-FACTOR) * 4.5);
+      }
+
       .content .subject {
         font-size: 18px;
         font-weight: bold;
@@ -83,60 +93,31 @@ export class DePageContent extends DeesElement {
         margin-bottom: 10px;
         font-size: 10px;
       }
-
-      .continuesOnNextPage {
-        display: inline-block;
-        background: #eeeeee;
-        color: #999;
-        border-radius: 50px;
-        padding: 5px 10px;
-        margin-top: 8px;
-        font-size: 10px;
-      }
-
-      .finalPage {
-        display: inline-block;
-        background: #29b000;
-        color: #fff;
-        border-radius: 50px;
-        padding: 5px 10px;
-        margin-top: 8px;
-        font-size: 10px;
-      }
     `,
   ];
 
   public render(): TemplateResult {
+    const firstPage = this.pageNumber === 1;
     return html`
-      <style>
-        .content {
-          top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
-        }
-      </style>
-      <div class="content">
-        ${this.pageNumber === 1
+      <div class="content ${firstPage ? "page--first" : "page--notFirst"}">
+        ${firstPage
           ? html`<div class="subject">${this.letterData.subject}</div>`
-          : html`
-              <div class="subjectRepeated">
-                ${this.letterData.subject} (Page ${this.pageNumber})
-              </div>
-            `}
+          : null}
         <slot></slot>
-        ${this.pageTotalNumber !== this.pageNumber
-          ? html`<div class="continuesOnNextPage">Continues on page ${this.pageNumber + 1}</div>`
-          : html`<div class="finalPage">This is the final page of this document.</div>`}
       </div>
     `;
   }
 
-  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
+  public firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): void {
     super.firstUpdated(_changedProperties);
     this.checkOverflow();
   }
 
   public async checkOverflow() {
     await this.elementDomReady;
-    const contentContainer = this.shadowRoot.querySelector('.content');
+    const contentContainer = this.shadowRoot.querySelector(".content");
     if (contentContainer.scrollHeight > contentContainer.clientHeight) {
       return true;
     } else {