@everymatrix/general-input 1.90.24 → 1.90.25

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.
Files changed (6) hide show
  1. package/dist/cjs/checkbox-group-input_14.cjs.entry.js +95 -44
  2. package/dist/collection/components/tel-input/tel-input.js +95 -44
  3. package/dist/esm/checkbox-group-input_14.entry.js +95 -44
  4. package/dist/general-input/checkbox-group-input_14.entry.js +22 -22
  5. package/dist/types/components/tel-input/tel-input.d.ts +8 -0
  6. package/package.json +1 -1
package/dist/cjs/checkbox-group-input_14.cjs.entry.js CHANGED
@@ -14446,6 +14446,7 @@ const TelInput = class {
14446
14446
  }
14447
14447
  this.debounceTime = setTimeout(() => {
14448
14448
  this.isValid = this.isValidValue();
14449
+ this.applyCustomError();
14449
14450
  this.errorMessage = this.setErrorMessage();
14450
14451
  this.emitValueHandler(true);
14451
14452
  }, 500);
@@ -14453,6 +14454,7 @@ const TelInput = class {
14453
14454
  this.handleBlur = () => {
14454
14455
  this.touched = true;
14455
14456
  this.isValid = this.isValidValue();
14457
+ this.applyCustomError();
14456
14458
  this.errorMessage = this.setErrorMessage();
14457
14459
  };
14458
14460
  this.name = undefined;
@@ -14510,6 +14512,60 @@ const TelInput = class {
14510
14512
  this.showTooltip = false;
14511
14513
  }
14512
14514
  }
