1 | import { LitElement, html, customElement, property, css } from 'lit-element'
|
2 |
|
3 | import { styleMap } from 'lit-html/directives/style-map'
|
4 |
|
5 | @customElement('pill-element')
|
6 | export class PillTemplate extends LitElement {
|
7 | |
8 |
|
9 |
|
10 | @property({ type: String }) public imageUrl = ''
|
11 | @property({ type: String }) public label = ''
|
12 | @property({ type: String }) public backgroundColor = ''
|
13 | @property({ type: String }) public textColor = ''
|
14 | @property({ type: String }) public border = 'none'
|
15 | @property({ type: Object }) public customStyles = {
|
16 | backgroundColor: this.backgroundColor,
|
17 | color: this.textColor,
|
18 | border: this.border,
|
19 | }
|
20 |
|
21 | static get styles() {
|
22 | return css`
|
23 | .pill {
|
24 | display: flex;
|
25 | /* grid-template-columns: 1fr 2fr; */
|
26 | border: 1px solid #e2e6ef;
|
27 | box-sizing: border-box;
|
28 | border-radius: 60px;
|
29 | width: 100%;
|
30 | height: 100%;
|
31 | padding: 6px 12px 6px 6px;
|
32 | }
|
33 | .pill img {
|
34 | height: 100%;
|
35 | border-radius: 50px;
|
36 | margin-right: 6px;
|
37 | /* width: 100%; */
|
38 | /* padding: 3px; */
|
39 | /* box-sizing: border-box; */
|
40 | }
|
41 | .pill p {
|
42 | text-align: center;
|
43 | align-self: center;
|
44 | margin: auto;
|
45 | white-space: nowrap;
|
46 | /* Centers text since grid-template-columns auto has glitch */
|
47 | /* transform: translateX(-10%); */
|
48 | backface-visibility: inherit;
|
49 | }
|
50 | .no-img {
|
51 | grid-template-columns: 100%;
|
52 | }
|
53 | .no-img p {
|
54 | /* Reverts transform (see above) */
|
55 | /* transform: none; */
|
56 | }
|
57 | `
|
58 | }
|
59 |
|
60 | |
61 |
|
62 |
|
63 | public render() {
|
64 | |
65 |
|
66 |
|
67 |
|
68 | return html`
|
69 | <div
|
70 | class="pill ${this.imageUrl ? '' : 'no-img'}"
|
71 | style=${styleMap({
|
72 | backgroundColor: this.backgroundColor,
|
73 | color: this.textColor,
|
74 | border: this.border,
|
75 | })}
|
76 | >
|
77 | ${this.imageUrl ? html` <img src="${this.imageUrl}" alt="" /> ` : ''}
|
78 | <p>${this.label}</p>
|
79 | </div>
|
80 | `
|
81 | }
|
82 | }
|
83 |
|
\ | No newline at end of file |