@design.estate/dees-document 1.0.91

package/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>
+    `;
+  }
+}

package/ts_web/elements/pageheader.ts

@@ -0,0 +1,96 @@
+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-pageheader': DePageHeader;
+  }
+}
+
+@customElement('dedocument-pageheader')
+export class DePageHeader extends DeesElement {
+  public static demo = () => html`
+    <dedocument-pageheader .format="${'a4'}"></dedocument-pageheader>
+  `;
+
+  @property({
+    type: Object,
+  })
+  public letterData: tsclass.business.ILetter = null;
+
+  @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;
+      }
+
+      .topstripe {
+        position: absolute;
+        overflow: hidden;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        height: 130px;
+        color: #333;
+        text-align: center;
+        border-bottom: 2px solid #00000020;
+      }
+      .topstripe2 {
+        position: absolute;
+        overflow: hidden;
+        top: 130px;
+        left: auto;
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        height: 20px;
+        line-height: 20px;
+        color: #333;
+        font-size: 10px;
+      }
+      .topstripe img {
+        filter: invert(1);
+        position: absolute;
+        bottom: 10px;
+        height: 25px;
+        left: auto;
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="topstripe">
+        <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" />
+      </div>
+      <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
+    `;
+  }
+}

package/ts_web/elements/shared/demoletter.ts

@@ -0,0 +1,121 @@
+import * as tsclass from '@tsclass/tsclass';
+const fromContact: tsclass.business.IContact = {
+  name: 'Awesome From Company',
+  type: 'company',
+  description: 'a company that does stuff',
+  address: {
+    streetName: 'Awesome Street',
+    houseNumber: '5',
+    city: 'Bremen',
+    country: 'Germany',
+    postalCode: '28359',
+  },
+  vatId: 'DE12345678',
+  sepaConnection: {
+    bic: 'BPOTBEB1',
+    iban: 'BE01234567891616'
+  },
+  email: 'hello@awesome.company',
+  phone: '+49 421 1234567',
+  fax: '+49 421 1234568',
+
+};
+
+const toContact: tsclass.business.IContact = {
+  name: 'Awesome To GmbH',
+  type: 'company',
+  customerNumber: 'LL-CLIENT-123',
+  description: 'a company that does stuff',
+  address: {
+    streetName: 'Awesome Street',
+    houseNumber: '5',
+    city: 'Bremen',
+    country: 'Germany',
+    postalCode: '28359'
+  },
+  vatId: 'BE12345678',
+}
+
+export const demoLetter: tsclass.business.ILetter = {
+  versionInfo: {
+    type: 'draft',
+    version: '1.0.0',
+  },
+  accentColor: null,
+  content: {
+    textData: null,
+    timesheetData: null,
+    contractData: {
+      contractDate: Date.now(),
+      id: 'someid'
+    },
+    invoiceData: {
+      id: 'LL-INV-48765',
+      reverseCharge: true,
+      dueInDays: 30,
+      billedBy: fromContact,
+      billedTo: toContact,
+      status: null,
+      deliveryDate: new Date().getTime(),
+      periodOfPerformance: null,
+      printResult: null,
+      
+      items: [
+        {
+          name: 'Item with 19% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 100,
+          unitType: 'hours',
+          vatPercentage: 19,
+          currency: 'EUR',
+        },
+        {
+          name: 'Item with 7% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 100,
+          unitType: 'hours',
+          vatPercentage: 7,
+          currency: 'EUR',
+        },
+        {
+          name: 'Item with 7% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 7,
+          currency: 'EUR',
+        },
+        {
+          name: 'Item with 21% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 21,
+          currency: 'EUR',
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          currency: 'EUR',
+        },
+      ],
+    }
+  },
+  
+  date: Date.now(),
+  type: 'invoice',
+  needsCoverSheet: false,
+  objectActions: [],
+  pdf: null,
+  from: fromContact,
+  to: toContact,
+  incidenceId: null,
+  language: null,
+  legalContact: null,
+  logoUrl: null,
+  pdfAttachments: null,
+  subject: 'Invoice: LL-INV-48765',
+}

package/ts_web/elements/shared/index.ts

@@ -0,0 +1,6 @@
+export const a4Height = 1122;
+export const a4Width = 794;
+export const rightMargin = 70;
+export const leftMargin = 90;
+
+export * from './demoletter.js';

package/ts_web/index.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

package/ts_web/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './page1.js';
+export * from './page2.js';

package/ts_web/pages/page1.ts

@@ -0,0 +1,18 @@
+import { html } from '@design.estate/dees-element';
+import { demoLetter } from '../elements/shared/index.js';
+import * as plugins from '../plugins.js';
+
+export const page1 = () => html`
+  <style>
+    dedocument-dedocument {
+      margin: 40px;
+    }
+  </style>
+  <dedocument-dedocument .printMode=${false} letterData=${plugins.smartjson.stringifyBase64({
+      ...demoLetter,
+      from: {
+        ...demoLetter.from,
+        description: 'a string set via stringified JSON'
+      }
+    } as plugins.tsclass.business.ILetter)}> </dedocument-dedocument>
+`;

package/ts_web/pages/page2.ts

@@ -0,0 +1,5 @@
+import { html } from "@design.estate/dees-element";
+
+export const page2 = () => html`
+  <first-element></first-element>
+`;

package/ts_web/plugins.ts

@@ -0,0 +1,15 @@
+// tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+
+export { tsclass };
+
+// @pushrocks scope
+import * as smartjson from '@push.rocks/smartjson';
+import * as smarttime from '@push.rocks/smarttime';
+
+export { smartjson, smarttime };
+
+// third party
+import * as qrcode from 'qrcode';
+
+export { qrcode };