14515
+ resetValidationState() {
14516
+ this.lastCustomErrorKey = undefined;
14517
+ this.lastCustomErrorMessage = undefined;
14518
+ this.inputReference.setCustomValidity('');
14519
+ }
14520
+ isMissingValue(value) {
14521
+ return this.validation.mandatory && value === '';
14522
+ }
14523
+ isFixedLength(value) {
14524
+ const min = this.validation.minLength;
14525
+ const max = this.validation.maxLength;
14526
+ return !!(min && max && min === max && value.length !== min);
14527
+ }
14528
+ isTooShort(value) {
14529
+ const min = this.validation.minLength;
14530
+ return !!(min && value.length < min);
14531
+ }
14532
+ isTooLong(value) {
14533
+ const max = this.validation.maxLength;
14534
+ return !!(max && value.length > max);
14535
+ }
14536
+ failsPattern(value) {
14537
+ if (!this.validationPattern)
14538
+ return false;
14539
+ let patternRegex;
14540
+ try {
14541
+ patternRegex = new RegExp(this.validationPattern);
14542
+ }
14543
+ catch (e) {
14544
+ console.warn('Invalid validationPattern:', this.validationPattern, e);
14545
+ return false;
14546
+ }
14547
+ return !patternRegex.test(value);
14548
+ }
14549
+ failsCustomRules(value) {
14550
+ const customs = (this.validation.custom || [])
14551
+ .filter(c => c.rule === 'regex' && c.pattern);
14552
+ // Skip the first rule (already validated in failsPattern)
14553
+ const [, ...additionalRules] = customs;
14554
+ for (const rule of additionalRules) {
14555
+ let regex;
14556
+ try {
14557
+ regex = new RegExp(rule.pattern);
14558
+ }
14559
+ catch (e) {
14560
+ console.warn('Invalid regex pattern:', rule.pattern, e);
14561
+ continue;
14562
+ }
14563
+ if (!regex.test(value)) {
14564
+ return true;
14565
+ }
14566
+ }
14567
+ return false;
14568
+ }
14513
14569
  connectedCallback() {
14514
14570
  var _a;
14515
14571
  this.validationPattern = this.setPattern();
@@ -14572,52 +14628,26 @@ const TelInput = class {
14572
14628
  this.emitValueHandler(true);
14573
14629
  }
14574
14630
  isValidValue() {
14575
- if (!this.inputReference) {
14631
+ var _a, _b;
14632
+ if (!this.inputReference)
14576
14633
  return false;
14577
- }
14578
- this.inputReference.setCustomValidity('');
14579
- this.lastCustomErrorKey = undefined;
14580
- this.lastCustomErrorMessage = undefined;
14581
- if (this.validation.mandatory && (!this.phoneValue || this.phoneValue.trim() === '')) {
14634
+ this.resetValidationState();
14635
+ const value = (_b = (_a = this.phoneValue) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
14636
+ const isEmpty = value === '';
14637
+ if (this.isMissingValue(value))
14582
14638
  return false;
14583
- }
14584
- if (!this.phoneValue || this.phoneValue.trim() === '') {
14585
- return !this.validation.mandatory;
14586
- }
14587
- if (this.validation.minLength && this.phoneValue.length < this.validation.minLength) {
14639
+ if (isEmpty)
14640
+ return true;
14641
+ if (this.isFixedLength(value))
14588
14642
  return false;
14589
- }
14590
- if (this.validation.maxLength && this.phoneValue.length > this.validation.maxLength) {
14643
+ if (this.isTooShort(value))
14644
+ return false;
14645
+ if (this.isTooLong(value))
14646
+ return false;
14647
+ if (this.failsPattern(value))
14648
+ return false;
14649
+ if (this.failsCustomRules(value))
14591
14650
  return false;
14592
- }
14593
- if (this.validationPattern) {
14594
- const patternRegex = new RegExp(this.validationPattern);
14595
- if (!patternRegex.test(this.phoneValue)) {
14596
- return false;
14597
- }
14598
- }
14599
- if (this.enableCustomRegexValidation) {
14600
- const customs = (this.validation.custom || []).filter(c => c.rule === 'regex' && c.pattern);
14601
- if (customs.length > 1) {
14602
- // First regex is used as <input> pattern; validate only the remaining rules here
14603
- const additionalRules = customs.slice(1);
14604
- for (const rule of additionalRules) {
14605
- let regex;
14606
- try {
14607
- regex = new RegExp(rule.pattern);
14608
- }
14609
- catch (_a) {
14610
- continue;
14611
- }
14612
- if (!regex.test(this.phoneValue)) {
14613
- this.lastCustomErrorKey = rule.errorKey;
14614
- this.lastCustomErrorMessage = rule.errorMessage;
14615
- this.inputReference.setCustomValidity('customError');
14616
- return false;
14617
- }
14618
- }
14619
- }
14620
- }
14621
14651
  return true;
14622
14652
  }
14623
14653
  setPattern() {
@@ -14659,6 +14689,27 @@ const TelInput = class {
14659
14689
  return translated ? translated : (this.lastCustomErrorMessage || '');
14660
14690
  }
14661
14691
  }
14692
+ applyCustomError() {
14693
+ const customs = (this.validation.custom || [])
14694
+ .filter(c => c.rule === 'regex' && c.pattern);
14695
+ const [, ...additionalRules] = customs;
14696
+ for (const rule of additionalRules) {
14697
+ let regex;
14698
+ try {
14699
+ regex = new RegExp(rule.pattern);
14700
+ }
14701
+ catch (e) {
14702
+ console.warn('[applyCustomError] invalid regex pattern:', rule.pattern, e);
14703
+ continue;
14704
+ }
14705
+ if (!regex.test(this.phoneValue)) {
14706
+ this.lastCustomErrorKey = rule.errorKey;
14707
+ this.lastCustomErrorMessage = rule.errorMessage;
14708
+ this.inputReference.setCustomValidity('customError');
14709
+ return;
14710
+ }
14711
+ }
14712
+ }
14662
14713
  renderTooltip() {
14663
14714
  if (this.showTooltip) {
14664
14715
  return (index.h("div", { class: `tel__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
@@ -14671,8 +14722,8 @@ const TelInput = class {
14671
14722
  if (this.touched) {
14672
14723
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14673
14724
  }
14674
- return index.h("div", { key: 'e33193abf4094e4dac87b9cb7d95aaaf4bd8827c', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '3978e74f9decf4c6d632268e73507878d3aca0da', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '1b7711f58ab7fc7e48ea6fa889334d64eeb2bfb4', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'a768af0e4a2c07fcf4b996814650493057120697', class: 'tel__wrapper--relative' }, this.tooltip &&
14675
- index.h("img", { key: 'b7f302055d8a4739baa8dece656780fa2183665a', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'd095e9e0666096278466d134e06f2985611f9f4d', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: 'd336c7ee95ad77d513a3d485786d8774f11f91fc', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '5f403eb589e0ae8ee2284d2bd30a60850a33fb20', 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: 'b4f7dca6a67471828af759437927c57ca5a89c99', class: 'tel__error-message' }, this.errorMessage));
14725
+ return index.h("div", { key: '82da44bb2bacec9efb3631e377978d678e766919', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '4ca8d6dde2d3f8e15e2d26d593297519e0c94053', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '3b0e2736fd47537b2ecd80cf49a146992d59474e', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '1577aafc7b68128e91cdfe9ddc563bbad9d7b901', class: 'tel__wrapper--relative' }, this.tooltip &&
14726
+ index.h("img", { key: 'cb6576e1248fc52f937c685d59d994a1d098d7cc', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'a1e9f3c68691fbb61947cd41c0ffddcd124b4bbb', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '9aa33a487f019ee7393e29a0ce0d1836a23f5e09', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '21d69c041b9a5f5f6fb1e6d7b392945cafe99e87', 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: '76febe89ad7ee581eb5fc79658d81123da08ccdd', class: 'tel__error-message' }, this.errorMessage));
14676
14727
  }
14677
14728
  static get watchers() { return {
14678
14729
  "clientStyling": ["handleClientStylingChange"],
package/dist/collection/components/tel-input/tel-input.js CHANGED
@@ -16,6 +16,7 @@ export class TelInput {
16
16
  }
17
17
  this.debounceTime = setTimeout(() => {
18
18
  this.isValid = this.isValidValue();
19
+ this.applyCustomError();
19
20
  this.errorMessage = this.setErrorMessage();
20
21
  this.emitValueHandler(true);
21
22
  }, 500);
@@ -23,6 +24,7 @@ export class TelInput {
23
24
  this.handleBlur = () => {
24
25
  this.touched = true;
25
26
  this.isValid = this.isValidValue();
27
+ this.applyCustomError();
26
28
  this.errorMessage = this.setErrorMessage();
27
29
  };
28
30
  this.name = undefined;
@@ -80,6 +82,60 @@ export class TelInput {
80
82
  this.showTooltip = false;
81
83
  }
82
84
  }
85
+ resetValidationState() {
86
+ this.lastCustomErrorKey = undefined;
87
+ this.lastCustomErrorMessage = undefined;
88
+ this.inputReference.setCustomValidity('');
89
+ }
90
+ isMissingValue(value) {
91
+ return this.validation.mandatory && value === '';
92
+ }
93
+ isFixedLength(value) {
94
+ const min = this.validation.minLength;
95
+ const max = this.validation.maxLength;
96
+ return !!(min && max && min === max && value.length !== min);
97
+ }
98
+ isTooShort(value) {
99
+ const min = this.validation.minLength;
100
+ return !!(min && value.length < min);
101
+ }
102
+ isTooLong(value) {
103
+ const max = this.validation.maxLength;
104
+ return !!(max && value.length > max);
105
+ }
106
+ failsPattern(value) {
107
+ if (!this.validationPattern)
108
+ return false;
109
+ let patternRegex;
110
+ try {
111
+ patternRegex = new RegExp(this.validationPattern);
112
+ }
113
+ catch (e) {
114
+ console.warn('Invalid validationPattern:', this.validationPattern, e);
115
+ return false;
116
+ }
117
+ return !patternRegex.test(value);
118
+ }
119
+ failsCustomRules(value) {
120
+ const customs = (this.validation.custom || [])
121
+ .filter(c => c.rule === 'regex' && c.pattern);
122
+ // Skip the first rule (already validated in failsPattern)
123
+ const [, ...additionalRules] = customs;
124
+ for (const rule of additionalRules) {
125
+ let regex;
126
+ try {
127
+ regex = new RegExp(rule.pattern);
128
+ }
129
+ catch (e) {
130
+ console.warn('Invalid regex pattern:', rule.pattern, e);
131
+ continue;
132
+ }
133
+ if (!regex.test(value)) {
134
+ return true;
135
+ }
136
+ }
137
+ return false;
138
+ }
83
139
  connectedCallback() {
84
140
  var _a;
85
141
  this.validationPattern = this.setPattern();
@@ -142,52 +198,26 @@ export class TelInput {
142
198
  this.emitValueHandler(true);
143
199
  }
144
200
  isValidValue() {
145
- if (!this.inputReference) {
201
+ var _a, _b;
202
+ if (!this.inputReference)
146
203
  return false;
147
- }
148
- this.inputReference.setCustomValidity('');
149
- this.lastCustomErrorKey = undefined;
150
- this.lastCustomErrorMessage = undefined;
151
- if (this.validation.mandatory && (!this.phoneValue || this.phoneValue.trim() === '')) {
204
+ this.resetValidationState();
205
+ const value = (_b = (_a = this.phoneValue) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
206
+ const isEmpty = value === '';
207
+ if (this.isMissingValue(value))
152
208
  return false;
153
- }
154
- if (!this.phoneValue || this.phoneValue.trim() === '') {
155
- return !this.validation.mandatory;
156
- }
157
- if (this.validation.minLength && this.phoneValue.length < this.validation.minLength) {
209
+ if (isEmpty)
210
+ return true;
211
+ if (this.isFixedLength(value))
158
212
  return false;
159
- }
160
- if (this.validation.maxLength && this.phoneValue.length > this.validation.maxLength) {
213
+ if (this.isTooShort(value))
214
+ return false;
215
+ if (this.isTooLong(value))
216
+ return false;
217
+ if (this.failsPattern(value))
218
+ return false;
219
+ if (this.failsCustomRules(value))
161
220
  return false;
162
- }
163
- if (this.validationPattern) {
164
- const patternRegex = new RegExp(this.validationPattern);
165
- if (!patternRegex.test(this.phoneValue)) {
166
- return false;
167
- }
168
- }
169
- if (this.enableCustomRegexValidation) {
170
- const customs = (this.validation.custom || []).filter(c => c.rule === 'regex' && c.pattern);
171
- if (customs.length > 1) {
172
- // First regex is used as <input> pattern; validate only the remaining rules here
173
- const additionalRules = customs.slice(1);
174
- for (const rule of additionalRules) {
175
- let regex;
176
- try {
177
- regex = new RegExp(rule.pattern);
178
- }
179
- catch (_a) {
180
- continue;
181
- }
182
- if (!regex.test(this.phoneValue)) {
183
- this.lastCustomErrorKey = rule.errorKey;
184
- this.lastCustomErrorMessage = rule.errorMessage;
185
- this.inputReference.setCustomValidity('customError');
186
- return false;
187
- }
188
- }
189
- }
190
- }
191
221
  return true;
192
222
  }
193
223
  setPattern() {
@@ -229,6 +259,27 @@ export class TelInput {
229
259
  return translated ? translated : (this.lastCustomErrorMessage || '');
230
260
  }
231
261
  }
262
+ applyCustomError() {
263
+ const customs = (this.validation.custom || [])
264
+ .filter(c => c.rule === 'regex' && c.pattern);
265
+ const [, ...additionalRules] = customs;
266
+ for (const rule of additionalRules) {
267
+ let regex;
268
+ try {
269
+ regex = new RegExp(rule.pattern);
270
+ }
271
+ catch (e) {
272
+ console.warn('[applyCustomError] invalid regex pattern:', rule.pattern, e);
273
+ continue;
274
+ }
275
+ if (!regex.test(this.phoneValue)) {
276
+ this.lastCustomErrorKey = rule.errorKey;
277
+ this.lastCustomErrorMessage = rule.errorMessage;
278
+ this.inputReference.setCustomValidity('customError');
279
+ return;
280
+ }
281
+ }
282
+ }
232
283
  renderTooltip() {
233
284
  if (this.showTooltip) {
234
285
  return (h("div", { class: `tel__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
@@ -241,8 +292,8 @@ export class TelInput {
241
292
  if (this.touched) {
242
293
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
243
294
  }
244
- return h("div", { key: 'e33193abf4094e4dac87b9cb7d95aaaf4bd8827c', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '3978e74f9decf4c6d632268e73507878d3aca0da', class: 'tel__wrapper--flex-label' }, h("label", { key: '1b7711f58ab7fc7e48ea6fa889334d64eeb2bfb4', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'a768af0e4a2c07fcf4b996814650493057120697', class: 'tel__wrapper--relative' }, this.tooltip &&
245
- h("img", { key: 'b7f302055d8a4739baa8dece656780fa2183665a', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'd095e9e0666096278466d134e06f2985611f9f4d', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: 'd336c7ee95ad77d513a3d485786d8774f11f91fc', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '5f403eb589e0ae8ee2284d2bd30a60850a33fb20', 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: 'b4f7dca6a67471828af759437927c57ca5a89c99', class: 'tel__error-message' }, this.errorMessage));
295
+ return h("div", { key: '82da44bb2bacec9efb3631e377978d678e766919', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '4ca8d6dde2d3f8e15e2d26d593297519e0c94053', class: 'tel__wrapper--flex-label' }, h("label", { key: '3b0e2736fd47537b2ecd80cf49a146992d59474e', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '1577aafc7b68128e91cdfe9ddc563bbad9d7b901', class: 'tel__wrapper--relative' }, this.tooltip &&
296
+ h("img", { key: 'cb6576e1248fc52f937c685d59d994a1d098d7cc', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'a1e9f3c68691fbb61947cd41c0ffddcd124b4bbb', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '9aa33a487f019ee7393e29a0ce0d1836a23f5e09', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '21d69c041b9a5f5f6fb1e6d7b392945cafe99e87', 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: '76febe89ad7ee581eb5fc79658d81123da08ccdd', class: 'tel__error-message' }, this.errorMessage));
246
297
  }
247
298
  static get is() { return "tel-input"; }
248
299
  static get encapsulation() { return "shadow"; }
package/dist/esm/checkbox-group-input_14.entry.js CHANGED
@@ -14442,6 +14442,7 @@ const TelInput = class {
14442
14442
  }
14443
14443
  this.debounceTime = setTimeout(() => {
14444
14444
  this.isValid = this.isValidValue();
14445
+ this.applyCustomError();
14445
14446
  this.errorMessage = this.setErrorMessage();
14446
14447
  this.emitValueHandler(true);
14447
14448
  }, 500);
@@ -14449,6 +14450,7 @@ const TelInput = class {
14449
14450
  this.handleBlur = () => {
14450
14451
  this.touched = true;
14451
14452
  this.isValid = this.isValidValue();
14453
+ this.applyCustomError();
14452
14454
  this.errorMessage = this.setErrorMessage();
14453
14455
  };
14454
14456
  this.name = undefined;
@@ -14506,6 +14508,60 @@ const TelInput = class {
14506
14508
  this.showTooltip = false;
14507
14509
  }
14508
14510
  }
14511
+ resetValidationState() {
14512
+ this.lastCustomErrorKey = undefined;
14513
+ this.lastCustomErrorMessage = undefined;
14514
+ this.inputReference.setCustomValidity('');
14515
+ }
14516
+ isMissingValue(value) {
14517
+ return this.validation.mandatory && value === '';
14518
+ }
14519
+ isFixedLength(value) {
14520
+ const min = this.validation.minLength;
14521
+ const max = this.validation.maxLength;
14522
+ return !!(min && max && min === max && value.length !== min);
14523
+ }
14524
+ isTooShort(value) {
14525
+ const min = this.validation.minLength;
14526
+ return !!(min && value.length < min);
14527
+ }
14528
+ isTooLong(value) {
14529
+ const max = this.validation.maxLength;
14530
+ return !!(max && value.length > max);
14531
+ }
14532
+ failsPattern(value) {
14533
+ if (!this.validationPattern)
14534
+ return false;
14535
+ let patternRegex;
14536
+ try {
14537
+ patternRegex = new RegExp(this.validationPattern);
14538
+ }
14539
+ catch (e) {
14540
+ console.warn('Invalid validationPattern:', this.validationPattern, e);
14541
+ return false;
14542
+ }
14543
+ return !patternRegex.test(value);
14544
+ }
14545
+ failsCustomRules(value) {
14546
+ const customs = (this.validation.custom || [])
14547
+ .filter(c => c.rule === 'regex' && c.pattern);
14548
+ // Skip the first rule (already validated in failsPattern)
14549
+ const [, ...additionalRules] = customs;
14550
+ for (const rule of additionalRules) {
14551
+ let regex;
14552
+ try {
14553
+ regex = new RegExp(rule.pattern);
14554
+ }
14555
+ catch (e) {
14556
+ console.warn('Invalid regex pattern:', rule.pattern, e);
14557
+ continue;
14558
+ }
14559
+ if (!regex.test(value)) {
14560
+ return true;
14561
+ }
14562
+ }
14563
+ return false;
14564
+ }
14509
14565
  connectedCallback() {
14510
14566
  var _a;
14511
14567
  this.validationPattern = this.setPattern();
@@ -14568,52 +14624,26 @@ const TelInput = class {
14568
14624
  this.emitValueHandler(true);
14569
14625
  }
14570
14626
  isValidValue() {
14571
- if (!this.inputReference) {
14627
+ var _a, _b;
14628
+ if (!this.inputReference)
14572
14629
  return false;
14573
- }
14574
- this.inputReference.setCustomValidity('');
14575
- this.lastCustomErrorKey = undefined;
14576
- this.lastCustomErrorMessage = undefined;
14577
- if (this.validation.mandatory && (!this.phoneValue || this.phoneValue.trim() === '')) {
14630
+ this.resetValidationState();
14631
+ const value = (_b = (_a = this.phoneValue) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
14632
+ const isEmpty = value === '';
14633
+ if (this.isMissingValue(value))
14578
14634
  return false;
14579
- }
14580
- if (!this.phoneValue || this.phoneValue.trim() === '') {
14581
- return !this.validation.mandatory;
14582
- }
14583
- if (this.validation.minLength && this.phoneValue.length < this.validation.minLength) {
14635
+ if (isEmpty)
14636
+ return true;
14637
+ if (this.isFixedLength(value))
14584
14638
  return false;
14585
- }
14586
- if (this.validation.maxLength && this.phoneValue.length > this.validation.maxLength) {
14639
+ if (this.isTooShort(value))
14640
+ return false;
14641
+ if (this.isTooLong(value))
14642
+ return false;
14643
+ if (this.failsPattern(value))
14644
+ return false;
14645
+ if (this.failsCustomRules(value))
14587
14646
  return false;
14588
- }
14589
- if (this.validationPattern) {
14590
- const patternRegex = new RegExp(this.validationPattern);
14591
- if (!patternRegex.test(this.phoneValue)) {
14592
- return false;
14593
- }
14594
- }
14595
- if (this.enableCustomRegexValidation) {
14596
- const customs = (this.validation.custom || []).filter(c => c.rule === 'regex' && c.pattern);
14597
- if (customs.length > 1) {
14598
- // First regex is used as <input> pattern; validate only the remaining rules here
14599
- const additionalRules = customs.slice(1);
14600
- for (const rule of additionalRules) {
14601
- let regex;
14602
- try {
14603
- regex = new RegExp(rule.pattern);
14604
- }
14605
- catch (_a) {
14606
- continue;
14607
- }
14608
- if (!regex.test(this.phoneValue)) {
14609
- this.lastCustomErrorKey = rule.errorKey;
14610
- this.lastCustomErrorMessage = rule.errorMessage;
14611
- this.inputReference.setCustomValidity('customError');
14612
- return false;
14613
- }
14614
- }
14615
- }
14616
- }
14617
14647
  return true;
14618
14648
  }
14619
14649
  setPattern() {
@@ -14655,6 +14685,27 @@ const TelInput = class {
14655
14685
  return translated ? translated : (this.lastCustomErrorMessage || '');
14656
14686
  }
14657
14687
  }
14688
+ applyCustomError() {
14689
+ const customs = (this.validation.custom || [])
14690
+ .filter(c => c.rule === 'regex' && c.pattern);
14691
+ const [, ...additionalRules] = customs;
14692
+ for (const rule of additionalRules) {
14693
+ let regex;
14694
+ try {
14695
+ regex = new RegExp(rule.pattern);
14696
+ }
14697
+ catch (e) {
14698
+ console.warn('[applyCustomError] invalid regex pattern:', rule.pattern, e);
14699
+ continue;
14700
+ }
14701
+ if (!regex.test(this.phoneValue)) {
14702
+ this.lastCustomErrorKey = rule.errorKey;
14703
+ this.lastCustomErrorMessage = rule.errorMessage;
14704
+ this.inputReference.setCustomValidity('customError');
14705
+ return;
14706
+ }
14707
+ }
14708
+ }
14658
14709
  renderTooltip() {
14659
14710
  if (this.showTooltip) {
14660
14711
  return (h("div", { class: `tel__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
@@ -14667,8 +14718,8 @@ const TelInput = class {
14667
14718
  if (this.touched) {
14668
14719
  invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
14669
14720
  }
14670
- return h("div", { key: 'e33193abf4094e4dac87b9cb7d95aaaf4bd8827c', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '3978e74f9decf4c6d632268e73507878d3aca0da', class: 'tel__wrapper--flex-label' }, h("label", { key: '1b7711f58ab7fc7e48ea6fa889334d64eeb2bfb4', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'a768af0e4a2c07fcf4b996814650493057120697', class: 'tel__wrapper--relative' }, this.tooltip &&
14671
- h("img", { key: 'b7f302055d8a4739baa8dece656780fa2183665a', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'd095e9e0666096278466d134e06f2985611f9f4d', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: 'd336c7ee95ad77d513a3d485786d8774f11f91fc', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '5f403eb589e0ae8ee2284d2bd30a60850a33fb20', 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: 'b4f7dca6a67471828af759437927c57ca5a89c99', class: 'tel__error-message' }, this.errorMessage));
14721
+ return h("div", { key: '82da44bb2bacec9efb3631e377978d678e766919', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '4ca8d6dde2d3f8e15e2d26d593297519e0c94053', class: 'tel__wrapper--flex-label' }, h("label", { key: '3b0e2736fd47537b2ecd80cf49a146992d59474e', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '1577aafc7b68128e91cdfe9ddc563bbad9d7b901', class: 'tel__wrapper--relative' }, this.tooltip &&
14722
+ h("img", { key: 'cb6576e1248fc52f937c685d59d994a1d098d7cc', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'a1e9f3c68691fbb61947cd41c0ffddcd124b4bbb', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '9aa33a487f019ee7393e29a0ce0d1836a23f5e09', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.disablePhonePrefix, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '21d69c041b9a5f5f6fb1e6d7b392945cafe99e87', 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: '76febe89ad7ee581eb5fc79658d81123da08ccdd', class: 'tel__error-message' }, this.errorMessage));
14672
14723
  }
14673
14724
  static get watchers() { return {
14674
14725
  "clientStyling": ["handleClientStylingChange"],