@design.estate/dees-document 1.0.91

package/ts_web/elements/document.ts

@@ -0,0 +1,168 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+  unsafeCSS,
+  domtools,
+} from '@design.estate/dees-element';
+
+import * as plugins from '../plugins.js';
+
+
+import { DePage } from './page.js';
+import { DeContentInvoice } from './contentinvoice.js';
+
+import * as shared from './shared/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-dedocument': DeDocument;
+  }
+}
+
+@customElement('dedocument-dedocument')
+export class DeDocument extends DeesElement {
+  public static demo = () => html`
+    <dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
+  `;
+
+  @property({
+    type: String,
+  })
+  public format: 'a4' = 'a4';
+
+  @property({
+    type: Number,
+  })
+  public viewWidth: number = shared.a4Width;
+
+  @property({
+    type: Boolean,
+  })
+  printMode = false;
+
+  @property({
+    type: Object,
+    reflect: true,
+    converter: (valueArg) => {
+      if (typeof valueArg === 'string') {
+        return plugins.smartjson.parseBase64(valueArg)
+      } else {
+        return valueArg;
+      }
+    },
+
+  })
+  public letterData: plugins.tsclass.business.ILetter;
+
+  @property({
+    type: String,
+  })
+  public letterDataUrl: string;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        display: block;
+        color: #333;
+        padding: 0px;
+        position: relative;
+      }
+
+      .betweenPagesSpacer {
+        height: 20px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          transform-origin: top left;
+          transform: ${this.viewWidth
+            ? unsafeCSS(
+                `scale(${this.viewWidth / shared.a4Width}, ${this.viewWidth / shared.a4Width})`
+              )
+            : unsafeCSS('')};
+        }
+      </style>
+      <div class="scaleport"></div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    if (this.letterDataUrl) {
+      const response = await fetch(this.letterDataUrl);
+      this.letterData = await response.json();
+    }
+    this.renderDocument();
+  }
+
+  public async renderDocument() {
+    const domtools = await this.domtoolsPromise;
+    const scaleport = this.shadowRoot.querySelector('.scaleport');
+    let pages: DePage[] = [];
+    let pageCounter = 0;
+    let complete = false;
+    const content: DeContentInvoice = document.createElement(
+      'dedocument-contentinvoice'
+    ) as DeContentInvoice;
+    content.letterData = this.letterData;
+    document.body.appendChild(content);
+    await domtools.convenience.smartdelay.delayFor(0);
+    let overallContentOffset: number = 0;
+    let currentContentOffset: number;
+    let trimmed: number;
+    while (!complete) {
+      pageCounter++;
+      const currentContent = content.cloneNode(true) as DeContentInvoice;
+      const newPage = new DePage();
+      newPage.printMode = this.printMode;
+      newPage.letterData = this.letterData;
+      pages.push(newPage);
+      newPage.pageNumber = pageCounter;
+      newPage.append(currentContent);
+      newPage.pageTotalNumber = pageCounter;
+      scaleport.append(newPage);
+      // betweenPagesSpacer
+      if (!this.printMode) {
+        const betweenPagesSpacerDiv = document.createElement('div');
+        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
+        scaleport.append(betweenPagesSpacerDiv);
+      }
+      await currentContent.elementDomReady;
+      await currentContent.trimStartToOffset(overallContentOffset);
+      let newPageOverflows = await newPage.checkOverflow();
+      trimmed = 0;
+      while (newPageOverflows) {
+        await currentContent.trimEndByOne();
+        trimmed++;
+        newPageOverflows = await newPage.checkOverflow();
+      }
+      currentContentOffset = await currentContent.getContentLength();
+      overallContentOffset = overallContentOffset + currentContentOffset;
+      if (trimmed === 0) {
+        complete = true;
+      }
+      // complete = true;
+      console.log(currentContentOffset);
+    }
+    document.body.removeChild(content);
+
+    for (const page of pages) {
+      page.pageTotalNumber = pageCounter;
+    }
+  }
+}

package/ts_web/elements/index.ts

