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
109
110
111
112
113
114
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js";
import RichSelect from "../components/rich-select.js";
export default class RichPicker extends PaymentStateSubscriberMixin(
HTMLElement
) {
static get observedAttributes() {
return ["label"];
}
constructor() {
super();
this.classList.add("rich-picker");
this.dropdown = new RichSelect();
this.dropdown.addEventListener("change", this);
this.labelElement = document.createElement("label");
this.addLink = document.createElement("a");
this.addLink.className = "add-link";
this.addLink.href = "javascript:void(0)";
this.addLink.addEventListener("click", this);
this.editLink = document.createElement("a");
this.editLink.className = "edit-link";
this.editLink.href = "javascript:void(0)";
this.editLink.addEventListener("click", this);
this.invalidLabel = document.createElement("label");
this.invalidLabel.className = "invalid-label";
}
connectedCallback() {
if (!this.dropdown.popupBox.id) {
this.dropdown.popupBox.id =
"select-" + Math.floor(Math.random() * 1000000);
}
this.labelElement.setAttribute("for", this.dropdown.popupBox.id);
this.invalidLabel.setAttribute("for", this.dropdown.popupBox.id);
// The document order, by default, controls tab order so keep that in mind if changing this.
this.appendChild(this.labelElement);
this.appendChild(this.dropdown);
this.appendChild(this.editLink);
this.appendChild(this.addLink);
this.appendChild(this.invalidLabel);
super.connectedCallback();
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == "label") {
this.labelElement.textContent = newValue;
}
}
render(state) {
this.editLink.hidden = !this.dropdown.value;
let errorText = this.errorForSelectedOption(state);
this.classList.toggle("invalid-selected-option", !!errorText);
this.invalidLabel.textContent = errorText;
this.addLink.textContent = this.dataset.addLinkLabel;
this.editLink.textContent = this.dataset.editLinkLabel;
}
get selectedOption() {
return this.dropdown.selectedOption;
}
get selectedRichOption() {
return this.dropdown.selectedRichOption;
}
get requiredFields() {
return this.selectedOption ? this.selectedOption.requiredFields || [] : [];
}
get fieldNames() {
return [];
}
/**
* @param {object} state Application state
* @returns {string} Containing an error message for the picker or "" for no error.
*/
errorForSelectedOption(state) {
if (!this.selectedOption) {
return "";
}
if (!this.dataset.invalidLabel) {
throw new Error("data-invalid-label is required");
}
return this.missingFieldsOfSelectedOption().length
? this.dataset.invalidLabel
: "";
}
missingFieldsOfSelectedOption() {
let selectedOption = this.selectedOption;
if (!selectedOption) {
return [];
}
let fieldNames = this.selectedRichOption.requiredFields || [];
// Return all field names that are empty or missing from the option.
return fieldNames.filter(name => !selectedOption.getAttribute(name));
}
}
|
