@everymatrix/general-input-hsl 0.25.40 → 0.25.43
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 +148 -216
- package/dist/collection/components/email-input/email-input.js +23 -28
- package/dist/collection/components/number-input/number-input.js +20 -26
- package/dist/collection/components/password-input/password-input.js +33 -49
- package/dist/collection/components/tel-input/tel-input.js +21 -25
- package/dist/collection/components/text-input/text-input.js +33 -55
- package/dist/collection/components/twofa-input/twofa-input.js +17 -33
- package/dist/collection/utils/utils.js +7 -0
- package/dist/esm/checkbox-group-input_13.entry.js +148 -216
- package/dist/general-input-hsl/checkbox-group-input_13.entry.js +1 -1
- package/dist/types/components/email-input/email-input.d.ts +3 -6
- package/dist/types/components/number-input/number-input.d.ts +3 -6
- package/dist/types/components/password-input/password-input.d.ts +3 -5
- package/dist/types/components/tel-input/tel-input.d.ts +3 -5
- package/dist/types/components/text-input/text-input.d.ts +3 -6
- package/dist/types/components/twofa-input/twofa-input.d.ts +3 -5
- package/dist/types/utils/types.d.ts +4 -0
- package/dist/types/utils/utils.d.ts +3 -0
- package/package.json +1 -1
|
@@ -5793,6 +5793,13 @@ const DateInput = class {
|
|
|
5793
5793
|
};
|
|
5794
5794
|
DateInput.style = DateInputStyle0;
|
|
5795
5795
|
|
|
5796
|
+
function getFailedRegexRule(value, custom) {
|
|
5797
|
+
return (custom || []).find(rule => rule.rule === 'regex' && !new RegExp(rule.pattern).test(value));
|
|
5798
|
+
}
|
|
5799
|
+
function getRuleErrorMessage(rule, language) {
|
|
5800
|
+
return generalInputHsl.translate(rule.errorKey, language) || rule.errorMessage;
|
|
5801
|
+
}
|
|
5802
|
+
|
|
5796
5803
|
const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emw--color-black, #000000)}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emw--registration-typography, var(--emw--color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E));margin-left:2px}.email__input{font-family:inherit;border-radius:4px;width:100%;height:40px;border:2px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--color-black, #000000);border-radius:5px;box-sizing:border-box;font-size:16px;font-weight:300;line-height:1.5;padding:10px}.email__input:focus{outline-color:var(--emw--login-color-primary, var(--emw--color-primary, #22B04E))}.email__input--invalid{border:1px solid var(--emw--color-error, var(--emw--color-red, #ed0909))}.email__input::placeholder{color:var(--emw--color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emw--color-error, var(--emw--color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emw--color-white, #FFFFFF);border:1px solid var(--emw--color-gray-100, #E6E6E6);color:var(--emw--registration-typography, var(--emw--color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
|
|
5797
5804
|
const EmailInputStyle0 = emailInputCss;
|
|
5798
5805
|
|
|
@@ -5801,7 +5808,6 @@ const EmailInput = class {
|
|
|
5801
5808
|
index.registerInstance(this, hostRef);
|
|
5802
5809
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
5803
5810
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
5804
|
-
this.validationPattern = '';
|
|
5805
5811
|
this.touched = false;
|
|
5806
5812
|
this.handleInput = (event) => {
|
|
5807
5813
|
this.value = event.target.value;
|
|
@@ -5810,14 +5816,12 @@ const EmailInput = class {
|
|
|
5810
5816
|
clearTimeout(this.debounceTime);
|
|
5811
5817
|
}
|
|
5812
5818
|
this.debounceTime = setTimeout(() => {
|
|
5813
|
-
this.
|
|
5814
|
-
this.errorMessage = this.setErrorMessage();
|
|
5819
|
+
this.updateValidity();
|
|
5815
5820
|
this.emitValueHandler(true);
|
|
5816
5821
|
}, 500);
|
|
5817
5822
|
};
|
|
5818
5823
|
this.handleBlur = () => {
|
|
5819
|
-
this.
|
|
5820
|
-
this.errorMessage = this.setErrorMessage();
|
|
5824
|
+
this.updateValidity();
|
|
5821
5825
|
this.touched = true;
|
|
5822
5826
|
};
|
|
5823
5827
|
this.setClientStyling = () => {
|
|
@@ -5875,9 +5879,6 @@ const EmailInput = class {
|
|
|
5875
5879
|
}
|
|
5876
5880
|
}
|
|
5877
5881
|
}
|
|
5878
|
-
connectedCallback() {
|
|
5879
|
-
this.validationPattern = this.setPattern();
|
|
5880
|
-
}
|
|
5881
5882
|
componentDidRender() {
|
|
5882
5883
|
// start custom styling area
|
|
5883
5884
|
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
@@ -5888,39 +5889,39 @@ const EmailInput = class {
|
|
|
5888
5889
|
// end custom styling area
|
|
5889
5890
|
}
|
|
5890
5891
|
componentDidLoad() {
|
|
5891
|
-
this.isValid = this.
|
|
5892
|
+
this.isValid = this.validate().isValid;
|
|
5892
5893
|
if (this.defaultValue) {
|
|
5893
5894
|
this.value = this.defaultValue;
|
|
5894
5895
|
this.valueHandler({ name: this.name, value: this.value });
|
|
5895
5896
|
}
|
|
5896
5897
|
}
|
|
5897
|
-
|
|
5898
|
-
|
|
5898
|
+
updateValidity() {
|
|
5899
|
+
const { isValid, errorMessage } = this.validate();
|
|
5900
|
+
this.isValid = isValid;
|
|
5901
|
+
this.errorMessage = errorMessage;
|
|
5899
5902
|
}
|
|
5900
|
-
|
|
5903
|
+
validate() {
|
|
5901
5904
|
var _a, _b;
|
|
5902
|
-
if (
|
|
5903
|
-
return
|
|
5905
|
+
if (!this.inputReference) {
|
|
5906
|
+
return { isValid: false, errorMessage: '' };
|
|
5904
5907
|
}
|
|
5905
|
-
}
|
|
5906
|
-
setErrorMessage() {
|
|
5907
|
-
var _a, _b, _c, _d;
|
|
5908
5908
|
if (this.inputReference.validity.valueMissing) {
|
|
5909
|
-
return generalInputHsl.translate('requiredError', this.language);
|
|
5909
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('requiredError', this.language) };
|
|
5910
5910
|
}
|
|
5911
5911
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
5912
|
-
return generalInputHsl.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
5912
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
|
|
5913
5913
|
}
|
|
5914
|
-
|
|
5915
|
-
|
|
5916
|
-
|
|
5917
|
-
return
|
|
5914
|
+
const inputValue = this.inputReference.value;
|
|
5915
|
+
const failedRegexRule = inputValue ? getFailedRegexRule(inputValue, this.validation.custom) : undefined;
|
|
5916
|
+
if (failedRegexRule) {
|
|
5917
|
+
return { isValid: false, errorMessage: getRuleErrorMessage(failedRegexRule, this.language) };
|
|
5918
5918
|
}
|
|
5919
5919
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
5920
|
-
const errorCode = (
|
|
5921
|
-
const errorMessage = (
|
|
5922
|
-
return generalInputHsl.translate(`${errorCode}`, this.language) ? generalInputHsl.translate(`${errorCode}`, this.language) : errorMessage;
|
|
5920
|
+
const errorCode = (_a = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
5921
|
+
const errorMessage = (_b = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
5922
|
+
return { isValid: false, errorMessage: generalInputHsl.translate(`${errorCode}`, this.language) ? generalInputHsl.translate(`${errorCode}`, this.language) : errorMessage };
|
|
5923
5923
|
}
|
|
5924
|
+
return { isValid: this.inputReference.validity.valid, errorMessage: '' };
|
|
5924
5925
|
}
|
|
5925
5926
|
renderTooltip() {
|
|
5926
5927
|
if (this.showTooltip) {
|
|
@@ -5933,8 +5934,8 @@ const EmailInput = class {
|
|
|
5933
5934
|
if (this.touched) {
|
|
5934
5935
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
5935
5936
|
}
|
|
5936
|
-
return index.h("div", { key: '
|
|
5937
|
-
index.h("img", { key: '
|
|
5937
|
+
return index.h("div", { key: 'ff5657194151b872247fd966bc8dc7ab53f715de', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '8dc84da8787a50232fda2c113cf838598525a550', class: 'email__wrapper--flex' }, index.h("label", { key: 'b42e56122de79d841d99e183c6ed818a74c22020', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7f09b2b675b28eebcd1e913b0cbdd43feb83b567', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
5938
|
+
index.h("img", { key: '64c6c3565b60480d279a434f87efa36625da934b', class: 'email__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '754ba4160c2633444064d334f451d0700815e8fc', id: `${this.name}__input`, type: 'email', class: `email__input ${invalidClass}`, value: this.defaultValue, readOnly: this.autofilled, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '2d72cdde55c1a6b041bb37a1b5a2f3e1c17b558a', class: 'email__error-message' }, this.errorMessage));
|
|
5938
5939
|
}
|
|
5939
5940
|
static get watchers() { return {
|
|
5940
5941
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -5952,7 +5953,6 @@ const NumberInput = class {
|
|
|
5952
5953
|
index.registerInstance(this, hostRef);
|
|
5953
5954
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
5954
5955
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
5955
|
-
this.validationPattern = '';
|
|
5956
5956
|
this.touched = false;
|
|
5957
5957
|
this.handleInput = (event) => {
|
|
5958
5958
|
this.value = event.target.value;
|
|
@@ -5961,14 +5961,12 @@ const NumberInput = class {
|
|
|
5961
5961
|
clearTimeout(this.debounceTime);
|
|
5962
5962
|
}
|
|
5963
5963
|
this.debounceTime = setTimeout(() => {
|
|
5964
|
-
this.
|
|
5965
|
-
this.errorMessage = this.setErrorMessage();
|
|
5964
|
+
this.updateValidity();
|
|
5966
5965
|
this.emitValueHandler(true);
|
|
5967
5966
|
}, 500);
|
|
5968
5967
|
};
|
|
5969
5968
|
this.handleBlur = () => {
|
|
5970
|
-
this.
|
|
5971
|
-
this.errorMessage = this.setErrorMessage();
|
|
5969
|
+
this.updateValidity();
|
|
5972
5970
|
this.touched = true;
|
|
5973
5971
|
};
|
|
5974
5972
|
this.setClientStyling = () => {
|
|
@@ -6018,9 +6016,6 @@ const NumberInput = class {
|
|
|
6018
6016
|
this.showTooltip = false;
|
|
6019
6017
|
}
|
|
6020
6018
|
}
|
|
6021
|
-
connectedCallback() {
|
|
6022
|
-
this.validationPattern = this.setPattern();
|
|
6023
|
-
}
|
|
6024
6019
|
componentDidRender() {
|
|
6025
6020
|
// start custom styling area
|
|
6026
6021
|
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
@@ -6031,34 +6026,33 @@ const NumberInput = class {
|
|
|
6031
6026
|
// end custom styling area
|
|
6032
6027
|
}
|
|
6033
6028
|
componentDidLoad() {
|
|
6034
|
-
this.isValid = this.
|
|
6029
|
+
this.isValid = this.validate().isValid;
|
|
6035
6030
|
if (this.defaultValue) {
|
|
6036
6031
|
this.value = this.defaultValue;
|
|
6037
6032
|
this.valueHandler({ name: this.name, value: this.value });
|
|
6038
6033
|
}
|
|
6039
6034
|
}
|
|
6040
|
-
|
|
6041
|
-
|
|
6035
|
+
updateValidity() {
|
|
6036
|
+
const { isValid, errorMessage } = this.validate();
|
|
6037
|
+
this.isValid = isValid;
|
|
6038
|
+
this.errorMessage = errorMessage;
|
|
6042
6039
|
}
|
|
6043
|
-
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
|
|
6040
|
+
validate() {
|
|
6041
|
+
if (!this.inputReference) {
|
|
6042
|
+
return { isValid: false, errorMessage: '' };
|
|
6047
6043
|
}
|
|
6048
|
-
}
|
|
6049
|
-
setErrorMessage() {
|
|
6050
|
-
var _a, _b;
|
|
6051
6044
|
if (this.inputReference.validity.valueMissing) {
|
|
6052
|
-
return generalInputHsl.translate('requiredError', this.language);
|
|
6045
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('requiredError', this.language) };
|
|
6053
6046
|
}
|
|
6054
6047
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
6055
|
-
return generalInputHsl.translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
6048
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } }) };
|
|
6056
6049
|
}
|
|
6057
|
-
|
|
6058
|
-
|
|
6059
|
-
|
|
6060
|
-
return
|
|
6050
|
+
const value = this.inputReference.value;
|
|
6051
|
+
const failedRule = value ? getFailedRegexRule(value, this.validation.custom) : undefined;
|
|
6052
|
+
if (failedRule) {
|
|
6053
|
+
return { isValid: false, errorMessage: getRuleErrorMessage(failedRule, this.language) };
|
|
6061
6054
|
}
|
|
6055
|
+
return { isValid: this.inputReference.validity.valid, errorMessage: '' };
|
|
6062
6056
|
}
|
|
6063
6057
|
renderTooltip() {
|
|
6064
6058
|
if (this.showTooltip) {
|
|
@@ -6071,8 +6065,8 @@ const NumberInput = class {
|
|
|
6071
6065
|
if (this.touched) {
|
|
6072
6066
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6073
6067
|
}
|
|
6074
|
-
return index.h("div", { key: '
|
|
6075
|
-
index.h("img", { key: '
|
|
6068
|
+
return index.h("div", { key: 'edc8799baa52418673dcfccb82b1ff9d86159787', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9d6313a06ff4fcd1174879745d48d37ac63c64a5', class: 'number__wrapper--flex' }, index.h("label", { key: '404af2d79da04a3156ebce45aae6d06ea21b5dc1', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '349120e9587af42941de2fd2405dc0b9b763372f', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
6069
|
+
index.h("img", { key: '652d145a6a794f0e8370641d3f7fb28099603d62', class: 'number__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'e7908fe81f8afda735750cfe2bb7ac50d452c210', ref: (el) => this.inputReference = el, type: "number", inputMode: "numeric", value: this.defaultValue, readOnly: this.autofilled, id: `${this.name}__input`, class: `number__input ${invalidClass}`, 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: '87e3e5afb6c790f9c57d79bdf0e12a897b10d799', class: 'number__error-message' }, this.errorMessage));
|
|
6076
6070
|
}
|
|
6077
6071
|
static get watchers() { return {
|
|
6078
6072
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6093,7 +6087,6 @@ const PasswordInput = class {
|
|
|
6093
6087
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
6094
6088
|
this.touched = false;
|
|
6095
6089
|
this.originalValid = false;
|
|
6096
|
-
this.validationPattern = '';
|
|
6097
6090
|
this.duplicateInputValue = null;
|
|
6098
6091
|
this.handleInput = (event) => {
|
|
6099
6092
|
this.value = event.target.value;
|
|
@@ -6104,8 +6097,7 @@ const PasswordInput = class {
|
|
|
6104
6097
|
clearTimeout(this.debounceTime);
|
|
6105
6098
|
}
|
|
6106
6099
|
this.debounceTime = setTimeout(() => {
|
|
6107
|
-
this.
|
|
6108
|
-
this.errorMessage = this.setErrorMessage();
|
|
6100
|
+
this.updateValidity();
|
|
6109
6101
|
this.emitValueHandler(true);
|
|
6110
6102
|
}, 500);
|
|
6111
6103
|
};
|
|
@@ -6117,8 +6109,7 @@ const PasswordInput = class {
|
|
|
6117
6109
|
this.value = event.target.value;
|
|
6118
6110
|
this.showPopup = false;
|
|
6119
6111
|
this.touched = true;
|
|
6120
|
-
this.
|
|
6121
|
-
this.errorMessage = this.setErrorMessage();
|
|
6112
|
+
this.updateValidity();
|
|
6122
6113
|
};
|
|
6123
6114
|
this.handleFocus = () => {
|
|
6124
6115
|
this.showPopup = true;
|
|
@@ -6163,7 +6154,7 @@ const PasswordInput = class {
|
|
|
6163
6154
|
if (!this.isDuplicateInput) {
|
|
6164
6155
|
// recalculate complexity immediately in order to send the correct validity to the duplicate
|
|
6165
6156
|
this.calculateComplexity(this.value);
|
|
6166
|
-
this.sendOriginalValidityState.emit({ name: this.name, valid: this.
|
|
6157
|
+
this.sendOriginalValidityState.emit({ name: this.name, valid: this.validate().isValid });
|
|
6167
6158
|
}
|
|
6168
6159
|
}
|
|
6169
6160
|
emitValueHandler(newValue) {
|
|
@@ -6181,13 +6172,13 @@ const PasswordInput = class {
|
|
|
6181
6172
|
if (this.isDuplicateInput) {
|
|
6182
6173
|
if (event.detail.valid) {
|
|
6183
6174
|
this.originalValid = true;
|
|
6184
|
-
this.isValid = this.
|
|
6175
|
+
this.isValid = this.validate().isValid;
|
|
6185
6176
|
}
|
|
6186
6177
|
else {
|
|
6187
6178
|
this.originalValid = false;
|
|
6188
6179
|
this.isValid = false;
|
|
6189
6180
|
// only show error if the user has touched the input, in order to not show errors on empty inputs
|
|
6190
|
-
this.value !== '' && (this.errorMessage = this.
|
|
6181
|
+
this.value !== '' && (this.errorMessage = this.validate().errorMessage);
|
|
6191
6182
|
}
|
|
6192
6183
|
}
|
|
6193
6184
|
}
|
|
@@ -6195,15 +6186,13 @@ const PasswordInput = class {
|
|
|
6195
6186
|
if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
|
|
6196
6187
|
this.duplicateInputValue = event.detail.value;
|
|
6197
6188
|
if (this.touched) {
|
|
6198
|
-
this.
|
|
6199
|
-
this.errorMessage = this.setErrorMessage();
|
|
6189
|
+
this.updateValidity();
|
|
6200
6190
|
}
|
|
6201
6191
|
}
|
|
6202
6192
|
if (this.name === event.detail.name + 'Duplicate'
|
|
6203
6193
|
&& this.name.replace('Duplicate', '') === event.detail.name
|
|
6204
6194
|
&& this.touched === true) {
|
|
6205
|
-
this.
|
|
6206
|
-
this.errorMessage = this.setErrorMessage();
|
|
6195
|
+
this.updateValidity();
|
|
6207
6196
|
}
|
|
6208
6197
|
}
|
|
6209
6198
|
handleClickOutside(event) {
|
|
@@ -6237,7 +6226,7 @@ const PasswordInput = class {
|
|
|
6237
6226
|
this.touched = true;
|
|
6238
6227
|
}
|
|
6239
6228
|
}
|
|
6240
|
-
this.isValid = this.
|
|
6229
|
+
this.isValid = this.validate().isValid;
|
|
6241
6230
|
}
|
|
6242
6231
|
disconnectedCallback() {
|
|
6243
6232
|
this.passwordButton.removeEventListener('click', this.handleRevealField);
|
|
@@ -6251,48 +6240,36 @@ const PasswordInput = class {
|
|
|
6251
6240
|
return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
|
|
6252
6241
|
});
|
|
6253
6242
|
}
|
|
6254
|
-
|
|
6255
|
-
var _a, _b;
|
|
6256
|
-
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
6257
|
-
return false;
|
|
6258
|
-
}
|
|
6259
|
-
else if (!((_a = this.passwordComplexity) === null || _a === void 0 ? void 0 : _a.every(complexity => complexity.passed))) {
|
|
6260
|
-
return false;
|
|
6261
|
-
}
|
|
6262
|
-
else {
|
|
6263
|
-
return (_b = this.inputReference) === null || _b === void 0 ? void 0 : _b.validity.valid;
|
|
6264
|
-
}
|
|
6265
|
-
}
|
|
6266
|
-
setPattern() {
|
|
6243
|
+
validate() {
|
|
6267
6244
|
var _a, _b;
|
|
6268
|
-
if (
|
|
6269
|
-
return
|
|
6245
|
+
if (!this.inputReference) {
|
|
6246
|
+
return { isValid: false, errorMessage: '' };
|
|
6270
6247
|
}
|
|
6271
|
-
|
|
6272
|
-
|
|
6273
|
-
|
|
6274
|
-
if (
|
|
6275
|
-
return generalInputHsl.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
6248
|
+
const validity = this.inputReference.validity;
|
|
6249
|
+
const duplicateMismatch = this.isDuplicateInput && this.duplicateInputValue !== this.value;
|
|
6250
|
+
const complexityPassed = !!((_a = this.passwordComplexity) === null || _a === void 0 ? void 0 : _a.every(complexity => complexity.passed));
|
|
6251
|
+
if (validity.tooShort || validity.tooLong) {
|
|
6252
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
|
|
6276
6253
|
}
|
|
6277
|
-
if (
|
|
6278
|
-
return generalInputHsl.translate('requiredError', this.language);
|
|
6254
|
+
if (validity.valueMissing) {
|
|
6255
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('requiredError', this.language) };
|
|
6279
6256
|
}
|
|
6280
6257
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
6281
|
-
return generalInputHsl.translate('invalidOriginalPasswordError', this.language);
|
|
6282
|
-
}
|
|
6283
|
-
if (this.inputReference.validity.patternMismatch) {
|
|
6284
|
-
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
6285
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
6286
|
-
return generalInputHsl.translate(`${errorCode}`, this.language) ? generalInputHsl.translate(`${errorCode}`, this.language) : errorMessage;
|
|
6258
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('invalidOriginalPasswordError', this.language) };
|
|
6287
6259
|
}
|
|
6288
|
-
if (
|
|
6289
|
-
const
|
|
6290
|
-
|
|
6291
|
-
return generalInputHsl.translate(`${errorCode}`, this.language) ? generalInputHsl.translate(`${errorCode}`, this.language) : errorMessage;
|
|
6260
|
+
if (duplicateMismatch) {
|
|
6261
|
+
const duplicateRule = (_b = this.validation.custom) === null || _b === void 0 ? void 0 : _b.find(customRule => customRule.rule === 'duplicate-input');
|
|
6262
|
+
return { isValid: false, errorMessage: duplicateRule ? getRuleErrorMessage(duplicateRule, this.language) : '' };
|
|
6292
6263
|
}
|
|
6293
|
-
if (!
|
|
6294
|
-
return generalInputHsl.translate('invalidPassword', this.language);
|
|
6264
|
+
if (!complexityPassed) {
|
|
6265
|
+
return { isValid: false, errorMessage: this.showPopup ? '' : generalInputHsl.translate('invalidPassword', this.language) };
|
|
6295
6266
|
}
|
|
6267
|
+
return { isValid: validity.valid, errorMessage: '' };
|
|
6268
|
+
}
|
|
6269
|
+
updateValidity() {
|
|
6270
|
+
const { isValid, errorMessage } = this.validate();
|
|
6271
|
+
this.isValid = isValid;
|
|
6272
|
+
this.errorMessage = errorMessage;
|
|
6296
6273
|
}
|
|
6297
6274
|
renderTooltip() {
|
|
6298
6275
|
if (this.showTooltip) {
|
|
@@ -6314,8 +6291,8 @@ const PasswordInput = class {
|
|
|
6314
6291
|
if (this.touched) {
|
|
6315
6292
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6316
6293
|
}
|
|
6317
|
-
return index.h("div", { key: '
|
|
6318
|
-
index.h("img", { key: '
|
|
6294
|
+
return index.h("div", { key: '9fd27b840b317bbb224f062c855c4b4a8b94a3a4', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '3d16837c2e10a490fd07ef1c294db1f5732da4ad', class: 'password__wrapper--flex' }, index.h("label", { key: '09d61fc66912e7a79b83842e4d6d89b851a92afa', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '23f4d60bc9f777d00fd16d2dc78cc7c105307e32', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
6295
|
+
index.h("img", { key: 'db104e01e0f5d5d322b3394f8740cedaaa8b2199', 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: '072309fd70e0af72bde2beb579e6d93abea8928a', 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, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), index.h("small", { key: '41336c3bd58eba953266b31980ce0677b27405f0', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
6319
6296
|
}
|
|
6320
6297
|
get element() { return index.getElement(this); }
|
|
6321
6298
|
static get watchers() { return {
|
|
@@ -6636,7 +6613,6 @@ const TelInput = class {
|
|
|
6636
6613
|
index.registerInstance(this, hostRef);
|
|
6637
6614
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
6638
6615
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
6639
|
-
this.validationPattern = '';
|
|
6640
6616
|
this.touched = false;
|
|
6641
6617
|
this.handleInput = (event) => {
|
|
6642
6618
|
const inputElement = event.target;
|
|
@@ -6650,15 +6626,13 @@ const TelInput = class {
|
|
|
6650
6626
|
clearTimeout(this.debounceTime);
|
|
6651
6627
|
}
|
|
6652
6628
|
this.debounceTime = setTimeout(() => {
|
|
6653
|
-
this.
|
|
6654
|
-
this.errorMessage = this.setErrorMessage();
|
|
6629
|
+
this.updateValidity();
|
|
6655
6630
|
this.emitValueHandler(true);
|
|
6656
6631
|
}, 500);
|
|
6657
6632
|
};
|
|
6658
6633
|
this.handleBlur = () => {
|
|
6659
6634
|
if (!this.touched) {
|
|
6660
|
-
this.
|
|
6661
|
-
this.errorMessage = this.setErrorMessage();
|
|
6635
|
+
this.updateValidity();
|
|
6662
6636
|
this.touched = true;
|
|
6663
6637
|
}
|
|
6664
6638
|
};
|
|
@@ -6713,7 +6687,6 @@ const TelInput = class {
|
|
|
6713
6687
|
}
|
|
6714
6688
|
}
|
|
6715
6689
|
connectedCallback() {
|
|
6716
|
-
this.validationPattern = this.setPattern();
|
|
6717
6690
|
if (this.defaultValue) {
|
|
6718
6691
|
this.prefixValue = this.defaultValue.prefix ? this.defaultValue.prefix : this.defaultValue;
|
|
6719
6692
|
this.phoneValue = this.defaultValue.phone || null;
|
|
@@ -6743,7 +6716,7 @@ const TelInput = class {
|
|
|
6743
6716
|
// end custom styling area
|
|
6744
6717
|
}
|
|
6745
6718
|
componentDidLoad() {
|
|
6746
|
-
this.isValid = this.
|
|
6719
|
+
this.isValid = this.validate().isValid;
|
|
6747
6720
|
if (this.defaultValue) {
|
|
6748
6721
|
this.value = this.defaultValue;
|
|
6749
6722
|
this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
|
|
@@ -6767,28 +6740,27 @@ const TelInput = class {
|
|
|
6767
6740
|
this.value = { prefix: this.prefixValue, phone: this.phoneValue };
|
|
6768
6741
|
this.emitValueHandler(true);
|
|
6769
6742
|
}
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
6773
|
-
setPattern() {
|
|
6774
|
-
var _a, _b;
|
|
6775
|
-
if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
6776
|
-
return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
|
|
6743
|
+
validate() {
|
|
6744
|
+
if (!this.inputReference) {
|
|
6745
|
+
return { isValid: false, errorMessage: '' };
|
|
6777
6746
|
}
|
|
6778
|
-
|
|
6779
|
-
|
|
6780
|
-
|
|
6781
|
-
|
|
6782
|
-
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
6783
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
6784
|
-
return generalInputHsl.translate(`${errorCode}`, this.language) ? generalInputHsl.translate(`${errorCode}`, this.language) : errorMessage;
|
|
6747
|
+
const value = this.inputReference.value;
|
|
6748
|
+
const failedRule = value ? getFailedRegexRule(value, this.validation.custom) : undefined;
|
|
6749
|
+
if (failedRule) {
|
|
6750
|
+
return { isValid: false, errorMessage: getRuleErrorMessage(failedRule, this.language) };
|
|
6785
6751
|
}
|
|
6786
6752
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
6787
|
-
return generalInputHsl.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
6753
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
|
|
6788
6754
|
}
|
|
6789
6755
|
if (this.inputReference.validity.valueMissing) {
|
|
6790
|
-
return generalInputHsl.translate('requiredError', this.language);
|
|
6756
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('requiredError', this.language) };
|
|
6791
6757
|
}
|
|
6758
|
+
return { isValid: this.inputReference.validity.valid, errorMessage: '' };
|
|
6759
|
+
}
|
|
6760
|
+
updateValidity() {
|
|
6761
|
+
const { isValid, errorMessage } = this.validate();
|
|
6762
|
+
this.isValid = isValid;
|
|
6763
|
+
this.errorMessage = errorMessage;
|
|
6792
6764
|
}
|
|
6793
6765
|
renderTooltip() {
|
|
6794
6766
|
if (this.showTooltip) {
|
|
@@ -6801,8 +6773,8 @@ const TelInput = class {
|
|
|
6801
6773
|
if (this.touched) {
|
|
6802
6774
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
6803
6775
|
}
|
|
6804
|
-
return index.h("div", { key: '
|
|
6805
|
-
index.h("img", { key: '
|
|
6776
|
+
return index.h("div", { key: '78ddea111a011a7c75df7a6f7101aafccbaff4a1', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '9dcd9723ed26de04630a8a174e902a629bc9347c', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '597e8a28990f12e1183fdeb315e176af970d4104', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '86c147c124468d06bffdf8359c7f404cbe897c15', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
6777
|
+
index.h("img", { key: '0d2b528570401361087bf0438493a96a3450e40c', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'd82808bbc28c720ae4cff45fd1d0df88ca320029', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '73805b42a6b40d901e6367e45e4d6d1ff2288082', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '483f7fd3f8e71d3ab9161b66d6584bd141e56144', 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, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '296651863f2d6fcf31eb21f2d83b7df505d59833', class: 'tel__error-message' }, this.errorMessage));
|
|
6806
6778
|
}
|
|
6807
6779
|
static get watchers() { return {
|
|
6808
6780
|
"clientStyling": ["handleStylingChange"],
|
|
@@ -6821,7 +6793,6 @@ const TextInput = class {
|
|
|
6821
6793
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
6822
6794
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
6823
6795
|
this.value = '';
|
|
6824
|
-
this.validationPattern = [];
|
|
6825
6796
|
this.duplicateInputValue = null;
|
|
6826
6797
|
this.handleInput = (event) => {
|
|
6827
6798
|
const inputElement = event.target;
|
|
@@ -6835,8 +6806,7 @@ const TextInput = class {
|
|
|
6835
6806
|
clearTimeout(this.debounceTime);
|
|
6836
6807
|
}
|
|
6837
6808
|
this.debounceTime = setTimeout(() => {
|
|
6838
|
-
this.
|
|
6839
|
-
this.errorMessage = this.setErrorMessage();
|
|
6809
|
+
this.updateValidity();
|
|
6840
6810
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6841
6811
|
this.emitValueHandler(true);
|
|
6842
6812
|
}, 500);
|
|
@@ -6844,8 +6814,7 @@ const TextInput = class {
|
|
|
6844
6814
|
this.handleBlur = (event) => {
|
|
6845
6815
|
this.value = event.target.value;
|
|
6846
6816
|
this.touched = true;
|
|
6847
|
-
this.
|
|
6848
|
-
this.errorMessage = this.setErrorMessage();
|
|
6817
|
+
this.updateValidity();
|
|
6849
6818
|
this.validityStateHandler({ valid: this.isValid, name: this.name });
|
|
6850
6819
|
};
|
|
6851
6820
|
this.setClientStyling = () => {
|
|
@@ -6876,10 +6845,11 @@ const TextInput = class {
|
|
|
6876
6845
|
if (newValue) {
|
|
6877
6846
|
this.value = newValue;
|
|
6878
6847
|
requestAnimationFrame(() => {
|
|
6879
|
-
|
|
6880
|
-
|
|
6848
|
+
const { isValid, errorMessage } = this.validate();
|
|
6849
|
+
this.isValid = isValid;
|
|
6850
|
+
if (!isValid && !this.touched) {
|
|
6881
6851
|
this.touched = true;
|
|
6882
|
-
this.errorMessage =
|
|
6852
|
+
this.errorMessage = errorMessage;
|
|
6883
6853
|
}
|
|
6884
6854
|
});
|
|
6885
6855
|
}
|
|
@@ -6915,15 +6885,13 @@ const TextInput = class {
|
|
|
6915
6885
|
if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
|
|
6916
6886
|
this.duplicateInputValue = event.detail.value;
|
|
6917
6887
|
if (this.touched) {
|
|
6918
|
-
this.
|
|
6919
|
-
this.errorMessage = this.setErrorMessage();
|
|
6888
|
+
this.updateValidity();
|
|
6920
6889
|
}
|
|
6921
6890
|
}
|
|
6922
6891
|
if (this.name === event.detail.name + 'Duplicate'
|
|
6923
6892
|
&& this.name.replace('Duplicate', '') === event.detail.name
|
|
6924
6893
|
&& this.touched === true) {
|
|
6925
|
-
this.
|
|
6926
|
-
this.errorMessage = this.setErrorMessage();
|
|
6894
|
+
this.updateValidity();
|
|
6927
6895
|
}
|
|
6928
6896
|
}
|
|
6929
6897
|
handleValidationChange(event) {
|
|
@@ -6931,15 +6899,10 @@ const TextInput = class {
|
|
|
6931
6899
|
return;
|
|
6932
6900
|
}
|
|
6933
6901
|
this.validation = event.detail.validation;
|
|
6934
|
-
this.validationPattern = this.setPattern();
|
|
6935
6902
|
if (this.touched) {
|
|
6936
|
-
this.
|
|
6937
|
-
this.errorMessage = this.setErrorMessage();
|
|
6903
|
+
this.updateValidity();
|
|
6938
6904
|
}
|
|
6939
6905
|
}
|
|
6940
|
-
connectedCallback() {
|
|
6941
|
-
this.validationPattern = this.setPattern();
|
|
6942
|
-
}
|
|
6943
6906
|
componentDidRender() {
|
|
6944
6907
|
// start custom styling area
|
|
6945
6908
|
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
@@ -6956,7 +6919,7 @@ const TextInput = class {
|
|
|
6956
6919
|
this.validation.minLength &&
|
|
6957
6920
|
this.inputReference.value.length < this.validation.minLength) {
|
|
6958
6921
|
this.touched = true;
|
|
6959
|
-
this.errorMessage = this.
|
|
6922
|
+
this.errorMessage = this.validate().errorMessage;
|
|
6960
6923
|
}
|
|
6961
6924
|
}
|
|
6962
6925
|
componentDidLoad() {
|
|
@@ -6967,54 +6930,40 @@ const TextInput = class {
|
|
|
6967
6930
|
this.touched = true;
|
|
6968
6931
|
}
|
|
6969
6932
|
}
|
|
6970
|
-
this.isValid = this.
|
|
6933
|
+
this.isValid = this.validate().isValid;
|
|
6971
6934
|
}
|
|
6972
|
-
|
|
6973
|
-
|
|
6974
|
-
|
|
6975
|
-
|
|
6935
|
+
updateValidity() {
|
|
6936
|
+
const { isValid, errorMessage } = this.validate();
|
|
6937
|
+
this.isValid = isValid;
|
|
6938
|
+
this.errorMessage = errorMessage;
|
|
6939
|
+
}
|
|
6940
|
+
validate() {
|
|
6941
|
+
var _a;
|
|
6976
6942
|
if (!this.inputReference) {
|
|
6977
|
-
return false;
|
|
6943
|
+
return { isValid: false, errorMessage: '' };
|
|
6978
6944
|
}
|
|
6979
6945
|
const inputValue = this.inputReference.value;
|
|
6980
|
-
const inputIsValid = this.inputReference.validity.valid;
|
|
6981
|
-
const inputMatchValidation = !inputValue
|
|
6982
|
-
|| (this.validationPattern.length > 0 ? this.validationPattern.some((pattern) => inputValue.match(pattern) !== null) : true);
|
|
6983
|
-
// Fallback: if HTML5 says valid but minlength constraint not met, it's invalid
|
|
6984
|
-
const isTooShort = this.validation.minLength && inputValue.length > 0 && inputValue.length < this.validation.minLength;
|
|
6985
|
-
return !isTooShort && inputIsValid && inputMatchValidation;
|
|
6986
|
-
}
|
|
6987
|
-
setPattern() {
|
|
6988
|
-
const custom = this.validation.custom;
|
|
6989
|
-
if (!(custom === null || custom === void 0 ? void 0 : custom.length))
|
|
6990
|
-
return [];
|
|
6991
|
-
return custom
|
|
6992
|
-
.filter(v => v.rule === 'regex')
|
|
6993
|
-
.map(v => v.pattern);
|
|
6994
|
-
}
|
|
6995
|
-
setErrorMessage() {
|
|
6996
|
-
var _a, _b;
|
|
6997
|
-
const inputValue = this.inputReference.value;
|
|
6998
6946
|
if (this.inputReference.validity.valueMissing) {
|
|
6999
|
-
return generalInputHsl.translate('requiredError', this.language);
|
|
6947
|
+
return { isValid: false, errorMessage: generalInputHsl.translate('requiredError', this.language) };
|
|
7000
6948
|
}
|
|
7001
6949
|
// Check length manually (fallback for HTML5 validation API issues)
|
|
7002
6950
|
const isTooShort = this.validation.minLength && inputValue.length > 0 && inputValue.length < this.validation.minLength;
|
|
7003
6951
|
const isTooLong = this.validation.maxLength && inputValue.length > this.validation.maxLength;
|
|
7004
6952
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong || isTooShort || isTooLong) {
|
|
7005
|
-
return
|
|
6953
|
+
return {
|
|
6954
|
+
isValid: false,
|
|
6955
|
+
errorMessage: generalInputHsl.translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } })
|
|
6956
|
+
};
|
|
7006
6957
|
}
|
|
7007
|
-
const
|
|
7008
|
-
|
|
7009
|
-
|
|
7010
|
-
const { errorKey: errorCode, errorMessage } = this.validation.custom.find(customValidation => customValidation.rule === 'regex');
|
|
7011
|
-
return generalInputHsl.translate(`${errorCode}`, this.language) || errorMessage;
|
|
6958
|
+
const failedRegexRule = inputValue ? getFailedRegexRule(inputValue, this.validation.custom) : undefined;
|
|
6959
|
+
if (failedRegexRule) {
|
|
6960
|
+
return { isValid: false, errorMessage: getRuleErrorMessage(failedRegexRule, this.language) };
|
|
7012
6961
|
}
|
|
7013
6962
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
7014
|
-
const
|
|
7015
|
-
|
|
7016
|
-
return generalInputHsl.translate(`${errorCode}`, this.language) ? generalInputHsl.translate(`${errorCode}`, this.language) : errorMessage;
|
|
6963
|
+
const duplicateRule = (_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.find(customRule => customRule.rule === 'duplicate-input');
|
|
6964
|
+
return { isValid: false, errorMessage: duplicateRule ? getRuleErrorMessage(duplicateRule, this.language) : '' };
|
|
7017
6965
|
}
|
|
6966
|
+
return { isValid: this.inputReference.validity.valid, errorMessage: '' };
|
|
7018
6967
|
}
|
|
7019
6968
|
renderTooltip() {
|
|
7020
6969
|
if (this.showTooltip) {
|
|
@@ -7027,8 +6976,8 @@ const TextInput = class {
|
|
|
7027
6976
|
if (this.touched) {
|
|
7028
6977
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
7029
6978
|
}
|
|
7030
|
-
return index.h("div", { key: '
|
|
7031
|
-
index.h("img", { key: '
|
|
6979
|
+
return index.h("div", { key: '206f2e3c3cf18b4405c07be422bb6173ac3a2ac2', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'b6aa572d3f984a386a850b3f968a674eb94f7816', class: 'text__wrapper--flex' }, index.h("label", { key: '7fba5554aac3af6444225cb6da166276470dba50', class: `text__label ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '9677b43f2f5e185e4d7fcfe007dd73a16d50876b', class: 'text__wrapper--relative' }, this.tooltip &&
|
|
6980
|
+
index.h("img", { key: '69360ef5dd851cf64110f82189c2a27f99c843f8', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '46b8d857acfb2d4fdd874984f555fc4457b7d53f', 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: '5db72a6b2c969e3af37eaf03ce3a77524a5f25d2', class: 'text__error-message' }, this.errorMessage));
|
|
7032
6981
|
}
|
|
7033
6982
|
static get watchers() { return {
|
|
7034
6983
|
"defaultValue": ["handleDefaultValueChange"],
|
|
@@ -7157,7 +7106,6 @@ const TwofaInput = class {
|
|
|
7157
7106
|
this.sendValidityState = index.createEvent(this, "sendValidityState", 7);
|
|
7158
7107
|
this.sendInputValue = index.createEvent(this, "sendInputValue", 7);
|
|
7159
7108
|
this.resendCode = index.createEvent(this, "resendCode", 7);
|
|
7160
|
-
this.validationPattern = '';
|
|
7161
7109
|
this.stylingContainer = null;
|
|
7162
7110
|
this.tooltipReference = null;
|
|
7163
7111
|
this.tooltipIconReference = null;
|
|
@@ -7216,8 +7164,7 @@ const TwofaInput = class {
|
|
|
7216
7164
|
if (nextInput) {
|
|
7217
7165
|
nextInput.focus();
|
|
7218
7166
|
}
|
|
7219
|
-
this.
|
|
7220
|
-
this.setErrorMessage();
|
|
7167
|
+
this.updateValidity();
|
|
7221
7168
|
};
|
|
7222
7169
|
this.setClientStyling = () => {
|
|
7223
7170
|
let sheet = document.createElement('style');
|
|
@@ -7270,7 +7217,6 @@ const TwofaInput = class {
|
|
|
7270
7217
|
}
|
|
7271
7218
|
}
|
|
7272
7219
|
connectedCallback() {
|
|
7273
|
-
this.validationPattern = this.setPattern();
|
|
7274
7220
|
this.code = new Array(this.validation.maxLength).fill('');
|
|
7275
7221
|
}
|
|
7276
7222
|
componentDidRender() {
|
|
@@ -7282,7 +7228,7 @@ const TwofaInput = class {
|
|
|
7282
7228
|
}
|
|
7283
7229
|
}
|
|
7284
7230
|
componentDidLoad() {
|
|
7285
|
-
this.
|
|
7231
|
+
this.isValid = this.validate().isValid;
|
|
7286
7232
|
}
|
|
7287
7233
|
handleKeyDown(e, idx) {
|
|
7288
7234
|
if (e.key === 'Backspace') {
|
|
@@ -7295,8 +7241,7 @@ const TwofaInput = class {
|
|
|
7295
7241
|
prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
|
|
7296
7242
|
}
|
|
7297
7243
|
}
|
|
7298
|
-
this.
|
|
7299
|
-
this.setErrorMessage();
|
|
7244
|
+
this.updateValidity();
|
|
7300
7245
|
}
|
|
7301
7246
|
handlePaste(e) {
|
|
7302
7247
|
var _a;
|
|
@@ -7315,33 +7260,20 @@ const TwofaInput = class {
|
|
|
7315
7260
|
if (lastInput) {
|
|
7316
7261
|
lastInput.focus();
|
|
7317
7262
|
}
|
|
7318
|
-
this.
|
|
7319
|
-
this.setErrorMessage();
|
|
7263
|
+
this.updateValidity();
|
|
7320
7264
|
}
|
|
7321
|
-
|
|
7265
|
+
validate() {
|
|
7322
7266
|
const code = this.code.join('');
|
|
7323
|
-
const
|
|
7324
|
-
|
|
7325
|
-
|
|
7326
|
-
|
|
7327
|
-
|
|
7328
|
-
var _a, _b;
|
|
7329
|
-
if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
7330
|
-
return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
|
|
7331
|
-
}
|
|
7267
|
+
const failedRule = getFailedRegexRule(code, this.validation.custom);
|
|
7268
|
+
return {
|
|
7269
|
+
isValid: code.length === this.validation.maxLength && !failedRule,
|
|
7270
|
+
errorMessage: failedRule ? getRuleErrorMessage(failedRule, this.language) : ''
|
|
7271
|
+
};
|
|
7332
7272
|
}
|
|
7333
|
-
|
|
7334
|
-
|
|
7335
|
-
|
|
7336
|
-
|
|
7337
|
-
const errorKey = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
7338
|
-
if (errorKey) {
|
|
7339
|
-
this.errorMessage = generalInputHsl.translate(errorKey, this.language);
|
|
7340
|
-
}
|
|
7341
|
-
}
|
|
7342
|
-
else {
|
|
7343
|
-
this.errorMessage = '';
|
|
7344
|
-
}
|
|
7273
|
+
updateValidity() {
|
|
7274
|
+
const { isValid, errorMessage } = this.validate();
|
|
7275
|
+
this.isValid = isValid;
|
|
7276
|
+
this.errorMessage = errorMessage;
|
|
7345
7277
|
}
|
|
7346
7278
|
renderTooltip() {
|
|
7347
7279
|
if (this.showTooltip) {
|
|
@@ -7350,9 +7282,9 @@ const TwofaInput = class {
|
|
|
7350
7282
|
return null;
|
|
7351
7283
|
}
|
|
7352
7284
|
render() {
|
|
7353
|
-
return (index.h("div", { key: '
|
|
7285
|
+
return (index.h("div", { key: '31164396a440bde033871a5cbf651546895d8c3d', class: "twofa" }, index.h("div", { key: 'cc50746fb709c3853cd11fd13c68be93efd811b4', class: 'twofa__error-message' }, index.h("p", { key: '4a34b178dd4b018daf81ee654f91f79813f801db' }, this.errorMessage)), index.h("div", { key: '0ac2a794fcb27deb3f40b87fe4758e19e35b53b2', class: "twofa__description", innerHTML: generalInputHsl.translate('twofaDescription', this.language, { values: { destination: this.destination } }) }), index.h("div", { key: '69fdbfc5be1af6fab8b386179eaa25ea181aec3a', class: "twofa__input-wrapper", ref: this.setContainerRef }, this.code.map((char, idx) => {
|
|
7354
7286
|
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) }));
|
|
7355
|
-
})), index.h("div", { key: '
|
|
7287
|
+
})), index.h("div", { key: '9a9f50ed47da2204cd31a27939d18b42011a1114', class: "twofa__button-wrapper" }, index.h("p", { key: 'ad90ba428278f90a05f706c67452551f3c75a199', class: "twofa__resend-message" }, generalInputHsl.translate('twofaResendMessage', this.language)), index.h("button", { key: 'cead0e523e873c20dd21982e318b1e37998480b8', class: "twofa__resend-button", onClick: this.resendCodeHandler, disabled: !this.isResendButtonAvailable }, this.isResendButtonAvailable
|
|
7356
7288
|
? generalInputHsl.translate('twofaResendButton', this.language)
|
|
7357
7289
|
: this.formatTime()))));
|
|
7358
7290
|
}
|