-
Notifications
You must be signed in to change notification settings - Fork 356
/
status-header-base.ts
42 lines (39 loc) · 1.41 KB
/
status-header-base.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { html, LitElement } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { property } from 'lit/decorators.js';
export class StatusHeaderBase extends LitElement {
@property() state: 'active' | 'positive' | 'caution' | 'error' | 'neutral' =
'neutral';
@property({ type: String }) statusText = '';
@property({ type: String }) statusHelper = '';
@property({ type: String }) titleText = '';
protected override render() {
const classes = {
active: this.state === 'active',
caution: this.state === 'caution',
error: this.state === 'error',
positive: this.state === 'positive',
};
return html`
<div class="status-header ${classMap(classes)}">
<div class="status-header-title">
<div class="status-header-title-text">${this.titleText}</div>
<slot name="status-header-actions"></slot>
</div>
<div class="status-header-status">
<div class="status-header-icon">
<slot name="status-header-icon"></slot>
</div>
<div class="status-header-text-block">
<div class="status-header-text">${this.statusText}</div>
<div class="status-header-helper">${this.statusHelper}</div>
</div>
<div class="status-header-slot">
<slot name="status-header-text"></slot>
</div>
</div>
<slot></slot>
</div>
`;
}
}