@everymatrix/general-registration 1.66.0 → 1.66.2
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_13.cjs.entry.js +48 -24
- package/dist/collection/components/general-registration/general-registration.css +6 -1
- package/dist/collection/components/general-registration/general-registration.js +9 -6
- package/dist/esm/checkbox-group-input_13.entry.js +48 -24
- package/dist/general-registration/{p-5359c468.entry.js → checkbox-group-input_13.entry.js} +2 -2
- package/dist/general-registration/general-registration.esm.js +1 -1
- package/dist/stencil.config.js +1 -0
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-registration/.stencil/packages/stencil/general-input/src/utils/types.d.ts +19 -0
- package/package.json +1 -1
- /package/dist/general-registration/{p-e1255160.js → app-globals-0f993ce5.js} +0 -0
- /package/dist/general-registration/{p-59a2915a.js → index-14f0c56e.js} +0 -0
|
@@ -12550,7 +12550,7 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
|
|
|
12550
12550
|
|
|
12551
12551
|
if(typeof window!="undefined"){let n=function(t){return function(...s){try{return t.apply(this,s)}catch(e){if(e instanceof DOMException&&e.message.includes("has already been used with this registry")||e.message.includes("Cannot define multiple custom elements with the same tag name"))return !1;throw e}}};customElements.define=n(customElements.define),Promise.resolve().then(()=>PlayerConsentsDrhcDBLh).then(({default:t})=>{!customElements.get("player-consents")&&customElements.define("player-consents",t.element);});}
|
|
12552
12552
|
|
|
12553
|
-
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__wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.registration__error-message {\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n font-size: 13px;\n display: block;\n justify-content: center;\n text-align: center;\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 position: relative;\n}\n.registration__button {\n border-radius: 5px;\n background: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n border: 1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n color: var(--emw--button-typography, var(--emw--color-white, #FFFFFF));\n text-transform: uppercase;\n font-size: 20px;\n height: 44px;\n width: 100%;\n margin: 0px auto;\n padding: 10px 20px;\n font-weight: normal;\n box-shadow: none;\n cursor: pointer;\n}\n.registration__button--disabled {\n background: var(--emw--color-gray-100, #E6E6E6);\n border: 1px solid var(--emw--color-gray-150, #828282);\n pointer-events: none;\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 .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}\n.spinner {\n animation: rotate 2s linear infinite;\n z-index: 2;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -25px 0 0 -25px;\n width: 50px;\n height: 50px;\n}\n.spinner .path {\n stroke: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n stroke-linecap: round;\n animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}";
|
|
12553
|
+
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__wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.registration__error-message {\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n font-size: var(--emw-font-size-small, 13px);\n display: block;\n justify-content: center;\n text-align: center;\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 position: relative;\n}\n.registration__button {\n border-radius: 5px;\n background: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n border: 1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n color: var(--emw--button-typography, var(--emw--color-white, #FFFFFF));\n text-transform: uppercase;\n font-size: 20px;\n height: 44px;\n width: 100%;\n margin: 0px auto;\n padding: 10px 20px;\n font-weight: normal;\n box-shadow: none;\n cursor: pointer;\n}\n.registration__button--disabled {\n background: var(--emw--color-gray-100, #E6E6E6);\n border: 1px solid var(--emw--color-gray-150, #828282);\n pointer-events: none;\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 .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}\n.spinner {\n animation: rotate 2s linear infinite;\n z-index: 2;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -25px 0 0 -25px;\n width: 50px;\n height: 50px;\n}\n.spinner .path {\n stroke: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n stroke-linecap: round;\n animation: dash 1.5s ease-in-out infinite;\n}\n\n.input-description {\n margin-top: 5px;\n font-size: var(--emw-font-size-x-small, 12px);\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}";
|
|
12554
12554
|
const GeneralRegistrationStyle0 = generalRegistrationCss;
|
|
12555
12555
|
|
|
12556
12556
|
const GeneralRegistration = class {
|
|
@@ -12905,7 +12905,7 @@ const GeneralRegistration = class {
|
|
|
12905
12905
|
}
|
|
12906
12906
|
setRegisterStep() {
|
|
12907
12907
|
this.isLoadingPOST = true;
|
|
12908
|
-
const url = new URL(
|
|
12908
|
+
const url = new URL('/v1/player/legislation/registration/step/', this.endpoint);
|
|
12909
12909
|
const registerStep = {
|
|
12910
12910
|
registrationId: this.registrationID,
|
|
12911
12911
|
registerUserDto: this.listOfInputValues
|
|
@@ -13267,11 +13267,14 @@ const GeneralRegistration = class {
|
|
|
13267
13267
|
}
|
|
13268
13268
|
renderForm() {
|
|
13269
13269
|
return this.forms.map((form, index$1) => {
|
|
13270
|
-
return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el, onClick: this.handleInitialClick }, form[this.registrationStep] && form[this.registrationStep].map(input =>
|
|
13271
|
-
|
|
13272
|
-
|
|
13273
|
-
|
|
13274
|
-
|
|
13270
|
+
return index.h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index$1 + 1}` ? 'hidden' : ''}`, ref: el => this.form = el, onClick: this.handleInitialClick }, form[this.registrationStep] && form[this.registrationStep].map((input) => {
|
|
13271
|
+
var _a;
|
|
13272
|
+
return index.h("div", { key: input.name, class: "input-wrapper" }, index.h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
13273
|
+
? (input.inputType.toLowerCase() === 'checkboxgroup' || input.inputType.toLowerCase() === 'togglecheckbox')
|
|
13274
|
+
? input.data.subFields
|
|
13275
|
+
: input.data.values
|
|
13276
|
+
: [], 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, "translation-url": this.translationUrl, emitOnClick: this.emitOnClick, onClick: this.handleInitialClick }), ((_a = input.customInfo) === null || _a === void 0 ? void 0 : _a.description) && (index.h("div", { class: "input-description" }, input.customInfo.description)));
|
|
13277
|
+
}), this.isConsentReady && this.renderConsents(), this.buttonInsideForm && this.renderButtons(), index.h("div", { class: 'registration__wrapper--flex' }, index.h("p", { class: 'registration__error-message', innerHTML: this.errorMessage })));
|
|
13275
13278
|
});
|
|
13276
13279
|
}
|
|
13277
13280
|
;
|
|
@@ -13776,7 +13779,7 @@ const RadioInput = class {
|
|
|
13776
13779
|
};
|
|
13777
13780
|
RadioInput.style = RadioInputStyle0;
|
|
13778
13781
|
|
|
13779
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
13782
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.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:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}";
|
|
13780
13783
|
const SelectInputStyle0 = selectInputCss;
|
|
13781
13784
|
|
|
13782
13785
|
const SelectInput = class {
|
|
@@ -13785,7 +13788,7 @@ const SelectInput = class {
|
|
|
13785
13788
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
13786
13789
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
13787
13790
|
this.touched = false;
|
|
13788
|
-
this.
|
|
13791
|
+
this.handleComboChange = (event) => {
|
|
13789
13792
|
this.touched = true;
|
|
13790
13793
|
const selectedValue = event.target.value;
|
|
13791
13794
|
// Find the original option based on case-insensitive comparison
|
|
@@ -13801,12 +13804,23 @@ const SelectInput = class {
|
|
|
13801
13804
|
this.emitValueHandler(true);
|
|
13802
13805
|
};
|
|
13803
13806
|
this.handleBlur = (event) => {
|
|
13804
|
-
|
|
13807
|
+
const field = event.currentTarget;
|
|
13808
|
+
if (field.opened)
|
|
13809
|
+
return;
|
|
13805
13810
|
this.touched = true;
|
|
13811
|
+
this.value = field.value;
|
|
13806
13812
|
this.isValid = this.setValidity();
|
|
13807
13813
|
this.errorMessage = this.setErrorMessage();
|
|
13808
13814
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13809
13815
|
};
|
|
13816
|
+
this.handleSelectChange = (event) => {
|
|
13817
|
+
this.touched = true;
|
|
13818
|
+
this.value = event.target.value;
|
|
13819
|
+
this.isValid = this.setValidity();
|
|
13820
|
+
this.errorMessage = this.setErrorMessage();
|
|
13821
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13822
|
+
this.emitValueHandler(true);
|
|
13823
|
+
};
|
|
13810
13824
|
this.setClientStyling = () => {
|
|
13811
13825
|
let sheet = document.createElement('style');
|
|
13812
13826
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -13851,29 +13865,32 @@ const SelectInput = class {
|
|
|
13851
13865
|
this.sendInputValue.emit(inputValueEvent);
|
|
13852
13866
|
}
|
|
13853
13867
|
handleClickOutside(event) {
|
|
13854
|
-
//Check for empty field when closing the dropdown
|
|
13855
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
13856
|
-
this.errorMessage = this.setErrorMessage();
|
|
13857
13868
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
13858
13869
|
return;
|
|
13859
13870
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
13860
13871
|
this.showTooltip = false;
|
|
13861
13872
|
}
|
|
13862
13873
|
connectedCallback() {
|
|
13874
|
+
var _a;
|
|
13863
13875
|
this.displayedOptions = this.options.map(option => ({
|
|
13864
13876
|
label: option.label,
|
|
13865
13877
|
value: option.value
|
|
13866
13878
|
}));
|
|
13879
|
+
// Use the searchable select if there are more then 6 values
|
|
13880
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13867
13881
|
}
|
|
13868
13882
|
componentWillLoad() {
|
|
13869
13883
|
if (this.action && !this.options.length) {
|
|
13870
13884
|
if (this.action.split(" ")[0] == 'GET') {
|
|
13871
13885
|
const endpoint = this.action.split(" ")[1];
|
|
13872
13886
|
return this.getOptions(endpoint).then((options) => {
|
|
13887
|
+
var _a;
|
|
13873
13888
|
const firstKey = Object.keys(options)[0];
|
|
13874
13889
|
this.displayedOptions = options[firstKey].map(option => {
|
|
13875
13890
|
return { label: option.Name, value: option.Alpha2Code };
|
|
13876
13891
|
});
|
|
13892
|
+
// Use the searchable select if there are more then 6 values
|
|
13893
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13877
13894
|
});
|
|
13878
13895
|
}
|
|
13879
13896
|
}
|
|
@@ -13911,10 +13928,14 @@ const SelectInput = class {
|
|
|
13911
13928
|
});
|
|
13912
13929
|
}
|
|
13913
13930
|
setValidity() {
|
|
13914
|
-
|
|
13931
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
13932
|
+
return this.vaadinCombo.validate();
|
|
13933
|
+
}
|
|
13934
|
+
return false;
|
|
13915
13935
|
}
|
|
13916
13936
|
setErrorMessage() {
|
|
13917
|
-
|
|
13937
|
+
var _a, _b, _c;
|
|
13938
|
+
if (((_b = (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valueMissing) || ((_c = this.vaadinCombo) === null || _c === void 0 ? void 0 : _c.invalid)) {
|
|
13918
13939
|
return translate$1('requiredError', this.language);
|
|
13919
13940
|
}
|
|
13920
13941
|
}
|
|
@@ -13925,12 +13946,15 @@ const SelectInput = class {
|
|
|
13925
13946
|
return null;
|
|
13926
13947
|
}
|
|
13927
13948
|
render() {
|
|
13949
|
+
var _a, _b;
|
|
13928
13950
|
let invalidClass = '';
|
|
13929
13951
|
if (this.touched) {
|
|
13930
13952
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13931
13953
|
}
|
|
13932
|
-
return index.h("div", { key: '
|
|
13933
|
-
index.h("img", { key: '
|
|
13954
|
+
return index.h("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, index.h("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
13955
|
+
index.h("img", { key: '411d50bd0864fe021609436611fb2989c002c8a6', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? index.h("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
|
|
13956
|
+
:
|
|
13957
|
+
index.h("vaadin-select", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, onBlur: this.handleBlur }), index.h("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
13934
13958
|
}
|
|
13935
13959
|
static get watchers() { return {
|
|
13936
13960
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14108,8 +14132,8 @@ const TelInput = class {
|
|
|
14108
14132
|
if (this.touched) {
|
|
14109
14133
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14110
14134
|
}
|
|
14111
|
-
return index.h("div", { key: '
|
|
14112
|
-
index.h("img", { key: '
|
|
14135
|
+
return index.h("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
14136
|
+
index.h("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '0cb8fe81d26828c0997379352ee25e5a416b5675', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
14113
14137
|
}
|
|
14114
14138
|
static get watchers() { return {
|
|
14115
14139
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14119,7 +14143,7 @@ const TelInput = class {
|
|
|
14119
14143
|
};
|
|
14120
14144
|
TelInput.style = TelInputStyle0;
|
|
14121
14145
|
|
|
14122
|
-
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%;display:flex;flex-direction:column;gap:5px
|
|
14146
|
+
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%;display:flex;flex-direction:column;gap:5px}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emw--color-black, #000000)}.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:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__input::placeholder{color:var(--emw--color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
|
|
14123
14147
|
const TextInputStyle0 = textInputCss;
|
|
14124
14148
|
|
|
14125
14149
|
const TextInput = class {
|
|
@@ -14295,8 +14319,8 @@ const TextInput = class {
|
|
|
14295
14319
|
if (this.touched) {
|
|
14296
14320
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14297
14321
|
}
|
|
14298
|
-
return index.h("div", { key: '
|
|
14299
|
-
index.h("img", { key: '
|
|
14322
|
+
return index.h("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, index.h("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
14323
|
+
index.h("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '8fc695313a9e2e19898380dfff97ee76b6e509df', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
14300
14324
|
}
|
|
14301
14325
|
static get watchers() { return {
|
|
14302
14326
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14404,8 +14428,8 @@ const ToggleCheckboxInput = class {
|
|
|
14404
14428
|
return null;
|
|
14405
14429
|
}
|
|
14406
14430
|
render() {
|
|
14407
|
-
return index.h("div", { key: '
|
|
14408
|
-
index.h("img", { key: '
|
|
14431
|
+
return index.h("div", { key: '1f359a8390bb4296e94573131009eeff1bd2293c', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '76033e62f8d111e3071b1a09a6d8f9b909a05244', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: '6d944818346ce6e62117856ff5dfd2278c1ccad4', 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", { key: '7e2b7612f6dc179035027b551a6ac9801a1ba3c5', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '3a77da5b3544107d49137e6024888f8e774be170', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
14432
|
+
index.h("img", { key: '7edd9a8cce9d66e7f6fb2d61a4513754df62d5df', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '49de8d42d4b9f4c5668de6379f015c92098578a6', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
14409
14433
|
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, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
14410
14434
|
})));
|
|
14411
14435
|
}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
.registration__error-message {
|
|
30
30
|
color: var(--emw--color-error, var(--emw--color-red, #ed0909));
|
|
31
|
-
font-size: 13px;
|
|
31
|
+
font-size: var(--emw-font-size-small, 13px);
|
|
32
32
|
display: block;
|
|
33
33
|
justify-content: center;
|
|
34
34
|
text-align: center;
|
|
@@ -100,6 +100,11 @@
|
|
|
100
100
|
animation: dash 1.5s ease-in-out infinite;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
+
.input-description {
|
|
104
|
+
margin-top: 5px;
|
|
105
|
+
font-size: var(--emw-font-size-x-small, 12px);
|
|
106
|
+
}
|
|
107
|
+
|
|
103
108
|
@keyframes rotate {
|
|
104
109
|
100% {
|
|
105
110
|
transform: rotate(360deg);
|
|
@@ -351,7 +351,7 @@ export class GeneralRegistration {
|
|
|
351
351
|
}
|
|
352
352
|
setRegisterStep() {
|
|
353
353
|
this.isLoadingPOST = true;
|
|
354
|
-
const url = new URL(
|
|
354
|
+
const url = new URL('/v1/player/legislation/registration/step/', this.endpoint);
|
|
355
355
|
const registerStep = {
|
|
356
356
|
registrationId: this.registrationID,
|
|
357
357
|
registerUserDto: this.listOfInputValues
|
|
@@ -714,11 +714,14 @@ export class GeneralRegistration {
|
|
|
714
714
|
}
|
|
715
715
|
renderForm() {
|
|
716
716
|
return this.forms.map((form, index) => {
|
|
717
|
-
return h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el, onClick: this.handleInitialClick }, form[this.registrationStep] && form[this.registrationStep].map(input =>
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
717
|
+
return h("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el, onClick: this.handleInitialClick }, form[this.registrationStep] && form[this.registrationStep].map((input) => {
|
|
718
|
+
var _a;
|
|
719
|
+
return h("div", { key: input.name, class: "input-wrapper" }, h("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
720
|
+
? (input.inputType.toLowerCase() === 'checkboxgroup' || input.inputType.toLowerCase() === 'togglecheckbox')
|
|
721
|
+
? input.data.subFields
|
|
722
|
+
: input.data.values
|
|
723
|
+
: [], 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, "translation-url": this.translationUrl, emitOnClick: this.emitOnClick, onClick: this.handleInitialClick }), ((_a = input.customInfo) === null || _a === void 0 ? void 0 : _a.description) && (h("div", { class: "input-description" }, input.customInfo.description)));
|
|
724
|
+
}), this.isConsentReady && this.renderConsents(), this.buttonInsideForm && this.renderButtons(), h("div", { class: 'registration__wrapper--flex' }, h("p", { class: 'registration__error-message', innerHTML: this.errorMessage })));
|
|
722
725
|
});
|
|
723
726
|
}
|
|
724
727
|
;
|
|
@@ -12546,7 +12546,7 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
|
|
|
12546
12546
|
|
|
12547
12547
|
if(typeof window!="undefined"){let n=function(t){return function(...s){try{return t.apply(this,s)}catch(e){if(e instanceof DOMException&&e.message.includes("has already been used with this registry")||e.message.includes("Cannot define multiple custom elements with the same tag name"))return !1;throw e}}};customElements.define=n(customElements.define),Promise.resolve().then(()=>PlayerConsentsDrhcDBLh).then(({default:t})=>{!customElements.get("player-consents")&&customElements.define("player-consents",t.element);});}
|
|
12548
12548
|
|
|
12549
|
-
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__wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.registration__error-message {\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n font-size: 13px;\n display: block;\n justify-content: center;\n text-align: center;\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 position: relative;\n}\n.registration__button {\n border-radius: 5px;\n background: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n border: 1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n color: var(--emw--button-typography, var(--emw--color-white, #FFFFFF));\n text-transform: uppercase;\n font-size: 20px;\n height: 44px;\n width: 100%;\n margin: 0px auto;\n padding: 10px 20px;\n font-weight: normal;\n box-shadow: none;\n cursor: pointer;\n}\n.registration__button--disabled {\n background: var(--emw--color-gray-100, #E6E6E6);\n border: 1px solid var(--emw--color-gray-150, #828282);\n pointer-events: none;\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 .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}\n.spinner {\n animation: rotate 2s linear infinite;\n z-index: 2;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -25px 0 0 -25px;\n width: 50px;\n height: 50px;\n}\n.spinner .path {\n stroke: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n stroke-linecap: round;\n animation: dash 1.5s ease-in-out infinite;\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}";
|
|
12549
|
+
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__wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.registration__error-message {\n color: var(--emw--color-error, var(--emw--color-red, #ed0909));\n font-size: var(--emw-font-size-small, 13px);\n display: block;\n justify-content: center;\n text-align: center;\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 position: relative;\n}\n.registration__button {\n border-radius: 5px;\n background: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n border: 1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n color: var(--emw--button-typography, var(--emw--color-white, #FFFFFF));\n text-transform: uppercase;\n font-size: 20px;\n height: 44px;\n width: 100%;\n margin: 0px auto;\n padding: 10px 20px;\n font-weight: normal;\n box-shadow: none;\n cursor: pointer;\n}\n.registration__button--disabled {\n background: var(--emw--color-gray-100, #E6E6E6);\n border: 1px solid var(--emw--color-gray-150, #828282);\n pointer-events: none;\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 .registration__buttons-wrapper {\n flex-direction: row-reverse;\n gap: 15px;\n }\n}\n.spinner {\n animation: rotate 2s linear infinite;\n z-index: 2;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -25px 0 0 -25px;\n width: 50px;\n height: 50px;\n}\n.spinner .path {\n stroke: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));\n stroke-linecap: round;\n animation: dash 1.5s ease-in-out infinite;\n}\n\n.input-description {\n margin-top: 5px;\n font-size: var(--emw-font-size-x-small, 12px);\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}";
|
|
12550
12550
|
const GeneralRegistrationStyle0 = generalRegistrationCss;
|
|
12551
12551
|
|
|
12552
12552
|
const GeneralRegistration = class {
|
|
@@ -12901,7 +12901,7 @@ const GeneralRegistration = class {
|
|
|
12901
12901
|
}
|
|
12902
12902
|
setRegisterStep() {
|
|
12903
12903
|
this.isLoadingPOST = true;
|
|
12904
|
-
const url = new URL(
|
|
12904
|
+
const url = new URL('/v1/player/legislation/registration/step/', this.endpoint);
|
|
12905
12905
|
const registerStep = {
|
|
12906
12906
|
registrationId: this.registrationID,
|
|
12907
12907
|
registerUserDto: this.listOfInputValues
|
|
@@ -13263,11 +13263,14 @@ const GeneralRegistration = class {
|
|
|
13263
13263
|
}
|
|
13264
13264
|
renderForm() {
|
|
13265
13265
|
return this.forms.map((form, index) => {
|
|
13266
|
-
return h$1("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el, onClick: this.handleInitialClick }, form[this.registrationStep] && form[this.registrationStep].map(input =>
|
|
13267
|
-
|
|
13268
|
-
|
|
13269
|
-
|
|
13270
|
-
|
|
13266
|
+
return h$1("form", { action: '.', id: `RegistrationForm${this.registrationStep}`, class: `registration__form ${this.registrationStep !== `Step${index + 1}` ? 'hidden' : ''}`, ref: el => this.form = el, onClick: this.handleInitialClick }, form[this.registrationStep] && form[this.registrationStep].map((input) => {
|
|
13267
|
+
var _a;
|
|
13268
|
+
return h$1("div", { key: input.name, class: "input-wrapper" }, h$1("general-input", { type: input.inputType, name: input.name, displayName: input.displayName, validation: input.validate, action: input.action || null, options: input.data
|
|
13269
|
+
? (input.inputType.toLowerCase() === 'checkboxgroup' || input.inputType.toLowerCase() === 'togglecheckbox')
|
|
13270
|
+
? input.data.subFields
|
|
13271
|
+
: input.data.values
|
|
13272
|
+
: [], 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, "translation-url": this.translationUrl, emitOnClick: this.emitOnClick, onClick: this.handleInitialClick }), ((_a = input.customInfo) === null || _a === void 0 ? void 0 : _a.description) && (h$1("div", { class: "input-description" }, input.customInfo.description)));
|
|
13273
|
+
}), this.isConsentReady && this.renderConsents(), this.buttonInsideForm && this.renderButtons(), h$1("div", { class: 'registration__wrapper--flex' }, h$1("p", { class: 'registration__error-message', innerHTML: this.errorMessage })));
|
|
13271
13274
|
});
|
|
13272
13275
|
}
|
|
13273
13276
|
;
|
|
@@ -13772,7 +13775,7 @@ const RadioInput = class {
|
|
|
13772
13775
|
};
|
|
13773
13776
|
RadioInput.style = RadioInputStyle0;
|
|
13774
13777
|
|
|
13775
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
13778
|
+
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100%;--_invalid-hover-highlight:transparent;--vaadin-input-field-invalid-hover-highlight:transparent}vaadin-combo-box>input{background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--registration-typography, var(--emw--color-black, #000000));font-weight:300;font-size:16px;-webkit-font-smoothing:initial;}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:5px}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emw--color-black, #000000)}.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:var(--emw--registration-typography, var(--emw--color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emw--color-black, #000000)}.select__input::part(input-field){border-radius:4px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);font-family:inherit;font-style:normal;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px;height:44px}.select__input::part(toggle-button){position:relative;right:10px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}";
|
|
13776
13779
|
const SelectInputStyle0 = selectInputCss;
|
|
13777
13780
|
|
|
13778
13781
|
const SelectInput = class {
|
|
@@ -13781,7 +13784,7 @@ const SelectInput = class {
|
|
|
13781
13784
|
this.sendValidityState = createEvent(this, "sendValidityState", 7);
|
|
13782
13785
|
this.sendInputValue = createEvent(this, "sendInputValue", 7);
|
|
13783
13786
|
this.touched = false;
|
|
13784
|
-
this.
|
|
13787
|
+
this.handleComboChange = (event) => {
|
|
13785
13788
|
this.touched = true;
|
|
13786
13789
|
const selectedValue = event.target.value;
|
|
13787
13790
|
// Find the original option based on case-insensitive comparison
|
|
@@ -13797,12 +13800,23 @@ const SelectInput = class {
|
|
|
13797
13800
|
this.emitValueHandler(true);
|
|
13798
13801
|
};
|
|
13799
13802
|
this.handleBlur = (event) => {
|
|
13800
|
-
|
|
13803
|
+
const field = event.currentTarget;
|
|
13804
|
+
if (field.opened)
|
|
13805
|
+
return;
|
|
13801
13806
|
this.touched = true;
|
|
13807
|
+
this.value = field.value;
|
|
13802
13808
|
this.isValid = this.setValidity();
|
|
13803
13809
|
this.errorMessage = this.setErrorMessage();
|
|
13804
13810
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13805
13811
|
};
|
|
13812
|
+
this.handleSelectChange = (event) => {
|
|
13813
|
+
this.touched = true;
|
|
13814
|
+
this.value = event.target.value;
|
|
13815
|
+
this.isValid = this.setValidity();
|
|
13816
|
+
this.errorMessage = this.setErrorMessage();
|
|
13817
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
13818
|
+
this.emitValueHandler(true);
|
|
13819
|
+
};
|
|
13806
13820
|
this.setClientStyling = () => {
|
|
13807
13821
|
let sheet = document.createElement('style');
|
|
13808
13822
|
sheet.innerHTML = this.clientStyling;
|
|
@@ -13847,29 +13861,32 @@ const SelectInput = class {
|
|
|
13847
13861
|
this.sendInputValue.emit(inputValueEvent);
|
|
13848
13862
|
}
|
|
13849
13863
|
handleClickOutside(event) {
|
|
13850
|
-
//Check for empty field when closing the dropdown
|
|
13851
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
13852
|
-
this.errorMessage = this.setErrorMessage();
|
|
13853
13864
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
13854
13865
|
return;
|
|
13855
13866
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
13856
13867
|
this.showTooltip = false;
|
|
13857
13868
|
}
|
|
13858
13869
|
connectedCallback() {
|
|
13870
|
+
var _a;
|
|
13859
13871
|
this.displayedOptions = this.options.map(option => ({
|
|
13860
13872
|
label: option.label,
|
|
13861
13873
|
value: option.value
|
|
13862
13874
|
}));
|
|
13875
|
+
// Use the searchable select if there are more then 6 values
|
|
13876
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13863
13877
|
}
|
|
13864
13878
|
componentWillLoad() {
|
|
13865
13879
|
if (this.action && !this.options.length) {
|
|
13866
13880
|
if (this.action.split(" ")[0] == 'GET') {
|
|
13867
13881
|
const endpoint = this.action.split(" ")[1];
|
|
13868
13882
|
return this.getOptions(endpoint).then((options) => {
|
|
13883
|
+
var _a;
|
|
13869
13884
|
const firstKey = Object.keys(options)[0];
|
|
13870
13885
|
this.displayedOptions = options[firstKey].map(option => {
|
|
13871
13886
|
return { label: option.Name, value: option.Alpha2Code };
|
|
13872
13887
|
});
|
|
13888
|
+
// Use the searchable select if there are more then 6 values
|
|
13889
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
13873
13890
|
});
|
|
13874
13891
|
}
|
|
13875
13892
|
}
|
|
@@ -13907,10 +13924,14 @@ const SelectInput = class {
|
|
|
13907
13924
|
});
|
|
13908
13925
|
}
|
|
13909
13926
|
setValidity() {
|
|
13910
|
-
|
|
13927
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
13928
|
+
return this.vaadinCombo.validate();
|
|
13929
|
+
}
|
|
13930
|
+
return false;
|
|
13911
13931
|
}
|
|
13912
13932
|
setErrorMessage() {
|
|
13913
|
-
|
|
13933
|
+
var _a, _b, _c;
|
|
13934
|
+
if (((_b = (_a = this.inputReference) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.valueMissing) || ((_c = this.vaadinCombo) === null || _c === void 0 ? void 0 : _c.invalid)) {
|
|
13914
13935
|
return translate$1('requiredError', this.language);
|
|
13915
13936
|
}
|
|
13916
13937
|
}
|
|
@@ -13921,12 +13942,15 @@ const SelectInput = class {
|
|
|
13921
13942
|
return null;
|
|
13922
13943
|
}
|
|
13923
13944
|
render() {
|
|
13945
|
+
var _a, _b;
|
|
13924
13946
|
let invalidClass = '';
|
|
13925
13947
|
if (this.touched) {
|
|
13926
13948
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13927
13949
|
}
|
|
13928
|
-
return h$1("div", { key: '
|
|
13929
|
-
h$1("img", { key: '
|
|
13950
|
+
return h$1("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, h$1("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h$1("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
13951
|
+
h$1("img", { key: '411d50bd0864fe021609436611fb2989c002c8a6', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), this.isComboBox ? h$1("vaadin-combo-box", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur })
|
|
13952
|
+
:
|
|
13953
|
+
h$1("vaadin-select", { name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_b = this.validation) === null || _b === void 0 ? void 0 : _b.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleSelectChange, onBlur: this.handleBlur }), h$1("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
13930
13954
|
}
|
|
13931
13955
|
static get watchers() { return {
|
|
13932
13956
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14104,8 +14128,8 @@ const TelInput = class {
|
|
|
14104
14128
|
if (this.touched) {
|
|
14105
14129
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14106
14130
|
}
|
|
14107
|
-
return h$1("div", { key: '
|
|
14108
|
-
h$1("img", { key: '
|
|
14131
|
+
return h$1("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, h$1("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
14132
|
+
h$1("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, h$1("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h$1("input", { key: '0cb8fe81d26828c0997379352ee25e5a416b5675', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h$1("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
14109
14133
|
}
|
|
14110
14134
|
static get watchers() { return {
|
|
14111
14135
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14115,7 +14139,7 @@ const TelInput = class {
|
|
|
14115
14139
|
};
|
|
14116
14140
|
TelInput.style = TelInputStyle0;
|
|
14117
14141
|
|
|
14118
|
-
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%;display:flex;flex-direction:column;gap:5px
|
|
14142
|
+
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%;display:flex;flex-direction:column;gap:5px}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emw--color-black, #000000)}.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:var(--emw--registration-typography, var(--emw--color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.text__input{font-family:inherit;width:100%;height:44px;border:1px solid var(--emw--color-gray-100, #E6E6E6);background-color:var(--emw--color-white, #FFFFFF);color:var(--emw--color-black, #000000);border-radius:5px;font-size:16px;font-weight:300;line-height:1.5;padding:5px 15px}.text__input:focus{border:1px solid var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.text__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__input::placeholder{color:var(--emw--color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
|
|
14119
14143
|
const TextInputStyle0 = textInputCss;
|
|
14120
14144
|
|
|
14121
14145
|
const TextInput = class {
|
|
@@ -14291,8 +14315,8 @@ const TextInput = class {
|
|
|
14291
14315
|
if (this.touched) {
|
|
14292
14316
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14293
14317
|
}
|
|
14294
|
-
return h$1("div", { key: '
|
|
14295
|
-
h$1("img", { key: '
|
|
14318
|
+
return h$1("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h$1("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, h$1("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
14319
|
+
h$1("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: '8fc695313a9e2e19898380dfff97ee76b6e509df', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h$1("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
14296
14320
|
}
|
|
14297
14321
|
static get watchers() { return {
|
|
14298
14322
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14400,8 +14424,8 @@ const ToggleCheckboxInput = class {
|
|
|
14400
14424
|
return null;
|
|
14401
14425
|
}
|
|
14402
14426
|
render() {
|
|
14403
|
-
return h$1("div", { key: '
|
|
14404
|
-
h$1("img", { key: '
|
|
14427
|
+
return h$1("div", { key: '1f359a8390bb4296e94573131009eeff1bd2293c', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '76033e62f8d111e3071b1a09a6d8f9b909a05244', class: 'togglecheckbox__wrapper--flex' }, h$1("input", { key: '6d944818346ce6e62117856ff5dfd2278c1ccad4', 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()), h$1("small", { key: '7e2b7612f6dc179035027b551a6ac9801a1ba3c5', class: 'togglecheckbox__error-message' }, this.errorMessage), h$1("div", { key: '3a77da5b3544107d49137e6024888f8e774be170', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
14428
|
+
h$1("img", { key: '7edd9a8cce9d66e7f6fb2d61a4513754df62d5df', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h$1("div", { key: '49de8d42d4b9f4c5668de6379f015c92098578a6', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
14405
14429
|
return h$1("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, "client-styling": this.clientStyling, tooltip: subfield.tooltip, placeholder: subfield.placeholder == null ? '' : subfield.placeholder, ref: el => this.subFieldsObject[subfield.name] = el });
|
|
14406
14430
|
})));
|
|
14407
14431
|
}
|