dees-document/ts_web/elements/pagecontainer.ts

70 lines
1.4 KiB
TypeScript
Raw Normal View History

2023-10-16 16:28:12 +00:00
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-pagecontainer': DePageContainer;
}
}
@customElement('dedocument-pagecontainer')
export class DePageContainer extends DeesElement {
public static demo = () => html`
<dedocument-pagecontainer .format="${'a4'}"></dedocument-pagecontainer>
`;
@property({
type: String,
})
public format: 'a4' = 'a4';
@property({
type: Boolean,
})
public printMode = false;
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public static styles = [
domtools.elementBasic.staticStyles,
css`
:host {
display: block;
background: white;
color: #333;
padding: 0px;
width: ${unsafeCSS(shared.a4Width + 'px')};
height: ${unsafeCSS(shared.a4Height + 'px')};
position: relative;
border-radius: 3px;
overflow: hidden;
}
`,
];
public render(): TemplateResult {
return html`
<style>
:host {
box-shadow: ${this.printMode ? `none` : `0px 0px 10px rgba(0,0,0,0.3)`};
}
</style>
<slot></slot>
`;
}
}