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 ${this.currentIncidences.length ? html`` : html`
No incidents ongoing.
`} Past Incidents ${this.pastIncidences.length ? html`` : html`
No past incidents in the last 90 days.
`}
`; } public dispatchReportNewIncident() { this.dispatchEvent(new CustomEvent('reportNewIncident', {})); } public dispatchStatusSubscribe() { this.dispatchEvent(new CustomEvent('statusSubscribe', {})); } }