fix(core): update

2023-10-16 18:28:12 +02:00
commit 20ffd067b2
37 changed files with 7618 additions and 0 deletions
--- a/ts_web/elements/pagecontent.ts
+++ b/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;
+    }
+  }
+}