@everymatrix/general-registration 1.72.0 → 1.72.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.
|
@@ -318,7 +318,7 @@ const CheckboxGroupInput = class {
|
|
|
318
318
|
};
|
|
319
319
|
CheckboxGroupInput.style = CheckboxGroupInputStyle0;
|
|
320
320
|
|
|
321
|
-
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input
|
|
321
|
+
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input[indeterminate]::part(checkbox)::after,.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding:0px;vertical-align:baseline}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input::part(required-indicator)::after{content:\"*\"}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));box-shadow:none}";
|
|
322
322
|
const CheckboxInputStyle0 = checkboxInputCss;
|
|
323
323
|
|
|
324
324
|
const CheckboxInput = class {
|
|
@@ -383,15 +383,16 @@ const CheckboxInput = class {
|
|
|
383
383
|
// end custom styling area
|
|
384
384
|
}
|
|
385
385
|
componentDidLoad() {
|
|
386
|
+
this.inputReference = this.vaadinCheckbox.querySelector('input');
|
|
386
387
|
if (this.defaultValue) {
|
|
387
388
|
this.value = this.defaultValue;
|
|
388
389
|
this.valueHandler({ name: this.name, value: this.value });
|
|
389
390
|
}
|
|
390
391
|
}
|
|
391
|
-
|
|
392
|
-
this.value =
|
|
393
|
-
this.errorMessage = this.setErrorMessage();
|
|
392
|
+
handleCheckbox(e) {
|
|
393
|
+
this.value = e.target.checked.toString();
|
|
394
394
|
this.isValid = this.setValidity();
|
|
395
|
+
this.errorMessage = this.setErrorMessage();
|
|
395
396
|
this.emitValueHandler(true);
|
|
396
397
|
}
|
|
397
398
|
setValidity() {
|
|
@@ -403,17 +404,16 @@ const CheckboxInput = class {
|
|
|
403
404
|
}
|
|
404
405
|
}
|
|
405
406
|
renderLabel() {
|
|
406
|
-
return (index.h("label", { class:
|
|
407
|
+
return (index.h("label", { class: "checkbox__label", htmlFor: `${this.name}__input`, slot: "label" }, index.h("div", { class: "checkbox__label-text", innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
407
408
|
}
|
|
408
409
|
renderTooltip() {
|
|
409
410
|
if (this.showTooltip) {
|
|
410
|
-
return (index.h("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
|
|
411
|
+
return (index.h("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => (this.tooltipReference = el), innerHTML: this.tooltip }));
|
|
411
412
|
}
|
|
412
413
|
return null;
|
|
413
414
|
}
|
|
414
415
|
render() {
|
|
415
|
-
return index.h("div", { key: '
|
|
416
|
-
index.h("img", { key: 'dd263ce86efd89f34078f3cc24729f43f40e89a6', class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
|
|
416
|
+
return (index.h("div", { key: 'e9dfb4e2a6b99d740eaa7d94d1ff3aea9587bcc9', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, index.h("vaadin-checkbox", { key: 'cc2a8d1c131bd04febf221538f01d7334169d92a', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (index.h("img", { key: 'a94be7eefe15593f0cfa90d89bed1f536bd51103', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
417
417
|
}
|
|
418
418
|
static get watchers() { return {
|
|
419
419
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5949,8 +5949,8 @@ const DateInput = class {
|
|
|
5949
5949
|
if (this.touched) {
|
|
5950
5950
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5951
5951
|
}
|
|
5952
|
-
return index.h("div", { key: '
|
|
5953
|
-
index.h("img", { key: '
|
|
5952
|
+
return index.h("div", { key: '2598dc4b54afe7b871bbff237dacc02a04f109a1', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: 'e8e08599b7d713df237041a5c2a95ae78d7a955d', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), index.h("vaadin-date-picker", { key: '42ae32529da3f7d2bb63b9d92167a0062464f0f5', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e) }), index.h("small", { key: '6b6a7b2f369fc06001b22a4cff9835e0741ce33d', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5953
|
+
index.h("img", { key: '930e536f3fd7dae8959c3caea374706bc2dcd805', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5954
5954
|
}
|
|
5955
5955
|
get element() { return index.getElement(this); }
|
|
5956
5956
|
static get watchers() { return {
|
|
@@ -6101,8 +6101,8 @@ const EmailInput = class {
|
|
|
6101
6101
|
if (this.touched) {
|
|
6102
6102
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6103
6103
|
}
|
|
6104
|
-
return index.h("div", { key: '
|
|
6105
|
-
index.h("img", { key: '
|
|
6104
|
+
return index.h("div", { key: '532d12855e6014b6c5a81cd11f4c7d83596361c3', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '80f2e930c6360e1e4e27f29b1de3d3c49a3bb47f', class: 'email__wrapper--flex' }, index.h("label", { key: '68189c133403e6dada30c376bd84b60b35ca56e4', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'b62dd9a877825d51f6735e9b3ca6b3bb3fc21c28', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
6105
|
+
index.h("img", { key: 'ff76c31db244e06af60db2855b907c90ecde2fe2', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '137af683d11c63b2bd881fa3110dd1522ead8774', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '573a357c4e8464f20d9e60a5fd3a2d0c4ae69e3c', class: 'email__error-message' }, this.errorMessage));
|
|
6106
6106
|
}
|
|
6107
6107
|
static get watchers() { return {
|
|
6108
6108
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -15761,8 +15761,8 @@ const NumberInput = class {
|
|
|
15761
15761
|
if (this.touched) {
|
|
15762
15762
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
15763
15763
|
}
|
|
15764
|
-
return index.h("div", { key: '
|
|
15765
|
-
index.h("img", { key: '
|
|
15764
|
+
return index.h("div", { key: 'a6e6a37c0b82e75bc66e26b104f343178deb8b81', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '41d8e03f598ccab9d175dacc27ede808ec017717', class: 'number__wrapper--flex' }, index.h("label", { key: 'e2eb89c31bdc2c7e7e80546ea5844bb13d34c759', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '91de685f2da7b9ba3ddaf48a978f5e95a40594be', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
15765
|
+
index.h("img", { key: '737d9ad4e1c74a03b140d48988e688a1898f9e57', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '58d140746eaaf09aca69c5c4d698983c853e5b5f', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '74bda2b23c57d2ca88613c00e4d6ed63ea86daad', class: 'number__error-message' }, this.errorMessage));
|
|
15766
15766
|
}
|
|
15767
15767
|
static get watchers() { return {
|
|
15768
15768
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16004,8 +16004,8 @@ const PasswordInput = class {
|
|
|
16004
16004
|
if (this.touched) {
|
|
16005
16005
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16006
16006
|
}
|
|
16007
|
-
return index.h("div", { key: '
|
|
16008
|
-
index.h("img", { key: '
|
|
16007
|
+
return index.h("div", { key: 'c6a672c226569d500598f34c6155279e75fdc79c', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '44b8bee769b7b6ce86797f0f62b6af033bf2d0cd', class: 'password__wrapper--flex' }, index.h("label", { key: 'b6d573c6a70f26471cea2e576c8286719f58b47f', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '76698abedf907fa52940bc8e278fff4aeda1912f', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
16008
|
+
index.h("img", { key: '7116b9ed6eb06b6b03c336b6d216d40571b54f55', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: 'b85d0ba5396b3ab6fcf21d1053dba22fdb94c7f9', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), index.h("small", { key: 'c30bbcb8e49fcdb1dd8cb41bafd56d64b609be86', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
16009
16009
|
}
|
|
16010
16010
|
get element() { return index.getElement(this); }
|
|
16011
16011
|
static get watchers() { return {
|
|
@@ -16100,8 +16100,8 @@ const RadioInput = class {
|
|
|
16100
16100
|
return null;
|
|
16101
16101
|
}
|
|
16102
16102
|
render() {
|
|
16103
|
-
return index.h("fieldset", { key: '
|
|
16104
|
-
index.h("img", { key: '
|
|
16103
|
+
return index.h("fieldset", { key: '7dd3f10103c696ef18202154d5ede9cc10b32d0c', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '304af4ecd36e8831c1fc76abfaae1767a1005ae5', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => index.h("div", { class: 'radio__wrapper' }, index.h("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), index.h("label", { htmlFor: `${option.label}__input` }, option.label))), index.h("small", { key: '55bb2cc7060fda4774d337c8a570c78d90912da7', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
16104
|
+
index.h("img", { key: 'b3b7093e2c4b5d6f727f5346562ed3fe274bd431', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
16105
16105
|
}
|
|
16106
16106
|
static get watchers() { return {
|
|
16107
16107
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16300,10 +16300,10 @@ const SelectInput = class {
|
|
|
16300
16300
|
if (this.touched) {
|
|
16301
16301
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16302
16302
|
}
|
|
16303
|
-
return index.h("div", { key: '
|
|
16304
|
-
index.h("img", { key: '
|
|
16303
|
+
return index.h("div", { key: '7e90e23b53a72cda885485ccf4110631cede2b8f', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9a841ccebeb828fc75ed1f708a4a43d4fc7a193f', class: 'select__wrapper--flex' }, index.h("label", { key: '92c70fa56518d6d015d756b693306dab80ab0f57', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: 'cfbeb4b4969adc1f9944eb60291d8f586dcc29db', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
16304
|
+
index.h("img", { key: '13a340313095bc653a1741115bae128d538dcf30', 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 })
|
|
16305
16305
|
:
|
|
16306
|
-
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 }), index.h("small", { key: '
|
|
16306
|
+
index.h("vaadin-select", { name: this.name, popover: false, 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, "no-vertical-overlap": true, noVerticalOverlap: true }), index.h("small", { key: '6ffb5459f648208106c6bfc8a78f5cf379f7f11b', class: 'select__error-message' }, this.errorMessage));
|
|
16307
16307
|
}
|
|
16308
16308
|
static get watchers() { return {
|
|
16309
16309
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16481,8 +16481,8 @@ const TelInput = class {
|
|
|
16481
16481
|
if (this.touched) {
|
|
16482
16482
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16483
16483
|
}
|
|
16484
|
-
return index.h("div", { key: '
|
|
16485
|
-
index.h("img", { key: '
|
|
16484
|
+
return index.h("div", { key: '07279e9146394ad96ca0ce1b3e059f09fce2937a', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c4eedb1dba6a3fabd4dcc95e767813f95b83346a', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '093a445bc6a9144673386abf92263faa2f33a62a', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '76abd68488a0f78e3fbd46328fa338d8c05b9601', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
16485
|
+
index.h("img", { key: '8238860af5dbc417c2cd853b55fd79f67f51649d', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '235b2146fc4c70107d5c077071e1fa52ac1c56d3', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '73e51576aad82c2bc6895a62b0c19351a1eb917b', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: 'd714d757cd08e3d700cec86f9d6ce4ff680dd2e9', 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: 'f6ced1b252990cd3ecc18c9c5ad3546654006dcc', class: 'tel__error-message' }, this.errorMessage));
|
|
16486
16486
|
}
|
|
16487
16487
|
static get watchers() { return {
|
|
16488
16488
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16668,8 +16668,8 @@ const TextInput = class {
|
|
|
16668
16668
|
if (this.touched) {
|
|
16669
16669
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16670
16670
|
}
|
|
16671
|
-
return index.h("div", { key: '
|
|
16672
|
-
index.h("img", { key: '
|
|
16671
|
+
return index.h("div", { key: '37c7509b46ab92149c3c11365cf5061bb1bbb01a', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '737873a059749dc050a8efa6ffb09a1b2ee9f95c', class: 'text__wrapper--flex' }, index.h("label", { key: '1d921faece6c293c7e3c95d34bedd0d399c7be9e', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'e1e59c85912cf7c3dbd1e61bba829ae2b0192a18', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
16672
|
+
index.h("img", { key: '73513026eebcc809edef481d5cd7b885e5f20f03', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'a73e2c2430e6fbc778e1fd6b5fcfb298cf01b5c5', 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: '11cb376081cb05651c60c3e1ac8a41f9751ca16c', class: 'text__error-message' }, this.errorMessage));
|
|
16673
16673
|
}
|
|
16674
16674
|
static get watchers() { return {
|
|
16675
16675
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16777,8 +16777,8 @@ const ToggleCheckboxInput = class {
|
|
|
16777
16777
|
return null;
|
|
16778
16778
|
}
|
|
16779
16779
|
render() {
|
|
16780
|
-
return index.h("div", { key: '
|
|
16781
|
-
index.h("img", { key: '
|
|
16780
|
+
return index.h("div", { key: '6315588766319c4ac7a88646b01bc577858ad718', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '20d6999aaf0499b8b840a28dab89242953b4610d', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: '73b699abf4904e4f2133e30d8dea250c9fe13ac3', 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: '4d10247f1dae300d0f5133accdd544a90fa4d5a7', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '9c95cef35e58875b96710d3b64b9af1be27204c5', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
16781
|
+
index.h("img", { key: '9774edae6bad4715fd20798a7be25eb71c3c4cf0', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '70ad3ec894a32439e2dcea617e2a5b773c5456b1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
16782
16782
|
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 });
|
|
16783
16783
|
})));
|
|
16784
16784
|
}
|
|
@@ -16990,9 +16990,9 @@ const TwofaInput = class {
|
|
|
16990
16990
|
return null;
|
|
16991
16991
|
}
|
|
16992
16992
|
render() {
|
|
16993
|
-
return (index.h("div", { key: '
|
|
16993
|
+
return (index.h("div", { key: '97c1955fececc6f3998375f4c8176ceaed66856a', class: "twofa" }, index.h("div", { key: 'ee2243931d8e5c6a5aadf1e78d1851449806d2b2', class: 'twofa__error-message' }, index.h("p", { key: '20a8ccad2e6501c73e3672f6ae325f8539e2d21a' }, this.errorMessage)), index.h("div", { key: 'bb33610a8be04b86378026c02099620749b81a4b', class: "twofa__description", innerHTML: translate$1('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: 'af3ea38ed6468eb2de66aed810ba50a850bf21a9', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
16994
16994
|
return (index.h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
|
|
16995
|
-
})), index.h("div", { key: '
|
|
16995
|
+
})), index.h("div", { key: 'f385bd6dc93896d918a5cc1365b59bedd47d5bb0', class: "twofa__button-wrapper" }, index.h("p", { key: '3623f0391e0e5923cd6b3bfd74d203905486209f', class: "twofa__resend-message" }, translate$1('twofaResendMessage', this.language)), index.h("button", { key: '497660604f87dbf4ce1ce51ecd041e82ab5dd33a', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
16996
16996
|
? translate$1('twofaResendButton', this.language)
|
|
16997
16997
|
: this.formatTime()))));
|
|
16998
16998
|
}
|
|
@@ -314,7 +314,7 @@ const CheckboxGroupInput = class {
|
|
|
314
314
|
};
|
|
315
315
|
CheckboxGroupInput.style = CheckboxGroupInputStyle0;
|
|
316
316
|
|
|
317
|
-
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input
|
|
317
|
+
const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--relative{position:relative}.checkbox__input[indeterminate]::part(checkbox)::after,.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emw--registration-typography, var(--emw--color-black, #000000));line-height:1.5;padding:0px;vertical-align:baseline}.checkbox__label a{color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right: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}.checkbox__tooltip.visible{opacity:1}.checkbox__input::part(checkbox){background-color:var(--emw--color-white, #FFFFFF);transform:scale(0.8, 0.8);border-radius:var(--emw--border-radius-small, 2px);box-shadow:0 0px 0px 2px var(--emw--color-gray, #7a7a7a)}.checkbox__input::part(required-indicator)::after{content:\"*\"}.checkbox__input[indeterminate]::part(checkbox),.checkbox__input[checked]::part(checkbox){background-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));box-shadow:none}";
|
|
318
318
|
const CheckboxInputStyle0 = checkboxInputCss;
|
|
319
319
|
|
|
320
320
|
const CheckboxInput = class {
|
|
@@ -379,15 +379,16 @@ const CheckboxInput = class {
|
|
|
379
379
|
// end custom styling area
|
|
380
380
|
}
|
|
381
381
|
componentDidLoad() {
|
|
382
|
+
this.inputReference = this.vaadinCheckbox.querySelector('input');
|
|
382
383
|
if (this.defaultValue) {
|
|
383
384
|
this.value = this.defaultValue;
|
|
384
385
|
this.valueHandler({ name: this.name, value: this.value });
|
|
385
386
|
}
|
|
386
387
|
}
|
|
387
|
-
|
|
388
|
-
this.value =
|
|
389
|
-
this.errorMessage = this.setErrorMessage();
|
|
388
|
+
handleCheckbox(e) {
|
|
389
|
+
this.value = e.target.checked.toString();
|
|
390
390
|
this.isValid = this.setValidity();
|
|
391
|
+
this.errorMessage = this.setErrorMessage();
|
|
391
392
|
this.emitValueHandler(true);
|
|
392
393
|
}
|
|
393
394
|
setValidity() {
|
|
@@ -399,17 +400,16 @@ const CheckboxInput = class {
|
|
|
399
400
|
}
|
|
400
401
|
}
|
|
401
402
|
renderLabel() {
|
|
402
|
-
return (h$1("label", { class:
|
|
403
|
+
return (h$1("label", { class: "checkbox__label", htmlFor: `${this.name}__input`, slot: "label" }, h$1("div", { class: "checkbox__label-text", innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
403
404
|
}
|
|
404
405
|
renderTooltip() {
|
|
405
406
|
if (this.showTooltip) {
|
|
406
|
-
return (h$1("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
|
|
407
|
+
return (h$1("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => (this.tooltipReference = el), innerHTML: this.tooltip }));
|
|
407
408
|
}
|
|
408
409
|
return null;
|
|
409
410
|
}
|
|
410
411
|
render() {
|
|
411
|
-
return h$1("div", { key: '
|
|
412
|
-
h$1("img", { key: 'dd263ce86efd89f34078f3cc24729f43f40e89a6', class: 'checkbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
|
|
412
|
+
return (h$1("div", { key: 'e9dfb4e2a6b99d740eaa7d94d1ff3aea9587bcc9', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, h$1("vaadin-checkbox", { key: 'cc2a8d1c131bd04febf221538f01d7334169d92a', class: "checkbox__input", required: this.validation.mandatory, checked: this.defaultValue === 'true', onChange: (e) => this.handleCheckbox(e), "error-message": !this.isValid && this.errorMessage, ref: (el) => (this.vaadinCheckbox = el) }, this.renderLabel()), this.tooltip && (h$1("img", { key: 'a94be7eefe15593f0cfa90d89bed1f536bd51103', class: "checkboxgroup__tooltip-icon", src: tooltipIconSvg, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
413
413
|
}
|
|
414
414
|
static get watchers() { return {
|
|
415
415
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5945,8 +5945,8 @@ const DateInput = class {
|
|
|
5945
5945
|
if (this.touched) {
|
|
5946
5946
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5947
5947
|
}
|
|
5948
|
-
return h$1("div", { key: '
|
|
5949
|
-
h$1("img", { key: '
|
|
5948
|
+
return h$1("div", { key: '2598dc4b54afe7b871bbff237dacc02a04f109a1', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("label", { key: 'e8e08599b7d713df237041a5c2a95ae78d7a955d', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), h$1("vaadin-date-picker", { key: '42ae32529da3f7d2bb63b9d92167a0062464f0f5', id: `${this.name}__input`, type: 'date', class: `date__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onChange: (e) => this.handleInput(e) }), h$1("small", { key: '6b6a7b2f369fc06001b22a4cff9835e0741ce33d', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
5949
|
+
h$1("img", { key: '930e536f3fd7dae8959c3caea374706bc2dcd805', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
5950
5950
|
}
|
|
5951
5951
|
get element() { return getElement(this); }
|
|
5952
5952
|
static get watchers() { return {
|
|
@@ -6097,8 +6097,8 @@ const EmailInput = class {
|
|
|
6097
6097
|
if (this.touched) {
|
|
6098
6098
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6099
6099
|
}
|
|
6100
|
-
return h$1("div", { key: '
|
|
6101
|
-
h$1("img", { key: '
|
|
6100
|
+
return h$1("div", { key: '532d12855e6014b6c5a81cd11f4c7d83596361c3', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '80f2e930c6360e1e4e27f29b1de3d3c49a3bb47f', class: 'email__wrapper--flex' }, h$1("label", { key: '68189c133403e6dada30c376bd84b60b35ca56e4', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: 'b62dd9a877825d51f6735e9b3ca6b3bb3fc21c28', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
6101
|
+
h$1("img", { key: 'ff76c31db244e06af60db2855b907c90ecde2fe2', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: '137af683d11c63b2bd881fa3110dd1522ead8774', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, pattern: this.validationPattern, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h$1("small", { key: '573a357c4e8464f20d9e60a5fd3a2d0c4ae69e3c', class: 'email__error-message' }, this.errorMessage));
|
|
6102
6102
|
}
|
|
6103
6103
|
static get watchers() { return {
|
|
6104
6104
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -15757,8 +15757,8 @@ const NumberInput = class {
|
|
|
15757
15757
|
if (this.touched) {
|
|
15758
15758
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
15759
15759
|
}
|
|
15760
|
-
return h$1("div", { key: '
|
|
15761
|
-
h$1("img", { key: '
|
|
15760
|
+
return h$1("div", { key: 'a6e6a37c0b82e75bc66e26b104f343178deb8b81', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '41d8e03f598ccab9d175dacc27ede808ec017717', class: 'number__wrapper--flex' }, h$1("label", { key: 'e2eb89c31bdc2c7e7e80546ea5844bb13d34c759', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '91de685f2da7b9ba3ddaf48a978f5e95a40594be', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
15761
|
+
h$1("img", { key: '737d9ad4e1c74a03b140d48988e688a1898f9e57', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: '58d140746eaaf09aca69c5c4d698983c853e5b5f', ref: (el) => this.inputReference = el, type: "number", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, pattern: this.validationPattern, placeholder: `${this.placeholder}`, required: this.validation.mandatory, max: this.validation.max, min: this.validation.min, onInput: this.handleInput, onBlur: this.handleBlur }), h$1("small", { key: '74bda2b23c57d2ca88613c00e4d6ed63ea86daad', class: 'number__error-message' }, this.errorMessage));
|
|
15762
15762
|
}
|
|
15763
15763
|
static get watchers() { return {
|
|
15764
15764
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16000,8 +16000,8 @@ const PasswordInput = class {
|
|
|
16000
16000
|
if (this.touched) {
|
|
16001
16001
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16002
16002
|
}
|
|
16003
|
-
return h$1("div", { key: '
|
|
16004
|
-
h$1("img", { key: '
|
|
16003
|
+
return h$1("div", { key: 'c6a672c226569d500598f34c6155279e75fdc79c', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '44b8bee769b7b6ce86797f0f62b6af033bf2d0cd', class: 'password__wrapper--flex' }, h$1("label", { key: 'b6d573c6a70f26471cea2e576c8286719f58b47f', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '76698abedf907fa52940bc8e278fff4aeda1912f', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
16004
|
+
h$1("img", { key: '7116b9ed6eb06b6b03c336b6d216d40571b54f55', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("vaadin-password-field", { key: 'b85d0ba5396b3ab6fcf21d1053dba22fdb94c7f9', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), h$1("small", { key: 'c30bbcb8e49fcdb1dd8cb41bafd56d64b609be86', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
16005
16005
|
}
|
|
16006
16006
|
get element() { return getElement(this); }
|
|
16007
16007
|
static get watchers() { return {
|
|
@@ -16096,8 +16096,8 @@ const RadioInput = class {
|
|
|
16096
16096
|
return null;
|
|
16097
16097
|
}
|
|
16098
16098
|
render() {
|
|
16099
|
-
return h$1("fieldset", { key: '
|
|
16100
|
-
h$1("img", { key: '
|
|
16099
|
+
return h$1("fieldset", { key: '7dd3f10103c696ef18202154d5ede9cc10b32d0c', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("legend", { key: '304af4ecd36e8831c1fc76abfaae1767a1005ae5', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h$1("div", { class: 'radio__wrapper' }, h$1("input", { type: "radio", class: 'radio__input', id: `${option.label}__input`, ref: (el) => this.inputReference = el, value: option.value, name: this.name, required: this.validation.mandatory, onClick: (e) => this.handleClick(e) }), h$1("label", { htmlFor: `${option.label}__input` }, option.label))), h$1("small", { key: '55bb2cc7060fda4774d337c8a570c78d90912da7', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
16100
|
+
h$1("img", { key: 'b3b7093e2c4b5d6f727f5346562ed3fe274bd431', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
16101
16101
|
}
|
|
16102
16102
|
static get watchers() { return {
|
|
16103
16103
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16296,10 +16296,10 @@ const SelectInput = class {
|
|
|
16296
16296
|
if (this.touched) {
|
|
16297
16297
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16298
16298
|
}
|
|
16299
|
-
return h$1("div", { key: '
|
|
16300
|
-
h$1("img", { key: '
|
|
16299
|
+
return h$1("div", { key: '7e90e23b53a72cda885485ccf4110631cede2b8f', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '9a841ccebeb828fc75ed1f708a4a43d4fc7a193f', class: 'select__wrapper--flex' }, h$1("label", { key: '92c70fa56518d6d015d756b693306dab80ab0f57', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h$1("div", { key: 'cfbeb4b4969adc1f9944eb60291d8f586dcc29db', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
16300
|
+
h$1("img", { key: '13a340313095bc653a1741115bae128d538dcf30', 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 })
|
|
16301
16301
|
:
|
|
16302
|
-
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 }), h$1("small", { key: '
|
|
16302
|
+
h$1("vaadin-select", { name: this.name, popover: false, 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, "no-vertical-overlap": true, noVerticalOverlap: true }), h$1("small", { key: '6ffb5459f648208106c6bfc8a78f5cf379f7f11b', class: 'select__error-message' }, this.errorMessage));
|
|
16303
16303
|
}
|
|
16304
16304
|
static get watchers() { return {
|
|
16305
16305
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16477,8 +16477,8 @@ const TelInput = class {
|
|
|
16477
16477
|
if (this.touched) {
|
|
16478
16478
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16479
16479
|
}
|
|
16480
|
-
return h$1("div", { key: '
|
|
16481
|
-
h$1("img", { key: '
|
|
16480
|
+
return h$1("div", { key: '07279e9146394ad96ca0ce1b3e059f09fce2937a', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: 'c4eedb1dba6a3fabd4dcc95e767813f95b83346a', class: 'tel__wrapper--flex-label' }, h$1("label", { key: '093a445bc6a9144673386abf92263faa2f33a62a', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: '76abd68488a0f78e3fbd46328fa338d8c05b9601', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
16481
|
+
h$1("img", { key: '8238860af5dbc417c2cd853b55fd79f67f51649d', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("div", { key: '235b2146fc4c70107d5c077071e1fa52ac1c56d3', class: `tel__wrapper--flex ${invalidClass}` }, h$1("vaadin-combo-box", { key: '73e51576aad82c2bc6895a62b0c19351a1eb917b', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h$1("input", { key: 'd714d757cd08e3d700cec86f9d6ce4ff680dd2e9', 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: 'f6ced1b252990cd3ecc18c9c5ad3546654006dcc', class: 'tel__error-message' }, this.errorMessage));
|
|
16482
16482
|
}
|
|
16483
16483
|
static get watchers() { return {
|
|
16484
16484
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16664,8 +16664,8 @@ const TextInput = class {
|
|
|
16664
16664
|
if (this.touched) {
|
|
16665
16665
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16666
16666
|
}
|
|
16667
|
-
return h$1("div", { key: '
|
|
16668
|
-
h$1("img", { key: '
|
|
16667
|
+
return h$1("div", { key: '37c7509b46ab92149c3c11365cf5061bb1bbb01a', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h$1("div", { key: '737873a059749dc050a8efa6ffb09a1b2ee9f95c', class: 'text__wrapper--flex' }, h$1("label", { key: '1d921faece6c293c7e3c95d34bedd0d399c7be9e', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h$1("div", { key: 'e1e59c85912cf7c3dbd1e61bba829ae2b0192a18', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
16668
|
+
h$1("img", { key: '73513026eebcc809edef481d5cd7b885e5f20f03', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h$1("input", { key: 'a73e2c2430e6fbc778e1fd6b5fcfb298cf01b5c5', 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: '11cb376081cb05651c60c3e1ac8a41f9751ca16c', class: 'text__error-message' }, this.errorMessage));
|
|
16669
16669
|
}
|
|
16670
16670
|
static get watchers() { return {
|
|
16671
16671
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -16773,8 +16773,8 @@ const ToggleCheckboxInput = class {
|
|
|
16773
16773
|
return null;
|
|
16774
16774
|
}
|
|
16775
16775
|
render() {
|
|
16776
|
-
return h$1("div", { key: '
|
|
16777
|
-
h$1("img", { key: '
|
|
16776
|
+
return h$1("div", { key: '6315588766319c4ac7a88646b01bc577858ad718', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h$1("div", { key: '20d6999aaf0499b8b840a28dab89242953b4610d', class: 'togglecheckbox__wrapper--flex' }, h$1("input", { key: '73b699abf4904e4f2133e30d8dea250c9fe13ac3', 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: '4d10247f1dae300d0f5133accdd544a90fa4d5a7', class: 'togglecheckbox__error-message' }, this.errorMessage), h$1("div", { key: '9c95cef35e58875b96710d3b64b9af1be27204c5', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
16777
|
+
h$1("img", { key: '9774edae6bad4715fd20798a7be25eb71c3c4cf0', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h$1("div", { key: '70ad3ec894a32439e2dcea617e2a5b773c5456b1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
16778
16778
|
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 });
|
|
16779
16779
|
})));
|
|
16780
16780
|
}
|
|
@@ -16986,9 +16986,9 @@ const TwofaInput = class {
|
|
|
16986
16986
|
return null;
|
|
16987
16987
|
}
|
|
16988
16988
|
render() {
|
|
16989
|
-
return (h$1("div", { key: '
|
|
16989
|
+
return (h$1("div", { key: '97c1955fececc6f3998375f4c8176ceaed66856a', class: "twofa" }, h$1("div", { key: 'ee2243931d8e5c6a5aadf1e78d1851449806d2b2', class: 'twofa__error-message' }, h$1("p", { key: '20a8ccad2e6501c73e3672f6ae325f8539e2d21a' }, this.errorMessage)), h$1("div", { key: 'bb33610a8be04b86378026c02099620749b81a4b', class: "twofa__description", innerHTML: translate$1('twofaDescription', this.language, { values: { destination: this.destination } }) }), h$1("div", { key: 'af3ea38ed6468eb2de66aed810ba50a850bf21a9', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
16990
16990
|
return (h$1("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: char, onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
|
|
16991
|
-
})), h$1("div", { key: '
|
|
16991
|
+
})), h$1("div", { key: 'f385bd6dc93896d918a5cc1365b59bedd47d5bb0', class: "twofa__button-wrapper" }, h$1("p", { key: '3623f0391e0e5923cd6b3bfd74d203905486209f', class: "twofa__resend-message" }, translate$1('twofaResendMessage', this.language)), h$1("button", { key: '497660604f87dbf4ce1ce51ecd041e82ab5dd33a', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
16992
16992
|
? translate$1('twofaResendButton', this.language)
|
|
16993
16993
|
: this.formatTime()))));
|
|
16994
16994
|
}
|