dees-catalog/ts_web/elements/dees-simple-appdash.ts
2023-10-05 14:36:59 +02:00

75 lines
1.6 KiB
TypeScript

import { demoFunc } from './dees-simple-appdash.demo.js';
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
} from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'dees-simple-appdash': DeesSimpleAppDash;
}
}
@customElement('dees-simple-appdash')
export class DeesSimpleAppDash extends DeesElement {
// STATIC
public static demo = demoFunc;
// INSTANCE
@property()
public name = 'Dees Simple Login';
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
user-select: none;
}
.appbar {
position: absolute;
top: 0;
height: 40px;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
font-size: 14px;
line-height: 40px;
font-family: 'Roboto', 'Inter', sans-serif;
padding: 0px 16px;
}
.appcontent {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
}
`,
];
public render(): TemplateResult {
return html`
<div class="appbar">
configvault v1.2.3
</div>
<div class="appcontent">
<slot></slot>
</div>
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
}
}