This repository has been archived by the owner on Feb 12, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 88
/
button-base.ts
108 lines (80 loc) · 2.88 KB
/
button-base.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { ElementRef, HostBinding, Input } from '@angular/core';
import { ColorTheme } from '../style';
export const BUTTON_HOST_ATTRIBUTES = [
'gd-button',
'gd-icon-button',
'gd-flat-button',
];
export const BUTTON_HOST_ATTRIBUTE_CLASS_NAME_MAP = {
'gd-button': 'Button',
'gd-icon-button': 'IconButton',
'gd-flat-button': 'FlatButton',
};
export type ButtonIconContainsPosition = 'left' | 'right' | null;
export abstract class ButtonBase<T extends HTMLElement> {
protected constructor(protected elementRef: ElementRef<T>) {
// For each of the variant selectors that is prevent in the button's host
// attributes, add the correct corresponding class.
for (const attr of BUTTON_HOST_ATTRIBUTES) {
if (this.hasHostAttributes(attr)) {
this.hostElement.classList.add(BUTTON_HOST_ATTRIBUTE_CLASS_NAME_MAP[attr]);
}
}
this.color = 'normal';
}
protected _color: ColorTheme;
@Input()
get color(): ColorTheme {
return this._color;
}
set color(color: ColorTheme) {
this.updateColorClassName(color);
}
/** Whether if show spinner. */
@Input() showSpinner: boolean = false;
/** Whether if focus hidden. */
@Input() focusHidden: boolean = false;
/** Icon contains position. */
@Input() iconContains: ButtonIconContainsPosition = null;
/** Whether if button is big size. */
@Input() bigSize: boolean = false;
@HostBinding('class.Button--showSpinner')
private get showSpinnerClass() {
return this.showSpinner;
}
@HostBinding('class.Button--focusHidden')
private get focusHiddenClass() {
return this.focusHidden;
}
@HostBinding('class.Button--iconContains-left')
private get iconContainsLeftClass() {
return this.iconContains === 'left';
}
@HostBinding('class.Button--iconContains-right')
private get iconContainsRightClass() {
return this.iconContains === 'right';
}
@HostBinding('class.Button--size-big')
private get bigSizeClass() {
return this.bigSize;
}
get hostElement(): T {
return this.elementRef.nativeElement;
}
protected updateColorClassName(color: ColorTheme): void {
const hostEl = this.hostElement;
if (this._color) {
const previousColorClassName = `Button--color-${this._color}`;
// Remove previous button color class.
if (hostEl.classList.contains(previousColorClassName)) {
hostEl.classList.remove(previousColorClassName);
}
}
const nextClassName = `Button--color-${color}`;
hostEl.classList.add(nextClassName);
this._color = color;
}
private hasHostAttributes(...attributes: string[]): boolean {
return attributes.some(attribute => this.hostElement.hasAttribute(attribute));
}
}