import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'upl-statuspage-header': UplStatuspageHeader; } } @customElement('upl-statuspage-header') export class UplStatuspageHeader extends DeesElement { // STATIC public static demo = () => html` `; // INSTANCE @property() public pageTitle: string = "Statuspage Title"; constructor() { super(); } public static styles = [ domtools.elementBasic.staticStyles, css` :host { display: block; background: ${cssManager.bdTheme('#eeeeeb', '#222222')}; font-family: Roboto Mono; color: ${cssManager.bdTheme('#333333', '#ffffff')}; } .mainbox { margin: auto; max-width: 900px; } .mainbox .actions { display: flex; justify-content: flex-end; padding: 20px 0px 40px 0px; } .mainbox .actions .actionButton { background: ${cssManager.bdTheme('#00000000', '#ffffff00')}; font-size: 12px; border: 1px solid ${cssManager.bdTheme('#333', '#CCC')}; padding: 6px 10px 7px 10px; margin-left: 10px; border-radius: 3px; cursor: pointer; user-select: none; } .mainbox .actions .actionButton:hover { background: ${cssManager.bdTheme('#333333', '#efefef')}; border: 1px solid ${cssManager.bdTheme('#333333', '#efefef')}; color: ${cssManager.bdTheme('#fff', '#333333')}; } h1 { margin: 0px; text-align: center; font-weight: 300; font-size: 35px; } h2 { margin: 0px; margin-top: 10px; text-align: center; font-weight: 300; font-size: 18px; } ` ] public render(): TemplateResult { return html` ${domtools.elementBasic.styles}
report new incident
subscribe

${this.pageTitle}

STATUS BOARD

`; } public dispatchReportNewIncident() { this.dispatchEvent(new CustomEvent('reportNewIncident', { })) } public dispatchStatusSubscribe() { this.dispatchEvent(new CustomEvent('statusSubscribe', { })) } }