statuspage/ts_web/elements/upl-statuspage-assetsselector.ts
2023-01-05 13:37:28 +01:00

64 lines
1.3 KiB
TypeScript

import {
DeesElement,
property,
html,
customElement,
TemplateResult,
cssManager,
css,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import './internal/uplinternal-miniheading.js';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-assetsselector': UplStatuspageAssetsselector;
}
}
@customElement('upl-statuspage-assetsselector')
export class UplStatuspageAssetsselector extends DeesElement {
public static demo = () => html`
<upl-statuspage-assetsselector></upl-statuspage-assetsselector>
`;
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
padding: 0px 0px 15px 0px;
display: block;
background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
font-family: Inter;
color: #fff;
}
.mainbox {
margin: auto;
max-width: 900px;
text-align: center;
height: 50px;
border-radius: 3px;
background: ${cssManager.bdTheme('#ffffff', '#333333')};;
}
`,
]
public render(): TemplateResult {
return html`
<style>
</style>
<uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
<div class="mainbox">
Hello!
</div>
`;
}
}