diff --git a/.changeset/five-pots-clean.md b/.changeset/five-pots-clean.md
new file mode 100644
index 000000000..dcd996b85
--- /dev/null
+++ b/.changeset/five-pots-clean.md
@@ -0,0 +1,6 @@
+---
+'@lion/input-tel': patch
+'@lion/validate-messages': patch
+---
+
+Add replace Min/MaxLength validator messages with Pattern validator message in PhoneNumber validator, since wrong info (param) was shown. And removed default Validator message for PhoneNumber validator.
diff --git a/docs/components/input-tel-dropdown/examples.md b/docs/components/input-tel-dropdown/examples.md
index 15b7d2273..04c013249 100644
--- a/docs/components/input-tel-dropdown/examples.md
+++ b/docs/components/input-tel-dropdown/examples.md
@@ -4,6 +4,7 @@
import { html } from '@mdjs/mdjs-preview';
import '@lion/select-rich/define';
import './src/intl-input-tel-dropdown.js';
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
```
## Input Tel International
@@ -16,13 +17,16 @@ Inspired by:
- [react-phone-input-2](https://github.com/bl00mber/react-phone-input-2)
```js preview-story
-export const IntlInputTelDropdown = () => html`
-
-`;
+export const IntlInputTelDropdown = () => {
+ loadDefaultFeedbackMessages();
+ return html`
+
+ `;
+};
```
diff --git a/docs/components/input-tel-dropdown/overview.md b/docs/components/input-tel-dropdown/overview.md
index bc04062f3..79e89adcc 100644
--- a/docs/components/input-tel-dropdown/overview.md
+++ b/docs/components/input-tel-dropdown/overview.md
@@ -5,10 +5,12 @@ Extension of Input Tel that prefixes a dropdown list that shows all possible reg
```js script
import { html } from '@mdjs/mdjs-preview';
import '@lion/input-tel-dropdown/define';
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
```
```js preview-story
export const main = () => {
+ loadDefaultFeedbackMessages();
return html`
`;
diff --git a/docs/components/input-tel-dropdown/use-cases.md b/docs/components/input-tel-dropdown/use-cases.md
index 37784f6b4..d8b9edf4e 100644
--- a/docs/components/input-tel-dropdown/use-cases.md
+++ b/docs/components/input-tel-dropdown/use-cases.md
@@ -7,6 +7,9 @@ import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel-dropdown/define';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
+
+// TODO: make each example load/use the dependencies by default
+// loadDefaultFeedbackMessages();
```
## Input Tel Dropdown
@@ -15,17 +18,20 @@ When `.allowedRegions` is not configured, all regions/countries will be availabl
list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.
```js preview-story
-export const InputTelDropdown = () => html`
-
-
-`;
+export const InputTelDropdown = () => {
+ loadDefaultFeedbackMessages();
+ return html`
+
+
+ `;
+};
```
## Allowed regions
@@ -34,19 +40,22 @@ When `.allowedRegions` is configured, only those regions/countries will be avail
list.
```js preview-story
-export const allowedRegions = () => html`
-
-
-`;
+export const allowedRegions = () => {
+ loadDefaultFeedbackMessages();
+ return html`
+
+
+ `;
+};
```
## Preferred regions
@@ -54,18 +63,21 @@ export const allowedRegions = () => html`
When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
```js preview-story
-export const preferredRegionCodes = () => html`
-
-
-`;
+export const preferredRegionCodes = () => {
+ loadDefaultFeedbackMessages();
+ return html`
+
+
+ `
+};
```
diff --git a/docs/components/input-tel/overview.md b/docs/components/input-tel/overview.md
index 66e587f85..c62780c1f 100644
--- a/docs/components/input-tel/overview.md
+++ b/docs/components/input-tel/overview.md
@@ -7,11 +7,13 @@ import { html } from '@mdjs/mdjs-preview';
import { ref, createRef } from '@lion/core';
import { PhoneUtilManager } from '@lion/input-tel';
import '@lion/input-tel/define';
+import { loadDefaultFeedbackMessages } from '@lion/validate-messages';
import '../../../docs/fundamentals/systems/form/assets/h-output.js';
```
```js preview-story
export const main = () => {
+ loadDefaultFeedbackMessages();
return html`
html``;
+export const regionCodesTable = () => {
+ loadDefaultFeedbackMessages();
+ return html``;
+};
```
### Active region
@@ -51,6 +57,8 @@ The following heuristic will be applied:
```js preview-story
export const heuristic = () => {
+ loadDefaultFeedbackMessages();
+
const initialAllowedRegions = ['CN', 'ES'];
const [inputTelRef, outputRef, selectRef] = [createRef(), createRef(), createRef()];
@@ -126,19 +134,22 @@ values that are present in this list.
> be shown in the dropdown list.
```js preview-story
-export const allowedRegions = () => html`
-
-
-`;
+export const allowedRegions = () => {
+ loadDefaultFeedbackMessages();
+ return html`
+
+
+ `;
+};
```
### Restrict to one region
@@ -147,19 +158,22 @@ When one allowed region is configured, validation and formatting will be restric
region (that means that changes of the region via viewValue won't have effect).
```js preview-story
-export const oneAllowedRegion = () => html`
-
-
-`;
+export const oneAllowedRegion = () => {
+ loadDefaultFeedbackMessages();
+ return html`
+
+
+ `;
+};
```
## Format strategy
@@ -183,6 +197,7 @@ Also see:
```js preview-story
export const formatStrategy = () => {
+ loadDefaultFeedbackMessages();
const inputTel = createRef();
return html`