@everymatrix/general-registration 1.10.23 → 1.10.25
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/dist/cjs/{checkbox-group-input_12.cjs.entry.js → checkbox-group-input_13.cjs.entry.js} +290 -108
- package/dist/cjs/general-registration.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/general-registration/general-registration.css +11 -23
- package/dist/collection/components/general-registration/general-registration.js +100 -57
- package/dist/components/checkbox-group-input2.js +3 -7
- package/dist/components/checkbox-input2.js +2 -2
- package/dist/components/date-input2.js +2 -2
- package/dist/components/email-input2.js +9 -5
- package/dist/components/field-mixin.js +2 -2
- package/dist/components/general-input2.js +214 -22
- package/dist/components/general-registration.js +127 -79
- package/dist/components/number-input2.js +6 -4
- package/dist/components/password-input2.js +37 -14
- package/dist/components/select-input2.js +8 -7
- package/dist/components/tel-input2.js +7 -5
- package/dist/components/text-input2.js +9 -5
- package/dist/components/toggle-checkbox-input.js +6 -0
- package/dist/components/tooltipIcon.js +17 -0
- package/dist/esm/{checkbox-group-input_12.entry.js → checkbox-group-input_13.entry.js} +290 -109
- package/dist/esm/general-registration.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/general-registration/general-registration.esm.js +1 -1
- package/dist/general-registration/{p-482c4c1e.entry.js → p-01edd755.entry.js} +77 -77
- package/dist/types/Users/adrian.pripon/Documents/Work/stencil/widgets-stencil/packages/general-registration/.stencil/packages/general-input/src/utils/types.d.ts +1 -0
- package/dist/types/components/general-registration/general-registration.d.ts +3 -2
- package/package.json +1 -1
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["checkbox-group-
|
|
18
|
+
return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"dateFormat":[513,"date-format"],"buttonInsideForm":[516,"button-inside-form"],"errorMessage":[32],"isFormValid":[32],"isLoading":[32],"registrationStep":[32],"forms":[32],"limitStylingAppends":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32]},[[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]]], options);
|
|
19
19
|
});
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["checkbox-group-
|
|
17
|
+
return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-registration",{"endpoint":[513],"language":[513],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"dateFormat":[513,"date-format"],"buttonInsideForm":[516,"button-inside-form"],"errorMessage":[32],"isFormValid":[32],"isLoading":[32],"registrationStep":[32],"forms":[32],"limitStylingAppends":[32]},[[0,"sendValidityState","checkInputsValidityHandler"],[0,"sendInputValue","getInputsValueHandler"]]],[1,"general-input",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32]},[[4,"click","handleClickOutside"]]],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32]},[[16,"sendInputValue","valueChangedHandler"],[4,"click","handleClickOutside"]]],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"]]],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[4,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]]]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -41,32 +41,20 @@
|
|
|
41
41
|
align-items: center;
|
|
42
42
|
}
|
|
43
43
|
.registration__button {
|
|
44
|
-
text-transform: uppercase;
|
|
45
|
-
width: 250px;
|
|
46
|
-
height: 40px;
|
|
47
|
-
border-radius: 3px;
|
|
48
|
-
}
|
|
49
|
-
.registration__button:hover {
|
|
50
|
-
opacity: 0.8;
|
|
51
|
-
}
|
|
52
|
-
.registration__button:active {
|
|
53
|
-
opacity: 1;
|
|
54
|
-
}
|
|
55
|
-
.registration__button--next {
|
|
56
|
-
color: #FFFFFF;
|
|
57
|
-
background-color: #B0B0B0;
|
|
58
44
|
border: none;
|
|
59
|
-
|
|
60
|
-
.
|
|
61
|
-
color: #
|
|
62
|
-
|
|
63
|
-
|
|
45
|
+
border-radius: 20px;
|
|
46
|
+
box-shadow: 0px 2px 1px rgba(11, 16, 19, 0.6);
|
|
47
|
+
color: #0B1013;
|
|
48
|
+
font-size: 18px;
|
|
49
|
+
font-weight: bold;
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
width: 150px;
|
|
52
|
+
height: 45px;
|
|
64
53
|
}
|
|
65
54
|
.registration__button--disabled {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
opacity: 0.5;
|
|
55
|
+
color: #647480;
|
|
56
|
+
background-color: #CFCFCF;
|
|
57
|
+
box-shadow: none;
|
|
70
58
|
}
|
|
71
59
|
.registration__button--first-step {
|
|
72
60
|
display: none;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, h, Listen, Prop, State, Watch, Event } from '@stencil/core';
|
|
1
|
+
import { Component, h, Listen, Prop, State, Watch, Event, Element } from '@stencil/core';
|
|
2
2
|
import { getTranslations, translate, TRANSLATIONS } from '../../utils/locale.utils';
|
|
3
3
|
import '@everymatrix/general-input';
|
|
4
4
|
export class GeneralRegistration {
|
|
@@ -21,6 +21,7 @@ export class GeneralRegistration {
|
|
|
21
21
|
this.translationUrl = '';
|
|
22
22
|
this.isLoading = true;
|
|
23
23
|
this.forms = [];
|
|
24
|
+
this.limitStylingAppends = false;
|
|
24
25
|
this.listOfInputValues = [];
|
|
25
26
|
this.listOfInputValidity = [];
|
|
26
27
|
this.listOfActions = [];
|
|
@@ -33,7 +34,7 @@ export class GeneralRegistration {
|
|
|
33
34
|
this.setClientStyling = () => {
|
|
34
35
|
let sheet = document.createElement('style');
|
|
35
36
|
sheet.innerHTML = this.clientStyling;
|
|
36
|
-
this.
|
|
37
|
+
this.host.shadowRoot.prepend(sheet);
|
|
37
38
|
};
|
|
38
39
|
this.setClientStylingURL = () => {
|
|
39
40
|
let url = new URL(this.clientStylingUrl);
|
|
@@ -43,7 +44,7 @@ export class GeneralRegistration {
|
|
|
43
44
|
.then((data) => {
|
|
44
45
|
cssFile.innerHTML = data;
|
|
45
46
|
this.clientStyling = data;
|
|
46
|
-
setTimeout(() => { this.
|
|
47
|
+
setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
|
|
47
48
|
});
|
|
48
49
|
};
|
|
49
50
|
}
|
|
@@ -75,43 +76,22 @@ export class GeneralRegistration {
|
|
|
75
76
|
componentWillLoad() {
|
|
76
77
|
return this.getRegisterConfig()
|
|
77
78
|
.then((config) => {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
if (TRANSLATIONS[this.language][field.name]) {
|
|
82
|
-
Object.keys(TRANSLATIONS[this.language][field.name]).forEach((key) => {
|
|
83
|
-
field[key] = TRANSLATIONS[this.language][field.name][key];
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
return field;
|
|
87
|
-
});
|
|
88
|
-
})
|
|
89
|
-
.catch((error) => {
|
|
90
|
-
console.error('Failed to fetch translations:', error);
|
|
91
|
-
}).finally(() => {
|
|
92
|
-
this.formatConfig(config);
|
|
93
|
-
this.stepsStateMachine({ event: 'set', type: 'inputs' });
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
else {
|
|
97
|
-
this.formatConfig(config);
|
|
98
|
-
this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
|
|
99
|
-
this.stepsStateMachine({ event: 'set', type: 'inputs' });
|
|
100
|
-
}
|
|
79
|
+
this.formatConfig(config);
|
|
80
|
+
this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
|
|
81
|
+
this.stepsStateMachine({ event: 'set', type: 'inputs' });
|
|
101
82
|
});
|
|
102
83
|
}
|
|
103
|
-
|
|
104
|
-
|
|
84
|
+
componentDidLoad() {
|
|
85
|
+
this.registrationWidgetLoaded.emit();
|
|
86
|
+
window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
|
|
87
|
+
if (!this.limitStylingAppends && this.host) {
|
|
105
88
|
if (this.clientStyling)
|
|
106
89
|
this.setClientStyling();
|
|
107
90
|
if (this.clientStylingUrl)
|
|
108
91
|
this.setClientStylingURL();
|
|
92
|
+
this.limitStylingAppends = true;
|
|
109
93
|
}
|
|
110
94
|
}
|
|
111
|
-
componentDidLoad() {
|
|
112
|
-
this.registrationWidgetLoaded.emit();
|
|
113
|
-
window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
|
|
114
|
-
}
|
|
115
95
|
nextHandler(e) {
|
|
116
96
|
e.preventDefault();
|
|
117
97
|
// Trigger events in subwidgets.
|
|
@@ -298,10 +278,7 @@ export class GeneralRegistration {
|
|
|
298
278
|
})
|
|
299
279
|
.then((data) => {
|
|
300
280
|
this.isLoading = false;
|
|
301
|
-
|
|
302
|
-
alert(`User registered - the user ID is ${data.userId}`);
|
|
303
|
-
}
|
|
304
|
-
window.postMessage({ type: 'registrationSuccessful' }, window.location.href);
|
|
281
|
+
window.postMessage({ type: 'registrationSuccessful', userId: data === null || data === void 0 ? void 0 : data.userId }, window.location.href);
|
|
305
282
|
})
|
|
306
283
|
.catch((err) => {
|
|
307
284
|
this.isLoading = false;
|
|
@@ -325,22 +302,51 @@ export class GeneralRegistration {
|
|
|
325
302
|
return [inputElement];
|
|
326
303
|
}
|
|
327
304
|
});
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
305
|
+
this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
|
|
306
|
+
var _a;
|
|
307
|
+
// If the field is a togglecheckbox, add its subfields
|
|
308
|
+
if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
|
|
309
|
+
field.data.subFields.forEach(subfield => {
|
|
310
|
+
acc.push({
|
|
311
|
+
name: subfield.name,
|
|
312
|
+
isValid: this.setInitialValidStatus(subfield)
|
|
313
|
+
});
|
|
314
|
+
});
|
|
315
|
+
}
|
|
316
|
+
else {
|
|
317
|
+
acc.push({
|
|
318
|
+
name: field.name,
|
|
319
|
+
isValid: this.setInitialValidStatus(field)
|
|
320
|
+
});
|
|
321
|
+
}
|
|
322
|
+
return acc;
|
|
323
|
+
}, []);
|
|
324
|
+
this.listOfInputValues = this.listOfInputs.reduce((acc, field) => {
|
|
325
|
+
var _a, _b, _c;
|
|
326
|
+
// If the field type is a 'togglecheckbox', add its subfields
|
|
327
|
+
if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
|
|
328
|
+
field.data.subFields.forEach(subfield => {
|
|
329
|
+
var _a, _b;
|
|
330
|
+
acc.push({
|
|
331
|
+
name: subfield.name,
|
|
332
|
+
value: ((_a = subfield.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
|
|
333
|
+
isDuplicate: subfield.isDuplicateInput || false,
|
|
334
|
+
type: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'togglecheckbox'
|
|
335
|
+
? 'togglecheckbox'
|
|
336
|
+
: null
|
|
337
|
+
});
|
|
338
|
+
});
|
|
339
|
+
}
|
|
340
|
+
else {
|
|
341
|
+
acc.push({
|
|
342
|
+
name: field.name,
|
|
343
|
+
value: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'checkbox' ? 'false' : null,
|
|
344
|
+
isDuplicate: field.isDuplicateInput || false,
|
|
345
|
+
type: ((_c = field.inputType) === null || _c === void 0 ? void 0 : _c.toLowerCase()) == 'checkboxgroup' ? 'checkboxgroup' : null
|
|
346
|
+
});
|
|
347
|
+
}
|
|
348
|
+
return acc;
|
|
349
|
+
}, []);
|
|
344
350
|
// Set the list of actions
|
|
345
351
|
this.listOfActions = config.content.actions.map(action => action);
|
|
346
352
|
this.registrationID = config.content.registrationID;
|
|
@@ -349,8 +355,32 @@ export class GeneralRegistration {
|
|
|
349
355
|
this.lastStep = this.registrationStep;
|
|
350
356
|
}
|
|
351
357
|
;
|
|
352
|
-
//
|
|
353
|
-
|
|
358
|
+
// The translations for fields happens here.
|
|
359
|
+
if (this.translationUrl) {
|
|
360
|
+
getTranslations(this.translationUrl).then(() => {
|
|
361
|
+
this.listOfInputs.forEach(field => {
|
|
362
|
+
var _a, _b;
|
|
363
|
+
this.addTranslation(field);
|
|
364
|
+
// Logic for fields types that have subfields
|
|
365
|
+
if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'togglecheckbox') {
|
|
366
|
+
field.data.subFields.forEach(subField => this.addTranslation(subField));
|
|
367
|
+
}
|
|
368
|
+
if (((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'checkboxgroup') {
|
|
369
|
+
this.addTranslation(field);
|
|
370
|
+
field.data.subFields.forEach(subField => this.addTranslation(subField));
|
|
371
|
+
}
|
|
372
|
+
return field;
|
|
373
|
+
});
|
|
374
|
+
})
|
|
375
|
+
.catch((error) => {
|
|
376
|
+
console.error('Failed to fetch translations:', error);
|
|
377
|
+
}).finally(() => {
|
|
378
|
+
this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
|
|
379
|
+
});
|
|
380
|
+
}
|
|
381
|
+
else {
|
|
382
|
+
this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
|
|
383
|
+
}
|
|
354
384
|
// Add the step to the registrationStepsData
|
|
355
385
|
this.registrationStepsState.regId = this.registrationID;
|
|
356
386
|
if (!this.registrationStepsState[this.registrationStep]) {
|
|
@@ -362,6 +392,13 @@ export class GeneralRegistration {
|
|
|
362
392
|
};
|
|
363
393
|
}
|
|
364
394
|
}
|
|
395
|
+
addTranslation(field) {
|
|
396
|
+
if (TRANSLATIONS[this.language][field.name]) {
|
|
397
|
+
Object.keys(TRANSLATIONS[this.language][field.name]).forEach((key) => {
|
|
398
|
+
field[key] = TRANSLATIONS[this.language][field.name][key];
|
|
399
|
+
});
|
|
400
|
+
}
|
|
401
|
+
}
|
|
365
402
|
setInitialValidStatus(field) {
|
|
366
403
|
var _a, _b;
|
|
367
404
|
// Input type checkbox, with no validation are valid
|
|
@@ -389,7 +426,11 @@ export class GeneralRegistration {
|
|
|
389
426
|
renderForm() {
|
|
390
427
|
return this.forms.map((form, index) => {
|
|
391
428
|
return h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el },
|
|
392
|
-
form[this.registrationStep] && form[this.registrationStep].map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
429
|
+
form[this.registrationStep] && form[this.registrationStep].map(input => h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
430
|
+
? (input.inputType.toLowerCase() == 'checkboxgroup' || input.inputType.toLowerCase() == 'togglecheckbox')
|
|
431
|
+
? input.data.subFields
|
|
432
|
+
: input.data.values
|
|
433
|
+
: [], defaultValue: input.defaultValue, autofilled: input.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: input.isDuplicateInput, "client-styling": this.clientStyling, tooltip: input.tooltip, placeholder: input.placeholder == null ? '' : input.placeholder, dateFormat: this.dateFormat })),
|
|
393
434
|
this.buttonInsideForm && this.renderButtons());
|
|
394
435
|
});
|
|
395
436
|
}
|
|
@@ -403,7 +444,7 @@ export class GeneralRegistration {
|
|
|
403
444
|
if (this.isLoading) {
|
|
404
445
|
return h("p", null, "Please wait, loading ...");
|
|
405
446
|
}
|
|
406
|
-
return (h("div", { class: `registration registration__${this.registrationStep}
|
|
447
|
+
return (h("div", { class: `registration registration__${this.registrationStep}` },
|
|
407
448
|
this.renderForm(),
|
|
408
449
|
h("p", { class: 'registration__error-message' }, this.errorMessage),
|
|
409
450
|
!this.buttonInsideForm && this.renderButtons()));
|
|
@@ -546,7 +587,8 @@ export class GeneralRegistration {
|
|
|
546
587
|
"isFormValid": {},
|
|
547
588
|
"isLoading": {},
|
|
548
589
|
"registrationStep": {},
|
|
549
|
-
"forms": {}
|
|
590
|
+
"forms": {},
|
|
591
|
+
"limitStylingAppends": {}
|
|
550
592
|
}; }
|
|
551
593
|
static get events() { return [{
|
|
552
594
|
"method": "registrationWidgetLoaded",
|
|
@@ -579,6 +621,7 @@ export class GeneralRegistration {
|
|
|
579
621
|
"references": {}
|
|
580
622
|
}
|
|
581
623
|
}]; }
|
|
624
|
+
static get elementRef() { return "host"; }
|
|
582
625
|
static get watchers() { return [{
|
|
583
626
|
"propName": "registrationStep",
|
|
584
627
|
"methodName": "sendStep"
|
|
@@ -991,10 +991,6 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
991
991
|
* Default value for the input.
|
|
992
992
|
*/
|
|
993
993
|
this.defaultValue = '';
|
|
994
|
-
/**
|
|
995
|
-
* Options of the input.
|
|
996
|
-
*/
|
|
997
|
-
this.options = [];
|
|
998
994
|
/**
|
|
999
995
|
* Client custom styling via inline style
|
|
1000
996
|
*/
|
|
@@ -1079,10 +1075,10 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
1079
1075
|
: [];
|
|
1080
1076
|
}
|
|
1081
1077
|
render() {
|
|
1082
|
-
return h("div", { class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
|
|
1078
|
+
return h("div", { class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'checkboxgroup__wrapper--flex' }, h("vaadin-checkbox", { class: 'checkbox__input', label: `${this.displayName} ${this.validation.mandatory ? '*' : ''}`, checked: this.selectedValues.length === this.options.length || this.defaultValue === 'true', indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.options.length, onChange: (e) => this.handleParentCheckbox(e) }), this.tooltip &&
|
|
1083
1079
|
h("img", { class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("small", { class: 'checkboxgroup__error-message' }, this.errorMessage), h("vaadin-checkbox-group", { theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
|
|
1084
1080
|
this.selectedValues = event.detail.value;
|
|
1085
|
-
} }, this.options.map((checkbox) => h("vaadin-checkbox", { name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
|
|
1081
|
+
} }, this.options.map((checkbox) => h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
|
|
1086
1082
|
}
|
|
1087
1083
|
get element() { return this; }
|
|
1088
1084
|
static get watchers() { return {
|
|
@@ -1097,7 +1093,7 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
1097
1093
|
"defaultValue": [513, "default-value"],
|
|
1098
1094
|
"autofilled": [516],
|
|
1099
1095
|
"tooltip": [513],
|
|
1100
|
-
"options": [
|
|
1096
|
+
"options": [16],
|
|
1101
1097
|
"validation": [16],
|
|
1102
1098
|
"language": [513],
|
|
1103
1099
|
"emitValue": [516, "emit-value"],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
|
|
3
3
|
|
|
4
|
-
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}";
|
|
4
|
+
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}";
|
|
5
5
|
|
|
6
6
|
const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -89,7 +89,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
89
89
|
return null;
|
|
90
90
|
}
|
|
91
91
|
render() {
|
|
92
|
-
return h("div", { class: `checkbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("input", { type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), h("small", { class: 'checkbox__error-message' }, this.errorMessage), h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
|
|
92
|
+
return h("div", { class: `checkbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("input", { class: 'checkbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.inputReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel(), h("small", { class: 'checkbox__error-message' }, this.errorMessage), h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
|
|
93
93
|
h("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
|
|
94
94
|
}
|
|
95
95
|
static get watchers() { return {
|
|
@@ -10099,7 +10099,7 @@ function cleanEscapedString(input) {
|
|
|
10099
10099
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
10100
10100
|
}
|
|
10101
10101
|
|
|
10102
|
-
const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
10102
|
+
const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
|
|
10103
10103
|
|
|
10104
10104
|
const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
10105
10105
|
constructor() {
|
|
@@ -10202,7 +10202,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
10202
10202
|
return null;
|
|
10203
10203
|
}
|
|
10204
10204
|
render() {
|
|
10205
|
-
let invalidClass;
|
|
10205
|
+
let invalidClass = '';
|
|
10206
10206
|
if (this.touched) {
|
|
10207
10207
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
10208
10208
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { t as translate, a as tooltipIconSvg } from './tooltipIcon.js';
|
|
3
3
|
|
|
4
|
-
const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
4
|
+
const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.email__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__input::placeholder{color:#979797}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
|
|
5
5
|
|
|
6
6
|
const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -100,9 +100,11 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
setErrorMessage() {
|
|
103
|
-
var _a;
|
|
103
|
+
var _a, _b, _c, _d;
|
|
104
104
|
if (this.inputReference.validity.patternMismatch) {
|
|
105
|
-
|
|
105
|
+
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
106
|
+
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
107
|
+
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
106
108
|
}
|
|
107
109
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
108
110
|
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
@@ -111,7 +113,9 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
111
113
|
return translate('requiredError', this.language);
|
|
112
114
|
}
|
|
113
115
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
114
|
-
|
|
116
|
+
const errorCode = (_c = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _c === void 0 ? void 0 : _c.errorKey;
|
|
117
|
+
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
118
|
+
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
115
119
|
}
|
|
116
120
|
}
|
|
117
121
|
renderTooltip() {
|
|
@@ -121,7 +125,7 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
121
125
|
return null;
|
|
122
126
|
}
|
|
123
127
|
render() {
|
|
124
|
-
let invalidClass;
|
|
128
|
+
let invalidClass = '';
|
|
125
129
|
if (this.touched) {
|
|
126
130
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
127
131
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
*/
|
|
13
13
|
class Lumo extends HTMLElement {
|
|
14
14
|
static get version() {
|
|
15
|
-
return '23.3.
|
|
15
|
+
return '23.3.19';
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -9383,7 +9383,7 @@ const registered = new Set();
|
|
|
9383
9383
|
const ElementMixin = (superClass) =>
|
|
9384
9384
|
class VaadinElementMixin extends DirMixin(superClass) {
|
|
9385
9385
|
static get version() {
|
|
9386
|
-
return '23.3.
|
|
9386
|
+
return '23.3.19';
|
|
9387
9387
|
}
|
|
9388
9388
|
|
|
9389
9389
|
/** @protected */
|