@everymatrix/pam-forgot-password 1.65.0 → 1.65.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_14.cjs.entry.js +38 -17
- package/dist/esm/checkbox-group-input_14.entry.js +38 -17
- package/dist/pam-forgot-password/{p-587a67ef.entry.js → checkbox-group-input_14.entry.js} +2 -2
- package/dist/pam-forgot-password/index.esm.js +1 -1
- package/dist/pam-forgot-password/pam-forgot-password-0f76562c.js +1 -0
- package/dist/pam-forgot-password/pam-forgot-password.esm.js +1 -1
- package/dist/stencil.config.dev.js +1 -0
- package/dist/stencil.config.js +1 -0
- package/package.json +1 -1
- package/dist/pam-forgot-password/p-f10ac9f7.js +0 -1
- /package/dist/pam-forgot-password/{p-e1255160.js → app-globals-0f993ce5.js} +0 -0
- /package/dist/pam-forgot-password/{p-f5cf4939.js → index-6f00d158.js} +0 -0
|
@@ -11959,7 +11959,7 @@ const RadioInput = class {
|
|
|
11959
11959
|
};
|
|
11960
11960
|
RadioInput.style = RadioInputStyle0;
|
|
11961
11961
|
|
|
11962
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
11962
|
+
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))}";
|
|
11963
11963
|
const SelectInputStyle0 = selectInputCss;
|
|
11964
11964
|
|
|
11965
11965
|
const SelectInput = class {
|
|
@@ -11968,7 +11968,7 @@ const SelectInput = class {
|
|
|
11968
11968
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
11969
11969
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
11970
11970
|
this.touched = false;
|
|
11971
|
-
this.
|
|
11971
|
+
this.handleComboChange = (event) => {
|
|
11972
11972
|
this.touched = true;
|
|
11973
11973
|
const selectedValue = event.target.value;
|
|
11974
11974
|
// Find the original option based on case-insensitive comparison
|
|
@@ -11984,11 +11984,22 @@ const SelectInput = class {
|
|
|
11984
11984
|
this.emitValueHandler(true);
|
|
11985
11985
|
};
|
|
11986
11986
|
this.handleBlur = (event) => {
|
|
11987
|
-
|
|
11987
|
+
const field = event.currentTarget;
|
|
11988
|
+
if (field.opened)
|
|
11989
|
+
return;
|
|
11988
11990
|
this.touched = true;
|
|
11991
|
+
this.value = field.value;
|
|
11992
|
+
this.isValid = this.setValidity();
|
|
11993
|
+
this.errorMessage = this.setErrorMessage();
|
|
11994
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
11995
|
+
};
|
|
11996
|
+
this.handleSelectChange = (event) => {
|
|
11997
|
+
this.touched = true;
|
|
11998
|
+
this.value = event.target.value;
|
|
11989
11999
|
this.isValid = this.setValidity();
|
|
11990
12000
|
this.errorMessage = this.setErrorMessage();
|
|
11991
12001
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
12002
|
+
this.emitValueHandler(true);
|
|
11992
12003
|
};
|
|
11993
12004
|
this.setClientStyling = () => {
|
|
11994
12005
|
let sheet = document.createElement('style');
|
|
@@ -12034,29 +12045,32 @@ const SelectInput = class {
|
|
|
12034
12045
|
this.sendInputValue.emit(inputValueEvent);
|
|
12035
12046
|
}
|
|
12036
12047
|
handleClickOutside(event) {
|
|
12037
|
-
//Check for empty field when closing the dropdown
|
|
12038
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
12039
|
-
this.errorMessage = this.setErrorMessage();
|
|
12040
12048
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
12041
12049
|
return;
|
|
12042
12050
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
12043
12051
|
this.showTooltip = false;
|
|
12044
12052
|
}
|
|
12045
12053
|
connectedCallback() {
|
|
12054
|
+
var _a;
|
|
12046
12055
|
this.displayedOptions = this.options.map(option => ({
|
|
12047
12056
|
label: option.label,
|
|
12048
12057
|
value: option.value
|
|
12049
12058
|
}));
|
|
12059
|
+
// Use the searchable select if there are more then 6 values
|
|
12060
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
12050
12061
|
}
|
|
12051
12062
|
componentWillLoad() {
|
|
12052
12063
|
if (this.action && !this.options.length) {
|
|
12053
12064
|
if (this.action.split(" ")[0] == 'GET') {
|
|
12054
12065
|
const endpoint = this.action.split(" ")[1];
|
|
12055
12066
|
return this.getOptions(endpoint).then((options) => {
|
|
12067
|
+
var _a;
|
|
12056
12068
|
const firstKey = Object.keys(options)[0];
|
|
12057
12069
|
this.displayedOptions = options[firstKey].map(option => {
|
|
12058
12070
|
return { label: option.Name, value: option.Alpha2Code };
|
|
12059
12071
|
});
|
|
12072
|
+
// Use the searchable select if there are more then 6 values
|
|
12073
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
12060
12074
|
});
|
|
12061
12075
|
}
|
|
12062
12076
|
}
|
|
@@ -12094,10 +12108,14 @@ const SelectInput = class {
|
|
|
12094
12108
|
});
|
|
12095
12109
|
}
|
|
12096
12110
|
setValidity() {
|
|
12097
|
-
|
|
12111
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
12112
|
+
return this.vaadinCombo.validate();
|
|
12113
|
+
}
|
|
12114
|
+
return false;
|
|
12098
12115
|
}
|
|
12099
12116
|
setErrorMessage() {
|
|
12100
|
-
|
|
12117
|
+
var _a, _b, _c;
|
|
12118
|
+
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)) {
|
|
12101
12119
|
return translate('requiredError', this.language);
|
|
12102
12120
|
}
|
|
12103
12121
|
}
|
|
@@ -12108,12 +12126,15 @@ const SelectInput = class {
|
|
|
12108
12126
|
return null;
|
|
12109
12127
|
}
|
|
12110
12128
|
render() {
|
|
12129
|
+
var _a, _b;
|
|
12111
12130
|
let invalidClass = '';
|
|
12112
12131
|
if (this.touched) {
|
|
12113
12132
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12114
12133
|
}
|
|
12115
|
-
return index.h("div", { key: '
|
|
12116
|
-
index.h("img", { key: '
|
|
12134
|
+
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 &&
|
|
12135
|
+
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 })
|
|
12136
|
+
:
|
|
12137
|
+
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));
|
|
12117
12138
|
}
|
|
12118
12139
|
static get watchers() { return {
|
|
12119
12140
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12291,8 +12312,8 @@ const TelInput = class {
|
|
|
12291
12312
|
if (this.touched) {
|
|
12292
12313
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12293
12314
|
}
|
|
12294
|
-
return index.h("div", { key: '
|
|
12295
|
-
index.h("img", { key: '
|
|
12315
|
+
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 &&
|
|
12316
|
+
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));
|
|
12296
12317
|
}
|
|
12297
12318
|
static get watchers() { return {
|
|
12298
12319
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12302,7 +12323,7 @@ const TelInput = class {
|
|
|
12302
12323
|
};
|
|
12303
12324
|
TelInput.style = TelInputStyle0;
|
|
12304
12325
|
|
|
12305
|
-
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
|
|
12326
|
+
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}";
|
|
12306
12327
|
const TextInputStyle0 = textInputCss;
|
|
12307
12328
|
|
|
12308
12329
|
const TextInput = class {
|
|
@@ -12478,8 +12499,8 @@ const TextInput = class {
|
|
|
12478
12499
|
if (this.touched) {
|
|
12479
12500
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12480
12501
|
}
|
|
12481
|
-
return index.h("div", { key: '
|
|
12482
|
-
index.h("img", { key: '
|
|
12502
|
+
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 &&
|
|
12503
|
+
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));
|
|
12483
12504
|
}
|
|
12484
12505
|
static get watchers() { return {
|
|
12485
12506
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12587,8 +12608,8 @@ const ToggleCheckboxInput = class {
|
|
|
12587
12608
|
return null;
|
|
12588
12609
|
}
|
|
12589
12610
|
render() {
|
|
12590
|
-
return index.h("div", { key: '
|
|
12591
|
-
index.h("img", { key: '
|
|
12611
|
+
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 &&
|
|
12612
|
+
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 => {
|
|
12592
12613
|
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 });
|
|
12593
12614
|
})));
|
|
12594
12615
|
}
|
|
@@ -11955,7 +11955,7 @@ const RadioInput = class {
|
|
|
11955
11955
|
};
|
|
11956
11956
|
RadioInput.style = RadioInputStyle0;
|
|
11957
11957
|
|
|
11958
|
-
const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}:host{height:100
|
|
11958
|
+
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))}";
|
|
11959
11959
|
const SelectInputStyle0 = selectInputCss;
|
|
11960
11960
|
|
|
11961
11961
|
const SelectInput = class {
|
|
@@ -11964,7 +11964,7 @@ const SelectInput = class {
|
|
|
11964
11964
|
this.sendValidityState = createEvent(this, "sendValidityState", 7);
|
|
11965
11965
|
this.sendInputValue = createEvent(this, "sendInputValue", 7);
|
|
11966
11966
|
this.touched = false;
|
|
11967
|
-
this.
|
|
11967
|
+
this.handleComboChange = (event) => {
|
|
11968
11968
|
this.touched = true;
|
|
11969
11969
|
const selectedValue = event.target.value;
|
|
11970
11970
|
// Find the original option based on case-insensitive comparison
|
|
@@ -11980,11 +11980,22 @@ const SelectInput = class {
|
|
|
11980
11980
|
this.emitValueHandler(true);
|
|
11981
11981
|
};
|
|
11982
11982
|
this.handleBlur = (event) => {
|
|
11983
|
-
|
|
11983
|
+
const field = event.currentTarget;
|
|
11984
|
+
if (field.opened)
|
|
11985
|
+
return;
|
|
11984
11986
|
this.touched = true;
|
|
11987
|
+
this.value = field.value;
|
|
11988
|
+
this.isValid = this.setValidity();
|
|
11989
|
+
this.errorMessage = this.setErrorMessage();
|
|
11990
|
+
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
11991
|
+
};
|
|
11992
|
+
this.handleSelectChange = (event) => {
|
|
11993
|
+
this.touched = true;
|
|
11994
|
+
this.value = event.target.value;
|
|
11985
11995
|
this.isValid = this.setValidity();
|
|
11986
11996
|
this.errorMessage = this.setErrorMessage();
|
|
11987
11997
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
11998
|
+
this.emitValueHandler(true);
|
|
11988
11999
|
};
|
|
11989
12000
|
this.setClientStyling = () => {
|
|
11990
12001
|
let sheet = document.createElement('style');
|
|
@@ -12030,29 +12041,32 @@ const SelectInput = class {
|
|
|
12030
12041
|
this.sendInputValue.emit(inputValueEvent);
|
|
12031
12042
|
}
|
|
12032
12043
|
handleClickOutside(event) {
|
|
12033
|
-
//Check for empty field when closing the dropdown
|
|
12034
|
-
if (this.vaadinCombo.attributes['invalid'])
|
|
12035
|
-
this.errorMessage = this.setErrorMessage();
|
|
12036
12044
|
if (event.composedPath()[0] === this.tooltipIconReference)
|
|
12037
12045
|
return;
|
|
12038
12046
|
if (event.composedPath()[0] !== this.tooltipReference)
|
|
12039
12047
|
this.showTooltip = false;
|
|
12040
12048
|
}
|
|
12041
12049
|
connectedCallback() {
|
|
12050
|
+
var _a;
|
|
12042
12051
|
this.displayedOptions = this.options.map(option => ({
|
|
12043
12052
|
label: option.label,
|
|
12044
12053
|
value: option.value
|
|
12045
12054
|
}));
|
|
12055
|
+
// Use the searchable select if there are more then 6 values
|
|
12056
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
12046
12057
|
}
|
|
12047
12058
|
componentWillLoad() {
|
|
12048
12059
|
if (this.action && !this.options.length) {
|
|
12049
12060
|
if (this.action.split(" ")[0] == 'GET') {
|
|
12050
12061
|
const endpoint = this.action.split(" ")[1];
|
|
12051
12062
|
return this.getOptions(endpoint).then((options) => {
|
|
12063
|
+
var _a;
|
|
12052
12064
|
const firstKey = Object.keys(options)[0];
|
|
12053
12065
|
this.displayedOptions = options[firstKey].map(option => {
|
|
12054
12066
|
return { label: option.Name, value: option.Alpha2Code };
|
|
12055
12067
|
});
|
|
12068
|
+
// Use the searchable select if there are more then 6 values
|
|
12069
|
+
this.isComboBox = ((_a = this.displayedOptions) === null || _a === void 0 ? void 0 : _a.length) > 6;
|
|
12056
12070
|
});
|
|
12057
12071
|
}
|
|
12058
12072
|
}
|
|
@@ -12090,10 +12104,14 @@ const SelectInput = class {
|
|
|
12090
12104
|
});
|
|
12091
12105
|
}
|
|
12092
12106
|
setValidity() {
|
|
12093
|
-
|
|
12107
|
+
if (this.vaadinCombo && 'validate' in this.vaadinCombo) {
|
|
12108
|
+
return this.vaadinCombo.validate();
|
|
12109
|
+
}
|
|
12110
|
+
return false;
|
|
12094
12111
|
}
|
|
12095
12112
|
setErrorMessage() {
|
|
12096
|
-
|
|
12113
|
+
var _a, _b, _c;
|
|
12114
|
+
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)) {
|
|
12097
12115
|
return translate('requiredError', this.language);
|
|
12098
12116
|
}
|
|
12099
12117
|
}
|
|
@@ -12104,12 +12122,15 @@ const SelectInput = class {
|
|
|
12104
12122
|
return null;
|
|
12105
12123
|
}
|
|
12106
12124
|
render() {
|
|
12125
|
+
var _a, _b;
|
|
12107
12126
|
let invalidClass = '';
|
|
12108
12127
|
if (this.touched) {
|
|
12109
12128
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12110
12129
|
}
|
|
12111
|
-
return h("div", { key: '
|
|
12112
|
-
h("img", { key: '
|
|
12130
|
+
return h("div", { key: '064b5084b26c1c18300b91bc4e5c5199d6e57616', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '7d2adb9d5dd527a8a3e48fc5432f8f7c77de6d17', class: 'select__wrapper--flex' }, h("label", { key: 'f9e8d1a0e7f211a10d36916b76f60b6525d012cd', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '13a01b566a332b4085ff44dc283ed34b302ca8e5', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
12131
|
+
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 ? 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 })
|
|
12132
|
+
:
|
|
12133
|
+
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 }), h("small", { key: '6a39b060f974030f00cd27a01d805077de70bca3', class: 'select__error-message' }, this.errorMessage));
|
|
12113
12134
|
}
|
|
12114
12135
|
static get watchers() { return {
|
|
12115
12136
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12287,8 +12308,8 @@ const TelInput = class {
|
|
|
12287
12308
|
if (this.touched) {
|
|
12288
12309
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12289
12310
|
}
|
|
12290
|
-
return h("div", { key: '
|
|
12291
|
-
h("img", { key: '
|
|
12311
|
+
return h("div", { key: 'a38531b8b0fa40e745a3a2b8ac39a56d0001c09f', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '70c35c825dafc0aee70835e87aeadab141dc22d3', class: 'tel__wrapper--flex-label' }, h("label", { key: '5ff2f5df35dcec4ea76f3b9496b193183c03188d', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'dc1625d8c724596b05ca2b0069f492ef9172bc10', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
12312
|
+
h("img", { key: 'a6e94e7598b6734b4c83d95e13a113d6f835d755', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'd3865c4a88ea5b6de6791883b3b6955b6b3a0c15', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '6d845d492057a29590bffb86c509d3f8cfbf6260', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), 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 })), h("small", { key: '1de6d39f83643e86d76659946d2996cc6e82c495', class: 'tel__error-message' }, this.errorMessage));
|
|
12292
12313
|
}
|
|
12293
12314
|
static get watchers() { return {
|
|
12294
12315
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12298,7 +12319,7 @@ const TelInput = class {
|
|
|
12298
12319
|
};
|
|
12299
12320
|
TelInput.style = TelInputStyle0;
|
|
12300
12321
|
|
|
12301
|
-
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
|
|
12322
|
+
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}";
|
|
12302
12323
|
const TextInputStyle0 = textInputCss;
|
|
12303
12324
|
|
|
12304
12325
|
const TextInput = class {
|
|
@@ -12474,8 +12495,8 @@ const TextInput = class {
|
|
|
12474
12495
|
if (this.touched) {
|
|
12475
12496
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
12476
12497
|
}
|
|
12477
|
-
return h("div", { key: '
|
|
12478
|
-
h("img", { key: '
|
|
12498
|
+
return h("div", { key: '65f086c89daa3c3ebc40e6f0c58fbd24ff6e9050', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '970d4aa2de6419ab7904e1315c669aadc7f462b3', class: 'text__wrapper--flex' }, h("label", { key: '6e3d033ebcf3ecd4a8c3f3a3a35f1e2e4bc8261a', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7247b4e12c1caf287534541d0cf019ddeaa78182', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
12499
|
+
h("img", { key: '3b96da6c25789e12cbbc3408246650d6d1c72712', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '90f0552125dbf888c915aa1b2e20446df6a48b9c', class: 'text__error-message' }, this.errorMessage));
|
|
12479
12500
|
}
|
|
12480
12501
|
static get watchers() { return {
|
|
12481
12502
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -12583,8 +12604,8 @@ const ToggleCheckboxInput = class {
|
|
|
12583
12604
|
return null;
|
|
12584
12605
|
}
|
|
12585
12606
|
render() {
|
|
12586
|
-
return h("div", { key: '
|
|
12587
|
-
h("img", { key: '
|
|
12607
|
+
return h("div", { key: '1f359a8390bb4296e94573131009eeff1bd2293c', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '76033e62f8d111e3071b1a09a6d8f9b909a05244', class: 'togglecheckbox__wrapper--flex' }, 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()), h("small", { key: '7e2b7612f6dc179035027b551a6ac9801a1ba3c5', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '3a77da5b3544107d49137e6024888f8e774be170', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
12608
|
+
h("img", { key: '7edd9a8cce9d66e7f6fb2d61a4513754df62d5df', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '49de8d42d4b9f4c5668de6379f015c92098578a6', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
12588
12609
|
return 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 });
|
|
12589
12610
|
})));
|
|
12590
12611
|
}
|