@everymatrix/general-input 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.
- 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
|
@@ -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("label", { class:
|
|
403
|
+
return (h("label", { class: "checkbox__label", htmlFor: `${this.name}__input`, slot: "label" }, h("div", { class: "checkbox__label-text", innerHTML: `${this.displayName} ${this.validation.mandatory ? '*' : ''}` })));
|
|
403
404
|
}
|
|
404
405
|
renderTooltip() {
|
|
405
406
|
if (this.showTooltip) {
|
|
406
|
-
return (h("div", { class: `checkbox__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
|
|
407
|
+
return (h("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("div", { key: '
|
|
412
|
-
h("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("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: 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("div", { key: '
|
|
5949
|
-
h("img", { key: '
|
|
5948
|
+
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 &&
|
|
5949
|
+
h("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("div", { key: '
|
|
6101
|
-
h("img", { key: '
|
|
6100
|
+
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 &&
|
|
6101
|
+
h("img", { key: 'ff76c31db244e06af60db2855b907c90ecde2fe2', class: 'email__tooltip-icon', src: tooltipIconSvg, 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));
|
|
6102
6102
|
}
|
|
6103
6103
|
static get watchers() { return {
|
|
6104
6104
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -13860,8 +13860,8 @@ const NumberInput = class {
|
|
|
13860
13860
|
if (this.touched) {
|
|
13861
13861
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13862
13862
|
}
|
|
13863
|
-
return h("div", { key: '
|
|
13864
|
-
h("img", { key: '
|
|
13863
|
+
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 &&
|
|
13864
|
+
h("img", { key: '737d9ad4e1c74a03b140d48988e688a1898f9e57', class: 'number__tooltip-icon', src: tooltipIconSvg, 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));
|
|
13865
13865
|
}
|
|
13866
13866
|
static get watchers() { return {
|
|
13867
13867
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14103,8 +14103,8 @@ const PasswordInput = class {
|
|
|
14103
14103
|
if (this.touched) {
|
|
14104
14104
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14105
14105
|
}
|
|
14106
|
-
return h("div", { key: '
|
|
14107
|
-
h("img", { key: '
|
|
14106
|
+
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 &&
|
|
14107
|
+
h("img", { key: '7116b9ed6eb06b6b03c336b6d216d40571b54f55', class: 'password__tooltip-icon', src: tooltipIconSvg, 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());
|
|
14108
14108
|
}
|
|
14109
14109
|
get element() { return getElement(this); }
|
|
14110
14110
|
static get watchers() { return {
|
|
@@ -14199,8 +14199,8 @@ const RadioInput = class {
|
|
|
14199
14199
|
return null;
|
|
14200
14200
|
}
|
|
14201
14201
|
render() {
|
|
14202
|
-
return h("fieldset", { key: '
|
|
14203
|
-
h("img", { key: '
|
|
14202
|
+
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 &&
|
|
14203
|
+
h("img", { key: 'b3b7093e2c4b5d6f727f5346562ed3fe274bd431', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
14204
14204
|
}
|
|
14205
14205
|
static get watchers() { return {
|
|
14206
14206
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14399,10 +14399,10 @@ const SelectInput = class {
|
|
|
14399
14399
|
if (this.touched) {
|
|
14400
14400
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14401
14401
|
}
|
|
14402
|
-
return h("div", { key: '
|
|
14403
|
-
h("img", { key: '
|
|
14402
|
+
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 &&
|
|
14403
|
+
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 ? 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 })
|
|
14404
14404
|
:
|
|
14405
|
-
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: '
|
|
14405
|
+
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));
|
|
14406
14406
|
}
|
|
14407
14407
|
static get watchers() { return {
|
|
14408
14408
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14580,8 +14580,8 @@ const TelInput = class {
|
|
|
14580
14580
|
if (this.touched) {
|
|
14581
14581
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14582
14582
|
}
|
|
14583
|
-
return h("div", { key: '
|
|
14584
|
-
h("img", { key: '
|
|
14583
|
+
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 &&
|
|
14584
|
+
h("img", { key: '8238860af5dbc417c2cd853b55fd79f67f51649d', class: 'tel__tooltip-icon', src: tooltipIconSvg, 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));
|
|
14585
14585
|
}
|
|
14586
14586
|
static get watchers() { return {
|
|
14587
14587
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14767,8 +14767,8 @@ const TextInput = class {
|
|
|
14767
14767
|
if (this.touched) {
|
|
14768
14768
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14769
14769
|
}
|
|
14770
|
-
return h("div", { key: '
|
|
14771
|
-
h("img", { key: '
|
|
14770
|
+
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 &&
|
|
14771
|
+
h("img", { key: '73513026eebcc809edef481d5cd7b885e5f20f03', class: 'text__tooltip-icon', src: tooltipIconSvg, 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));
|
|
14772
14772
|
}
|
|
14773
14773
|
static get watchers() { return {
|
|
14774
14774
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14876,8 +14876,8 @@ const ToggleCheckboxInput = class {
|
|
|
14876
14876
|
return null;
|
|
14877
14877
|
}
|
|
14878
14878
|
render() {
|
|
14879
|
-
return h("div", { key: '
|
|
14880
|
-
h("img", { key: '
|
|
14879
|
+
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 &&
|
|
14880
|
+
h("img", { key: '9774edae6bad4715fd20798a7be25eb71c3c4cf0', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, 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 => {
|
|
14881
14881
|
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 });
|
|
14882
14882
|
})));
|
|
14883
14883
|
}
|
|
@@ -15089,9 +15089,9 @@ const TwofaInput = class {
|
|
|
15089
15089
|
return null;
|
|
15090
15090
|
}
|
|
15091
15091
|
render() {
|
|
15092
|
-
return (h("div", { key: '
|
|
15092
|
+
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) => {
|
|
15093
15093
|
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) }));
|
|
15094
|
-
})), h("div", { key: '
|
|
15094
|
+
})), 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
|
|
15095
15095
|
? translate('twofaResendButton', this.language)
|
|
15096
15096
|
: this.formatTime()))));
|
|
15097
15097
|
}
|