import { DeesElement, html, customElement, TemplateResult, property, state, cssManager, css, } from '@designestate/dees-element'; import * as tsclass from '@tsclass/tsclass'; declare global { interface HTMLElementTagNameMap { 'dees-dataview-statusobject': DeesDataviewStatusobject; } } @customElement('dees-dataview-statusobject') export class DeesDataviewStatusobject extends DeesElement { public static demo = () => html` `; @property({ type: Object }) statusObject: tsclass.code.IStatusObject; public static styles = [ cssManager.defaultStyles, css` .mainbox { border-radius: 3px; background: ${cssManager.bdTheme('#fff', '#1b1b1b')}; box-shadow: 0px 1px 3px #00000030; min-height: 48px; color: ${cssManager.bdTheme('#000', '#fff')}; } .heading { display: grid; align-items: center; grid-template-columns: 40px auto 120px; } h1 { display: block; margin: 0px; padding: 0px; height: 48px; text-transform: uppercase; font-size: 12px; line-height: 48px; } .statusdot { height: 8px; width: 8px; border-radius: 6px; background: grey; margin: auto; } .copyMain { cursor: pointer; font-size: 8px; font-weight: 600; text-transform: uppercase; border: 1px solid ${cssManager.bdTheme('#999', '#444')}; text-align: center; padding: 4px; border-radius: 3px; margin-right: 16px; } .statusdot.ok { background: green; } .statusdot.not_ok{ background: red; } .statusdot.partly_ok { background: orange; } .detail { height: 60px; align-items: center; display: grid; grid-template-columns: 40px auto; border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')}; } .detail .detailsText { overflow: auto; } .detail .detailsText .label { font-size: 12px; } .detail .detailsText .value { font-size: 16px; font-family: Roboto Mono; } `, ]; render(): TemplateResult { return html`

${this.statusObject?.name || 'no status object assigned'}

Copy as JSON
${this.statusObject?.details?.map((detailArg) => { return html`
${detailArg.name}
${detailArg.value}
`; })}
`; } async firstUpdated() {} }