84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
|
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')) {
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|