dees-document/ts_web/elements/viewer.ts

84 lines
2.0 KiB
TypeScript
Raw Normal View History

2023-10-26 15:39:02 +00:00
import * as plugins from '../plugins.js';
import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
import { demoFunc } from './viewer.demo.js';
declare global {
interface HTMLElementTagNameMap {
'dedocument-viewer': DeDocumentViewer;
}
}
@customElement('dedocument-viewer')
export class DeDocumentViewer extends DeesElement {
// DEMO
public static demo = demoFunc;
// INSTANCE
public letterData: plugins.tsclass.business.ILetter = null;
public static styles = [
cssManager.defaultStyles,
css`
.maincontainer {
position: relative;
height: 100%;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#111')};
}
.controls {
top: 0px;
right: 0px;
left: 0px;
position: absolute;
height: 32px;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#111111ee')};
box-shadow: 0px 2px 8px 0px #000000;
}
.controlsShadow {
position: absolute;
top: 32px;
right: 0px;
left: 0px;
height: 16px;
width: 100%;
position: absolute;
background: linear-gradient(to bottom, #111111cc 0%, #11111100 100%);
}
.viewport {
position: absolute;
padding: 16px;
padding-top: 48px;
padding-bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
overscroll-behavior: contain;
}
`,
];
public render = () => {
return html`
<div class="maincontainer">
<div class="viewport">
${this.letterData
? html` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
: html``}
</div>
<div class="controls"></div>
</div>
`;
};
public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
super.updated(changedProperties);
if (changedProperties.has('letterData')) {
}
};
}