lit-ct-components/src/ct-select-item.ts at master · Conectate/lit-ct-components · GitHub

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import "./ct-icon.js";

import { css, html } from "lit";

import { CtLit, customElement, property } from "./ct-lit.js";

@customElement("ct-select-item")
export class CtSelectItem extends CtLit {
	static styles = [
		css`
			:host {
				display: flex;
				align-items: center;
				cursor: pointer;
				background-color: var(--color-surface, #fff);
				transition: background-color 0.2s ease-in-out;
				padding: 8px;
				border-bottom: 1px solid var(--color-outline, #89898936);
			}
			button {
				min-width: 170px;
				color: var(--color-on-surface, #535353);
				margin: 0;
				height: 38px;
				width: 100%;
				background: none;
				outline: none;
				border: none;
				text-align: initial;
				cursor: pointer;
				transition: all 0.15s ease;
			}
			:host(:hover) {
				background-color: #85858516;
			}

			:host([selected]) {
				background-color: #8585851f;
			}
			.cicle {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 24px;
				min-width: 24px;
				height: 24px;
				min-height: 24px;
				border-radius: 50%;
				background-color: var(--color-primary-light, #2cb5e82b);
				color: var(--color-primary, #2cb5e8);
				margin-right: 16px;
				transition: all 0.15s ease;
			}
			:host([selected]) .cicle {
				background-color: var(--color-primary, #2cb5e8);
				color: var(--color-on-primary, #fff);
			}
			ct-icon {
				font-size: 16px;
				--ct-icon-size: 16px;
			}

			[hidden] {
				display: none;
			}
		`
	];
	@property({ type: Number }) value = 0;
	@property({ type: Boolean, reflect: true }) multi = false;
	@property({ type: Boolean, reflect: true }) selected = false;

	render() {
		return html`<div class="cicle" ?hidden=${!this.multi && !this.selected}><ct-icon icon="${this.selected ? `check` : ""}"></ct-icon></div>
			<button>
				<b><slot></slot></b>
			</button> `;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		"ct-select-item": CtSelectItem;
	}
}