126 lines
3.1 KiB
TypeScript
126 lines
3.1 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-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>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|