fix(core): update
This commit is contained in:
83
ts_web/elements/viewer.ts
Normal file
83
ts_web/elements/viewer.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
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')) {
|
||||
}
|
||||
};
|
||||
}
|
Reference in New Issue
Block a user