@everymatrix/general-input 1.87.12 → 1.87.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/checkbox-group-input_14.cjs.entry.js +22 -22
- 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/postalcode-input/postalcode-input.js +1 -1
- 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_14.entry.js +22 -22
- package/dist/general-input/checkbox-group-input_14.entry.js +2 -2
- package/package.json +1 -1
|
@@ -6067,8 +6067,8 @@ const DateInput = class {
|
|
|
6067
6067
|
if (this.touched) {
|
|
6068
6068
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6069
6069
|
}
|
|
6070
|
-
return index.h("div", { key: '9399c1be2edcbe3ed5c0e133cad52b1917e77e96', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '1094491a5fc441c4f704441d376ed965d6946637', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, "
|
|
6071
|
-
index.h("img", { key: '
|
|
6070
|
+
return index.h("div", { key: '9399c1be2edcbe3ed5c0e133cad52b1917e77e96', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("label", { key: '1094491a5fc441c4f704441d376ed965d6946637', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: '14dd041cce018e22d82919f46eabc88f83e639e8', class: this.validation.mandatory ? 'date__label--required' : '' })), index.h("vaadin-date-picker", { key: 'eb720200d8d2b07ab00bca70c8e4a25dfc5cd08f', 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: 'eedeea67c67bdc92ae1bb3e79cab745384bb0db7', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
6071
|
+
index.h("img", { key: '2b9cbbb972e4d07124a3d548eb932a26a44f75f3', class: 'date__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
6072
6072
|
}
|
|
6073
6073
|
get element() { return index.getElement(this); }
|
|
6074
6074
|
static get watchers() { return {
|
|
@@ -6220,8 +6220,8 @@ const EmailInput = class {
|
|
|
6220
6220
|
if (this.touched) {
|
|
6221
6221
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6222
6222
|
}
|
|
6223
|
-
return index.h("div", { key: '
|
|
6224
|
-
index.h("img", { key: '
|
|
6223
|
+
return index.h("div", { key: '723df8f3a6e8c57fe19082400971daf50f5c981d', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '581d6e02b63d1c659ae44424518f64db450d5365', class: 'email__wrapper--flex' }, index.h("label", { key: '11e6a848f6f04903989b3ab2075865f6e279c087', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '73e11520cffbddda1a2aeb4b560e7f4cf456e2fb', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
6224
|
+
index.h("img", { key: 'e8571ce14b9b98311daf1712ebde7d6da9b5a6a6', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'dd05ef0b4d906598c6d5775a78ccbdc9ea81cb8c', 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: '0d2d41207f8274d8c6f69143131265ef5b458689', class: 'email__error-message' }, this.errorMessage));
|
|
6225
6225
|
}
|
|
6226
6226
|
static get watchers() { return {
|
|
6227
6227
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -13167,8 +13167,8 @@ const NumberInput = class {
|
|
|
13167
13167
|
if (this.touched) {
|
|
13168
13168
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13169
13169
|
}
|
|
13170
|
-
return index.h("div", { key: '
|
|
13171
|
-
index.h("img", { key: '
|
|
13170
|
+
return index.h("div", { key: 'aea370172d0e55d32dc665a1c340c734334e1caf', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '10e16d10b956c5a647bc68ecffbc2eb0b06fa92a', class: 'number__wrapper--flex' }, index.h("label", { key: '0827d47c7278c6fdf8ebdd1dff03b91c39be6812', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'cb868d01e8555f5e3333240f54d86f0a56641d0f', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
13171
|
+
index.h("img", { key: '1aa2b16b59f4bfd4b1dadf2641ec6cb4cfc251bf', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '365b70a2eb333878d367d1d414ee0e296c91b3ec', 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: 'a8639df7ef1e98807a7daffc9da4afd347b1c292', class: 'number__error-message' }, this.errorMessage));
|
|
13172
13172
|
}
|
|
13173
13173
|
static get watchers() { return {
|
|
13174
13174
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -13426,8 +13426,8 @@ const PasswordInput = class {
|
|
|
13426
13426
|
if (this.touched) {
|
|
13427
13427
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
13428
13428
|
}
|
|
13429
|
-
return index.h("div", { key: '
|
|
13430
|
-
index.h("img", { key: '
|
|
13429
|
+
return index.h("div", { key: 'fe895585dd908f75eee4ba797dc9c02b237bed7f', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '844bdb3dab98e62cc5d92a761b85adcdc44831d0', class: 'password__wrapper--flex' }, index.h("label", { key: '28041267a6df666e7df3660a907f995eff092ae1', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '79c300643134802f04d8f909fe7bb3895911c88a', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
13430
|
+
index.h("img", { key: '43ae58549e42ba59054162c25887ec36eb826aaa', 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: '0edcfed0ea65666537240f531e5239bd5b11181e', 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 }), !this.noValidation && index.h("small", { key: 'c8aeba074e66b771d745194fec535aa0b82de6d8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
|
|
13431
13431
|
this.showPopup &&
|
|
13432
13432
|
!this.hidePasswordComplexity &&
|
|
13433
13433
|
!this.isDuplicateInput &&
|
|
@@ -13787,7 +13787,7 @@ const PostalCodeInput = class {
|
|
|
13787
13787
|
let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
|
|
13788
13788
|
this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
|
|
13789
13789
|
let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
|
|
13790
|
-
return (index.h("div", { key: '
|
|
13790
|
+
return (index.h("div", { key: 'f274a95e0a64ec67f01be8a5cf053d475c16e9ca', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '23aa865fd99048cb5c638f0b66b4ff3e8e451d97', class: 'text__wrapper--flex' }, index.h("label", { key: 'c5d12c1548ec8bfde130a95cc20783f20295a253', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'db2f499ff6ca8f4e3b1a8ac83e7f8856fc1ca888', class: 'text__wrapper--relative' }, this.tooltip && (index.h("img", { key: 'a1d7ef42855a21f336dbbb337cc8cb644de0c655', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), index.h("div", { key: '18a6812958691749d0c7c3396ce69a3f46f7f1e4', class: 'input__text-wrapper' }, index.h("input", { key: '41aa9e6b8817eee602347d7a3a909f0d81985d3d', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), 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.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (index.h("p", { key: '7083c22e5ebb306ad9ca3c4dc29dcd66bc8b17d5', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate('enterIEAddressManually', this.language))), showAddressesDropdown && (index.h("div", { key: '95ad996e43da19386f4576eb35850c7ba09e1620', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, index.h("div", { key: '3997d92f28ec2ecee49b2480a5edb0a8431aa1c8', class: "options" }, this.addresses.map((addr, index$1) => (index.h("div", { key: index$1, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (index.h("div", { key: 'cf5f9c9f5f96aa2ef316eb44e97768e3552c4a2e', class: "postalcode__loading-spinner" }, index.h("div", { key: 'd9b0dda1be9fa871dee4b7d415f84a28b81c3362', class: "loading-spinner" }), index.h("span", { key: 'b5a6c58d910f5be519617288310a8a456e7e8c1c' }, translate('searchingForAddresses', this.language)))), shouldShowNoResults && (index.h("div", { key: '2b5503571824ec9f04f58959b8b38ff279fa6d1d', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), index.h("small", { key: '00e0cbe15e10c40c8f43939123c10819592fdce2', class: 'text__error-message' }, this.errorMessage)));
|
|
13791
13791
|
}
|
|
13792
13792
|
static get watchers() { return {
|
|
13793
13793
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -13881,8 +13881,8 @@ const RadioInput = class {
|
|
|
13881
13881
|
return null;
|
|
13882
13882
|
}
|
|
13883
13883
|
render() {
|
|
13884
|
-
return index.h("fieldset", { key: '
|
|
13885
|
-
index.h("img", { key: '
|
|
13884
|
+
return index.h("fieldset", { key: '33493de460303a32a37d253a0fd5f9da59676542', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("legend", { key: '8aef7aa84a119742e05d72d976c936a560154b3f', 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: 'bec44ed4007e408ddeb0b0293b82e034c8e165f2', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
13885
|
+
index.h("img", { key: 'a3b0a041beabe3f14661c0af8cd970040d060435', class: 'radio__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
13886
13886
|
}
|
|
13887
13887
|
static get watchers() { return {
|
|
13888
13888
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14082,10 +14082,10 @@ const SelectInput = class {
|
|
|
14082
14082
|
if (this.touched) {
|
|
14083
14083
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14084
14084
|
}
|
|
14085
|
-
return index.h("div", { key: '
|
|
14086
|
-
index.h("img", { key: '
|
|
14085
|
+
return index.h("div", { key: 'b0ed504667761e5fd77e0ac13382b467448a1944', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b48d38dc4c2cb3442ff6773a1b1d13191ec4d0e6', class: 'select__wrapper--flex' }, index.h("label", { key: 'ad592c8c98ecbec1961d22cdfeb8cec910291ea8', class: 'select__label', htmlFor: `${this.name}__input` }, this.displayName, index.h("span", { key: 'b3c0f2fe9a2d26ade1626878ed9bc1f0b86a23ad', class: this.validation.mandatory ? 'select__label--required' : '' })), index.h("div", { key: '29d0f504d0f51175818dffffb882ac4e6e9c3bde', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
14086
|
+
index.h("img", { key: '66e524ffebc43f9418e90b3bd2d7ae62eba47da3', 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 })
|
|
14087
14087
|
:
|
|
14088
|
-
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: '
|
|
14088
|
+
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: '0143b538740c3a8e9bfcab6bbb44660355c40cf7', class: 'select__error-message' }, this.errorMessage));
|
|
14089
14089
|
}
|
|
14090
14090
|
static get watchers() { return {
|
|
14091
14091
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14278,8 +14278,8 @@ const TelInput = class {
|
|
|
14278
14278
|
if (this.touched) {
|
|
14279
14279
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14280
14280
|
}
|
|
14281
|
-
return index.h("div", { key: '
|
|
14282
|
-
index.h("img", { key: '
|
|
14281
|
+
return index.h("div", { key: '7296f134bff80795ab52a1a27eb059ab2f3c0c87', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c9b1fdf501299398bcda1e59e65bb0a7d6b7de43', class: 'tel__wrapper--flex-label' }, index.h("label", { key: 'e7e6858fc61e2b6ea8974f8b4dc8d67a5fcb07b4', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '6c9cc9a3c74e8cd06224e2663d4c363e5d8fb3c0', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
14282
|
+
index.h("img", { key: '17e85d6050d4796bf5b057c901631a87b25d3b40', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'cb2e8b93e5663c92a2fd114d1fe1c9d9e09ebc83', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: 'fb1c3ab06d19e9ed7bbdf7effe8f25a1f7d9fe15', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: 'd2701f0bdca4122c18fd43d311ea8c5e2536b1f5', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', 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: 'a685ceea5c99f29d992fd5291f67934a22d6997c', class: 'tel__error-message' }, this.errorMessage));
|
|
14283
14283
|
}
|
|
14284
14284
|
static get watchers() { return {
|
|
14285
14285
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14588,8 +14588,8 @@ const TextInput = class {
|
|
|
14588
14588
|
if (this.touched) {
|
|
14589
14589
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
14590
14590
|
}
|
|
14591
|
-
return index.h("div", { key: '
|
|
14592
|
-
index.h("img", { key: '
|
|
14591
|
+
return index.h("div", { key: '7e4006b92f6c1e2d8b39694fd85fad7d672c18fd', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'e70be4a8daef6cbaa25d438b4d1edaecf6db5159', class: 'text__wrapper--flex' }, index.h("label", { key: '0b09f624c460c9d777dd10b887430a4e6de8cacc', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'df36d8f44540b35a65f816ade477c4f4ff077977', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
14592
|
+
index.h("img", { key: '85e25624de052cad543c883514ba0c0a522d249f', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'bf34796489a118f3c4849c3b8b7680fb77f5a2eb', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '725e4208a8170b6cf34869c44ec8cb29c2c7c93f', class: 'text__error-message' }, this.errorMessage));
|
|
14593
14593
|
}
|
|
14594
14594
|
static get watchers() { return {
|
|
14595
14595
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -14697,8 +14697,8 @@ const ToggleCheckboxInput = class {
|
|
|
14697
14697
|
return null;
|
|
14698
14698
|
}
|
|
14699
14699
|
render() {
|
|
14700
|
-
return index.h("div", { key: '
|
|
14701
|
-
index.h("img", { key: '
|
|
14700
|
+
return index.h("div", { key: '828751327e59e9649afc04c6c9f7a02ef7dcae8d', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'd02a2a6ef595aaf7142cbc6e9681394ee4db8fee', class: 'togglecheckbox__wrapper--flex' }, index.h("input", { key: 'fca6401ef6eb178f53471362444d54ed69086429', 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: '3781a8fdfeb719422693bcd541a4a3fe708e705a', class: 'togglecheckbox__error-message' }, this.errorMessage), index.h("div", { key: '27a4c6b047cd332407ee40c82cf7be1914ed34c9', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
14701
|
+
index.h("img", { key: 'f1367d7e061d20ad68c24dfbe3147e6b67df746f', class: 'togglecheckbox__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), index.h("div", { key: '98d42103554de4d14a65eafd1722bf9d587a27f1', class: `togglecheckbox__fields-wrapper ${this.showFields ? '' : 'hidden'}` }, this.options.map(subfield => {
|
|
14702
14702
|
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 });
|
|
14703
14703
|
})));
|
|
14704
14704
|
}
|
|
@@ -14985,9 +14985,9 @@ const TwofaInput = class {
|
|
|
14985
14985
|
return current;
|
|
14986
14986
|
}
|
|
14987
14987
|
render() {
|
|
14988
|
-
return (index.h("div", { key: '
|
|
14988
|
+
return (index.h("div", { key: '08b9139f1c2236dd40a045517a9623ad966f29d3', class: "twofa", ref: el => this.stylingContainer = el }, index.h("div", { key: '7528885100be3d450ec52aafd6085a4c852710c8', class: 'twofa__error-message' }, index.h("p", { key: '51dab3f02156b5eb3b7408f06f2d359cfbda11a7' }, this.errorMessage)), index.h("div", { key: 'f336f89ecee0724663b1bbb4d443bb834336b5c1', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: '5127127ccc8e50428f8319fddc9e21606f3b4148', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
|
|
14989
14989
|
return (index.h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: this.getInputDisplayValue(idx), onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
|
|
14990
|
-
})), index.h("div", { key: '
|
|
14990
|
+
})), index.h("div", { key: 'be82ae1192129d571275b78c8097c3023468cf3e', class: "twofa__button-wrapper" }, index.h("p", { key: '11de61d738ffa74bfd44f0d7c88fc4e456647d0c', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), index.h("button", { key: '84d5c55c4d9bf024164ec52e2100cfcc8c236ac2', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
|
|
14991
14991
|
? translate('twofaResendButton', this.language)
|
|
14992
14992
|
: this.formatTime()))));
|
|
14993
14993
|
}
|
|
@@ -195,8 +195,8 @@ export class DateInput {
|
|
|
195
195
|
if (this.touched) {
|
|
196
196
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
197
197
|
}
|
|
198
|
-
return h("div", { key: '9399c1be2edcbe3ed5c0e133cad52b1917e77e96', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: '1094491a5fc441c4f704441d376ed965d6946637', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, "
|
|
199
|
-
h("img", { key: '
|
|
198
|
+
return h("div", { key: '9399c1be2edcbe3ed5c0e133cad52b1917e77e96', class: `date__wrapper ${this.autofilled ? 'date__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("label", { key: '1094491a5fc441c4f704441d376ed965d6946637', class: `date__label ${this.validation.mandatory ? 'date__label--required' : ''}}`, htmlFor: `${this.name}__input` }, this.displayName, h("span", { key: '14dd041cce018e22d82919f46eabc88f83e639e8', class: this.validation.mandatory ? 'date__label--required' : '' })), h("vaadin-date-picker", { key: 'eb720200d8d2b07ab00bca70c8e4a25dfc5cd08f', 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: 'eedeea67c67bdc92ae1bb3e79cab745384bb0db7', class: 'date__error-message' }, this.errorMessage), this.tooltip &&
|
|
199
|
+
h("img", { key: '2b9cbbb972e4d07124a3d548eb932a26a44f75f3', class: 'date__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip());
|
|
200
200
|
}
|
|
201
201
|
static get is() { return "date-input"; }
|
|
202
202
|
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: '723df8f3a6e8c57fe19082400971daf50f5c981d', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '581d6e02b63d1c659ae44424518f64db450d5365', class: 'email__wrapper--flex' }, h("label", { key: '11e6a848f6f04903989b3ab2075865f6e279c087', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '73e11520cffbddda1a2aeb4b560e7f4cf456e2fb', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
139
|
+
h("img", { key: 'e8571ce14b9b98311daf1712ebde7d6da9b5a6a6', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'dd05ef0b4d906598c6d5775a78ccbdc9ea81cb8c', 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: '0d2d41207f8274d8c6f69143131265ef5b458689', 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: 'aea370172d0e55d32dc665a1c340c734334e1caf', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '10e16d10b956c5a647bc68ecffbc2eb0b06fa92a', class: 'number__wrapper--flex' }, h("label", { key: '0827d47c7278c6fdf8ebdd1dff03b91c39be6812', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'cb868d01e8555f5e3333240f54d86f0a56641d0f', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
126
|
+
h("img", { key: '1aa2b16b59f4bfd4b1dadf2641ec6cb4cfc251bf', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: '365b70a2eb333878d367d1d414ee0e296c91b3ec', 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: 'a8639df7ef1e98807a7daffc9da4afd347b1c292', class: 'number__error-message' }, this.errorMessage));
|
|
127
127
|
}
|
|
128
128
|
static get is() { return "number-input"; }
|
|
129
129
|
static get encapsulation() { return "shadow"; }
|
|
@@ -242,8 +242,8 @@ export class PasswordInput {
|
|
|
242
242
|
if (this.touched) {
|
|
243
243
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
244
244
|
}
|
|
245
|
-
return h("div", { key: '
|
|
246
|
-
h("img", { key: '
|
|
245
|
+
return h("div", { key: 'fe895585dd908f75eee4ba797dc9c02b237bed7f', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '844bdb3dab98e62cc5d92a761b85adcdc44831d0', class: 'password__wrapper--flex' }, h("label", { key: '28041267a6df666e7df3660a907f995eff092ae1', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '79c300643134802f04d8f909fe7bb3895911c88a', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
246
|
+
h("img", { key: '43ae58549e42ba59054162c25887ec36eb826aaa', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: '0edcfed0ea65666537240f531e5239bd5b11181e', 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 }), !this.noValidation && h("small", { key: 'c8aeba074e66b771d745194fec535aa0b82de6d8', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
|
|
247
247
|
this.showPopup &&
|
|
248
248
|
!this.hidePasswordComplexity &&
|
|
249
249
|
!this.isDuplicateInput &&
|
|
@@ -336,7 +336,7 @@ export class PostalCodeInput {
|
|
|
336
336
|
let shouldShowNoResults = this.showNoResultsMessage && this.currentPostalCode &&
|
|
337
337
|
this.currentPostalCode.length >= this.postalcodelength && (((_b = this.addresses) === null || _b === void 0 ? void 0 : _b.length) === 0) && isUKCountry;
|
|
338
338
|
let showLoadingMessage = this.isFetchingAddresses && this.currentPostalCode.length >= this.postalcodelength;
|
|
339
|
-
return (h("div", { key: '
|
|
339
|
+
return (h("div", { key: 'f274a95e0a64ec67f01be8a5cf053d475c16e9ca', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: '23aa865fd99048cb5c638f0b66b4ff3e8e451d97', class: 'text__wrapper--flex' }, h("label", { key: 'c5d12c1548ec8bfde130a95cc20783f20295a253', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'db2f499ff6ca8f4e3b1a8ac83e7f8856fc1ca888', class: 'text__wrapper--relative' }, this.tooltip && (h("img", { key: 'a1d7ef42855a21f336dbbb337cc8cb644de0c655', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip })), this.renderTooltip())), h("div", { key: '18a6812958691749d0c7c3396ce69a3f46f7f1e4', class: 'input__text-wrapper' }, h("input", { key: '41aa9e6b8817eee602347d7a3a909f0d81985d3d', name: this.name, id: `${this.name}__input`, value: this.determineInputValue(), 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.maxPostalCodeLength, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !isUKCountry && (h("p", { key: '7083c22e5ebb306ad9ca3c4dc29dcd66bc8b17d5', class: "address__manual-input-msg", onClick: () => this.enterAddressManually() }, translate('enterIEAddressManually', this.language))), showAddressesDropdown && (h("div", { key: '95ad996e43da19386f4576eb35850c7ba09e1620', class: "input__addresses-container", ref: (el) => (this.addressesDropdownRef = el) }, h("div", { key: '3997d92f28ec2ecee49b2480a5edb0a8431aa1c8', class: "options" }, this.addresses.map((addr, index) => (h("div", { key: index, class: "option", onClick: (e) => this.handlePostalCode(e, addr) }, addr.number, " ", addr.street, " ", addr.city)))))), showLoadingMessage && (h("div", { key: 'cf5f9c9f5f96aa2ef316eb44e97768e3552c4a2e', class: "postalcode__loading-spinner" }, h("div", { key: 'd9b0dda1be9fa871dee4b7d415f84a28b81c3362', class: "loading-spinner" }), h("span", { key: 'b5a6c58d910f5be519617288310a8a456e7e8c1c' }, translate('searchingForAddresses', this.language)))), shouldShowNoResults && (h("div", { key: '2b5503571824ec9f04f58959b8b38ff279fa6d1d', class: "postalcode__no-results-message" }, translate('postalLookUpNoAddressFound', this.language)))), h("small", { key: '00e0cbe15e10c40c8f43939123c10819592fdce2', class: 'text__error-message' }, this.errorMessage)));
|
|
340
340
|
}
|
|
341
341
|
static get is() { return "postalcode-input"; }
|
|
342
342
|
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: '33493de460303a32a37d253a0fd5f9da59676542', class: `radio__fieldset ${this.name}__input`, ref: el => this.stylingContainer = el }, h("legend", { key: '8aef7aa84a119742e05d72d976c936a560154b3f', 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: 'bec44ed4007e408ddeb0b0293b82e034c8e165f2', class: 'radio__error-message' }, this.errorMessage), this.tooltip &&
|
|
82
|
+
h("img", { key: 'a3b0a041beabe3f14661c0af8cd970040d060435', 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"; }
|
|
@@ -185,10 +185,10 @@ export class SelectInput {
|
|
|
185
185
|
if (this.touched) {
|
|
186
186
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
187
187
|
}
|
|
188
|
-
return h("div", { key: '
|
|
189
|
-
h("img", { key: '
|
|
188
|
+
return h("div", { key: 'b0ed504667761e5fd77e0ac13382b467448a1944', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'b48d38dc4c2cb3442ff6773a1b1d13191ec4d0e6', class: 'select__wrapper--flex' }, h("label", { key: 'ad592c8c98ecbec1961d22cdfeb8cec910291ea8', class: 'select__label', htmlFor: `${this.name}__input` }, this.displayName, h("span", { key: 'b3c0f2fe9a2d26ade1626878ed9bc1f0b86a23ad', class: this.validation.mandatory ? 'select__label--required' : '' })), h("div", { key: '29d0f504d0f51175818dffffb882ac4e6e9c3bde', class: 'select__wrapper--relative' }, this.tooltip &&
|
|
189
|
+
h("img", { key: '66e524ffebc43f9418e90b3bd2d7ae62eba47da3', 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 })
|
|
190
190
|
:
|
|
191
|
-
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: '
|
|
191
|
+
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: '0143b538740c3a8e9bfcab6bbb44660355c40cf7', class: 'select__error-message' }, this.errorMessage));
|
|
192
192
|
}
|
|
193
193
|
static get is() { return "select-input"; }
|
|
194
194
|
static get encapsulation() { return "shadow"; }
|
|
@@ -178,8 +178,8 @@ export class TelInput {
|
|
|
178
178
|
if (this.touched) {
|
|
179
179
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
180
180
|
}
|
|
181
|
-
return h("div", { key: '
|
|
182
|
-
h("img", { key: '
|
|
181
|
+
return h("div", { key: '7296f134bff80795ab52a1a27eb059ab2f3c0c87', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c9b1fdf501299398bcda1e59e65bb0a7d6b7de43', class: 'tel__wrapper--flex-label' }, h("label", { key: 'e7e6858fc61e2b6ea8974f8b4dc8d67a5fcb07b4', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '6c9cc9a3c74e8cd06224e2663d4c363e5d8fb3c0', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
182
|
+
h("img", { key: '17e85d6050d4796bf5b057c901631a87b25d3b40', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'cb2e8b93e5663c92a2fd114d1fe1c9d9e09ebc83', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: 'fb1c3ab06d19e9ed7bbdf7effe8f25a1f7d9fe15', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: 'd2701f0bdca4122c18fd43d311ea8c5e2536b1f5', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: (_a = this.phoneValue) !== null && _a !== void 0 ? _a : '', 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: 'a685ceea5c99f29d992fd5291f67934a22d6997c', class: 'tel__error-message' }, this.errorMessage));
|
|
183
183
|
}
|
|
184
184
|
static get is() { return "tel-input"; }
|
|
185
185
|
static get encapsulation() { return "shadow"; }
|
|
@@ -294,8 +294,8 @@ export class TextInput {
|
|
|
294
294
|
if (this.touched) {
|
|
295
295
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
296
296
|
}
|
|
297
|
-
return h("div", { key: '
|
|
298
|
-
h("img", { key: '
|
|
297
|
+
return h("div", { key: '7e4006b92f6c1e2d8b39694fd85fad7d672c18fd', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, h("div", { key: 'e70be4a8daef6cbaa25d438b4d1edaecf6db5159', class: 'text__wrapper--flex' }, h("label", { key: '0b09f624c460c9d777dd10b887430a4e6de8cacc', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'df36d8f44540b35a65f816ade477c4f4ff077977', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
298
|
+
h("img", { key: '85e25624de052cad543c883514ba0c0a522d249f', class: 'text__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("input", { key: 'bf34796489a118f3c4849c3b8b7680fb77f5a2eb', name: this.name, id: `${this.name}__input`, value: this.value, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.enableSouthAfricanMode ? '' : this.validation.minLength, maxlength: this.enableSouthAfricanMode ? '' : this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), h("small", { key: '725e4208a8170b6cf34869c44ec8cb29c2c7c93f', class: 'text__error-message' }, this.errorMessage));
|
|
299
299
|
}
|
|
300
300
|
static get is() { return "text-input"; }
|
|
301
301
|
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: '828751327e59e9649afc04c6c9f7a02ef7dcae8d', class: `togglecheckbox__wrapper ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'd02a2a6ef595aaf7142cbc6e9681394ee4db8fee', class: 'togglecheckbox__wrapper--flex' }, h("input", { key: 'fca6401ef6eb178f53471362444d54ed69086429', 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: '3781a8fdfeb719422693bcd541a4a3fe708e705a', class: 'togglecheckbox__error-message' }, this.errorMessage), h("div", { key: '27a4c6b047cd332407ee40c82cf7be1914ed34c9', class: 'togglecheckbox__wrapper--relative' }, this.tooltip &&
|
|
97
|
+
h("img", { key: 'f1367d7e061d20ad68c24dfbe3147e6b67df746f', class: 'togglecheckbox__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip()), h("div", { key: '98d42103554de4d14a65eafd1722bf9d587a27f1', 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
|
}
|
|
@@ -269,9 +269,9 @@ export class TwofaInput {
|
|
|
269
269
|
return current;
|
|
270
270
|
}
|
|
271
271
|
render() {
|
|
272
|
-
return (h("div", { key: '
|
|
272
|
+
return (h("div", { key: '08b9139f1c2236dd40a045517a9623ad966f29d3', class: "twofa", ref: el => this.stylingContainer = el }, h("div", { key: '7528885100be3d450ec52aafd6085a4c852710c8', class: 'twofa__error-message' }, h("p", { key: '51dab3f02156b5eb3b7408f06f2d359cfbda11a7' }, this.errorMessage)), h("div", { key: 'f336f89ecee0724663b1bbb4d443bb834336b5c1', class: "twofa__description", innerHTML: translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), h("div", { key: '5127127ccc8e50428f8319fddc9e21606f3b4148', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((_, idx) => {
|
|
273
273
|
return (h("input", { key: idx, ref: el => this.setInputRef(el, idx), id: `otp-input-${idx}`, type: "text", maxLength: 2, value: this.getInputDisplayValue(idx), onInput: (event) => this.handleInput(event, idx), onKeyDown: (event) => this.handleKeyDown(event, idx), onPaste: (event) => this.handlePaste(event) }));
|
|
274
|
-
})), h("div", { key: '
|
|
274
|
+
})), h("div", { key: 'be82ae1192129d571275b78c8097c3023468cf3e', class: "twofa__button-wrapper" }, h("p", { key: '11de61d738ffa74bfd44f0d7c88fc4e456647d0c', class: "twofa__resend-message" }, translate('twofaResendMessage', this.language)), h("button", { key: '84d5c55c4d9bf024164ec52e2100cfcc8c236ac2', class: `twofa__resend-button ${this.pinAttemptsExceeded ? 'twofa__resend-button--disabled' : ''}`, onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable || this.pinAttemptsExceeded }, this.isResendButtonAvailable
|
|
275
275
|
? translate('twofaResendButton', this.language)
|
|
276
276
|
: this.formatTime()))));
|
|
277
277
|
}
|