fix(core): update

ts_web/elements/pagefooter.ts

@@ -0,0 +1,132 @@
+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-pagefooter': DePageFooter;
+  }
+}
+
+@customElement('dedocument-pagefooter')
+export class DePageFooter extends DeesElement {
+  public static demo = () => html`
+    <dedocument-pagefooter .format="${'a4'}"></dedocument-pagefooter>
+  `;
+
+  @property({
+    type: Object,
+  })
+  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;
+      }
+      .bottomstripe {
+        position: absolute;
+        display: grid;
+        font-size: 11px;
+        overflow: visible;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        height: 130px;
+        content: '';
+        padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
+        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
+        grid-gap: 5px;
+        border-top: 2px solid #e4002b;
+      }
+
+      .bottomstripe .pageNumber {
+        position: absolute;
+        top: 0px;
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        background: #e4002b;
+        padding: 3px;
+        font-size: 9px;
+        color: #fff;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+      .bottomstripe .documentTitle {
+        position: absolute;
+        top: -18px;
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        background: #dddddd;
+        padding: 3px;
+        font-size: 9px;
+        color: #333;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="bottomstripe">
+        <div>
+          <strong>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 />
+          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 />
+          <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 />
+          <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 />
+          <i>bic:</i> ${this.letterData?.from?.sepaConnection?.bic}<br />
+        </div>
+        <div class="documentTitle">Subject: <b>${this.letterData?.subject}</b>${(() => {
+          const uidString = html`/ Document-UID: <b>${html`<a href="https://uid.signature.digital/">https://uid.signature.digital/</a>`}</b>`;
+          return ``;
+        })()}</div>
+        <div class="pageNumber">page ${this.pageNumber} of ${this.pageTotalNumber}</div>
+      </div>
+    `;
+  }
+}