@@ -0,0 +1,8 @@
+export * from './contentinvoice.js';
+export * from './document.js';
+export * from './letterheader.js';
+export * from './page.js';
+export * from './pagecontainer.js';
+export * from './pagecontent.js';
+export * from './pagefooter.js';
+export * from './pageheader.js';

package/ts_web/elements/letterheader.ts

@@ -0,0 +1,125 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  unsafeCSS,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as shared from './shared/index.js';
+import * as tsclass from '@tsclass/tsclass';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-letterheader': DeLetterHeader;
+  }
+}
+
+@customElement('dedocument-letterheader')
+export class DeLetterHeader extends DeesElement {
+  public static demo = () => html`
+    <dedocument-letterheader .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-letterheader>
+  `;
+
+  @property({
+    type: Object,
+    reflect: true
+  })
+  public letterData: tsclass.business.ILetter;
+
+  @property({
+    type: Number,
+    reflect: true,
+  })
+  public pageNumber: number = 1;
+
+  @property({
+    type: Number,
+    reflect: true,
+  })
+  public pageTotalNumber: number = 1;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        color: #333;
+      }
+
+      .recepientInfo {
+        position: absolute;
+        display: block;
+        overflow: hidden;
+        top: 200px;
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        width: 200px;
+        text-align: right;
+      }
+      .recepientInfo .label {
+        margin-top: 10px;
+        margin-bottom: 3px;
+        font-size: 10px;
+        font-weight: bold;
+      }
+
+      .date {
+        position: absolute;
+        top: 180px;
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        text-align: right;
+      }
+
+      .address {
+        position: absolute;
+        top: 180px;
+        left: ${unsafeCSS(shared.leftMargin + 'px')};
+      }
+
+      .address .from {
+        font-size: 10px;
+      }
+
+      .address .to {
+        margin-top: 10px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="date">
+        ${new Date(this.letterData.date).getDate()}. ${new Date(this.letterData.date).toLocaleString('default', { month: 'long' })}
+        ${new Date(this.letterData.date).getFullYear()}
+      </div>
+      <div class="address">
+        <div class="from">
+          ${this.letterData.from.name}, ${this.letterData.from.address.streetName}
+          ${this.letterData.from.address.houseNumber}, ${this.letterData.from.address.postalCode}
+          ${this.letterData.from.address.city}, ${this.letterData.from.address.country}
+        </div>
+        <div class="to">
+          ${this.letterData.to.name}<br />
+          ${this.letterData.to.address.streetName} ${this.letterData.to.address.houseNumber}<br />
+          ${this.letterData.to.address.postalCode} ${this.letterData.to.address.city}<br />
+          ${this.letterData.from.address.country}
+        </div>
+      </div>
+      <div class="recepientInfo">
+        <div class="label">your customer id:</div>
+        ${this.letterData.to.customerNumber || 'not registered'}
+
+        <div class="label">your vat id on file:</div>
+        ${this.letterData.to.vatId || 'not provided'}
+      </div>
+    `;
+  }
+}

package/ts_web/elements/page.ts

@@ -0,0 +1,142 @@
+import * as tsclass from '@tsclass/tsclass';
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  unsafeCSS,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as shared from './shared/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-page': DePage;
+  }
+}
+
+@customElement('dedocument-page')
+export class DePage extends DeesElement {
+  public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
+
+  @property({
+    type: String,
+  })
+  public format: 'a4' = 'a4';
+
+  @property({
+    type: Number,
+  })
+  public pageNumber: number = 1;
+
+  @property({
+    type: Number,
+  })
+  public pageTotalNumber: number = 1;
+
+  @property({
+    type: Object,
+  })
+  public letterData: tsclass.business.ILetter = shared.demoLetter;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  printMode = false;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+      }
+      .versionOverlay {
+        pointer-events: none;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        font-family: monospace;
+        font-size: 16px;
+
+        z-index: 1000;
+        display: flex;
+        justify-content: center;
+        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;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <dedocument-pagecontainer .printMode=${this.printMode}>
+        <dedocument-pageheader
+          .letterData=${this.letterData}
+          .pageNumber="${this.pageNumber}"
+          .pageTotalNumber="${this.pageTotalNumber}"
+        ></dedocument-pageheader>
+        ${this.pageNumber === 1
+          ? html`
+              <dedocument-letterheader
+                .pageNumber="${this.pageNumber}"
+                .letterData=${this.letterData}
+                .pageTotalNumber="${this.pageTotalNumber}"
+              ></dedocument-letterheader>
+            `
+          : html``}
+        <dedocument-pagecontent
+          .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>
+        <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>
+                <div class="bigDraftText">DRAFT</div>
+              `
+            : html``}
+        </div>
+      </dedocument-pagecontainer>
+    `;
+  }
+
+  public async checkOverflow() {
+    await this.elementDomReady;
+    const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
+    return pageContent.checkOverflow();
+  }
+}

package/ts_web/elements/pagecontainer.ts

@@ -0,0 +1,69 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  unsafeCSS,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as shared from './shared/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-pagecontainer': DePageContainer;
+  }
+}
+
+@customElement('dedocument-pagecontainer')
+export class DePageContainer extends DeesElement {
+  public static demo = () => html`
+    <dedocument-pagecontainer .format="${'a4'}"></dedocument-pagecontainer>
+  `;
+
+  @property({
+    type: String,
+  })
+  public format: 'a4' = 'a4';
+
+  @property({
+    type: Boolean,
+  })
+  public printMode = false;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        display: block;
+        background: white;
+        color: #333;
+        padding: 0px;
+        width: ${unsafeCSS(shared.a4Width + 'px')};
+        height: ${unsafeCSS(shared.a4Height + 'px')};
+        position: relative;
+        border-radius: 3px;
+        overflow: hidden;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          box-shadow: ${this.printMode ? `none` : `0px 0px 10px rgba(0,0,0,0.3)`};
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+}

package/ts_web/elements/pagecontent.ts

@@ -0,0 +1,147 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  unsafeCSS,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as shared from './shared/index.js';
+import * as tsclass from '@tsclass/tsclass';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-pagecontent': DePageContent;
+  }
+}
+
+@customElement('dedocument-pagecontent')
+export class DePageContent extends DeesElement {
+  public static demo = () => html`
+    <dedocument-pagecontent .format="${'a4'}"></dedocument-pagecontent>
+  `;
+
+  @property({
+    type: Number,
+  })
+  public letterData: tsclass.business.ILetter;
+
+  @property({
+    type: Number,
+  })
+  public pageNumber: number = 1;
+
+  @property({
+    type: Number,
+  })
+  public pageTotalNumber: number = 1;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        color: #333;
+      }
+
+      .content {
+        position: absolute;
+
+        left: ${unsafeCSS(shared.leftMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        bottom: 170px;
+        overflow: visible;
+      }
+
+      .content .subject {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 20px;
+      }
+
+      .content .text {
+        text-align: left;
+      }
+
+      .subjectRepeated {
+        position: relative;
+        text-align: center;
+        background: #eeeeee;
+        color: #999;
+        border-radius: 50px;
+        padding: 5px 10px;
+        margin: auto;
+        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 {
+    return html`
+      <style>
+        .content {
+          top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
+        }
+      </style>
+      <div class="content">
+        ${this.pageNumber === 1
+          ? html`<div class="subject">${this.letterData.subject}</div>`
+          : html`
+              <div class="subjectRepeated">
+                ${this.letterData.subject} (Page ${this.pageNumber})
+              </div>
+            `}
+        <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 {
+    super.firstUpdated(_changedProperties);
+    this.checkOverflow();
+  }
+
+  public async checkOverflow() {
+    await this.elementDomReady;
+    const contentContainer = this.shadowRoot.querySelector('.content');
+    if (contentContainer.scrollHeight > contentContainer.clientHeight) {
+      console.log('overflows');
+      return true;
+    } else {
+      console.log('does not overflow!');
+      return false;
+    }
+  }
+}