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 '../../ts/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`
`;
@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`
Address:
${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}
Registration Info:
Amtsgericht Bremen
reg-#: HRB 35230 HB
vat-id: ${this.letterData.from.vatId}
Contact Info:
email: ${this.letterData.from.email}
phone: ${this.letterData.from.phone}
fax: ${this.letterData.from.fax}
Bank Connection:
beneficiary: ${this.letterData?.from?.name}
institution: ${this.letterData?.from?.sepaConnection?.institution}
iban: ${this.letterData?.from?.sepaConnection?.iban}
bic: ${this.letterData?.from?.sepaConnection?.bic}
page ${this.pageNumber} of ${this.pageTotalNumber}
`;
}
}