@everymatrix/general-registration 1.10.22 → 1.10.24
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} +170 -42
- 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 +63 -29
- package/dist/components/checkbox-group-input2.js +2 -2
- package/dist/components/checkbox-input2.js +2 -2
- package/dist/components/date-input2.js +1 -1
- package/dist/components/email-input2.js +1 -1
- package/dist/components/general-input2.js +218 -22
- package/dist/components/general-registration.js +90 -51
- package/dist/components/number-input2.js +1 -1
- package/dist/components/password-input2.js +2 -2
- package/dist/components/select-input2.js +1 -1
- package/dist/components/tel-input2.js +2 -2
- package/dist/components/text-input2.js +2 -2
- package/dist/components/toggle-checkbox-input.js +6 -0
- package/dist/esm/{checkbox-group-input_12.entry.js → checkbox-group-input_13.entry.js} +170 -43
- 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-201aaed1.entry.js → p-7852ad99.entry.js} +96 -96
- package/dist/types/components/general-registration/general-registration.d.ts +2 -2
- package/package.json +1 -1
package/dist/cjs/{checkbox-group-input_12.cjs.entry.js → checkbox-group-input_13.cjs.entry.js}
RENAMED
|
@@ -14793,10 +14793,10 @@ const CheckboxGroupInput = class {
|
|
|
14793
14793
|
: [];
|
|
14794
14794
|
}
|
|
14795
14795
|
render() {
|
|
14796
|
-
return index.h("div", { class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'checkboxgroup__wrapper--flex' }, index.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 &&
|
|
14796
|
+
return index.h("div", { class: `checkboxgroup__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'checkboxgroup__wrapper--flex' }, index.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 &&
|
|
14797
14797
|
index.h("img", { class: 'checkboxgroup__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("small", { class: 'checkboxgroup__error-message' }, this.errorMessage), index.h("vaadin-checkbox-group", { theme: "vertical", value: this.selectedValues, "on-value-changed": (event) => {
|
|
14798
14798
|
this.selectedValues = event.detail.value;
|
|
14799
|
-
} }, this.options.map((checkbox) => index.h("vaadin-checkbox", { name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
|
|
14799
|
+
} }, this.options.map((checkbox) => index.h("vaadin-checkbox", { class: 'checkbox__input', name: checkbox.name, value: checkbox.name, label: checkbox.displayName }))));
|
|
14800
14800
|
}
|
|
14801
14801
|
get element() { return index.getElement(this); }
|
|
14802
14802
|
static get watchers() { return {
|
|
@@ -14807,7 +14807,7 @@ const CheckboxGroupInput = class {
|
|
|
14807
14807
|
};
|
|
14808
14808
|
CheckboxGroupInput.style = checkboxGroupInputCss;
|
|
14809
14809
|
|
|
14810
|
-
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}";
|
|
14810
|
+
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}";
|
|
14811
14811
|
|
|
14812
14812
|
const CheckboxInput = class {
|
|
14813
14813
|
constructor(hostRef) {
|
|
@@ -14893,7 +14893,7 @@ const CheckboxInput = class {
|
|
|
14893
14893
|
return null;
|
|
14894
14894
|
}
|
|
14895
14895
|
render() {
|
|
14896
|
-
return index.h("div", { class: `checkbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.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(), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage), index.h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
|
|
14896
|
+
return index.h("div", { class: `checkbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.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(), index.h("small", { class: 'checkbox__error-message' }, this.errorMessage), index.h("div", { class: 'checkbox__wrapper--relative' }, this.tooltip &&
|
|
14897
14897
|
index.h("img", { class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
|
|
14898
14898
|
}
|
|
14899
14899
|
static get watchers() { return {
|
|
@@ -29218,7 +29218,7 @@ function cleanEscapedString(input) {
|
|
|
29218
29218
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
29219
29219
|
}
|
|
29220
29220
|
|
|
29221
|
-
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:#
|
|
29221
|
+
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}";
|
|
29222
29222
|
|
|
29223
29223
|
const DateInput = class {
|
|
29224
29224
|
constructor(hostRef) {
|
|
@@ -29334,7 +29334,7 @@ const DateInput = class {
|
|
|
29334
29334
|
};
|
|
29335
29335
|
DateInput.style = dateInputCss;
|
|
29336
29336
|
|
|
29337
|
-
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:#
|
|
29337
|
+
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}";
|
|
29338
29338
|
|
|
29339
29339
|
const EmailInput = class {
|
|
29340
29340
|
constructor(hostRef) {
|
|
@@ -29493,6 +29493,8 @@ const GeneralInput = class {
|
|
|
29493
29493
|
return index.h("checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, defaultValue: this.defaultValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip });
|
|
29494
29494
|
case 'checkboxgroup':
|
|
29495
29495
|
return index.h("checkbox-group-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
|
|
29496
|
+
case 'togglecheckbox':
|
|
29497
|
+
return index.h("toggle-checkbox-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, options: this.options });
|
|
29496
29498
|
case 'datetime':
|
|
29497
29499
|
return index.h("date-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, dateFormat: this.dateFormat });
|
|
29498
29500
|
case 'password':
|
|
@@ -29562,7 +29564,7 @@ const translate = (key, customLang, values) => {
|
|
|
29562
29564
|
return translation;
|
|
29563
29565
|
};
|
|
29564
29566
|
|
|
29565
|
-
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
|
|
29567
|
+
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 border: none;\n border-radius: 20px;\n box-shadow: 0px 2px 1px rgba(11, 16, 19, 0.6);\n color: #0B1013;\n font-size: 18px;\n font-weight: bold;\n text-transform: uppercase;\n width: 150px;\n height: 45px;\n}\n.registration__button--disabled {\n color: #647480;\n background-color: #CFCFCF;\n box-shadow: none;\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}";
|
|
29566
29568
|
|
|
29567
29569
|
const GeneralRegistration = class {
|
|
29568
29570
|
constructor(hostRef) {
|
|
@@ -29587,6 +29589,7 @@ const GeneralRegistration = class {
|
|
|
29587
29589
|
this.translationUrl = '';
|
|
29588
29590
|
this.isLoading = true;
|
|
29589
29591
|
this.forms = [];
|
|
29592
|
+
this.limitStylingAppends = false;
|
|
29590
29593
|
this.listOfInputValues = [];
|
|
29591
29594
|
this.listOfInputValidity = [];
|
|
29592
29595
|
this.listOfActions = [];
|
|
@@ -29599,7 +29602,7 @@ const GeneralRegistration = class {
|
|
|
29599
29602
|
this.setClientStyling = () => {
|
|
29600
29603
|
let sheet = document.createElement('style');
|
|
29601
29604
|
sheet.innerHTML = this.clientStyling;
|
|
29602
|
-
this.
|
|
29605
|
+
this.host.shadowRoot.prepend(sheet);
|
|
29603
29606
|
};
|
|
29604
29607
|
this.setClientStylingURL = () => {
|
|
29605
29608
|
let url = new URL(this.clientStylingUrl);
|
|
@@ -29609,7 +29612,7 @@ const GeneralRegistration = class {
|
|
|
29609
29612
|
.then((data) => {
|
|
29610
29613
|
cssFile.innerHTML = data;
|
|
29611
29614
|
this.clientStyling = data;
|
|
29612
|
-
setTimeout(() => { this.
|
|
29615
|
+
setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
|
|
29613
29616
|
});
|
|
29614
29617
|
};
|
|
29615
29618
|
}
|
|
@@ -29666,18 +29669,17 @@ const GeneralRegistration = class {
|
|
|
29666
29669
|
}
|
|
29667
29670
|
});
|
|
29668
29671
|
}
|
|
29669
|
-
|
|
29670
|
-
|
|
29672
|
+
componentDidLoad() {
|
|
29673
|
+
this.registrationWidgetLoaded.emit();
|
|
29674
|
+
window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
|
|
29675
|
+
if (!this.limitStylingAppends && this.host) {
|
|
29671
29676
|
if (this.clientStyling)
|
|
29672
29677
|
this.setClientStyling();
|
|
29673
29678
|
if (this.clientStylingUrl)
|
|
29674
29679
|
this.setClientStylingURL();
|
|
29680
|
+
this.limitStylingAppends = true;
|
|
29675
29681
|
}
|
|
29676
29682
|
}
|
|
29677
|
-
componentDidLoad() {
|
|
29678
|
-
this.registrationWidgetLoaded.emit();
|
|
29679
|
-
window.postMessage({ type: 'registrationWidgetLoaded' }, window.location.href);
|
|
29680
|
-
}
|
|
29681
29683
|
nextHandler(e) {
|
|
29682
29684
|
e.preventDefault();
|
|
29683
29685
|
// Trigger events in subwidgets.
|
|
@@ -29891,22 +29893,51 @@ const GeneralRegistration = class {
|
|
|
29891
29893
|
return [inputElement];
|
|
29892
29894
|
}
|
|
29893
29895
|
});
|
|
29894
|
-
|
|
29895
|
-
|
|
29896
|
-
|
|
29897
|
-
|
|
29898
|
-
|
|
29899
|
-
|
|
29900
|
-
|
|
29901
|
-
|
|
29902
|
-
|
|
29903
|
-
|
|
29904
|
-
|
|
29905
|
-
|
|
29906
|
-
|
|
29907
|
-
|
|
29908
|
-
|
|
29909
|
-
|
|
29896
|
+
this.listOfInputValidity = this.listOfInputs.reduce((acc, field) => {
|
|
29897
|
+
var _a;
|
|
29898
|
+
// If the field is a togglecheckbox, add its subfields
|
|
29899
|
+
if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
|
|
29900
|
+
field.data.subFields.forEach(subfield => {
|
|
29901
|
+
acc.push({
|
|
29902
|
+
name: subfield.name,
|
|
29903
|
+
isValid: this.setInitialValidStatus(subfield)
|
|
29904
|
+
});
|
|
29905
|
+
});
|
|
29906
|
+
}
|
|
29907
|
+
else {
|
|
29908
|
+
acc.push({
|
|
29909
|
+
name: field.name,
|
|
29910
|
+
isValid: this.setInitialValidStatus(field)
|
|
29911
|
+
});
|
|
29912
|
+
}
|
|
29913
|
+
return acc;
|
|
29914
|
+
}, []);
|
|
29915
|
+
this.listOfInputValues = this.listOfInputs.reduce((acc, field) => {
|
|
29916
|
+
var _a, _b, _c;
|
|
29917
|
+
// If the field type is a 'togglecheckbox', add its subfields
|
|
29918
|
+
if (((_a = field.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "togglecheckbox") {
|
|
29919
|
+
field.data.subFields.forEach(subfield => {
|
|
29920
|
+
var _a, _b;
|
|
29921
|
+
acc.push({
|
|
29922
|
+
name: subfield.name,
|
|
29923
|
+
value: ((_a = subfield.inputType) === null || _a === void 0 ? void 0 : _a.toLowerCase()) == 'checkbox' ? 'false' : null,
|
|
29924
|
+
isDuplicate: subfield.isDuplicateInput || false,
|
|
29925
|
+
type: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'togglecheckbox'
|
|
29926
|
+
? 'togglecheckbox'
|
|
29927
|
+
: null
|
|
29928
|
+
});
|
|
29929
|
+
});
|
|
29930
|
+
}
|
|
29931
|
+
else {
|
|
29932
|
+
acc.push({
|
|
29933
|
+
name: field.name,
|
|
29934
|
+
value: ((_b = field.inputType) === null || _b === void 0 ? void 0 : _b.toLowerCase()) == 'checkbox' ? 'false' : null,
|
|
29935
|
+
isDuplicate: field.isDuplicateInput || false,
|
|
29936
|
+
type: ((_c = field.inputType) === null || _c === void 0 ? void 0 : _c.toLowerCase()) == 'checkboxgroup' ? 'checkboxgroup' : null
|
|
29937
|
+
});
|
|
29938
|
+
}
|
|
29939
|
+
return acc;
|
|
29940
|
+
}, []);
|
|
29910
29941
|
// Set the list of actions
|
|
29911
29942
|
this.listOfActions = config.content.actions.map(action => action);
|
|
29912
29943
|
this.registrationID = config.content.registrationID;
|
|
@@ -29914,7 +29945,6 @@ const GeneralRegistration = class {
|
|
|
29914
29945
|
if (this.listOfActions.some(action => action == '/register')) {
|
|
29915
29946
|
this.lastStep = this.registrationStep;
|
|
29916
29947
|
}
|
|
29917
|
-
// this.forms.push({ [this.registrationStep] : this.listOfInputs});
|
|
29918
29948
|
this.forms = [...this.forms, { [this.registrationStep]: this.listOfInputs }];
|
|
29919
29949
|
// Add the step to the registrationStepsData
|
|
29920
29950
|
this.registrationStepsState.regId = this.registrationID;
|
|
@@ -29953,7 +29983,11 @@ const GeneralRegistration = class {
|
|
|
29953
29983
|
}
|
|
29954
29984
|
renderForm() {
|
|
29955
29985
|
return this.forms.map((form, index$1) => {
|
|
29956
|
-
return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
29986
|
+
return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el }, form[this.registrationStep] && form[this.registrationStep].map(input => index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
29987
|
+
? (input.inputType.toLowerCase() == 'checkboxgroup' || input.inputType.toLowerCase() == 'togglecheckbox')
|
|
29988
|
+
? input.data.subFields
|
|
29989
|
+
: input.data.values
|
|
29990
|
+
: [], 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());
|
|
29957
29991
|
});
|
|
29958
29992
|
}
|
|
29959
29993
|
;
|
|
@@ -29964,8 +29998,9 @@ const GeneralRegistration = class {
|
|
|
29964
29998
|
if (this.isLoading) {
|
|
29965
29999
|
return index.h("p", null, "Please wait, loading ...");
|
|
29966
30000
|
}
|
|
29967
|
-
return (index.h("div", { class: `registration registration__${this.registrationStep}
|
|
30001
|
+
return (index.h("div", { class: `registration registration__${this.registrationStep}` }, this.renderForm(), index.h("p", { class: 'registration__error-message' }, this.errorMessage), !this.buttonInsideForm && this.renderButtons()));
|
|
29968
30002
|
}
|
|
30003
|
+
get host() { return index.getElement(this); }
|
|
29969
30004
|
static get watchers() { return {
|
|
29970
30005
|
"registrationStep": ["sendStep"],
|
|
29971
30006
|
"forms": ["setFormValidity"]
|
|
@@ -29973,7 +30008,7 @@ const GeneralRegistration = class {
|
|
|
29973
30008
|
};
|
|
29974
30009
|
GeneralRegistration.style = generalRegistrationCss;
|
|
29975
30010
|
|
|
29976
|
-
const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
30011
|
+
const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.number__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.number__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;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__input::placeholder{color:#979797}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.number__tooltip-icon{width:16px;height:auto}.number__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}.number__tooltip.visible{opacity:1}";
|
|
29977
30012
|
|
|
29978
30013
|
const NumberInput = class {
|
|
29979
30014
|
constructor(hostRef) {
|
|
@@ -30890,7 +30925,7 @@ class PasswordField extends TextField {
|
|
|
30890
30925
|
|
|
30891
30926
|
customElements.define(PasswordField.is, PasswordField);
|
|
30892
30927
|
|
|
30893
|
-
const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
30928
|
+
const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{width:100%}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.password__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.password__input{width:inherit;border:none;margin-bottom:5px}.password__input[focused]::part(input-field){border-color:#3E3E3E}.password__input[invalid]::part(input-field){border-color:#cc0000b3}.password__input::part(input-field){border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;width:100%;position:relative;border:2px solid #DEE1EE}.password__input>input:placeholder-shown{color:#979797}.password__error-message{color:#cc0000b3}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:#FFFFFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;height:150px;border:1px solid #B0B0B0}.password__complexity--strength{display:flex;justify-content:space-evenly}.password__complexity--strength meter::-webkit-meter-optimum-value{background:#1F1F1F}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid #B0B0B0;border-right:0 solid #B0B0B0;border-left:1px solid #B0B0B0;border-bottom:0 solid #B0B0B0;bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:#FFFFFF}.password__tooltip-icon{width:16px;height:auto}.password__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}.password__tooltip.visible{opacity:1}";
|
|
30894
30929
|
|
|
30895
30930
|
const PasswordInput = class {
|
|
30896
30931
|
constructor(hostRef) {
|
|
@@ -30993,7 +31028,6 @@ const PasswordInput = class {
|
|
|
30993
31028
|
this.inputReference = this.element.shadowRoot.querySelector('input');
|
|
30994
31029
|
this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
|
|
30995
31030
|
this.passwordButton.tabIndex = -1;
|
|
30996
|
-
this.isValid = this.setValidity();
|
|
30997
31031
|
if (this.defaultValue) {
|
|
30998
31032
|
this.value = this.defaultValue;
|
|
30999
31033
|
this.calculateComplexity(this.value);
|
|
@@ -31003,6 +31037,7 @@ const PasswordInput = class {
|
|
|
31003
31037
|
this.touched = true;
|
|
31004
31038
|
}
|
|
31005
31039
|
}
|
|
31040
|
+
this.isValid = this.setValidity();
|
|
31006
31041
|
}
|
|
31007
31042
|
calculateComplexity(password) {
|
|
31008
31043
|
this.passwordComplexity = this.validation.custom
|
|
@@ -35486,7 +35521,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
|
|
|
35486
35521
|
|
|
35487
35522
|
customElements.define(ComboBox.is, ComboBox);
|
|
35488
35523
|
|
|
35489
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
35524
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.select__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__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}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.select__tooltip-icon{width:16px;height:auto}.select__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}.select__tooltip.visible{opacity:1}";
|
|
35490
35525
|
|
|
35491
35526
|
const SelectInput = class {
|
|
35492
35527
|
constructor(hostRef) {
|
|
@@ -35619,7 +35654,7 @@ const SelectInput = class {
|
|
|
35619
35654
|
};
|
|
35620
35655
|
SelectInput.style = selectInputCss;
|
|
35621
35656
|
|
|
35622
|
-
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
35657
|
+
const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.tel__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:10px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.tel__tooltip-icon{width:16px;height:auto}.tel__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}.tel__tooltip.visible{opacity:1}";
|
|
35623
35658
|
|
|
35624
35659
|
const TelInput = class {
|
|
35625
35660
|
constructor(hostRef) {
|
|
@@ -35713,7 +35748,7 @@ const TelInput = class {
|
|
|
35713
35748
|
this.isValid = this.setValidity();
|
|
35714
35749
|
if (this.defaultValue) {
|
|
35715
35750
|
this.value = this.defaultValue;
|
|
35716
|
-
this.valueHandler({ name: this.name, value: this.value });
|
|
35751
|
+
this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
|
|
35717
35752
|
}
|
|
35718
35753
|
}
|
|
35719
35754
|
getPhoneCodes(endpoint) {
|
|
@@ -35776,7 +35811,7 @@ const TelInput = class {
|
|
|
35776
35811
|
};
|
|
35777
35812
|
TelInput.style = telInputCss;
|
|
35778
35813
|
|
|
35779
|
-
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#
|
|
35814
|
+
const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.text__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.text__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}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__input::placeholder{color:#979797}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__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}.text__tooltip.visible{opacity:1}";
|
|
35780
35815
|
|
|
35781
35816
|
const TextInput = class {
|
|
35782
35817
|
constructor(hostRef) {
|
|
@@ -35875,7 +35910,6 @@ const TextInput = class {
|
|
|
35875
35910
|
// end custom styling area
|
|
35876
35911
|
}
|
|
35877
35912
|
componentDidLoad() {
|
|
35878
|
-
this.isValid = this.setValidity();
|
|
35879
35913
|
if (this.defaultValue) {
|
|
35880
35914
|
this.value = this.defaultValue;
|
|
35881
35915
|
this.valueHandler({ name: this.name, value: this.value });
|
|
@@ -35883,6 +35917,7 @@ const TextInput = class {
|
|
|
35883
35917
|
this.touched = true;
|
|
35884
35918
|
}
|
|
35885
35919
|
}
|
|
35920
|
+
this.isValid = this.setValidity();
|
|
35886
35921
|
}
|
|
35887
35922
|
setValidity() {
|
|
35888
35923
|
var _a;
|
|
@@ -35935,6 +35970,98 @@ const TextInput = class {
|
|
|
35935
35970
|
};
|
|
35936
35971
|
TextInput.style = textInputCss;
|
|
35937
35972
|
|
|
35973
|
+
const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;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}.togglecheckbox__tooltip.visible{opacity:1}.togglecheckbox__fields-wrapper{margin-top:40px;display:flex;flex-direction:column;gap:40px}.hidden{display:none}";
|
|
35974
|
+
|
|
35975
|
+
const ToggleCheckboxInput = class {
|
|
35976
|
+
constructor(hostRef) {
|
|
35977
|
+
index.registerInstance(this, hostRef);
|
|
35978
|
+
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
35979
|
+
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
35980
|
+
/**
|
|
35981
|
+
* Default value for the input.
|
|
35982
|
+
*/
|
|
35983
|
+
this.defaultValue = '';
|
|
35984
|
+
/**
|
|
35985
|
+
* Options of the input.
|
|
35986
|
+
*/
|
|
35987
|
+
this.options = [];
|
|
35988
|
+
/**
|
|
35989
|
+
* Client custom styling via inline style
|
|
35990
|
+
*/
|
|
35991
|
+
this.clientStyling = '';
|
|
35992
|
+
this.limitStylingAppends = false;
|
|
35993
|
+
this.showTooltip = false;
|
|
35994
|
+
this.value = '';
|
|
35995
|
+
this.setClientStyling = () => {
|
|
35996
|
+
let sheet = document.createElement('style');
|
|
35997
|
+
sheet.innerHTML = this.clientStyling;
|
|
35998
|
+
this.stylingContainer.prepend(sheet);
|
|
35999
|
+
};
|
|
36000
|
+
}
|
|
36001
|
+
validityChanged() {
|
|
36002
|
+
}
|
|
36003
|
+
validityStateHandler(inputStateEvent) {
|
|
36004
|
+
this.sendValidityState.emit(inputStateEvent);
|
|
36005
|
+
}
|
|
36006
|
+
emitValueHandler(newValue) {
|
|
36007
|
+
}
|
|
36008
|
+
valueHandler(inputValueEvent) {
|
|
36009
|
+
this.sendInputValue.emit(inputValueEvent);
|
|
36010
|
+
}
|
|
36011
|
+
handleClickOutside(event) {
|
|
36012
|
+
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
36013
|
+
return;
|
|
36014
|
+
if (event.composedPath()[0] !== this.tooltipReference)
|
|
36015
|
+
this.showTooltip = false;
|
|
36016
|
+
}
|
|
36017
|
+
connectedCallback() {
|
|
36018
|
+
}
|
|
36019
|
+
componentDidRender() {
|
|
36020
|
+
// start custom styling area
|
|
36021
|
+
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
36022
|
+
if (this.clientStyling)
|
|
36023
|
+
this.setClientStyling();
|
|
36024
|
+
this.limitStylingAppends = true;
|
|
36025
|
+
}
|
|
36026
|
+
// end custom styling area
|
|
36027
|
+
}
|
|
36028
|
+
componentDidLoad() {
|
|
36029
|
+
}
|
|
36030
|
+
handleClick() {
|
|
36031
|
+
this.showFields = this.checkboxReference.checked;
|
|
36032
|
+
this.errorMessage = this.setErrorMessage();
|
|
36033
|
+
this.isValid = this.setValidity();
|
|
36034
|
+
}
|
|
36035
|
+
setValidity() {
|
|
36036
|
+
return this.checkboxReference.validity.valid;
|
|
36037
|
+
}
|
|
36038
|
+
setErrorMessage() {
|
|
36039
|
+
if (this.checkboxReference.validity.valueMissing) {
|
|
36040
|
+
return translate$2('requiredError', this.language);
|
|
36041
|
+
}
|
|
36042
|
+
}
|
|
36043
|
+
renderLabel() {
|
|
36044
|
+
return (index.h("label", { class: 'togglecheckbox__label', htmlFor: `${this.name}__input` }, index.h("div", { class: 'togglecheckbox__label-text', innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
36045
|
+
}
|
|
36046
|
+
renderTooltip() {
|
|
36047
|
+
if (this.showTooltip) {
|
|
36048
|
+
return (index.h("div", { class: `togglecheckbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
|
|
36049
|
+
}
|
|
36050
|
+
return null;
|
|
36051
|
+
}
|
|
36052
|
+
render() {
|
|
36053
|
+
return index.h("div", { class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { class: 'togglecheckbox__wrapper--flex' }, index.h("input", { class: 'togglecheckbox__input', type: "checkbox", id: `${this.name}__input`, ref: (el) => this.checkboxReference = el, name: this.name, checked: this.defaultValue === "true", readOnly: this.autofilled, required: this.validation.mandatory, value: this.value, onClick: () => this.handleClick() }), this.renderLabel()), index.h("small", { class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
36054
|
+
index.h("img", { class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
36055
|
+
return index.h("general-input", { type: subfield.inputType, name: subfield.name, displayName: subfield.displayName, validation: subfield.validate, action: subfield.action || null, defaultValue: subfield.defaultValue, autofilled: subfield.autofill, emitValue: this.emitValue, language: this.language, isDuplicateInput: subfield.isDuplicateInput, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder });
|
|
36056
|
+
})));
|
|
36057
|
+
}
|
|
36058
|
+
static get watchers() { return {
|
|
36059
|
+
"isValid": ["validityChanged"],
|
|
36060
|
+
"emitValue": ["emitValueHandler"]
|
|
36061
|
+
}; }
|
|
36062
|
+
};
|
|
36063
|
+
ToggleCheckboxInput.style = toggleCheckboxInputCss;
|
|
36064
|
+
|
|
35938
36065
|
exports.checkbox_group_input = CheckboxGroupInput;
|
|
35939
36066
|
exports.checkbox_input = CheckboxInput;
|
|
35940
36067
|
exports.date_input = DateInput;
|
|
@@ -35947,3 +36074,4 @@ exports.radio_input = RadioInput;
|
|
|
35947
36074
|
exports.select_input = SelectInput;
|
|
35948
36075
|
exports.tel_input = TelInput;
|
|
35949
36076
|
exports.text_input = TextInput;
|
|
36077
|
+
exports.toggle_checkbox_input = ToggleCheckboxInput;
|
|
@@ -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":[520],"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":[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-
|
|
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":[520],"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":[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
|
|
|
@@ -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;
|