133 lines
3.8 KiB
TypeScript
133 lines
3.8 KiB
TypeScript
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>
|
|
`;
|
|
}
|
|
}
|