/
BoltActionElement.js
76 lines (66 loc) · 2.13 KB
/
BoltActionElement.js
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
import { declarativeClickHandler } from '@bolt/core-v3.x/utils/declarative-click-handler';
import { watchForComponentMutations } from '@bolt/core-v3.x/utils/watch-for-component-mutations';
import { supportsShadowDom } from './lib/utils';
import { BoltElement } from './BoltElement';
// Subclass of BoltElement that's designed to handle link-like component behavior
class BoltActionElement extends BoltElement {
static get properties() {
return {
url: String,
target: String,
disabled: {
type: Boolean,
reflect: true,
},
onClick: {
type: String,
attribute: 'on-click',
},
onClickTarget: {
type: String,
attribute: 'on-click-target',
},
};
}
constructor(self) {
self = super(self);
self.rootElementTags = [];
self.delegateFocus = true;
self.clickHandler = self.clickHandler.bind(self);
return self;
}
connectedCallback() {
super.connectedCallback && super.connectedCallback();
this.addEventListener('click', this.clickHandler);
}
disconnectedCallback() {
super.disconnectedCallback && super.disconnectedCallback();
this.removeEventListener('click', this.clickHandler);
// @todo: update when refactoring the logic to handle injected slotted content
//
// if (supportsShadowDom && this.useShadow) {
// if (this.observer) {
// this.observer.disconnect();
// }
// }
}
// Attach external events declaratively
clickHandler() {
declarativeClickHandler(this);
}
firstUpdated() {
super.firstUpdated && super.firstUpdated();
// @todo: update when refactoring the logic to handle injected slotted content
//
// re-render if Shadow DOM is supported and enabled; temp workaround to dealing w/ components already rendered, but without slot support
// if (supportsShadowDom && this.useShadow && !this.observer) {
// this.observer = watchForComponentMutations(this);
// this.observer.observe(this, {
// attributes: false,
// childList: true,
// characterData: false,
// });
// }
}
}
export { BoltActionElement };