dees-document/ts_web/elements/page.ts
2023-10-16 18:28:12 +02:00

143 lines
3.4 KiB
TypeScript

import * as tsclass from '@tsclass/tsclass';
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';
declare global {
interface HTMLElementTagNameMap {
'dedocument-page': DePage;
}
}
@customElement('dedocument-page')
export class DePage extends DeesElement {
public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
@property({
type: String,
})
public format: 'a4' = 'a4';
@property({
type: Number,
})
public pageNumber: number = 1;
@property({
type: Number,
})
public pageTotalNumber: number = 1;
@property({
type: Object,
})
public letterData: tsclass.business.ILetter = shared.demoLetter;
@property({
type: Boolean,
reflect: true,
})
printMode = false;
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public static styles = [
domtools.elementBasic.staticStyles,
css`
:host {
}
.versionOverlay {
pointer-events: none;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
font-family: monospace;
font-size: 16px;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
.topInfo {
position: absolute;
top: 60px;
left: 40px;
color: red;
transform: rotate(-5deg);
}
.bigDraftText {
transform: rotate(-45deg);
font-size: 200px;
opacity: 0.05;
}
`,
];
public render(): TemplateResult {
return html`
<dedocument-pagecontainer .printMode=${this.printMode}>
<dedocument-pageheader
.letterData=${this.letterData}
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
></dedocument-pageheader>
${this.pageNumber === 1
? html`
<dedocument-letterheader
.pageNumber="${this.pageNumber}"
.letterData=${this.letterData}
.pageTotalNumber="${this.pageTotalNumber}"
></dedocument-letterheader>
`
: html``}
<dedocument-pagecontent
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
.letterData=${this.letterData}
><slot></slot
></dedocument-pagecontent>
<dedocument-pagefooter
.letterData=${this.letterData}
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
></dedocument-pagefooter>
<div class="versionOverlay">
${this.letterData.versionInfo.type === 'draft'
? html`
<div class="topInfo">
Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br>
-> Revision/Document version: ${this.letterData.versionInfo.version}
</div>
<div class="bigDraftText">DRAFT</div>
`
: html``}
</div>
</dedocument-pagecontainer>
`;
}
public async checkOverflow() {
await this.elementDomReady;
const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
return pageContent.checkOverflow();
}
}