ct-elements/src/ct-button-split.ts at master · Conectate/ct-elements · 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
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";

import { CtButton } from "./ct-button.js";

/**
 * @element ct-button-split
 */
@customElement("ct-button-split")
export class CtButtonSplit extends LitElement {
	static CtButtonStyle = css`
		ct-button-split ct-button {
			border: none;
			background: transparent;
			color: inherit;
			--color-primary-hover: transparent;
			--color-primary-active: transparent;
			--color-on-primary: transparent;
			--ct-button-padding: 0.4em 0.5em 0.4em 1em;
			--ct-button-radius: 26px 4px 4px 26px;
		}
	`;
	static styles = [
		CtButton.styles,
		css`
			:host {
				display: inline-flex;
				padding: 0;
			}
			::slotted(ct-button) {
				border: none;
				padding-right: 6px;
				background: transparent;
				border-radius: var(--radius) 0 0 var(--radius);
			}
			::slotted(ct-button-menu) {
				border-left: 1px solid #80808076;
				margin-right: 6px;
			}
			::slotted(ct-list-item) {
				min-width: 152px;
			}
		`
	];

	@property({ type: Boolean, reflect: true }) raised = false;
	@property({ type: Boolean, reflect: true }) shadow = false;
	@property({ type: Boolean, reflect: true }) flat = false;
	@property({ type: Boolean, reflect: true }) light = false;

	render() {
		return html`<slot></slot>`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		"ct-button-split": CtButtonSplit;
	}
}