-
Notifications
You must be signed in to change notification settings - Fork 357
/
text-lockup.ts
49 lines (39 loc) · 1.18 KB
/
text-lockup.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
43
44
45
46
47
48
49
import { html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import styles from './text-lockup.scss';
declare global {
interface HTMLElementTagNameMap {
'td-text-lockup': CovalentTextLockup;
}
}
@customElement('td-text-lockup')
export class CovalentTextLockup extends LitElement {
static override styles = [styles];
@property()
subText!: string;
@property()
icon?: string;
@property()
state?: 'active' | 'positive' | 'negative' | 'caution';
@property()
scale: 'large' | 'small' = 'small';
@property({ type: Boolean, reflect: true })
trailingSubText = false;
override render() {
const classes: { [key: string]: boolean } = {
'subtext--trailing': this.trailingSubText,
};
classes[`scale--${this.scale}`] = true;
if (this.state) {
classes[`subtext-state--${this.state}`] = true;
}
return html`<span class="${classMap(classes)}"
><span class="subtext">${this.renderIcon()}${this.subText}</span
><slot></slot
></span>`;
}
renderIcon() {
return this.icon ? html`<td-icon>${this.icon}</td-icon>` : nothing;
}
}