88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import { LitElement, html, css, nothing } from 'lit';
|
|
import { property, customElement } from 'lit/decorators.js';
|
|
|
|
@customElement('emerald-counter')
|
|
export class EmeraldCounter extends LitElement {
|
|
static styles = css`
|
|
:host {
|
|
display: inline-block;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
div#main {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
svg {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
div#counter {
|
|
display: grid;
|
|
justify-content: center;
|
|
align-content: center;
|
|
position: absolute;
|
|
z-index: 1;
|
|
font-family: "Helvetica Neue", "Arial Nova", Helvetica, Arial, sans-serif;
|
|
font-size: 0.25em;
|
|
top: 8%;
|
|
left: 60%;
|
|
width: 30%;
|
|
height: 30%;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 50%;
|
|
border: 0.2em solid white;
|
|
font-weight: bold;
|
|
background: red;
|
|
color: white;
|
|
}
|
|
|
|
div#counter span {
|
|
padding-top: 0.28em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
`;
|
|
@property({ type: Number, attribute: "current-count" })
|
|
counter = 0;
|
|
|
|
@property({ attribute: "icon-color" })
|
|
color = "#000000";
|
|
|
|
render() {
|
|
return html`
|
|
<div id="main">
|
|
<svg
|
|
id="Layer_1"
|
|
version="1.1"
|
|
viewBox="0 0 512 512"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
part="bell"
|
|
>
|
|
<g>
|
|
<path
|
|
style="stroke: ${this.color}; fill: ${this.color}"
|
|
d="M381.7,225.9c0-97.6-52.5-130.8-101.6-138.2c0-0.5,0.1-1,0.1-1.6c0-12.3-10.9-22.1-24.2-22.1c-13.3,0-23.8,9.8-23.8,22.1 c0,0.6,0,1.1,0.1,1.6c-49.2,7.5-102,40.8-102,138.4c0,113.8-28.3,126-66.3,158h384C410.2,352,381.7,339.7,381.7,225.9z"
|
|
/>
|
|
<path
|
|
style="stroke: ${this.color}; fill: ${this.color}"
|
|
d="M256.2,448c26.8,0,48.8-19.9,51.7-43H204.5C207.3,428.1,229.4,448,256.2,448z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
${!this.counter || this.counter < 1
|
|
? nothing
|
|
: html`<div id="counter" part="counter"><span part="number">${this.counter}</span></div>`}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|