saasufy-components 4.2.0 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/input-provider.js +21 -0
- package/package.json +1 -1
package/input-provider.js
CHANGED
|
@@ -54,11 +54,24 @@ class InputProvider extends HTMLElement {
|
|
|
54
54
|
this.inputElement && this.inputElement.dispatchEvent(new Event('change'));
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
updateInputClassList(newValue) {
|
|
58
|
+
if (this.inputElement.type === 'checkbox') {
|
|
59
|
+
this.inputElement.classList.remove('empty-input');
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (newValue === '' || newValue == null) {
|
|
63
|
+
this.inputElement.classList.add('empty-input');
|
|
64
|
+
} else {
|
|
65
|
+
this.inputElement.classList.remove('empty-input');
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
57
69
|
set value(newValue) {
|
|
58
70
|
if (this.inputElement) {
|
|
59
71
|
if (newValue && this.hasAttribute('computable-value')) {
|
|
60
72
|
newValue = renderTemplate(newValue);
|
|
61
73
|
}
|
|
74
|
+
this.updateInputClassList(newValue);
|
|
62
75
|
let oldValue;
|
|
63
76
|
if (this.inputElement.type === 'checkbox') {
|
|
64
77
|
oldValue = this.inputElement.checked;
|
|
@@ -117,6 +130,9 @@ class InputProvider extends HTMLElement {
|
|
|
117
130
|
let optionElements = options
|
|
118
131
|
.split(',')
|
|
119
132
|
.map((option) => {
|
|
133
|
+
if (option === placeholder) {
|
|
134
|
+
return `<option value="" selected class="select-default-option">${option}</option>`;
|
|
135
|
+
}
|
|
120
136
|
return `<option value="${option}">${option}</option>`;
|
|
121
137
|
})
|
|
122
138
|
.join('');
|
|
@@ -153,6 +169,7 @@ class InputProvider extends HTMLElement {
|
|
|
153
169
|
}
|
|
154
170
|
}
|
|
155
171
|
|
|
172
|
+
this.updateInputClassList(value);
|
|
156
173
|
this.appendChild(this.inputElement);
|
|
157
174
|
|
|
158
175
|
let destroyHandlers = this.updateConsumerElementsOnEdit();
|
|
@@ -160,6 +177,7 @@ class InputProvider extends HTMLElement {
|
|
|
160
177
|
if (value) {
|
|
161
178
|
this.value = value;
|
|
162
179
|
}
|
|
180
|
+
|
|
163
181
|
this.destroy = () => {
|
|
164
182
|
destroyHandlers();
|
|
165
183
|
};
|
|
@@ -176,6 +194,7 @@ class InputProvider extends HTMLElement {
|
|
|
176
194
|
let debounce = debouncer();
|
|
177
195
|
|
|
178
196
|
let onInputChange = (event) => {
|
|
197
|
+
this.updateInputClassList(event.target.value);
|
|
179
198
|
debounce(async () => {
|
|
180
199
|
let elementName = this.getAttribute('name');
|
|
181
200
|
let providerTemplate = this.getAttribute('provider-template');
|
|
@@ -183,6 +202,7 @@ class InputProvider extends HTMLElement {
|
|
|
183
202
|
if (inputElement.type === 'checkbox') {
|
|
184
203
|
let checked = !!inputElement.checked;
|
|
185
204
|
this.lastValue = checked;
|
|
205
|
+
|
|
186
206
|
updateConsumerElements(consumers, checked, providerTemplate, elementName);
|
|
187
207
|
return;
|
|
188
208
|
}
|
|
@@ -201,6 +221,7 @@ class InputProvider extends HTMLElement {
|
|
|
201
221
|
let onInputKeyUp;
|
|
202
222
|
if (inputElement.type !== 'checkbox') {
|
|
203
223
|
onInputKeyUp = async (event) => {
|
|
224
|
+
this.updateInputClassList(event.target.value);
|
|
204
225
|
debounce(async () => {
|
|
205
226
|
let elementName = this.getAttribute('name');
|
|
206
227
|
let providerTemplate = this.getAttribute('provider-template');
|