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/letterheader.ts
+++ b/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>
+    `;
+  }
+}