108 lines
2.4 KiB
TypeScript
108 lines
2.4 KiB
TypeScript
import * as plugins from "../plugins.js";
|
|
|
|
import {
|
|
DeesElement,
|
|
css,
|
|
cssManager,
|
|
customElement,
|
|
html,
|
|
property,
|
|
} 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
|
|
@property({
|
|
type: Object,
|
|
reflect: true,
|
|
})
|
|
public letterData: plugins.tsclass.business.ILetter = null;
|
|
|
|
@property({
|
|
type: Object,
|
|
reflect: true,
|
|
})
|
|
public documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
|
|
|
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}
|
|
.documentSettings=${this.documentSettings}
|
|
></dedocument-dedocument>
|
|
`
|
|
: html``}
|
|
</div>
|
|
<div class="controls"></div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
public updated = (
|
|
changedProperties: Map<string | number | symbol, unknown>
|
|
) => {
|
|
super.updated(changedProperties);
|
|
if (changedProperties.has("letterData")) {
|
|
}
|
|
};
|
|
}
|