@everymatrix/general-registration 1.10.20 → 1.10.22
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 +253 -118
- package/dist/cjs/general-registration.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/general-registration/general-registration.css +4 -0
- package/dist/collection/components/general-registration/general-registration.js +49 -19
- package/dist/components/checkbox-group-input2.js +8 -4
- package/dist/components/checkbox-input2.js +4 -2
- package/dist/components/date-input2.js +17 -7
- package/dist/components/email-input2.js +27 -10
- package/dist/components/general-registration.js +30 -19
- package/dist/components/number-input2.js +27 -10
- package/dist/components/password-input2.js +46 -19
- package/dist/components/radio-input2.js +1 -2
- package/dist/components/select-input2.js +15 -10
- package/dist/components/tel-input2.js +39 -22
- package/dist/components/text-input2.js +43 -16
- package/dist/esm/checkbox-group-input_12.entry.js +253 -118
- 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-cb8af7e3.entry.js → p-201aaed1.entry.js} +34 -34
- package/dist/types/Users/adrian.pripon/Documents/Work/stencil/widgets-stencil/packages/general-registration/.stencil/packages/general-input/src/utils/types.d.ts +3 -0
- package/dist/types/components/general-registration/general-registration.d.ts +10 -3
- package/dist/types/components.d.ts +8 -0
- 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-input_12.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"],"errorMessage":[32],"isFormValid":[32],"
|
|
18
|
+
return index.bootstrapLazy([["checkbox-group-input_12.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]},[[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,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[520],"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-input_12.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"],"errorMessage":[32],"isFormValid":[32],"
|
|
17
|
+
return index.bootstrapLazy([["checkbox-group-input_12.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]},[[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,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[520],"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
|
|
|
@@ -19,12 +19,14 @@ export class GeneralRegistration {
|
|
|
19
19
|
* Translations via URL
|
|
20
20
|
*/
|
|
21
21
|
this.translationUrl = '';
|
|
22
|
-
this.listOfInputs = [];
|
|
23
22
|
this.isLoading = true;
|
|
23
|
+
this.forms = [];
|
|
24
24
|
this.listOfInputValues = [];
|
|
25
25
|
this.listOfInputValidity = [];
|
|
26
26
|
this.listOfActions = [];
|
|
27
|
+
this.listOfInputs = [];
|
|
27
28
|
this.emitValue = false;
|
|
29
|
+
this.backButtonPressed = false;
|
|
28
30
|
this.registrationStepsState = {
|
|
29
31
|
regId: null
|
|
30
32
|
};
|
|
@@ -51,7 +53,9 @@ export class GeneralRegistration {
|
|
|
51
53
|
}
|
|
52
54
|
setFormValidity() {
|
|
53
55
|
this.errorMessage = '';
|
|
54
|
-
|
|
56
|
+
if (this.listOfInputValidity) {
|
|
57
|
+
this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
|
|
58
|
+
}
|
|
55
59
|
}
|
|
56
60
|
checkInputsValidityHandler(event) {
|
|
57
61
|
// Set isValid state of the input in the list.
|
|
@@ -116,7 +120,6 @@ export class GeneralRegistration {
|
|
|
116
120
|
}
|
|
117
121
|
backHandler(e) {
|
|
118
122
|
e.preventDefault();
|
|
119
|
-
this.isLastStep = false;
|
|
120
123
|
this.registrationStep = this.stepChange('decrement');
|
|
121
124
|
this.stepsStateMachine({ event: 'get', type: 'inputs' });
|
|
122
125
|
this.stepsStateMachine({ event: 'get', type: 'values' });
|
|
@@ -199,16 +202,17 @@ export class GeneralRegistration {
|
|
|
199
202
|
.filter(input => !input.isDuplicate)
|
|
200
203
|
.reduce((acc, curr) => {
|
|
201
204
|
// Because the API is very robust, some values need to be split as separate entities.
|
|
202
|
-
if (curr.
|
|
203
|
-
|
|
204
|
-
acc[
|
|
205
|
+
if (curr.type === 'tel') {
|
|
206
|
+
//@ts-ignore
|
|
207
|
+
acc['MobilePrefix'] = curr.value.prefix;
|
|
208
|
+
//@ts-ignore
|
|
209
|
+
acc[curr.name] = curr.value.phone;
|
|
205
210
|
}
|
|
206
211
|
else if (curr.type === 'checkboxgroup') {
|
|
207
212
|
// Skip adding the parent of the checkboxgroup as a key.
|
|
208
|
-
if (curr.value !== null
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
acc[checkboxValue] = 'true';
|
|
213
|
+
if (curr.value !== null) {
|
|
214
|
+
Object.entries(curr.value).forEach(([key, value]) => {
|
|
215
|
+
acc[key] = value ? 'true' : 'false';
|
|
212
216
|
});
|
|
213
217
|
}
|
|
214
218
|
}
|
|
@@ -339,9 +343,14 @@ export class GeneralRegistration {
|
|
|
339
343
|
});
|
|
340
344
|
// Set the list of actions
|
|
341
345
|
this.listOfActions = config.content.actions.map(action => action);
|
|
342
|
-
this.isLastStep = this.listOfActions.some(action => action == '/register');
|
|
343
346
|
this.registrationID = config.content.registrationID;
|
|
344
347
|
this.registrationStep = config.content.step;
|
|
348
|
+
if (this.listOfActions.some(action => action == '/register')) {
|
|
349
|
+
this.lastStep = this.registrationStep;
|
|
350
|
+
}
|
|
351
|
+
;
|
|
352
|
+
// this.forms.push({ [this.registrationStep] : this.listOfInputs});
|
|
353
|
+
this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
|
|
345
354
|
// Add the step to the registrationStepsData
|
|
346
355
|
this.registrationStepsState.regId = this.registrationID;
|
|
347
356
|
if (!this.registrationStepsState[this.registrationStep]) {
|
|
@@ -377,13 +386,17 @@ export class GeneralRegistration {
|
|
|
377
386
|
getInvalidStatus(listOfInputs) {
|
|
378
387
|
return listOfInputs.filter(input => input.isValid == false).length > 0;
|
|
379
388
|
}
|
|
380
|
-
|
|
381
|
-
return
|
|
389
|
+
renderForm() {
|
|
390
|
+
return this.forms.map((form, index) => {
|
|
391
|
+
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 ? input.inputType.toLowerCase() == 'checkboxgroup' ? input.data.subFields : input.data.values : [], 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
|
+
this.buttonInsideForm && this.renderButtons());
|
|
394
|
+
});
|
|
382
395
|
}
|
|
383
396
|
;
|
|
384
397
|
renderButtons() {
|
|
385
398
|
return (h("div", { class: 'registration__buttons-wrapper' },
|
|
386
|
-
h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form:
|
|
399
|
+
h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: `RegistrationForm${this.registrationStep}`, onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, this.lastStep === this.registrationStep ? translate('doneButton', this.language) : translate('nextButton', this.language)),
|
|
387
400
|
h("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
|
|
388
401
|
}
|
|
389
402
|
render() {
|
|
@@ -391,9 +404,9 @@ export class GeneralRegistration {
|
|
|
391
404
|
return h("p", null, "Please wait, loading ...");
|
|
392
405
|
}
|
|
393
406
|
return (h("div", { class: `registration registration__${this.registrationStep}`, ref: el => this.stylingContainer = el },
|
|
394
|
-
|
|
407
|
+
this.renderForm(),
|
|
395
408
|
h("p", { class: 'registration__error-message' }, this.errorMessage),
|
|
396
|
-
this.renderButtons()));
|
|
409
|
+
!this.buttonInsideForm && this.renderButtons()));
|
|
397
410
|
}
|
|
398
411
|
static get is() { return "general-registration"; }
|
|
399
412
|
static get encapsulation() { return "shadow"; }
|
|
@@ -509,14 +522,31 @@ export class GeneralRegistration {
|
|
|
509
522
|
},
|
|
510
523
|
"attribute": "date-format",
|
|
511
524
|
"reflect": true
|
|
525
|
+
},
|
|
526
|
+
"buttonInsideForm": {
|
|
527
|
+
"type": "boolean",
|
|
528
|
+
"mutable": false,
|
|
529
|
+
"complexType": {
|
|
530
|
+
"original": "boolean",
|
|
531
|
+
"resolved": "boolean",
|
|
532
|
+
"references": {}
|
|
533
|
+
},
|
|
534
|
+
"required": true,
|
|
535
|
+
"optional": false,
|
|
536
|
+
"docs": {
|
|
537
|
+
"tags": [],
|
|
538
|
+
"text": "Boolean that decides the position of the button. e.g. button inside -- true / outside -- false the form."
|
|
539
|
+
},
|
|
540
|
+
"attribute": "button-inside-form",
|
|
541
|
+
"reflect": true
|
|
512
542
|
}
|
|
513
543
|
}; }
|
|
514
544
|
static get states() { return {
|
|
515
545
|
"errorMessage": {},
|
|
516
546
|
"isFormValid": {},
|
|
517
|
-
"listOfInputs": {},
|
|
518
547
|
"isLoading": {},
|
|
519
|
-
"registrationStep": {}
|
|
548
|
+
"registrationStep": {},
|
|
549
|
+
"forms": {}
|
|
520
550
|
}; }
|
|
521
551
|
static get events() { return [{
|
|
522
552
|
"method": "registrationWidgetLoaded",
|
|
@@ -553,7 +583,7 @@ export class GeneralRegistration {
|
|
|
553
583
|
"propName": "registrationStep",
|
|
554
584
|
"methodName": "sendStep"
|
|
555
585
|
}, {
|
|
556
|
-
"propName": "
|
|
586
|
+
"propName": "forms",
|
|
557
587
|
"methodName": "setFormValidity"
|
|
558
588
|
}]; }
|
|
559
589
|
static get listeners() { return [{
|
|
@@ -1002,7 +1002,6 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
1002
1002
|
this.limitStylingAppends = false;
|
|
1003
1003
|
this.showTooltip = false;
|
|
1004
1004
|
this.selectedValues = [];
|
|
1005
|
-
this.value = '';
|
|
1006
1005
|
this.setClientStyling = () => {
|
|
1007
1006
|
let sheet = document.createElement('style');
|
|
1008
1007
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -1010,12 +1009,16 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
1010
1009
|
};
|
|
1011
1010
|
}
|
|
1012
1011
|
validityChanged() {
|
|
1012
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
1013
1013
|
if (this.emitValue == true) {
|
|
1014
1014
|
this.valueHandler({ name: this.name, value: this.value, type: 'checkboxgroup' });
|
|
1015
1015
|
}
|
|
1016
1016
|
}
|
|
1017
1017
|
setValue() {
|
|
1018
|
-
this.value = this.
|
|
1018
|
+
this.value = this.options.reduce((acc, option) => {
|
|
1019
|
+
acc[option.name] = this.selectedValues.includes(option.name);
|
|
1020
|
+
return acc;
|
|
1021
|
+
}, {});
|
|
1019
1022
|
this.emitValueHandler(true);
|
|
1020
1023
|
}
|
|
1021
1024
|
validityStateHandler(inputStateEvent) {
|
|
@@ -1049,9 +1052,10 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
1049
1052
|
// For now this input has no validation. Send isValid as true immediately.
|
|
1050
1053
|
//@TODO: add validation logic to it, if business reason arises.
|
|
1051
1054
|
this.isValid = this.setValidity();
|
|
1052
|
-
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
1053
1055
|
if (this.defaultValue) {
|
|
1054
1056
|
this.selectedValues = this.options.map((checkbox) => checkbox.name);
|
|
1057
|
+
this.value = this.defaultValue;
|
|
1058
|
+
this.valueHandler({ name: this.name, value: this.value });
|
|
1055
1059
|
}
|
|
1056
1060
|
}
|
|
1057
1061
|
setValidity() {
|
|
@@ -1075,7 +1079,7 @@ const CheckboxGroupInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
1075
1079
|
: [];
|
|
1076
1080
|
}
|
|
1077
1081
|
render() {
|
|
1078
|
-
return h("div", { class:
|
|
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 &&
|
|
1079
1083
|
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) => {
|
|
1080
1084
|
this.selectedValues = event.detail.value;
|
|
1081
1085
|
} }, this.options.map((checkbox) => h("vaadin-checkbox", { name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
|
|
@@ -28,6 +28,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
28
28
|
};
|
|
29
29
|
}
|
|
30
30
|
validityChanged() {
|
|
31
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
31
32
|
if (this.emitValue == true) {
|
|
32
33
|
this.valueHandler({ name: this.name, value: this.value });
|
|
33
34
|
}
|
|
@@ -57,6 +58,8 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
57
58
|
this.limitStylingAppends = true;
|
|
58
59
|
}
|
|
59
60
|
// end custom styling area
|
|
61
|
+
}
|
|
62
|
+
componentDidLoad() {
|
|
60
63
|
if (this.defaultValue) {
|
|
61
64
|
this.value = this.defaultValue;
|
|
62
65
|
this.valueHandler({ name: this.name, value: this.value });
|
|
@@ -66,7 +69,6 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
66
69
|
this.value = this.inputReference.checked.toString();
|
|
67
70
|
this.errorMessage = this.setErrorMessage();
|
|
68
71
|
this.isValid = this.setValidity();
|
|
69
|
-
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
70
72
|
this.emitValueHandler(true);
|
|
71
73
|
}
|
|
72
74
|
setValidity() {
|
|
@@ -87,7 +89,7 @@ const CheckboxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
87
89
|
return null;
|
|
88
90
|
}
|
|
89
91
|
render() {
|
|
90
|
-
return h("div", { class:
|
|
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 &&
|
|
91
93
|
h("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
|
|
92
94
|
}
|
|
93
95
|
static get watchers() { return {
|
|
@@ -10114,6 +10114,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
10114
10114
|
this.clientStyling = '';
|
|
10115
10115
|
this.limitStylingAppends = false;
|
|
10116
10116
|
this.showTooltip = false;
|
|
10117
|
+
this.touched = false;
|
|
10117
10118
|
this.formatDate = (dateParts) => {
|
|
10118
10119
|
const { year, month, day } = dateParts;
|
|
10119
10120
|
const date = new Date(year, month, day);
|
|
@@ -10123,6 +10124,11 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
10123
10124
|
const date = parse(inputValue, this.dateFormat || 'yyyy-MM-dd', new Date());
|
|
10124
10125
|
return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
|
|
10125
10126
|
};
|
|
10127
|
+
this.handleBlur = () => {
|
|
10128
|
+
this.isValid = this.setValidity();
|
|
10129
|
+
this.errorMessage = this.setErrorMessage();
|
|
10130
|
+
this.touched = true;
|
|
10131
|
+
};
|
|
10126
10132
|
this.setClientStyling = () => {
|
|
10127
10133
|
let sheet = document.createElement('style');
|
|
10128
10134
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -10160,21 +10166,22 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
10160
10166
|
this.limitStylingAppends = true;
|
|
10161
10167
|
}
|
|
10162
10168
|
// end custom styling area
|
|
10163
|
-
if (this.defaultValue) {
|
|
10164
|
-
this.value = this.defaultValue;
|
|
10165
|
-
this.valueHandler({ name: this.name, value: this.value });
|
|
10166
|
-
}
|
|
10167
10169
|
}
|
|
10168
10170
|
componentDidLoad() {
|
|
10169
10171
|
this.datePicker = this.element.shadowRoot.querySelector('vaadin-date-picker');
|
|
10170
10172
|
this.inputReference = this.element.shadowRoot.querySelector('input');
|
|
10171
10173
|
this.datePicker.i18n = Object.assign(Object.assign({}, this.datePicker.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
|
|
10174
|
+
this.isValid = this.setValidity();
|
|
10175
|
+
if (this.defaultValue) {
|
|
10176
|
+
this.value = this.defaultValue;
|
|
10177
|
+
this.valueHandler({ name: this.name, value: this.value });
|
|
10178
|
+
}
|
|
10172
10179
|
}
|
|
10173
10180
|
handleInput(event) {
|
|
10174
10181
|
this.value = event.target.value;
|
|
10182
|
+
this.touched = true;
|
|
10175
10183
|
this.errorMessage = this.setErrorMessage();
|
|
10176
10184
|
this.isValid = this.setValidity();
|
|
10177
|
-
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
10178
10185
|
this.emitValueHandler(true);
|
|
10179
10186
|
}
|
|
10180
10187
|
setValidity() {
|
|
@@ -10195,8 +10202,11 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
10195
10202
|
return null;
|
|
10196
10203
|
}
|
|
10197
10204
|
render() {
|
|
10198
|
-
|
|
10199
|
-
|
|
10205
|
+
let invalidClass;
|
|
10206
|
+
if (this.touched) {
|
|
10207
|
+
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
10208
|
+
}
|
|
10209
|
+
return h("div", { class: `date__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h("vaadin-date-picker", { id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e), onBlur: this.handleBlur }), h("small", { class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
10200
10210
|
h("img", { class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
10201
10211
|
}
|
|
10202
10212
|
get element() { return this; }
|
|
@@ -17,6 +17,24 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
17
17
|
this.limitStylingAppends = false;
|
|
18
18
|
this.showTooltip = false;
|
|
19
19
|
this.validationPattern = '';
|
|
20
|
+
this.touched = false;
|
|
21
|
+
this.handleInput = (event) => {
|
|
22
|
+
this.value = event.target.value;
|
|
23
|
+
this.touched = true;
|
|
24
|
+
if (this.debounceTime) {
|
|
25
|
+
clearTimeout(this.debounceTime);
|
|
26
|
+
}
|
|
27
|
+
this.debounceTime = setTimeout(() => {
|
|
28
|
+
this.isValid = this.setValidity();
|
|
29
|
+
this.errorMessage = this.setErrorMessage();
|
|
30
|
+
this.emitValueHandler(true);
|
|
31
|
+
}, 500);
|
|
32
|
+
};
|
|
33
|
+
this.handleBlur = () => {
|
|
34
|
+
this.isValid = this.setValidity();
|
|
35
|
+
this.errorMessage = this.setErrorMessage();
|
|
36
|
+
this.touched = true;
|
|
37
|
+
};
|
|
20
38
|
this.setClientStyling = () => {
|
|
21
39
|
let sheet = document.createElement('style');
|
|
22
40
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -64,18 +82,14 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
64
82
|
this.limitStylingAppends = true;
|
|
65
83
|
}
|
|
66
84
|
// end custom styling area
|
|
85
|
+
}
|
|
86
|
+
componentDidLoad() {
|
|
87
|
+
this.isValid = this.setValidity();
|
|
67
88
|
if (this.defaultValue) {
|
|
68
89
|
this.value = this.defaultValue;
|
|
69
90
|
this.valueHandler({ name: this.name, value: this.value });
|
|
70
91
|
}
|
|
71
92
|
}
|
|
72
|
-
handleInput(event) {
|
|
73
|
-
this.value = event.target.value;
|
|
74
|
-
this.errorMessage = this.setErrorMessage();
|
|
75
|
-
this.isValid = this.setValidity();
|
|
76
|
-
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
77
|
-
this.emitValueHandler(true);
|
|
78
|
-
}
|
|
79
93
|
setValidity() {
|
|
80
94
|
return this.inputReference.validity.valid;
|
|
81
95
|
}
|
|
@@ -107,9 +121,12 @@ const EmailInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
107
121
|
return null;
|
|
108
122
|
}
|
|
109
123
|
render() {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
124
|
+
let invalidClass;
|
|
125
|
+
if (this.touched) {
|
|
126
|
+
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
127
|
+
}
|
|
128
|
+
return h("div", { class: `email__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { class: 'email__wrapper--flex' }, h("label", { class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { class: 'email__wrapper--relative' }, this.tooltip &&
|
|
129
|
+
h("img", { class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder} ${this.placeholder && this.validation.mandatory ? '*' : ''}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { class: 'email__error-message' }, this.errorMessage));
|
|
113
130
|
}
|
|
114
131
|
static get watchers() { return {
|
|
115
132
|
"isValid": ["validityChanged"],
|
|
@@ -63,7 +63,7 @@ const translate = (key, customLang, values) => {
|
|
|
63
63
|
return translation;
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
-
const generalRegistrationCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.registration {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n container-type: inline-size;\n}\n.registration__error-message {\n color: #cc0000b3;\n}\n.registration__form {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 40px;\n justify-items: stretch;\n align-content: flex-start;\n overflow: auto;\n width: 100%;\n height: 100%;\n}\n.registration__buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n}\n.registration__button {\n text-transform: uppercase;\n width: 250px;\n height: 40px;\n border-radius: 3px;\n}\n.registration__button:hover {\n opacity: 0.8;\n}\n.registration__button:active {\n opacity: 1;\n}\n.registration__button--next {\n color: #FFFFFF;\n background-color: #B0B0B0;\n border: none;\n}\n.registration__button--back {\n color: #B0B0B0;\n background-color: #FFFFFF;\n border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n opacity: 0.5;\n}\n.registration__button--disabled:hover {\n opacity: 0.5;\n}\n.registration__button--first-step {\n display: none;\n}\n\n@container (min-width: 450px) {\n .registration__form {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}";
|
|
66
|
+
const generalRegistrationCss = "*,\n*::before,\n*::after {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\n.registration__form.hidden {\n display: none;\n}\n\n.registration {\n font-family: \"Roboto\";\n font-style: normal;\n font-family: sans-serif;\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n container-type: inline-size;\n}\n.registration__error-message {\n color: #cc0000b3;\n}\n.registration__form {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 40px;\n justify-items: stretch;\n align-content: flex-start;\n overflow: auto;\n width: 100%;\n height: 100%;\n}\n.registration__buttons-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n}\n.registration__button {\n text-transform: uppercase;\n width: 250px;\n height: 40px;\n border-radius: 3px;\n}\n.registration__button:hover {\n opacity: 0.8;\n}\n.registration__button:active {\n opacity: 1;\n}\n.registration__button--next {\n color: #FFFFFF;\n background-color: #B0B0B0;\n border: none;\n}\n.registration__button--back {\n color: #B0B0B0;\n background-color: #FFFFFF;\n border: 2px solid #B0B0B0;\n}\n.registration__button--disabled {\n opacity: 0.5;\n}\n.registration__button--disabled:hover {\n opacity: 0.5;\n}\n.registration__button--first-step {\n display: none;\n}\n\n@container (min-width: 450px) {\n .registration__form {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}";
|
|
67
67
|
|
|
68
68
|
const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
69
69
|
constructor() {
|
|
@@ -88,12 +88,14 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
88
88
|
* Translations via URL
|
|
89
89
|
*/
|
|
90
90
|
this.translationUrl = '';
|
|
91
|
-
this.listOfInputs = [];
|
|
92
91
|
this.isLoading = true;
|
|
92
|
+
this.forms = [];
|
|
93
93
|
this.listOfInputValues = [];
|
|
94
94
|
this.listOfInputValidity = [];
|
|
95
95
|
this.listOfActions = [];
|
|
96
|
+
this.listOfInputs = [];
|
|
96
97
|
this.emitValue = false;
|
|
98
|
+
this.backButtonPressed = false;
|
|
97
99
|
this.registrationStepsState = {
|
|
98
100
|
regId: null
|
|
99
101
|
};
|
|
@@ -120,7 +122,9 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
120
122
|
}
|
|
121
123
|
setFormValidity() {
|
|
122
124
|
this.errorMessage = '';
|
|
123
|
-
|
|
125
|
+
if (this.listOfInputValidity) {
|
|
126
|
+
this.isFormValid = !this.getInvalidStatus(this.listOfInputValidity);
|
|
127
|
+
}
|
|
124
128
|
}
|
|
125
129
|
checkInputsValidityHandler(event) {
|
|
126
130
|
// Set isValid state of the input in the list.
|
|
@@ -185,7 +189,6 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
185
189
|
}
|
|
186
190
|
backHandler(e) {
|
|
187
191
|
e.preventDefault();
|
|
188
|
-
this.isLastStep = false;
|
|
189
192
|
this.registrationStep = this.stepChange('decrement');
|
|
190
193
|
this.stepsStateMachine({ event: 'get', type: 'inputs' });
|
|
191
194
|
this.stepsStateMachine({ event: 'get', type: 'values' });
|
|
@@ -268,16 +271,17 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
268
271
|
.filter(input => !input.isDuplicate)
|
|
269
272
|
.reduce((acc, curr) => {
|
|
270
273
|
// Because the API is very robust, some values need to be split as separate entities.
|
|
271
|
-
if (curr.
|
|
272
|
-
|
|
273
|
-
acc[
|
|
274
|
+
if (curr.type === 'tel') {
|
|
275
|
+
//@ts-ignore
|
|
276
|
+
acc['MobilePrefix'] = curr.value.prefix;
|
|
277
|
+
//@ts-ignore
|
|
278
|
+
acc[curr.name] = curr.value.phone;
|
|
274
279
|
}
|
|
275
280
|
else if (curr.type === 'checkboxgroup') {
|
|
276
281
|
// Skip adding the parent of the checkboxgroup as a key.
|
|
277
|
-
if (curr.value !== null
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
acc[checkboxValue] = 'true';
|
|
282
|
+
if (curr.value !== null) {
|
|
283
|
+
Object.entries(curr.value).forEach(([key, value]) => {
|
|
284
|
+
acc[key] = value ? 'true' : 'false';
|
|
281
285
|
});
|
|
282
286
|
}
|
|
283
287
|
}
|
|
@@ -408,9 +412,13 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
408
412
|
});
|
|
409
413
|
// Set the list of actions
|
|
410
414
|
this.listOfActions = config.content.actions.map(action => action);
|
|
411
|
-
this.isLastStep = this.listOfActions.some(action => action == '/register');
|
|
412
415
|
this.registrationID = config.content.registrationID;
|
|
413
416
|
this.registrationStep = config.content.step;
|
|
417
|
+
if (this.listOfActions.some(action => action == '/register')) {
|
|
418
|
+
this.lastStep = this.registrationStep;
|
|
419
|
+
}
|
|
420
|
+
// this.forms.push({ [this.registrationStep] : this.listOfInputs});
|
|
421
|
+
this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
|
|
414
422
|
// Add the step to the registrationStepsData
|
|
415
423
|
this.registrationStepsState.regId = this.registrationID;
|
|
416
424
|
if (!this.registrationStepsState[this.registrationStep]) {
|
|
@@ -446,22 +454,24 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
446
454
|
getInvalidStatus(listOfInputs) {
|
|
447
455
|
return listOfInputs.filter(input => input.isValid == false).length > 0;
|
|
448
456
|
}
|
|
449
|
-
|
|
450
|
-
return
|
|
457
|
+
renderForm() {
|
|
458
|
+
return this.forms.map((form, index) => {
|
|
459
|
+
return h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, 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 ? input.inputType.toLowerCase() == 'checkboxgroup' ? input.data.subFields : input.data.values : [], 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 })), this.buttonInsideForm && this.renderButtons());
|
|
460
|
+
});
|
|
451
461
|
}
|
|
452
462
|
;
|
|
453
463
|
renderButtons() {
|
|
454
|
-
return (h("div", { class: 'registration__buttons-wrapper' }, h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form:
|
|
464
|
+
return (h("div", { class: 'registration__buttons-wrapper' }, h("button", { class: `registration__button registration__button--next ${this.isFormValid ? '' : 'registration__button--disabled'}`, type: 'submit', form: `RegistrationForm${this.registrationStep}`, onClick: (e) => this.nextHandler(e), disabled: !this.isFormValid }, this.lastStep === this.registrationStep ? translate('doneButton', this.language) : translate('nextButton', this.language)), h("button", { class: `registration__button registration__button--back ${this.registrationStep == 'Step1' ? 'registration__button--first-step' : ''}`, onClick: (e) => this.backHandler(e) }, translate('backButton', this.language))));
|
|
455
465
|
}
|
|
456
466
|
render() {
|
|
457
467
|
if (this.isLoading) {
|
|
458
468
|
return h("p", null, "Please wait, loading ...");
|
|
459
469
|
}
|
|
460
|
-
return (h("div", { class: `registration registration__${this.registrationStep}`, ref: el => this.stylingContainer = el },
|
|
470
|
+
return (h("div", { class: `registration registration__${this.registrationStep}`, ref: el => this.stylingContainer = el }, this.renderForm(), h("p", { class: 'registration__error-message' }, this.errorMessage), !this.buttonInsideForm && this.renderButtons()));
|
|
461
471
|
}
|
|
462
472
|
static get watchers() { return {
|
|
463
473
|
"registrationStep": ["sendStep"],
|
|
464
|
-
"
|
|
474
|
+
"forms": ["setFormValidity"]
|
|
465
475
|
}; }
|
|
466
476
|
static get style() { return generalRegistrationCss; }
|
|
467
477
|
}, [1, "general-registration", {
|
|
@@ -471,11 +481,12 @@ const GeneralRegistration$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
|
|
|
471
481
|
"clientStylingUrl": [513, "client-styling-url"],
|
|
472
482
|
"translationUrl": [513, "translation-url"],
|
|
473
483
|
"dateFormat": [513, "date-format"],
|
|
484
|
+
"buttonInsideForm": [516, "button-inside-form"],
|
|
474
485
|
"errorMessage": [32],
|
|
475
486
|
"isFormValid": [32],
|
|
476
|
-
"listOfInputs": [32],
|
|
477
487
|
"isLoading": [32],
|
|
478
|
-
"registrationStep": [32]
|
|
488
|
+
"registrationStep": [32],
|
|
489
|
+
"forms": [32]
|
|
479
490
|
}, [[0, "sendValidityState", "checkInputsValidityHandler"], [0, "sendInputValue", "getInputsValueHandler"]]]);
|
|
480
491
|
function defineCustomElement$1() {
|
|
481
492
|
if (typeof customElements === "undefined") {
|