57 строки
1.3 KiB
TypeScript
57 строки
1.3 KiB
TypeScript
import {LitElement, css, html} from 'lit';
|
|
import {SHARED_STYLES} from '../css/shared-css.js';
|
|
import {customElement, property} from 'lit/decorators.js';
|
|
|
|
const CYAN = 120;
|
|
const DEFAULT_MAX = 7;
|
|
|
|
@customElement('chromedash-color-status')
|
|
class ChromedashColorStatus extends LitElement {
|
|
@property({type: Number})
|
|
max = DEFAULT_MAX;
|
|
@property({type: Number})
|
|
value;
|
|
|
|
static get styles() {
|
|
return [
|
|
...SHARED_STYLES,
|
|
css`
|
|
span {
|
|
background-color: rgb(255, 0, 0);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
height: 10px; /* Default. */
|
|
width: 10px; /* Default. */
|
|
}
|
|
|
|
:host(.corner) {
|
|
height: 100%;
|
|
}
|
|
:host(.corner) #status {
|
|
border-radius: 0;
|
|
height: 100%; /* Ensures we can color coverage when feature is scrolled.*/
|
|
width: 4px;
|
|
}
|
|
|
|
:host(.bottom) {
|
|
height: 8px;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
:host(.bottom) #status {
|
|
border-radius: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
render() {
|
|
const color = `hsl(${Math.round(CYAN - (this.value * CYAN) / this.max)}, 100%, 50%)`;
|
|
return html` <span id="status" style="background-color: ${color}"></span> `;
|
|
}
|
|
}
|