This repository has been archived by the owner on Jun 17, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 136
/
button.component.ts
81 lines (73 loc) · 1.96 KB
/
button.component.ts
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
import { Input, HostBinding, OnChanges, Directive, OnInit } from "@angular/core";
export type ButtonTypes = "primary" | "secondary" | "danger";
const buttonStyles: Record<ButtonTypes, string> = {
primary: [
"tw-border-primary-500",
"tw-bg-primary-500",
"!tw-text-contrast",
"hover:tw-bg-primary-700",
"hover:tw-border-primary-700",
"focus:tw-bg-primary-700",
"focus:tw-border-primary-700",
].join(" "),
secondary: [
"tw-bg-transparent",
"tw-border-text-muted",
"!tw-text-muted",
"hover:tw-bg-secondary-500",
"hover:tw-border-secondary-500",
"hover:!tw-text-contrast",
"focus:tw-bg-secondary-500",
"focus:tw-border-secondary-500",
"focus:!tw-text-contrast",
].join(" "),
danger: [
"tw-bg-transparent",
"tw-border-danger-500",
"!tw-text-danger",
"hover:tw-bg-danger-500",
"hover:tw-border-danger-500",
"hover:!tw-text-contrast",
"focus:tw-bg-danger-500",
"focus:tw-border-danger-500",
"focus:!tw-text-contrast",
].join(" "),
};
@Directive({
selector: "button[bit-button], a[bit-button]",
})
export class ButtonComponent implements OnInit, OnChanges {
@HostBinding("class") @Input() classList = "";
@Input()
buttonType: ButtonTypes = "secondary";
@Input()
block = false;
ngOnInit(): void {
this.classList = this.classes.join(" ");
}
ngOnChanges() {
this.ngOnInit();
}
get classes(): string[] {
return [
"tw-font-semibold",
"tw-py-1.5",
"tw-px-3",
"tw-rounded",
"tw-transition",
"tw-border",
"tw-border-solid",
"tw-text-center",
"hover:tw-no-underline",
"disabled:tw-bg-secondary-100",
"disabled:tw-border-secondary-100",
"disabled:!tw-text-main",
"focus:tw-outline-none",
"focus:tw-ring",
"focus:tw-ring-offset-2",
"focus:tw-ring-primary-700",
this.block ? "tw-w-full tw-block" : "",
buttonStyles[this.buttonType ?? "secondary"],
];
}
}