@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
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
+
import { getFailedRegexRule, getRuleErrorMessage } from "../../utils/utils";
|
|
3
4
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
5
|
export class EmailInput {
|
|
5
6
|
constructor() {
|
|
6
|
-
this.validationPattern = '';
|
|
7
7
|
this.touched = false;
|
|
8
8
|
this.handleInput = (event) => {
|
|
9
9
|
this.value = event.target.value;
|
|
@@ -12,14 +12,12 @@ export class EmailInput {
|
|
|
12
12
|
clearTimeout(this.debounceTime);
|
|
13
13
|
}
|
|
14
14
|
this.debounceTime = setTimeout(() => {
|
|
15
|
-
this.
|
|
16
|
-
this.errorMessage = this.setErrorMessage();
|
|
15
|
+
this.updateValidity();
|
|
17
16
|
this.emitValueHandler(true);
|
|
18
17
|
}, 500);
|
|
19
18
|
};
|
|
20
19
|
this.handleBlur = () => {
|
|
21
|
-
this.
|
|
22
|
-
this.errorMessage = this.setErrorMessage();
|
|
20
|
+
this.updateValidity();
|
|
23
21
|
this.touched = true;
|
|
24
22
|
};
|
|
25
23
|
this.setClientStyling = () => {
|
|
@@ -77,9 +75,6 @@ export class EmailInput {
|
|
|
77
75
|
}
|
|
78
76
|
}
|
|
79
77
|
}
|
|
80
|
-
connectedCallback() {
|
|
81
|
-
this.validationPattern = this.setPattern();
|
|
82
|
-
}
|
|
83
78
|
componentDidRender() {
|
|
84
79
|
// start custom styling area
|
|
85
80
|
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
@@ -90,39 +85,39 @@ export class EmailInput {
|
|
|
90
85
|
// end custom styling area
|
|
91
86
|
}
|
|
92
87
|
componentDidLoad() {
|
|
93
|
-
this.isValid = this.
|
|
88
|
+
this.isValid = this.validate().isValid;
|
|
94
89
|
if (this.defaultValue) {
|
|
95
90
|
this.value = this.defaultValue;
|
|
96
91
|
this.valueHandler({ name: this.name, value: this.value });
|
|
97
92
|
}
|
|
98
93
|
}
|
|
99
|
-
|
|
100
|
-
|
|
94
|
+
updateValidity() {
|
|
95
|
+
const { isValid, errorMessage } = this.validate();
|
|
96
|
+
this.isValid = isValid;
|
|
97
|
+
this.errorMessage = errorMessage;
|
|
101
98
|
}
|
|
102
|
-
|
|
99
|
+
validate() {
|
|
103
100
|
var _a, _b;
|
|
104
|
-
if (
|
|
105
|
-
return
|
|
101
|
+
if (!this.inputReference) {
|
|
102
|
+
return { isValid: false, errorMessage: '' };
|
|
106
103
|
}
|
|
107
|
-
}
|
|
108
|
-
setErrorMessage() {
|
|
109
|
-
var _a, _b, _c, _d;
|
|
110
104
|
if (this.inputReference.validity.valueMissing) {
|
|
111
|
-
return translate('requiredError', this.language);
|
|
105
|
+
return { isValid: false, errorMessage: translate('requiredError', this.language) };
|
|
112
106
|
}
|
|
113
107
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
114
|
-
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
108
|
+
return { isValid: false, errorMessage: translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
|
|
115
109
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
return
|
|
110
|
+
const inputValue = this.inputReference.value;
|
|
111
|
+
const failedRegexRule = inputValue ? getFailedRegexRule(inputValue, this.validation.custom) : undefined;
|
|
112
|
+
if (failedRegexRule) {
|
|
113
|
+
return { isValid: false, errorMessage: getRuleErrorMessage(failedRegexRule, this.language) };
|
|
120
114
|
}
|
|
121
115
|
if (this.isDuplicateInput && this.duplicateInputValue !== this.value) {
|
|
122
|
-
const errorCode = (
|
|
123
|
-
const errorMessage = (
|
|
124
|
-
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
116
|
+
const errorCode = (_a = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
117
|
+
const errorMessage = (_b = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
118
|
+
return { isValid: false, errorMessage: translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage };
|
|
125
119
|
}
|
|
120
|
+
return { isValid: this.inputReference.validity.valid, errorMessage: '' };
|
|
126
121
|
}
|
|
127
122
|
renderTooltip() {
|
|
128
123
|
if (this.showTooltip) {
|
|
@@ -135,8 +130,8 @@ export class EmailInput {
|
|
|
135
130
|
if (this.touched) {
|
|
136
131
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
137
132
|
}
|
|
138
|
-
return h("div", { key: '
|
|
139
|
-
h("img", { key: '
|
|
133
|
+
return h("div", { key: 'ff5657194151b872247fd966bc8dc7ab53f715de', class: `email__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '8dc84da8787a50232fda2c113cf838598525a550', class: 'email__wrapper--flex' }, h("label", { key: 'b42e56122de79d841d99e183c6ed818a74c22020', class: `email__label ${this.validation.mandatory ? 'email__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7f09b2b675b28eebcd1e913b0cbdd43feb83b567', class: 'email__wrapper--relative' }, this.tooltip &&
|
|
134
|
+
h("img", { key: '64c6c3565b60480d279a434f87efa36625da934b', class: 'email__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '2d72cdde55c1a6b041bb37a1b5a2f3e1c17b558a', class: 'email__error-message' }, this.errorMessage));
|
|
140
135
|
}
|
|
141
136
|
static get is() { return "email-input"; }
|
|
142
137
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
+
import { getFailedRegexRule, getRuleErrorMessage } from "../../utils/utils";
|
|
3
4
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
5
|
export class NumberInput {
|
|
5
6
|
constructor() {
|
|
6
|
-
this.validationPattern = '';
|
|
7
7
|
this.touched = false;
|
|
8
8
|
this.handleInput = (event) => {
|
|
9
9
|
this.value = event.target.value;
|
|
@@ -12,14 +12,12 @@ export class NumberInput {
|
|
|
12
12
|
clearTimeout(this.debounceTime);
|
|
13
13
|
}
|
|
14
14
|
this.debounceTime = setTimeout(() => {
|
|
15
|
-
this.
|
|
16
|
-
this.errorMessage = this.setErrorMessage();
|
|
15
|
+
this.updateValidity();
|
|
17
16
|
this.emitValueHandler(true);
|
|
18
17
|
}, 500);
|
|
19
18
|
};
|
|
20
19
|
this.handleBlur = () => {
|
|
21
|
-
this.
|
|
22
|
-
this.errorMessage = this.setErrorMessage();
|
|
20
|
+
this.updateValidity();
|
|
23
21
|
this.touched = true;
|
|
24
22
|
};
|
|
25
23
|
this.setClientStyling = () => {
|
|
@@ -69,9 +67,6 @@ export class NumberInput {
|
|
|
69
67
|
this.showTooltip = false;
|
|
70
68
|
}
|
|
71
69
|
}
|
|
72
|
-
connectedCallback() {
|
|
73
|
-
this.validationPattern = this.setPattern();
|
|
74
|
-
}
|
|
75
70
|
componentDidRender() {
|
|
76
71
|
// start custom styling area
|
|
77
72
|
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
@@ -82,34 +77,33 @@ export class NumberInput {
|
|
|
82
77
|
// end custom styling area
|
|
83
78
|
}
|
|
84
79
|
componentDidLoad() {
|
|
85
|
-
this.isValid = this.
|
|
80
|
+
this.isValid = this.validate().isValid;
|
|
86
81
|
if (this.defaultValue) {
|
|
87
82
|
this.value = this.defaultValue;
|
|
88
83
|
this.valueHandler({ name: this.name, value: this.value });
|
|
89
84
|
}
|
|
90
85
|
}
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
updateValidity() {
|
|
87
|
+
const { isValid, errorMessage } = this.validate();
|
|
88
|
+
this.isValid = isValid;
|
|
89
|
+
this.errorMessage = errorMessage;
|
|
93
90
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
|
|
91
|
+
validate() {
|
|
92
|
+
if (!this.inputReference) {
|
|
93
|
+
return { isValid: false, errorMessage: '' };
|
|
98
94
|
}
|
|
99
|
-
}
|
|
100
|
-
setErrorMessage() {
|
|
101
|
-
var _a, _b;
|
|
102
95
|
if (this.inputReference.validity.valueMissing) {
|
|
103
|
-
return translate('requiredError', this.language);
|
|
96
|
+
return { isValid: false, errorMessage: translate('requiredError', this.language) };
|
|
104
97
|
}
|
|
105
98
|
if (this.inputReference.validity.rangeUnderflow || this.inputReference.validity.rangeOverflow) {
|
|
106
|
-
return translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } });
|
|
99
|
+
return { isValid: false, errorMessage: translate('numberLengthError', this.language, { values: { min: this.validation.min, max: this.validation.max } }) };
|
|
107
100
|
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
return
|
|
101
|
+
const value = this.inputReference.value;
|
|
102
|
+
const failedRule = value ? getFailedRegexRule(value, this.validation.custom) : undefined;
|
|
103
|
+
if (failedRule) {
|
|
104
|
+
return { isValid: false, errorMessage: getRuleErrorMessage(failedRule, this.language) };
|
|
112
105
|
}
|
|
106
|
+
return { isValid: this.inputReference.validity.valid, errorMessage: '' };
|
|
113
107
|
}
|
|
114
108
|
renderTooltip() {
|
|
115
109
|
if (this.showTooltip) {
|
|
@@ -122,8 +116,8 @@ export class NumberInput {
|
|
|
122
116
|
if (this.touched) {
|
|
123
117
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
124
118
|
}
|
|
125
|
-
return h("div", { key: '
|
|
126
|
-
h("img", { key: '
|
|
119
|
+
return h("div", { key: 'edc8799baa52418673dcfccb82b1ff9d86159787', class: `number__wrapper ${this.autofilled ? 'number__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9d6313a06ff4fcd1174879745d48d37ac63c64a5', class: 'number__wrapper--flex' }, h("label", { key: '404af2d79da04a3156ebce45aae6d06ea21b5dc1', class: `number__label ${this.validation.mandatory ? 'number__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '349120e9587af42941de2fd2405dc0b9b763372f', class: 'number__wrapper--relative' }, this.tooltip &&
|
|
120
|
+
h("img", { key: '652d145a6a794f0e8370641d3f7fb28099603d62', class: 'number__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '87e3e5afb6c790f9c57d79bdf0e12a897b10d799', class: 'number__error-message' }, this.errorMessage));
|
|
127
121
|
}
|
|
128
122
|
static get is() { return "number-input"; }
|
|
129
123
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
+
import { getRuleErrorMessage } from "../../utils/utils";
|
|
3
4
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
5
|
export class PasswordInput {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.touched = false;
|
|
7
8
|
this.originalValid = false;
|
|
8
|
-
this.validationPattern = '';
|
|
9
9
|
this.duplicateInputValue = null;
|
|
10
10
|
this.handleInput = (event) => {
|
|
11
11
|
this.value = event.target.value;
|
|
@@ -16,8 +16,7 @@ export class PasswordInput {
|
|
|
16
16
|
clearTimeout(this.debounceTime);
|
|
17
17
|
}
|
|
18
18
|
this.debounceTime = setTimeout(() => {
|
|
19
|
-
this.
|
|
20
|
-
this.errorMessage = this.setErrorMessage();
|
|
19
|
+
this.updateValidity();
|
|
21
20
|
this.emitValueHandler(true);
|
|
22
21
|
}, 500);
|
|
23
22
|
};
|
|
@@ -29,8 +28,7 @@ export class PasswordInput {
|
|
|
29
28
|
this.value = event.target.value;
|
|
30
29
|
this.showPopup = false;
|
|
31
30
|
this.touched = true;
|
|
32
|
-
this.
|
|
33
|
-
this.errorMessage = this.setErrorMessage();
|
|
31
|
+
this.updateValidity();
|
|
34
32
|
};
|
|
35
33
|
this.handleFocus = () => {
|
|
36
34
|
this.showPopup = true;
|
|
@@ -75,7 +73,7 @@ export class PasswordInput {
|
|
|
75
73
|
if (!this.isDuplicateInput) {
|
|
76
74
|
// recalculate complexity immediately in order to send the correct validity to the duplicate
|
|
77
75
|
this.calculateComplexity(this.value);
|
|
78
|
-
this.sendOriginalValidityState.emit({ name: this.name, valid: this.
|
|
76
|
+
this.sendOriginalValidityState.emit({ name: this.name, valid: this.validate().isValid });
|
|
79
77
|
}
|
|
80
78
|
}
|
|
81
79
|
emitValueHandler(newValue) {
|
|
@@ -93,13 +91,13 @@ export class PasswordInput {
|
|
|
93
91
|
if (this.isDuplicateInput) {
|
|
94
92
|
if (event.detail.valid) {
|
|
95
93
|
this.originalValid = true;
|
|
96
|
-
this.isValid = this.
|
|
94
|
+
this.isValid = this.validate().isValid;
|
|
97
95
|
}
|
|
98
96
|
else {
|
|
99
97
|
this.originalValid = false;
|
|
100
98
|
this.isValid = false;
|
|
101
99
|
// only show error if the user has touched the input, in order to not show errors on empty inputs
|
|
102
|
-
this.value !== '' && (this.errorMessage = this.
|
|
100
|
+
this.value !== '' && (this.errorMessage = this.validate().errorMessage);
|
|
103
101
|
}
|
|
104
102
|
}
|
|
105
103
|
}
|
|
@@ -107,15 +105,13 @@ export class PasswordInput {
|
|
|
107
105
|
if (this.isDuplicateInput && this.name === event.detail.name + 'Duplicate') {
|
|
108
106
|
this.duplicateInputValue = event.detail.value;
|
|
109
107
|
if (this.touched) {
|
|
110
|
-
this.
|
|
111
|
-
this.errorMessage = this.setErrorMessage();
|
|
108
|
+
this.updateValidity();
|
|
112
109
|
}
|
|
113
110
|
}
|
|
114
111
|
if (this.name === event.detail.name + 'Duplicate'
|
|
115
112
|
&& this.name.replace('Duplicate', '') === event.detail.name
|
|
116
113
|
&& this.touched === true) {
|
|
117
|
-
this.
|
|
118
|
-
this.errorMessage = this.setErrorMessage();
|
|
114
|
+
this.updateValidity();
|
|
119
115
|
}
|
|
120
116
|
}
|
|
121
117
|
handleClickOutside(event) {
|
|
@@ -149,7 +145,7 @@ export class PasswordInput {
|
|
|
149
145
|
this.touched = true;
|
|
150
146
|
}
|
|
151
147
|
}
|
|
152
|
-
this.isValid = this.
|
|
148
|
+
this.isValid = this.validate().isValid;
|
|
153
149
|
}
|
|
154
150
|
disconnectedCallback() {
|
|
155
151
|
this.passwordButton.removeEventListener('click', this.handleRevealField);
|
|
@@ -163,48 +159,36 @@ export class PasswordInput {
|
|
|
163
159
|
return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
|
|
164
160
|
});
|
|
165
161
|
}
|
|
166
|
-
|
|
162
|
+
validate() {
|
|
167
163
|
var _a, _b;
|
|
168
|
-
if (this.
|
|
169
|
-
return false;
|
|
164
|
+
if (!this.inputReference) {
|
|
165
|
+
return { isValid: false, errorMessage: '' };
|
|
170
166
|
}
|
|
171
|
-
|
|
172
|
-
|
|
167
|
+
const validity = this.inputReference.validity;
|
|
168
|
+
const duplicateMismatch = this.isDuplicateInput && this.duplicateInputValue !== this.value;
|
|
169
|
+
const complexityPassed = !!((_a = this.passwordComplexity) === null || _a === void 0 ? void 0 : _a.every(complexity => complexity.passed));
|
|
170
|
+
if (validity.tooShort || validity.tooLong) {
|
|
171
|
+
return { isValid: false, errorMessage: translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
|
|
173
172
|
}
|
|
174
|
-
|
|
175
|
-
return (
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
setPattern() {
|
|
179
|
-
var _a, _b;
|
|
180
|
-
if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
181
|
-
return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
setErrorMessage() {
|
|
185
|
-
var _a, _b, _c, _d, _e;
|
|
186
|
-
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
187
|
-
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
188
|
-
}
|
|
189
|
-
if (this.inputReference.validity.valueMissing) {
|
|
190
|
-
return translate('requiredError', this.language);
|
|
173
|
+
if (validity.valueMissing) {
|
|
174
|
+
return { isValid: false, errorMessage: translate('requiredError', this.language) };
|
|
191
175
|
}
|
|
192
176
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
193
|
-
return translate('invalidOriginalPasswordError', this.language);
|
|
177
|
+
return { isValid: false, errorMessage: translate('invalidOriginalPasswordError', this.language) };
|
|
194
178
|
}
|
|
195
|
-
if (
|
|
196
|
-
const
|
|
197
|
-
|
|
198
|
-
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
179
|
+
if (duplicateMismatch) {
|
|
180
|
+
const duplicateRule = (_b = this.validation.custom) === null || _b === void 0 ? void 0 : _b.find(customRule => customRule.rule === 'duplicate-input');
|
|
181
|
+
return { isValid: false, errorMessage: duplicateRule ? getRuleErrorMessage(duplicateRule, this.language) : '' };
|
|
199
182
|
}
|
|
200
|
-
if (
|
|
201
|
-
|
|
202
|
-
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
203
|
-
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
204
|
-
}
|
|
205
|
-
if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed)) && !this.showPopup) {
|
|
206
|
-
return translate('invalidPassword', this.language);
|
|
183
|
+
if (!complexityPassed) {
|
|
184
|
+
return { isValid: false, errorMessage: this.showPopup ? '' : translate('invalidPassword', this.language) };
|
|
207
185
|
}
|
|
186
|
+
return { isValid: validity.valid, errorMessage: '' };
|
|
187
|
+
}
|
|
188
|
+
updateValidity() {
|
|
189
|
+
const { isValid, errorMessage } = this.validate();
|
|
190
|
+
this.isValid = isValid;
|
|
191
|
+
this.errorMessage = errorMessage;
|
|
208
192
|
}
|
|
209
193
|
renderTooltip() {
|
|
210
194
|
if (this.showTooltip) {
|
|
@@ -226,8 +210,8 @@ export class PasswordInput {
|
|
|
226
210
|
if (this.touched) {
|
|
227
211
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
228
212
|
}
|
|
229
|
-
return h("div", { key: '
|
|
230
|
-
h("img", { key: '
|
|
213
|
+
return h("div", { key: '9fd27b840b317bbb224f062c855c4b4a8b94a3a4', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '3d16837c2e10a490fd07ef1c294db1f5732da4ad', class: 'password__wrapper--flex' }, h("label", { key: '09d61fc66912e7a79b83842e4d6d89b851a92afa', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '23f4d60bc9f777d00fd16d2dc78cc7c105307e32', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
214
|
+
h("img", { key: 'db104e01e0f5d5d322b3394f8740cedaaa8b2199', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), 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 }), h("small", { key: '41336c3bd58eba953266b31980ce0677b27405f0', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity && this.showPopup && !this.hidePasswordComplexity && !this.isDuplicateInput && this.renderComplexityPopup());
|
|
231
215
|
}
|
|
232
216
|
static get is() { return "password-input"; }
|
|
233
217
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
|
+
import { getFailedRegexRule, getRuleErrorMessage } from "../../utils/utils";
|
|
3
4
|
import tooltipIcon from "../../utils/tooltipIcon.svg";
|
|
4
5
|
export class TelInput {
|
|
5
6
|
constructor() {
|
|
6
|
-
this.validationPattern = '';
|
|
7
7
|
this.touched = false;
|
|
8
8
|
this.handleInput = (event) => {
|
|
9
9
|
const inputElement = event.target;
|
|
@@ -17,15 +17,13 @@ export class TelInput {
|
|
|
17
17
|
clearTimeout(this.debounceTime);
|
|
18
18
|
}
|
|
19
19
|
this.debounceTime = setTimeout(() => {
|
|
20
|
-
this.
|
|
21
|
-
this.errorMessage = this.setErrorMessage();
|
|
20
|
+
this.updateValidity();
|
|
22
21
|
this.emitValueHandler(true);
|
|
23
22
|
}, 500);
|
|
24
23
|
};
|
|
25
24
|
this.handleBlur = () => {
|
|
26
25
|
if (!this.touched) {
|
|
27
|
-
this.
|
|
28
|
-
this.errorMessage = this.setErrorMessage();
|
|
26
|
+
this.updateValidity();
|
|
29
27
|
this.touched = true;
|
|
30
28
|
}
|
|
31
29
|
};
|
|
@@ -80,7 +78,6 @@ export class TelInput {
|
|
|
80
78
|
}
|
|
81
79
|
}
|
|
82
80
|
connectedCallback() {
|
|
83
|
-
this.validationPattern = this.setPattern();
|
|
84
81
|
if (this.defaultValue) {
|
|
85
82
|
this.prefixValue = this.defaultValue.prefix ? this.defaultValue.prefix : this.defaultValue;
|
|
86
83
|
this.phoneValue = this.defaultValue.phone || null;
|
|
@@ -110,7 +107,7 @@ export class TelInput {
|
|
|
110
107
|
// end custom styling area
|
|
111
108
|
}
|
|
112
109
|
componentDidLoad() {
|
|
113
|
-
this.isValid = this.
|
|
110
|
+
this.isValid = this.validate().isValid;
|
|
114
111
|
if (this.defaultValue) {
|
|
115
112
|
this.value = this.defaultValue;
|
|
116
113
|
this.valueHandler({ name: this.name, value: this.value, type: 'tel' });
|
|
@@ -134,28 +131,27 @@ export class TelInput {
|
|
|
134
131
|
this.value = { prefix: this.prefixValue, phone: this.phoneValue };
|
|
135
132
|
this.emitValueHandler(true);
|
|
136
133
|
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
setPattern() {
|
|
141
|
-
var _a, _b;
|
|
142
|
-
if (((_a = this.validation.custom) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
143
|
-
return (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.pattern;
|
|
134
|
+
validate() {
|
|
135
|
+
if (!this.inputReference) {
|
|
136
|
+
return { isValid: false, errorMessage: '' };
|
|
144
137
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
150
|
-
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
151
|
-
return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
|
|
138
|
+
const value = this.inputReference.value;
|
|
139
|
+
const failedRule = value ? getFailedRegexRule(value, this.validation.custom) : undefined;
|
|
140
|
+
if (failedRule) {
|
|
141
|
+
return { isValid: false, errorMessage: getRuleErrorMessage(failedRule, this.language) };
|
|
152
142
|
}
|
|
153
143
|
if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
|
|
154
|
-
return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
144
|
+
return { isValid: false, errorMessage: translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } }) };
|
|
155
145
|
}
|
|
156
146
|
if (this.inputReference.validity.valueMissing) {
|
|
157
|
-
return translate('requiredError', this.language);
|
|
147
|
+
return { isValid: false, errorMessage: translate('requiredError', this.language) };
|
|
158
148
|
}
|
|
149
|
+
return { isValid: this.inputReference.validity.valid, errorMessage: '' };
|
|
150
|
+
}
|
|
151
|
+
updateValidity() {
|
|
152
|
+
const { isValid, errorMessage } = this.validate();
|
|
153
|
+
this.isValid = isValid;
|
|
154
|
+
this.errorMessage = errorMessage;
|
|
159
155
|
}
|
|
160
156
|
renderTooltip() {
|
|
161
157
|
if (this.showTooltip) {
|
|
@@ -168,8 +164,8 @@ export class TelInput {
|
|
|
168
164
|
if (this.touched) {
|
|
169
165
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
170
166
|
}
|
|
171
|
-
return h("div", { key: '
|
|
172
|
-
h("img", { key: '
|
|
167
|
+
return h("div", { key: '78ddea111a011a7c75df7a6f7101aafccbaff4a1', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '9dcd9723ed26de04630a8a174e902a629bc9347c', class: 'tel__wrapper--flex-label' }, h("label", { key: '597e8a28990f12e1183fdeb315e176af970d4104', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '86c147c124468d06bffdf8359c7f404cbe897c15', class: 'tel__wrapper--relative' }, this.tooltip &&
|
|
168
|
+
h("img", { key: '0d2b528570401361087bf0438493a96a3450e40c', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'd82808bbc28c720ae4cff45fd1d0df88ca320029', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '73805b42a6b40d901e6367e45e4d6d1ff2288082', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), 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 })), h("small", { key: '296651863f2d6fcf31eb21f2d83b7df505d59833', class: 'tel__error-message' }, this.errorMessage));
|
|
173
169
|
}
|
|
174
170
|
static get is() { return "tel-input"; }
|
|
175
171
|
static get encapsulation() { return "shadow"; }
|