@everymatrix/general-input 1.72.1 → 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.
- package/dist/cjs/checkbox-group-input_13.cjs.entry.js +29 -29
- package/dist/collection/components/checkbox-input/checkbox-input.css +19 -9
- package/dist/collection/components/checkbox-input/checkbox-input.js +7 -7
- package/dist/collection/components/date-input/date-input.js +2 -2
- package/dist/collection/components/email-input/email-input.js +2 -2
- package/dist/collection/components/number-input/number-input.js +2 -2
- package/dist/collection/components/password-input/password-input.js +2 -2
- package/dist/collection/components/radio-input/radio-input.js +2 -2
- package/dist/collection/components/select-input/select-input.js +3 -3
- package/dist/collection/components/tel-input/tel-input.js +2 -2
- package/dist/collection/components/text-input/text-input.js +2 -2
- package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.js +2 -2
- package/dist/collection/components/twofa-input/twofa-input.js +2 -2
- package/dist/esm/checkbox-group-input_13.entry.js +29 -29
- package/dist/general-input/checkbox-group-input_13.entry.js +38 -38
- package/dist/types/components/checkbox-input/checkbox-input.d.ts +2 -1
- package/package.json +1 -1
|
@@ -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"],
|
|
@@ -13864,8 +13864,8 @@ const NumberInput = class {
|
|
|
13864
13864
|
if (this.touched) {
|
|
13865
13865
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13866
13866
|
}
|
|
13867
|
-
return index.h("div", { key: '
|
|
13868
|
-
index.h("img", { key: '
|
|
13867
|
+
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 &&
|
|
13868
|
+
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));
|
|
13869
13869
|
}
|
|
13870
13870
|
static get watchers() { return {
|
|
13871
13871
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14107,8 +14107,8 @@ const PasswordInput = class {
|
|
|
14107
14107
|
if (this.touched) {
|
|
14108
14108
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14109
14109
|
}
|
|
14110
|
-
return index.h("div", { key: '
|
|
14111
|
-
index.h("img", { key: '
|
|
14110
|
+
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 &&
|
|
14111
|
+
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());
|
|
14112
14112
|
}
|
|
14113
14113
|
get element() { return index.getElement(this); }
|
|
14114
14114
|
static get watchers() { return {
|
|
@@ -14203,8 +14203,8 @@ const RadioInput = class {
|
|
|
14203
14203
|
return null;
|
|
14204
14204
|
}
|
|
14205
14205
|
render() {
|
|
14206
|
-
return index.h("fieldset", { key: '
|
|
14207
|
-
index.h("img", { key: '
|
|
14206
|
+
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 &&
|
|
14207
|
+
index.h("img", { key: 'b3b7093e2c4b5d6f727f5346562ed3fe274bd431', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
14208
14208
|
}
|
|
14209
14209
|
static get watchers() { return {
|
|
14210
14210
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14403,10 +14403,10 @@ const SelectInput = class {
|
|
|
14403
14403
|
if (this.touched) {
|
|
14404
14404
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14405
14405
|
}
|
|
14406
|
-
return index.h("div", { key: '
|
|
14407
|
-
index.h("img", { key: '
|
|
14406
|
+
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 &&
|
|
14407
|
+
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 })
|
|
14408
14408
|
:
|
|
14409
|
-
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: '
|
|
14409
|
+
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));
|
|
14410
14410
|
}
|
|
14411
14411
|
static get watchers() { return {
|
|
14412
14412
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14584,8 +14584,8 @@ const TelInput = class {
|
|
|
14584
14584
|
if (this.touched) {
|
|
14585
14585
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14586
14586
|
}
|
|
14587
|
-
return index.h("div", { key: '
|
|
14588
|
-
index.h("img", { key: '
|
|
14587
|
+
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 &&
|
|
14588
|
+
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));
|
|
14589
14589
|
}
|
|
14590
14590
|
static get watchers() { return {
|
|
14591
14591
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14771,8 +14771,8 @@ const TextInput = class {
|
|
|
14771
14771
|
if (this.touched) {
|
|
14772
14772
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14773
14773
|
}
|
|
14774
|
-
return index.h("div", { key: '
|
|
14775
|
-
index.h("img", { key: '
|
|
14774
|
+
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 &&
|
|
14775
|
+
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));
|
|
14776
14776
|
}
|
|
14777
14777
|
static get watchers() { return {
|
|
14778
14778
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14880,8 +14880,8 @@ const ToggleCheckboxInput = class {
|
|
|
14880
14880
|
return null;
|
|
14881
14881
|
}
|
|
14882
14882
|
render() {
|
|
14883
|
-
return index.h("div", { key: '
|
|
14884
|
-
index.h("img", { key: '
|
|
14883
|
+
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 &&
|
|
14884
|
+
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 => {
|
|
14885
14885
|
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 });
|
|
14886
14886
|
})));
|
|
14887
14887
|
}
|
|
@@ -15093,9 +15093,9 @@ const TwofaInput = class {
|
|
|
15093
15093
|
return null;
|
|
15094
15094
|
}
|
|
15095
15095
|
render() {
|
|
15096
|
-
return (index.h("div", { key: '
|
|
15096
|
+
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('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: 'af3ea38ed6468eb2de66aed810ba50a850bf21a9', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
15097
15097
|
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) }));
|
|
15098
|
-
})), index.h("div", { key: '
|
|
15098
|
+
})), index.h("div", { key: 'f385bd6dc93896d918a5cc1365b59bedd47d5bb0', class: "twofa__button-wrapper" }, index.h("p", { key: '3623f0391e0e5923cd6b3bfd74d203905486209f', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: '497660604f87dbf4ce1ce51ecd041e82ab5dd33a', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
15099
15099
|
? translate('twofaResendButton', this.language)
|
|
15100
15100
|
: this.formatTime()))));
|
|
15101
15101
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
.checkbox {
|
|
10
10
|
font-family: "Roboto";
|
|
11
11
|
font-style: normal;
|
|
12
|
+
font-size: 15px;
|
|
12
13
|
}
|
|
13
14
|
.checkbox__wrapper {
|
|
14
15
|
display: flex;
|
|
@@ -19,10 +20,8 @@
|
|
|
19
20
|
.checkbox__wrapper--relative {
|
|
20
21
|
position: relative;
|
|
21
22
|
}
|
|
22
|
-
.checkbox__input {
|
|
23
|
-
|
|
24
|
-
margin-left: 2px;
|
|
25
|
-
accent-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
23
|
+
.checkbox__input[indeterminate]::part(checkbox)::after, .checkbox__input[indeterminate]::part(checkbox), .checkbox__input[checked]::part(checkbox) {
|
|
24
|
+
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
26
25
|
}
|
|
27
26
|
.checkbox__label {
|
|
28
27
|
font-style: inherit;
|
|
@@ -31,11 +30,8 @@
|
|
|
31
30
|
font-size: 16px;
|
|
32
31
|
color: var(--emw--registration-typography, var(--emw--color-black, #000000));
|
|
33
32
|
line-height: 1.5;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
.checkbox__label-text {
|
|
38
|
-
font-size: 16px;
|
|
33
|
+
padding: 0px;
|
|
34
|
+
vertical-align: baseline;
|
|
39
35
|
}
|
|
40
36
|
.checkbox__label a {
|
|
41
37
|
color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
@@ -65,4 +61,18 @@
|
|
|
65
61
|
}
|
|
66
62
|
.checkbox__tooltip.visible {
|
|
67
63
|
opacity: 1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.checkbox__input::part(checkbox) {
|
|
67
|
+
background-color: var(--emw--color-white, #FFFFFF);
|
|
68
|
+
transform: scale(0.8, 0.8);
|
|
69
|
+
border-radius: var(--emw--border-radius-small, 2px);
|
|
70
|
+
box-shadow: 0 0px 0px 2px var(--emw--color-gray, #7a7a7a);
|
|
71
|
+
}
|
|
72
|
+
.checkbox__input::part(required-indicator)::after {
|
|
73
|
+
content: "*";
|
|
74
|
+
}
|
|
75
|
+
.checkbox__input[indeterminate]::part(checkbox), .checkbox__input[checked]::part(checkbox) {
|
|
76
|
+
background-color: var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));
|
|
77
|
+
box-shadow: none;
|
|
68
78
|
}
|
|
@@ -60,15 +60,16 @@ export class CheckboxInput {
|
|
|
60
60
|
// end custom styling area
|
|
61
61
|
}
|
|
62
62
|
componentDidLoad() {
|
|
63
|
+
this.inputReference = this.vaadinCheckbox.querySelector('input');
|
|
63
64
|
if (this.defaultValue) {
|
|
64
65
|
this.value = this.defaultValue;
|
|
65
66
|
this.valueHandler({ name: this.name, value: this.value });
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
|
-
|
|
69
|
-
this.value =
|
|
70
|
-
this.errorMessage = this.setErrorMessage();
|
|
69
|
+
handleCheckbox(e) {
|
|
70
|
+
this.value = e.target.checked.toString();
|
|
71
71
|
this.isValid = this.setValidity();
|
|
72
|
+
this.errorMessage = this.setErrorMessage();
|
|
72
73
|
this.emitValueHandler(true);
|
|
73
74
|
}
|
|
74
75
|
setValidity() {
|
|
@@ -80,17 +81,16 @@ export class CheckboxInput {
|
|
|
80
81
|
}
|
|
81
82
|
}
|
|
82
83
|
renderLabel() {
|
|
83
|
-
return (h("label", { class:
|
|
84
|
+
return (h("label", { class: "checkbox__label", htmlFor: `${this.name}__input`, slot: "label" }, h("div", { class: "checkbox__label-text", innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
84
85
|
}
|
|
85
86
|
renderTooltip() {
|
|
86
87
|
if (this.showTooltip) {
|
|
87
|
-
return (h("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
|
|
88
|
+
return (h("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => (this.tooltipReference = el), innerHTML: this.tooltip }));
|
|
88
89
|
}
|
|
89
90
|
return null;
|
|
90
91
|
}
|
|
91
92
|
render() {
|
|
92
|
-
return h("div", { key: '
|
|
93
|
-
h("img", { key: 'dd263ce86efd89f34078f3cc24729f43f40e89a6', class: 'checkbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()));
|
|
93
|
+
return (h("div", { key: 'e9dfb4e2a6b99d740eaa7d94d1ff3aea9587bcc9', class: `checkbox__wrapper ${this.name}__input`, ref: (el) => (this.stylingContainer = el) }, 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 && (h("img", { key: 'a94be7eefe15593f0cfa90d89bed1f536bd51103', class: "checkboxgroup__tooltip-icon", src: tooltipIcon, alt: "", ref: (el) => (this.tooltipIconReference = el), onClick: () => (this.showTooltip = !this.showTooltip) })), this.renderTooltip()));
|
|
94
94
|
}
|
|
95
95
|
static get is() { return "checkbox-input"; }
|
|
96
96
|
static get encapsulation() { return "shadow"; }
|
|
@@ -158,8 +158,8 @@ export class DateInput {
|
|
|
158
158
|
if (this.touched) {
|
|
159
159
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
160
160
|
}
|
|
161
|
-
return h("div", { key: '
|
|
162
|
-
h("img", { key: '
|
|
161
|
+
return h("div", { key: '2598dc4b54afe7b871bbff237dacc02a04f109a1', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: 'e8e08599b7d713df237041a5c2a95ae78d7a955d', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, " ", this.validation.mandatory ? '*' : ''), 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) }), h("small", { key: '6b6a7b2f369fc06001b22a4cff9835e0741ce33d', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
162
|
+
h("img", { key: '930e536f3fd7dae8959c3caea374706bc2dcd805', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
163
163
|
}
|
|
164
164
|
static get is() { return "date-input"; }
|
|
165
165
|
static get encapsulation() { return "shadow"; }
|
|
@@ -135,8 +135,8 @@ export class EmailInput {
|
|
|
135
135
|
if (this.touched) {
|
|
136
136
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
137
137
|
}
|
|
138
|
-
return h("div", { key: '
|
|
139
|
-
h("img", { key: '
|
|
138
|
+
return h("div", { key: '532d12855e6014b6c5a81cd11f4c7d83596361c3', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '80f2e930c6360e1e4e27f29b1de3d3c49a3bb47f', class: 'email__wrapper--flex' }, h("label", { key: '68189c133403e6dada30c376bd84b60b35ca56e4', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'b62dd9a877825d51f6735e9b3ca6b3bb3fc21c28', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
139
|
+
h("img", { key: 'ff76c31db244e06af60db2855b907c90ecde2fe2', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '573a357c4e8464f20d9e60a5fd3a2d0c4ae69e3c', class: 'email__error-message' }, this.errorMessage));
|
|
140
140
|
}
|
|
141
141
|
static get is() { return "email-input"; }
|
|
142
142
|
static get encapsulation() { return "shadow"; }
|
|
@@ -122,8 +122,8 @@ export class NumberInput {
|
|
|
122
122
|
if (this.touched) {
|
|
123
123
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
124
124
|
}
|
|
125
|
-
return h("div", { key: '
|
|
126
|
-
h("img", { key: '
|
|
125
|
+
return h("div", { key: 'a6e6a37c0b82e75bc66e26b104f343178deb8b81', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '41d8e03f598ccab9d175dacc27ede808ec017717', class: 'number__wrapper--flex' }, h("label", { key: 'e2eb89c31bdc2c7e7e80546ea5844bb13d34c759', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '91de685f2da7b9ba3ddaf48a978f5e95a40594be', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
126
|
+
h("img", { key: '737d9ad4e1c74a03b140d48988e688a1898f9e57', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '74bda2b23c57d2ca88613c00e4d6ed63ea86daad', class: 'number__error-message' }, this.errorMessage));
|
|
127
127
|
}
|
|
128
128
|
static get is() { return "number-input"; }
|
|
129
129
|
static get encapsulation() { return "shadow"; }
|
|
@@ -226,8 +226,8 @@ export class PasswordInput {
|
|
|
226
226
|
if (this.touched) {
|
|
227
227
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
228
228
|
}
|
|
229
|
-
return h("div", { key: '
|
|
230
|
-
h("img", { key: '
|
|
229
|
+
return h("div", { key: 'c6a672c226569d500598f34c6155279e75fdc79c', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '44b8bee769b7b6ce86797f0f62b6af033bf2d0cd', class: 'password__wrapper--flex' }, h("label", { key: 'b6d573c6a70f26471cea2e576c8286719f58b47f', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '76698abedf907fa52940bc8e278fff4aeda1912f', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
230
|
+
h("img", { key: '7116b9ed6eb06b6b03c336b6d216d40571b54f55', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: 'c30bbcb8e49fcdb1dd8cb41bafd56d64b609be86', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
231
231
|
}
|
|
232
232
|
static get is() { return "password-input"; }
|
|
233
233
|
static get encapsulation() { return "shadow"; }
|
|
@@ -78,8 +78,8 @@ export class RadioInput {
|
|
|
78
78
|
return null;
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
|
-
return h("fieldset", { key: '
|
|
82
|
-
h("img", { key: '
|
|
81
|
+
return h("fieldset", { key: '7dd3f10103c696ef18202154d5ede9cc10b32d0c', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h("legend", { key: '304af4ecd36e8831c1fc76abfaae1767a1005ae5', class: 'radio__legend' }, this.displayName, ":"), this.optionsGroup.map(option => h("div", { class: 'radio__wrapper' }, 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) }), h("label", { htmlFor: `${option.label}__input` }, option.label))), h("small", { key: '55bb2cc7060fda4774d337c8a570c78d90912da7', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
82
|
+
h("img", { key: 'b3b7093e2c4b5d6f727f5346562ed3fe274bd431', class: 'radio__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
83
83
|
}
|
|
84
84
|
static get is() { return "radio-input"; }
|
|
85
85
|
static get encapsulation() { return "shadow"; }
|
|
@@ -184,10 +184,10 @@ export class SelectInput {
|
|
|
184
184
|
if (this.touched) {
|
|
185
185
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
186
186
|
}
|
|
187
|
-
return h("div", { key: '
|
|
188
|
-
h("img", { key: '
|
|
187
|
+
return h("div", { key: '7e90e23b53a72cda885485ccf4110631cede2b8f', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9a841ccebeb828fc75ed1f708a4a43d4fc7a193f', class: 'select__wrapper--flex' }, h("label", { key: '92c70fa56518d6d015d756b693306dab80ab0f57', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: 'cfbeb4b4969adc1f9944eb60291d8f586dcc29db', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
188
|
+
h("img", { key: '13a340313095bc653a1741115bae128d538dcf30', class: 'select__tooltip-icon', src: tooltipIcon, 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 })
|
|
189
189
|
:
|
|
190
|
-
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 }), h("small", { key: '
|
|
190
|
+
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 }), h("small", { key: '6ffb5459f648208106c6bfc8a78f5cf379f7f11b', class: 'select__error-message' }, this.errorMessage));
|
|
191
191
|
}
|
|
192
192
|
static get is() { return "select-input"; }
|
|
193
193
|
static get encapsulation() { return "shadow"; }
|
|
@@ -163,8 +163,8 @@ export class TelInput {
|
|
|
163
163
|
if (this.touched) {
|
|
164
164
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
165
165
|
}
|
|
166
|
-
return h("div", { key: '
|
|
167
|
-
h("img", { key: '
|
|
166
|
+
return h("div", { key: '07279e9146394ad96ca0ce1b3e059f09fce2937a', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c4eedb1dba6a3fabd4dcc95e767813f95b83346a', class: 'tel__wrapper--flex-label' }, h("label", { key: '093a445bc6a9144673386abf92263faa2f33a62a', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '76abd68488a0f78e3fbd46328fa338d8c05b9601', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
167
|
+
h("img", { key: '8238860af5dbc417c2cd853b55fd79f67f51649d', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '235b2146fc4c70107d5c077071e1fa52ac1c56d3', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '73e51576aad82c2bc6895a62b0c19351a1eb917b', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), 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 })), h("small", { key: 'f6ced1b252990cd3ecc18c9c5ad3546654006dcc', class: 'tel__error-message' }, this.errorMessage));
|
|
168
168
|
}
|
|
169
169
|
static get is() { return "tel-input"; }
|
|
170
170
|
static get encapsulation() { return "shadow"; }
|
|
@@ -171,8 +171,8 @@ export class TextInput {
|
|
|
171
171
|
if (this.touched) {
|
|
172
172
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
173
173
|
}
|
|
174
|
-
return h("div", { key: '
|
|
175
|
-
h("img", { key: '
|
|
174
|
+
return h("div", { key: '37c7509b46ab92149c3c11365cf5061bb1bbb01a', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '737873a059749dc050a8efa6ffb09a1b2ee9f95c', class: 'text__wrapper--flex' }, h("label", { key: '1d921faece6c293c7e3c95d34bedd0d399c7be9e', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'e1e59c85912cf7c3dbd1e61bba829ae2b0192a18', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
175
|
+
h("img", { key: '73513026eebcc809edef481d5cd7b885e5f20f03', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '11cb376081cb05651c60c3e1ac8a41f9751ca16c', class: 'text__error-message' }, this.errorMessage));
|
|
176
176
|
}
|
|
177
177
|
static get is() { return "text-input"; }
|
|
178
178
|
static get encapsulation() { return "shadow"; }
|
|
@@ -93,8 +93,8 @@ export class ToggleCheckboxInput {
|
|
|
93
93
|
return null;
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
|
-
return h("div", { key: '
|
|
97
|
-
h("img", { key: '
|
|
96
|
+
return h("div", { key: '6315588766319c4ac7a88646b01bc577858ad718', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '20d6999aaf0499b8b840a28dab89242953b4610d', class: 'togglecheckbox__wrapper--flex' }, 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()), h("small", { key: '4d10247f1dae300d0f5133accdd544a90fa4d5a7', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '9c95cef35e58875b96710d3b64b9af1be27204c5', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
97
|
+
h("img", { key: '9774edae6bad4715fd20798a7be25eb71c3c4cf0', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '70ad3ec894a32439e2dcea617e2a5b773c5456b1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
98
98
|
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 });
|
|
99
99
|
})));
|
|
100
100
|
}
|
|
@@ -195,9 +195,9 @@ export class TwofaInput {
|
|
|
195
195
|
return null;
|
|
196
196
|
}
|
|
197
197
|
render() {
|
|
198
|
-
return (h("div", { key: '
|
|
198
|
+
return (h("div", { key: '97c1955fececc6f3998375f4c8176ceaed66856a', class: "twofa" }, h("div", { key: 'ee2243931d8e5c6a5aadf1e78d1851449806d2b2', class: 'twofa__error-message' }, h("p", { key: '20a8ccad2e6501c73e3672f6ae325f8539e2d21a' }, this.errorMessage)), h("div", { key: 'bb33610a8be04b86378026c02099620749b81a4b', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: 'af3ea38ed6468eb2de66aed810ba50a850bf21a9', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
199
199
|
return (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) }));
|
|
200
|
-
})), h("div", { key: '
|
|
200
|
+
})), h("div", { key: 'f385bd6dc93896d918a5cc1365b59bedd47d5bb0', class: "twofa__button-wrapper" }, h("p", { key: '3623f0391e0e5923cd6b3bfd74d203905486209f', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '497660604f87dbf4ce1ce51ecd041e82ab5dd33a', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
201
201
|
? translate('twofaResendButton', this.language)
|
|
202
202
|
: this.formatTime()))));
|
|
203
203
|
}
|