import * as plugins from '../plugins';
import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'upl-statuspage-incidents': UplStatuspageIncidents;
}
}
@customElement('upl-statuspage-incidents')
export class UplStatuspageIncidents extends DeesElement {
// STATIC
public static demo = () => html`
`;
// INSTANCE
@property({
type: Array
})
public currentIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
type: Array
})
public pastIncidences: plugins.uplInterfaces.data.IIncident[] = [];
@property({
type: Boolean
})
public whitelabel = false;
constructor() {
super();
}
public static styles = [
plugins.domtools.elementBasic.staticStyles,
css`
:host {
display: block;
background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
font-family: Roboto Mono;
color: ${cssManager.bdTheme('#333333', '#ffffff')};
}
.mainbox {
max-width: 900px;
margin: auto;
}
.noIncidentBox {
background: #333;
padding: 10px;
margin-bottom: 15px;
border-radius: 3px;
}
`
]
public render(): TemplateResult {
return html`
Current Incidents
No incidents ongoing.
Past Incidents
No past incidents in the last 90 days.
`;
}
public dispatchReportNewIncident() {
this.dispatchEvent(new CustomEvent('reportNewIncident', {
}))
}
public dispatchStatusSubscribe() {
this.dispatchEvent(new CustomEvent('statusSubscribe', {
}))
}
}